/*
 * KSRF global UI color contract.
 *
 * This file loads after every legacy skin. New UI must use the semantic
 * --ui-* variables or the .ui-* primitives below. Do not introduce a new
 * teal (or any other brand color) directly inside a page stylesheet.
 */

:root {
  --ui-primary: var(--ksrf-theme-primary, #0f8f86);
  --ui-primary-hover: var(--ksrf-theme-primary-hover, color-mix(in srgb, var(--ui-primary) 84%, #000000));
  --ui-accent: var(--ksrf-theme-accent, #4cb9b1);
  --ui-review-star: var(--ksrf-theme-review-star, #d6a329);
  --ui-bg: var(--ksrf-theme-background, #eef7f7);
  --ui-surface: var(--ksrf-theme-surface, #ffffff);
  --ui-surface-soft: var(--ksrf-theme-surface-soft, color-mix(in srgb, var(--ui-surface) 84%, var(--ui-bg)));
  --ui-field: var(--ksrf-theme-field, color-mix(in srgb, var(--ui-surface) 78%, var(--ui-bg)));
  --ui-text: var(--ksrf-theme-text, #162027);
  --ui-text-muted: var(--ksrf-theme-text-muted, color-mix(in srgb, var(--ui-text) 68%, var(--ui-surface)));
  --ui-border: var(--ksrf-theme-border, color-mix(in srgb, var(--ui-text) 18%, var(--ui-surface)));
  --ui-focus: var(--ksrf-theme-focus, var(--ui-primary-hover));
  --ui-on-primary: var(--ksrf-theme-on-primary, #000000);
  --ui-on-danger: var(--ksrf-theme-on-danger, #ffffff);
  --ui-on-overlay: var(--ksrf-theme-on-overlay, #ffffff);
  --ui-success: var(--ksrf-theme-success, #0d756e);
  --ui-warning: var(--ksrf-theme-warning, #52656c);
  --ui-danger: var(--ksrf-theme-danger, #c34f59);
  --ui-info: var(--ksrf-theme-info, #168f87);
  --ui-success-strong: color-mix(in srgb, var(--ui-success) 80%, var(--ui-text));
  --ui-warning-strong: color-mix(in srgb, var(--ui-warning) 80%, var(--ui-text));
  --ui-danger-strong: color-mix(in srgb, var(--ui-danger) 72%, var(--ui-text));
  --ui-info-strong: color-mix(in srgb, var(--ui-info) 76%, var(--ui-text));
  --ui-overlay-solid: var(--ksrf-theme-overlay, color-mix(in srgb, var(--ui-text) 92%, #000000));
  --ui-overlay: color-mix(in srgb, var(--ui-overlay-solid) 72%, transparent);
  --ui-primary-soft: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface));
  --ui-primary-border: color-mix(in srgb, var(--ui-primary) 28%, var(--ui-border));
  --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-surface));
  --ui-warning-soft: color-mix(in srgb, var(--ui-warning) 12%, var(--ui-surface));
  --ui-success-soft: color-mix(in srgb, var(--ui-success) 10%, var(--ui-surface));
  --ui-info-soft: color-mix(in srgb, var(--ui-info) 10%, var(--ui-surface));
  --ui-shadow: 0 14px 34px color-mix(in srgb, var(--ui-text) 9%, transparent);
  --ui-shadow-modal: 0 26px 64px color-mix(in srgb, var(--ui-overlay-solid) 28%, transparent);
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-product-preview-size: 48px;
  --ui-product-preview-radius: 9px;

  /* Bridge the original global variables to the semantic contract. */
  --bg: var(--ui-bg);
  --panel: var(--ui-surface);
  --ink: var(--ui-text);
  --muted: var(--ui-text-muted);
  --line: var(--ui-border);
  --brand: var(--ui-primary);
  --brand-dark: var(--ui-primary-hover);
  --red: var(--ui-danger);
}

/* Global flash feedback: keep every success/error modal on the active UI theme. */
.game-modal-backdrop[data-flash-modal] {
  background: var(--ui-overlay) !important;
}

.game-modal-backdrop[data-flash-modal] .game-modal {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

.game-modal-backdrop[data-flash-modal] .game-modal::before {
  background: var(--ui-primary) !important;
}

.game-modal-backdrop[data-flash-modal] .game-modal h2 {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

.game-modal-backdrop[data-flash-modal] .game-modal p:not(.game-modal-eyebrow) {
  color: var(--ui-text-muted) !important;
}

.game-modal-backdrop[data-flash-modal] .game-modal-eyebrow {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover) !important;
}

.game-modal-backdrop[data-flash-modal] .game-modal-rank {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
  text-shadow: none !important;
}

.game-modal-backdrop[data-flash-modal][data-flash-success="1"] .game-modal-rank {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

.game-modal-backdrop[data-flash-modal][data-flash-success="1"] .game-modal-rank::after {
  border-color: color-mix(in srgb, var(--ui-success) 36%, transparent) !important;
}

.game-modal-backdrop[data-flash-modal] [data-flash-close] {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ui-primary) 24%, transparent) !important;
}

.game-modal-backdrop[data-flash-modal] [data-flash-close]:hover,
.game-modal-backdrop[data-flash-modal] [data-flash-close]:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 28%, transparent);
  outline-offset: 2px;
}

/* Global searchable dropdown / creatable combobox. */
.ui-combobox {
  position: relative;
}

.ui-combobox > input[role="combobox"] {
  background:
    linear-gradient(45deg, transparent 50%, var(--ui-text-muted) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ui-text-muted) 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
    var(--ui-field);
  border-color: var(--ui-border);
  color: var(--ui-text);
  padding-right: 38px;
}

.ui-combobox > input[role="combobox"]:focus,
.ui-combobox > input[role="combobox"][aria-expanded="true"] {
  border-color: var(--ui-focus);
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, transparent);
}

.ui-combobox-menu {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  padding: 8px !important;
}

.ui-combobox-option {
  background: var(--ui-surface) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

.ui-combobox-option strong {
  color: var(--ui-text) !important;
}

.ui-combobox-option small,
.ui-combobox-menu .custom-order-combo-empty {
  color: var(--ui-text-muted) !important;
}

.ui-combobox-option:hover,
.ui-combobox-option:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: none;
}

.ui-combobox-add {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

.ui-combobox-add strong {
  color: var(--ui-primary-hover) !important;
}

/* Cashier database hub: compact, accessible, and fully theme-managed. */
body.invoice-page:has(.cashier-database-page) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page:has(.cashier-database-page) > .shell {
  max-width: none;
  padding: 0;
}

.cashier-database-page {
  background: var(--ui-bg);
  color: var(--ui-text);
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 100dvh;
  padding: clamp(18px, 3vw, 38px) clamp(16px, 4vw, 56px) calc(112px + env(safe-area-inset-bottom));
  width: 100%;
}

.cashier-database-page .invoice-builder-head {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  min-height: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.cashier-database-page .cashier-database-heading {
  min-width: 0;
}

.cashier-database-page .invoice-builder-head .auth-brand {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 10px;
  padding: 6px 10px;
  text-transform: uppercase;
}

.cashier-database-page .invoice-builder-head h1 {
  color: var(--ui-text);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.cashier-database-page .invoice-builder-head p:not(.auth-brand) {
  color: var(--ui-text-muted);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.55;
  margin: 10px 0 0;
}

.cashier-database-page .cashier-head-actions {
  align-items: center;
  display: flex;
  margin: 0;
}

.cashier-database-page .cashier-menu-grid {
  align-items: stretch;
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.cashier-database-page .cashier-menu-grid:empty::before {
  background: var(--ui-surface);
  border: 1px dashed var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text-muted);
  content: "Belum ada menu database.";
  display: grid;
  grid-column: 1 / -1;
  min-height: 120px;
  padding: 28px;
  place-content: center;
  text-align: center;
}

.cashier-database-page .cashier-menu-grid[aria-busy="true"] .dashboard-card,
body.ksrf-page-transition-out .cashier-database-page .dashboard-card {
  opacity: 0.58;
  pointer-events: none;
}

.cashier-database-page .dashboard-card {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  display: grid;
  gap: 14px;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  min-height: 180px;
  padding: clamp(18px, 2vw, 24px);
  position: relative;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cashier-database-page .dashboard-card:hover {
  border-color: var(--ui-primary-border);
  box-shadow: var(--ui-shadow-modal);
  transform: translateY(-3px);
}

.cashier-database-page .dashboard-card:focus-visible {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 24%, transparent), var(--ui-shadow);
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}

.cashier-database-page .dashboard-card:active {
  box-shadow: var(--ui-shadow);
  transform: translateY(0);
}

.cashier-database-page .dashboard-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.cashier-database-page .dashboard-icon {
  align-items: center;
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  border-radius: 50%;
  color: var(--ui-on-primary);
  display: inline-flex;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.cashier-database-page .dashboard-icon svg {
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 24px;
}

.cashier-database-page .dashboard-card-copy {
  min-width: 0;
}

.cashier-database-page .dashboard-status {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 9px;
  text-transform: uppercase;
}

.cashier-database-page .dashboard-card h3 {
  color: var(--ui-text);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: 0.035em;
  line-height: 1.2;
  margin: 10px 0 0;
  text-transform: uppercase;
}

.cashier-database-page .dashboard-card p {
  color: var(--ui-text-muted);
  display: -webkit-box;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 7px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cashier-database-page .dashboard-arrow {
  align-items: center;
  color: var(--ui-primary);
  display: inline-flex;
  font-size: 1.35rem;
  justify-content: center;
  min-height: 44px;
  min-width: 28px;
  transition: color 160ms ease, transform 160ms ease;
}

.cashier-database-page .dashboard-card:hover .dashboard-arrow,
.cashier-database-page .dashboard-card:focus-visible .dashboard-arrow {
  color: var(--ui-primary-hover);
  transform: translateX(3px);
}

body.invoice-page:has(.cashier-database-page) > .home-bottom-nav {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page:has(.cashier-database-page) > .home-bottom-nav a,
body.invoice-page:has(.cashier-database-page) > .home-bottom-nav button {
  color: var(--ui-text-muted) !important;
  min-height: 44px;
}

body.invoice-page:has(.cashier-database-page) > .home-bottom-nav a:hover,
body.invoice-page:has(.cashier-database-page) > .home-bottom-nav a:focus-visible,
body.invoice-page:has(.cashier-database-page) > .home-bottom-nav button:hover,
body.invoice-page:has(.cashier-database-page) > .home-bottom-nav button:focus-visible,
body.invoice-page:has(.cashier-database-page) > .home-bottom-nav .active {
  color: var(--ui-primary) !important;
}

@media (max-width: 980px) {
  .cashier-database-page .cashier-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cashier-database-page {
    gap: 14px;
    padding: 14px 12px calc(104px + env(safe-area-inset-bottom));
  }

  .cashier-database-page .invoice-builder-head {
    gap: 14px;
    padding: 16px;
  }

  .cashier-database-page .cashier-menu-grid {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .cashier-database-page .dashboard-card {
    gap: 12px;
    grid-template-columns: 46px minmax(0, 1fr) 28px;
    min-height: 0;
    padding: 16px 14px;
  }

  .cashier-database-page .dashboard-icon {
    height: 46px;
    width: 46px;
  }

  .cashier-database-page .dashboard-icon svg {
    height: 21px;
    width: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cashier-database-page .dashboard-card,
  .cashier-database-page .dashboard-arrow {
    transition: none;
  }
}

/* Global product identity: compact, theme-aware, and always square. */
.ui-product-preview {
  align-self: center;
  aspect-ratio: 1;
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-product-preview-radius);
  display: inline-flex;
  flex: 0 0 var(--ui-product-preview-size);
  height: var(--ui-product-preview-size);
  justify-content: center;
  overflow: hidden;
  width: var(--ui-product-preview-size);
}

.ui-product-preview img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ui-product-preview-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

:where(
  .custom-order-combo-option,
  .custom-order-product-result,
  .cashier-product-option,
  .stock-product-results [role="option"],
  .purchase-combobox-option,
  .cashier-product-row
) > .ui-product-preview {
  grid-row: 1 / -1;
}

@media (max-width: 520px) {
  :root {
    --ui-product-preview-size: 42px;
  }
}

/* Packing order picker: searchable, multi-select, and theme-aware. */
body.packing-page .packing-order-picker {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 24;
}

body.packing-page .packing-order-picker > strong,
body.packing-page .packing-order-picker > small {
  color: var(--ui-text);
  font-size: 13px;
}

body.packing-page .packing-order-picker > small {
  color: var(--ui-text-muted);
}

body.packing-page .packing-order-trigger {
  align-items: center;
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  display: flex;
  font: inherit;
  font-weight: 800;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 13px;
  text-align: left;
}

body.packing-page .packing-order-trigger:focus-visible,
body.packing-page .packing-order-picker.is-open .packing-order-trigger {
  border-color: var(--ui-focus);
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, transparent);
}

body.packing-page .packing-order-menu {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-modal);
  display: grid;
  gap: 8px;
  left: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 74px;
}

body.packing-page .packing-order-menu[hidden],
body.packing-page .packing-order-option[hidden] {
  display: none;
}

body.packing-page .packing-order-menu input {
  background: var(--ui-field);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

body.packing-page .packing-order-options {
  display: grid;
  max-height: 310px;
  overflow-y: auto;
}

body.packing-page .packing-order-option {
  align-items: center;
  background: var(--ui-surface);
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
  display: grid;
  font: inherit;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) 22px;
  min-height: 64px;
  padding: 8px 6px;
  text-align: left;
}

body.packing-page .packing-order-option:hover,
body.packing-page .packing-order-option.is-selected {
  background: var(--ui-primary-soft);
}

body.packing-page .packing-order-option small {
  color: var(--ui-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.packing-page .packing-order-check {
  color: transparent;
  font-weight: 900;
}

body.packing-page .packing-order-option.is-selected .packing-order-check {
  color: var(--ui-primary);
}

body.packing-page .packing-order-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.packing-page .packing-order-selection > span {
  align-items: center;
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 5px;
  padding: 4px 5px 4px 10px;
}

body.packing-page .packing-order-selection button {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-primary-border);
  border-radius: 50%;
  color: var(--ui-text);
  display: inline-flex;
  height: 22px;
  justify-content: center;
  min-height: 22px;
  padding: 0;
  width: 22px;
}

/* Dashboard attendance operational checklist. */
body.dashboard-page .attendance-checklist-backdrop {
  background: var(--ui-overlay);
}

body.dashboard-page .attendance-checklist-modal {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-modal);
  color: var(--ui-text);
  max-width: 880px;
  width: min(100%, 880px);
}

body.dashboard-page .attendance-checklist-modal .schedule-modal-close {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

body.dashboard-page .attendance-checklist-modal .schedule-modal-close:hover,
body.dashboard-page .attendance-checklist-modal .schedule-modal-close:focus-visible {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 28%, transparent);
  outline-offset: 2px;
}

body.dashboard-page .attendance-checklist-modal .schedule-modal-head > span,
body.dashboard-page .attendance-checklist-modal .schedule-modal-shift,
body.dashboard-page .attendance-checklist-modal .schedule-modal-panel {
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

body.dashboard-page .attendance-checklist-modal .schedule-modal-shift li,
body.dashboard-page .attendance-checklist-modal .attendance-status-grid span,
body.dashboard-page .attendance-checklist-modal .attendance-detail-list article {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

body.dashboard-page .attendance-checklist-modal input,
body.dashboard-page .attendance-checklist-modal select {
  background: var(--ui-field);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

body.dashboard-page .attendance-checklist-modal input:focus-visible,
body.dashboard-page .attendance-checklist-modal select:focus-visible,
body.dashboard-page .attendance-checklist-modal button:focus-visible,
body.dashboard-page .attendance-checklist-modal a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 30%, transparent);
  outline-offset: 2px;
}

body.dashboard-page .attendance-checklist-panel {
  background: var(--ui-surface);
  border-color: var(--ui-primary-border);
  box-shadow: var(--ui-shadow);
}

.attendance-checklist-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.attendance-checklist-head > strong {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover);
  flex: 0 0 auto;
  font-size: 12px;
  padding: 8px 10px;
}

.attendance-checklist-progress {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.attendance-checklist-progress > span {
  background: var(--ui-primary);
  display: block;
  height: 100%;
  transition: width 180ms ease;
  width: var(--attendance-checklist-progress, 0%);
}

.attendance-checklist-group {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  display: grid;
  gap: 12px;
  padding: 14px;
}

.attendance-checklist-group.is-closing {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 32%, var(--ui-border));
}

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

.attendance-checklist-group-head h4 {
  color: var(--ui-text);
  font-size: 15px;
  margin: 0;
}

.attendance-checklist-group-head > span {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 800;
  padding: 5px 8px;
  text-transform: uppercase;
}

.attendance-task-list {
  display: grid;
  gap: 8px;
}

.schedule-modal-panel .attendance-task-form,
.attendance-task-form {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 11px 12px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.schedule-modal-panel .attendance-task-form:hover {
  border-color: var(--ui-primary-border);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-text) 7%, transparent);
}

.schedule-modal-panel .attendance-task-form.is-complete {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 32%, var(--ui-border));
}

.schedule-modal-panel .attendance-task-form > label {
  align-items: flex-start;
  cursor: pointer;
  display: grid;
  gap: 11px;
  grid-template-columns: 24px minmax(0, 1fr);
}

.schedule-modal-panel .attendance-task-form > label > input[type="checkbox"] {
  accent-color: var(--ui-primary);
  height: 22px;
  margin: 1px 0 0;
  min-height: 22px;
  padding: 0;
  width: 22px;
}

.schedule-modal-panel .attendance-task-form > label > input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.schedule-modal-panel .attendance-task-form > label span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.schedule-modal-panel .attendance-task-form > label strong {
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.45;
}

.schedule-modal-panel .attendance-task-form > label small {
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.attendance-condition-task.needs-action {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 38%, var(--ui-border));
}

.attendance-condition-head {
  display: grid;
  gap: 4px;
}

.attendance-condition-head > strong {
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.45;
}

.attendance-condition-head > small,
.attendance-condition-meta {
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.attendance-condition-options {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attendance-condition-option {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  margin: 0;
  padding: 9px 10px;
}

.attendance-condition-option:has(input:checked) {
  background: var(--ui-primary-soft);
  border-color: var(--ui-primary-border);
}

.attendance-condition-option.is-negative:has(input:checked) {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 42%, var(--ui-border));
}

.attendance-condition-option label {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: 22px minmax(0, 1fr);
}

.attendance-condition-option input[type="checkbox"] {
  accent-color: var(--ui-primary);
  height: 20px;
  margin: 0;
  min-height: 20px;
  padding: 0;
  width: 20px;
}

.attendance-condition-option label > span {
  display: grid;
  gap: 2px;
}

.attendance-condition-option label strong {
  color: var(--ui-text);
  font-size: 12px;
}

.attendance-condition-option label small {
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 800;
}

.attendance-condition-resolve {
  background: var(--ui-warning-soft);
}

.attendance-condition-resolve:has(input:checked) {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 38%, var(--ui-border));
}

.attendance-condition-option.is-selected {
  background: var(--ui-primary-soft);
  border-color: var(--ui-primary-border);
}

.attendance-condition-option.is-negative.is-selected {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 42%, var(--ui-border));
}

.attendance-condition-resolve.is-selected {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 38%, var(--ui-border));
}

.attendance-task-form input[type="checkbox"],
.attendance-condition-option input[type="checkbox"] {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.attendance-task-form label::before,
.attendance-condition-option label::before {
  align-items: center;
  background: var(--ui-card);
  border: 2px solid var(--ui-border-strong);
  border-radius: 6px;
  color: var(--ui-primary-strong);
  content: "";
  display: flex;
  font-size: 10px;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.attendance-task-form.is-complete label::before,
.attendance-condition-option.is-selected label::before {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
  content: "OK";
}

.attendance-task-submit:not(.is-secondary),
.attendance-auto-submit {
  display: none;
}

.attendance-task-photo-preview {
  border: 1px dashed var(--ui-border);
  border-radius: var(--ui-radius-sm);
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 8px;
}

.attendance-task-photo-preview img {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
  width: 100%;
}

.attendance-task-photo-preview figcaption {
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 800;
}

.attendance-task-photo::before {
  content: none !important;
  display: none !important;
}

.attendance-condition-option .attendance-task-photo,
.attendance-task-form .attendance-task-photo {
  grid-template-columns: minmax(0, 1fr);
}


.attendance-checkout-lock.is-exempt {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border));
  color: var(--ui-success-strong);
}

.attendance-task-photo {
  color: var(--ui-text-muted);
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  line-height: 1.35;
}

.attendance-task-photo input[type="file"] {
  background: var(--ui-surface);
  border: 1px dashed var(--ui-primary-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  font-size: 11px;
  min-height: 42px;
  padding: 9px;
  width: 100%;
}

.attendance-task-submit {
  align-items: center;
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-on-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 9px 12px;
}

.attendance-task-submit.is-secondary {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text-muted);
}

.attendance-task-submit:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

.attendance-task-submit.is-secondary:hover {
  background: var(--ui-field);
  border-color: var(--ui-primary-border);
  color: var(--ui-text);
}

@media (max-width: 560px) {
  .attendance-condition-options {
    grid-template-columns: 1fr;
  }
}

.attendance-cash-actions {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.attendance-cash-actions > a,
.schedule-modal-panel .attendance-cash-actions button {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-primary-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-primary-hover);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
}

.schedule-modal-panel .attendance-cash-actions button {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
}

.attendance-cash-actions > a:hover {
  background: var(--ui-primary-soft);
}

.schedule-modal-panel .attendance-cash-actions button:hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

.schedule-modal-panel .attendance-cash-actions button:disabled,
body.dashboard-page .attendance-checklist-modal .schedule-modal-panel .schedule-action-button:disabled,
body.dashboard-page .attendance-checklist-modal .schedule-modal-panel .schedule-action-button[disabled] {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  -webkit-text-fill-color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.72;
}

body.dashboard-page .attendance-checklist-modal .schedule-modal-panel .schedule-action-button {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  -webkit-text-fill-color: var(--ui-on-primary) !important;
}

body.dashboard-page .attendance-checklist-modal .schedule-modal-panel .schedule-action-button:hover:not(:disabled) {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

.attendance-checkout-lock {
  background: var(--ui-warning-soft);
  border: 1px solid color-mix(in srgb, var(--ui-warning) 32%, var(--ui-border));
  border-radius: var(--ui-radius-sm);
  color: var(--ui-warning-strong);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  padding: 10px 12px;
}

.attendance-checklist-ranking {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
}

.attendance-checklist-ranking h3 {
  color: var(--ui-text);
  margin: 8px 0 4px;
}

.attendance-checklist-ranking p {
  color: var(--ui-text-muted);
  font-size: 12px;
  margin: 0;
}

.attendance-checklist-ranking ol {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.attendance-checklist-ranking li {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  min-height: 48px;
  padding: 8px 10px;
}

.attendance-checklist-ranking li > b {
  color: var(--ui-primary);
}

.attendance-checklist-ranking li > span {
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
}

.attendance-checklist-ranking li small {
  color: var(--ui-text-muted);
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.attendance-checklist-ranking li em {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 7px;
}

.attendance-checklist-ranking li > strong {
  background: var(--ui-primary);
  border-radius: 999px;
  color: var(--ui-on-primary);
  font-size: 11px;
  padding: 6px 8px;
}

.attendance-checklist-report-link {
  align-items: center;
  color: var(--ui-primary-hover);
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  margin-top: 10px;
  text-decoration: none;
}

.attendance-checklist-report-link:hover {
  color: var(--ui-primary);
  text-decoration: underline;
}

.attendance-checklist-report-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 30%, transparent);
  outline-offset: 3px;
}

/* Owner operational checklist report. */
body.attendance-report-page {
  background: var(--ui-bg);
  color: var(--ui-text);
}

.attendance-report-shell {
  display: grid;
  gap: 20px;
  margin: 0 auto;
  max-width: 1320px;
  padding: 28px 22px 56px;
}

.attendance-report-head {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 22px;
}

.attendance-report-head h1,
.attendance-report-card h2 {
  color: var(--ui-text);
  margin: 0;
}

.attendance-report-head h1 {
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: -0.035em;
}

.attendance-report-head p:not(.attendance-report-kicker) {
  color: var(--ui-text-muted);
  margin: 7px 0 0;
}

.attendance-report-kicker {
  color: var(--ui-primary-hover);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0 0 7px;
  text-transform: uppercase;
}

.attendance-report-period,
.attendance-report-card-head > span,
.attendance-report-status,
.attendance-report-phase {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover);
  font-size: 11px;
  font-weight: 850;
  padding: 7px 10px;
}

.attendance-report-filter {
  align-items: end;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto auto;
  padding: 16px;
}

.attendance-report-filter label {
  display: grid;
  gap: 6px;
}

.attendance-report-filter label > span {
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 850;
}

.attendance-report-filter select {
  appearance: none;
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  font: inherit;
  min-height: 44px;
  padding: 9px 11px;
}

.attendance-report-filter button,
.attendance-report-filter > a {
  align-items: center;
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-radius-sm);
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  justify-content: center;
  min-height: 44px;
  padding: 9px 14px;
  text-decoration: none;
}

.attendance-report-filter button {
  background: var(--ui-primary);
  color: var(--ui-on-primary);
}

.attendance-report-filter > a {
  background: var(--ui-surface);
  color: var(--ui-primary-hover);
}

.attendance-report-filter button:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

.attendance-report-filter > a:hover {
  background: var(--ui-primary-soft);
}

.attendance-report-filter select:focus-visible,
.attendance-report-filter button:focus-visible,
.attendance-report-filter > a:focus-visible,
.attendance-report-session-list summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 30%, transparent);
  outline-offset: 2px;
}

.attendance-report-filter-note {
  background: var(--ui-info-soft);
  border: 1px solid color-mix(in srgb, var(--ui-info) 32%, var(--ui-border));
  border-radius: var(--ui-radius-md);
  color: var(--ui-info-strong);
  font-size: 12px;
  margin: -8px 0 0;
  padding: 11px 13px;
}

.attendance-report-summary {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-report-summary article,
.attendance-report-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

.attendance-report-summary article {
  display: grid;
  gap: 6px;
  padding: 18px;
}

.attendance-report-summary article.has-alert {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border));
}

.attendance-report-summary span,
.attendance-report-summary small {
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 750;
}

.attendance-report-summary strong {
  color: var(--ui-text);
  font-size: 30px;
}

.attendance-report-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.attendance-report-card {
  min-width: 0;
  padding: 18px;
}

.attendance-report-card-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.attendance-report-card h2 {
  font-size: 19px;
}

.attendance-report-bars,
.attendance-report-task-list,
.attendance-report-history,
.attendance-report-session-list {
  display: grid;
  gap: 9px;
}

.attendance-report-bars > article {
  align-items: center;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, 0.6fr) minmax(150px, 1fr) 48px;
  padding: 10px 12px;
}

.attendance-report-bars strong,
.attendance-report-bars small {
  display: block;
}

.attendance-report-bars strong {
  color: var(--ui-text);
  font-size: 12px;
}

.attendance-report-bars small {
  color: var(--ui-text-muted);
  font-size: 10px;
  margin-top: 3px;
}

.attendance-report-bars b {
  color: var(--ui-primary-hover);
  font-size: 12px;
  text-align: right;
}

.attendance-report-meter {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.attendance-report-meter > span {
  background: var(--ui-primary);
  display: block;
  height: 100%;
  width: var(--attendance-report-progress, 0%);
}

.attendance-report-ranking ol {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.attendance-report-ranking li {
  align-items: center;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  display: grid;
  gap: 9px;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  padding: 10px;
}

.attendance-report-ranking li > b {
  color: var(--ui-primary);
}

.attendance-report-ranking li > span {
  min-width: 0;
}

.attendance-report-ranking li > span strong,
.attendance-report-ranking li > span small {
  display: block;
}

.attendance-report-ranking li > span strong {
  color: var(--ui-text);
  font-size: 12px;
}

.attendance-report-ranking li > span small {
  color: var(--ui-text-muted);
  font-size: 10px;
  margin-top: 2px;
}

.attendance-report-ranking li > em {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 7px;
}

.attendance-report-ranking li > strong {
  color: var(--ui-text);
  font-size: 11px;
}

.attendance-report-session-list > article {
  align-items: center;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(190px, 0.8fr) minmax(180px, 0.75fr) minmax(150px, 0.7fr) minmax(170px, 1fr);
  padding: 13px;
}

.attendance-report-session-list > article.is-complete {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border));
}

.attendance-report-session-list > article.is-empty {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border));
}

.attendance-report-session-title,
.attendance-report-session-progress,
.attendance-report-session-list > article > div {
  display: grid;
  gap: 5px;
}

.attendance-report-session-title .attendance-report-status {
  justify-self: start;
  padding: 4px 7px;
}

.attendance-report-session-list strong {
  color: var(--ui-text);
  font-size: 12px;
}

.attendance-report-session-list small,
.attendance-report-session-list > article > div > span {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.attendance-report-session-list details {
  color: var(--ui-text);
  font-size: 11px;
}

.attendance-report-session-list summary {
  color: var(--ui-primary-hover);
  cursor: pointer;
  font-weight: 850;
}

.attendance-report-session-list ul,
.attendance-report-session-list details p {
  color: var(--ui-text-muted);
  margin: 8px 0 0;
  padding-left: 18px;
}

.attendance-report-task-list > article,
.attendance-report-history > article {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  padding: 11px;
}

.attendance-report-task-list > article {
  display: grid;
  gap: 7px;
  grid-template-columns: auto minmax(0, 1fr);
}

.attendance-report-task-list .attendance-report-phase {
  align-self: start;
  grid-row: span 3;
  padding: 4px 7px;
}

.attendance-report-task-list strong {
  color: var(--ui-text);
  font-size: 12px;
}

.attendance-report-task-list small {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.attendance-report-history > article {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr) auto;
}

.attendance-report-history strong,
.attendance-report-history small {
  display: block;
}

.attendance-report-history strong {
  color: var(--ui-text);
  font-size: 12px;
}

.attendance-report-history small,
.attendance-report-history > article > span {
  color: var(--ui-text-muted);
  font-size: 10px;
  margin-top: 2px;
}

.attendance-report-history p {
  color: var(--ui-text);
  font-size: 11px;
  margin: 0;
}

.attendance-report-empty {
  color: var(--ui-text-muted);
  font-size: 12px;
  margin: 0;
  padding: 14px;
  text-align: center;
}

@media (max-width: 980px) {
  .attendance-report-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-report-grid {
    grid-template-columns: 1fr;
  }

  .attendance-report-session-list > article {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.dashboard-page .attendance-checklist-backdrop {
    align-items: stretch;
    padding: 0;
  }

  body.dashboard-page .attendance-checklist-modal {
    border-radius: 0;
    max-height: 100dvh;
    min-height: 100dvh;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    width: 100%;
  }

  .attendance-checklist-head {
    align-items: flex-start;
  }

  .attendance-checklist-head > strong {
    white-space: nowrap;
  }

  .attendance-cash-actions {
    grid-template-columns: 1fr;
  }

  .attendance-checklist-ranking li {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .attendance-checklist-ranking li em {
    display: none;
  }

  .attendance-report-shell {
    gap: 14px;
    padding: 14px 12px calc(34px + env(safe-area-inset-bottom));
  }

  .attendance-report-head {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px;
  }

  .attendance-report-period {
    grid-column: 2;
    justify-self: start;
  }

  .attendance-report-filter {
    grid-template-columns: 1fr;
  }

  .attendance-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-report-summary article,
  .attendance-report-card {
    padding: 14px;
  }

  .attendance-report-bars > article,
  .attendance-report-session-list > article,
  .attendance-report-history > article {
    grid-template-columns: 1fr;
  }

  .attendance-report-bars b {
    text-align: left;
  }

  .attendance-report-ranking li {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .attendance-report-ranking li > em {
    display: none;
  }
}

/* Global back navigation
   Keep every page-level return action visually identical, regardless of the
   page-specific stylesheet that originally supplied its button treatment. */
:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
) {
  align-items: center !important;
  background: var(--ui-surface, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--ui-primary, #0f8f86) 32%, var(--ui-border, #d8e3e2)) !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 22px rgba(15, 61, 64, 0.12) !important;
  color: var(--ui-primary, #0f8f86) !important;
  display: inline-flex !important;
  flex: 0 0 44px !important;
  font-size: 0 !important;
  height: 44px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 44px !important;
  min-width: 44px !important;
  overflow: hidden !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease !important;
  width: 44px !important;
}

:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
) > * {
  display: none !important;
}

:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
)::before {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  display: block;
  height: 10px;
  transform: translateX(2px) rotate(45deg);
  width: 10px;
}

:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
)::after {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 2px;
  margin-left: -10px;
  width: 17px;
}

:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
):hover {
  background: var(--ui-primary, #0f8f86) !important;
  border-color: var(--ui-primary, #0f8f86) !important;
  box-shadow: 0 10px 26px rgba(15, 143, 134, 0.24) !important;
  color: var(--ui-surface, #ffffff) !important;
  transform: translateY(-1px) !important;
}

:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
):focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary, #0f8f86) 22%, transparent), 0 8px 22px rgba(15, 61, 64, 0.12) !important;
  outline: 2px solid var(--ui-primary, #0f8f86) !important;
  outline-offset: 3px !important;
}

@media (max-width: 640px) {
  :where(
    .ksrf-back-button,
    .back-link,
    .account-back-link,
    .cashier-purchase-back,
    .community-back-link,
    .custom-order-back-to-hub,
    .display-production-back,
    .public-catalog-back,
    .vendor-stock-back
  ) {
    flex-basis: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
  }
}

/* Katalog publik: satu kontrak tema untuk canvas, filter, kartu, status, dan detail produk. */
body.public-catalog-route {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.public-catalog-route .shell {
  max-width: none !important;
  padding: 0 !important;
}

.public-catalog-page {
  background: var(--ui-bg);
  color: var(--ui-text);
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 1240px;
  min-height: 100vh;
  padding: 22px 18px calc(112px + env(safe-area-inset-bottom));
}

.public-catalog-hero,
.public-catalog-detail-head,
.public-catalog-toolbar,
.public-catalog-summary,
.public-catalog-detail {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
}

.public-catalog-hero {
  align-items: end;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  min-height: 180px;
  overflow: hidden;
  padding: 20px;
  position: relative;
}

.public-catalog-hero::before {
  background: linear-gradient(135deg, var(--ui-primary-soft), var(--ui-info-soft));
  content: "";
  inset: 0;
  opacity: .72;
  position: absolute;
}

.public-catalog-hero > * {
  position: relative;
}

.public-catalog-brand,
.public-catalog-back {
  align-items: center;
  color: var(--ui-text);
  display: inline-flex;
  font-weight: 850;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.public-catalog-brand img {
  aspect-ratio: 1;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.public-catalog-brand span,
.public-catalog-back span {
  overflow-wrap: anywhere;
}

.public-catalog-hero-copy {
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}

.public-catalog-hero-copy p,
.public-catalog-card-body small,
.public-catalog-detail-body > small,
.public-catalog-summary span,
.public-catalog-detail-price span,
.public-catalog-variant-head span,
.public-catalog-size-option small,
.public-catalog-card-body p,
.public-catalog-empty p,
.public-catalog-detail-body p {
  color: var(--ui-text-muted);
}

.public-catalog-hero-copy p,
.public-catalog-card-body small,
.public-catalog-detail-body > small {
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.public-catalog-hero-copy h1,
.public-catalog-detail-body h1,
.public-catalog-card-body h2,
.public-catalog-empty strong {
  color: var(--ui-text);
  margin: 0;
}

.public-catalog-hero-copy h1 {
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  line-height: 1.08;
  max-width: 780px;
}

.public-catalog-toolbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 10px;
  position: sticky;
  top: 10px;
  z-index: 50;
}

.public-catalog-search {
  align-items: center;
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  display: grid;
  gap: 8px;
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 48px;
  padding: 0 12px;
}

.public-catalog-search svg,
.public-catalog-icon-button svg,
.public-catalog-filter-head svg,
.public-catalog-order svg,
.public-catalog-back svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

.public-catalog-search input,
.public-catalog-filter-panel select,
.public-catalog-filter-search input,
.public-catalog-size-filter-row input[type="number"] {
  background: transparent;
  border: 0;
  color: var(--ui-text);
  font: inherit;
  min-height: 44px;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.public-catalog-search input::placeholder,
.public-catalog-filter-search input::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}

.public-catalog-search:focus-within,
.public-catalog-filter-panel label:focus-within,
.public-catalog-filter-section:focus-within,
.public-catalog-filter-search:focus-within,
.public-catalog-icon-button:focus-visible,
.public-catalog-submit:focus-visible,
.public-catalog-filter-actions a:focus-visible,
.public-catalog-filter-actions button:focus-visible,
.public-catalog-card a:focus-visible,
.public-catalog-order:focus-visible,
.public-catalog-pagination a:focus-visible,
.public-catalog-back:focus-visible,
.public-catalog-size-option:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: none !important;
}

.public-catalog-icon-button,
.public-catalog-submit,
.public-catalog-filter-head button,
.public-catalog-filter-actions a,
.public-catalog-filter-actions button,
.public-catalog-order,
.public-catalog-pagination a,
.public-catalog-empty a,
.public-catalog-back {
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  min-height: 44px;
}

.public-catalog-icon-button,
.public-catalog-filter-head button,
.public-catalog-pagination a,
.public-catalog-back {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  display: inline-flex;
  justify-content: center;
  padding: 10px;
}

.public-catalog-submit,
.public-catalog-filter-actions button,
.public-catalog-order,
.public-catalog-empty a {
  align-items: center;
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  color: var(--ui-on-primary);
  display: inline-flex;
  font-weight: 850;
  gap: 8px;
  justify-content: center;
  padding: 10px 14px;
  text-decoration: none;
}

.public-catalog-icon-button:hover,
.public-catalog-filter-head button:hover,
.public-catalog-pagination a:hover,
.public-catalog-back:hover {
  background: var(--ui-primary-soft);
  border-color: var(--ui-primary-border);
  color: var(--ui-primary);
}

.public-catalog-submit:hover,
.public-catalog-filter-actions button:hover,
.public-catalog-order:hover,
.public-catalog-empty a:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
  color: var(--ui-on-primary);
}

.public-catalog-filter-backdrop {
  background: color-mix(in srgb, var(--ui-overlay) 82%, transparent);
  inset: 0;
  position: fixed;
  z-index: 120;
}

body.public-catalog-filter-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

.public-catalog-filter-backdrop[hidden],
.public-catalog-filter-panel[hidden] {
  display: none;
}

.public-catalog-filter-panel {
  --public-catalog-filter-safe-bottom: calc(76px + env(safe-area-inset-bottom));
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: var(--ui-shadow-modal);
  color: var(--ui-text);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  left: 50%;
  max-height: calc(100dvh - var(--public-catalog-filter-safe-bottom) - 32px);
  max-width: min(560px, calc(100vw - 28px));
  overflow: hidden;
  padding: 0;
  position: fixed;
  top: calc((100dvh - var(--public-catalog-filter-safe-bottom)) / 2);
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 130;
}

.public-catalog-filter-head,
.public-catalog-filter-actions,
.public-catalog-card-foot,
.public-catalog-variant-head,
.public-catalog-detail-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.public-catalog-filter-panel label {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text-muted);
  display: grid;
  font-size: .82rem;
  font-weight: 800;
  gap: 4px;
  padding: 9px 12px;
}

.public-catalog-filter-head {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  padding: 18px 18px 14px;
  z-index: 2;
}

.public-catalog-filter-actions {
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-border);
  padding: 14px 18px 18px;
  z-index: 2;
}

.public-catalog-filter-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px 18px;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft);
}

.public-catalog-filter-section {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text-muted);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
}

.public-catalog-filter-section > strong {
  color: var(--ui-text-muted);
  font-size: .82rem;
  font-weight: 850;
}

.public-catalog-filter-search {
  align-items: center;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  margin: 0;
  padding: 0 10px !important;
}

.public-catalog-filter-search input {
  min-height: 38px;
  padding: 0;
}

.public-catalog-check-list,
.public-catalog-size-filter-list {
  display: grid;
  gap: 7px;
  max-height: min(190px, 28dvh);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft);
}

.public-catalog-check-option,
.public-catalog-size-filter-row {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  display: grid !important;
  font-size: .86rem !important;
  font-weight: 750 !important;
  gap: 8px !important;
  margin: 0;
  min-height: 42px;
  padding: 8px 10px !important;
}

.public-catalog-check-option:hover,
.public-catalog-size-filter-row:hover {
  background: var(--ui-surface-soft);
  border-color: var(--ui-primary-border);
}

.public-catalog-filter-search:hover,
.public-catalog-filter-panel select:hover,
.public-catalog-size-filter-row input[type="number"]:hover {
  border-color: var(--ui-primary-border) !important;
}

.public-catalog-filter-panel select:disabled,
.public-catalog-size-filter-row input:disabled,
.public-catalog-filter-search input:disabled {
  color: var(--ui-text-muted);
  cursor: not-allowed;
  opacity: .62;
}

.public-catalog-check-option {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.public-catalog-size-filter-row {
  grid-template-columns: auto minmax(42px, .7fr) minmax(74px, 1fr) auto;
}

.public-catalog-check-option input,
.public-catalog-size-filter-row input[type="checkbox"] {
  accent-color: var(--ui-primary);
  height: 18px;
  margin: 0;
  width: 18px;
}

.public-catalog-check-option span,
.public-catalog-size-filter-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.public-catalog-check-option em,
.public-catalog-size-filter-row em,
.public-catalog-filter-count {
  font-style: normal;
  font-weight: 850;
}

.public-catalog-check-option em {
  color: var(--ui-text-muted);
  font-size: .75rem;
}

.public-catalog-size-filter-row input[type="number"] {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  min-height: 34px;
  padding: 6px 8px;
  text-align: center;
}

.public-catalog-check-option[hidden],
.public-catalog-size-filter-row[hidden] {
  display: none !important;
}

.public-catalog-filter-count {
  align-items: center;
  background: var(--ui-primary);
  border-radius: 999px;
  color: var(--ui-on-primary);
  display: inline-flex;
  font-size: .68rem;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
}

.public-catalog-filter-panel select {
  appearance: auto;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  min-height: 42px;
  padding: 8px 10px;
}

.public-catalog-filter-panel select option {
  background: var(--ui-surface);
  color: var(--ui-text);
}

.public-catalog-filter-actions a {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 10px 14px;
  text-decoration: none;
}

.public-catalog-summary {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  padding: 0;
}

.public-catalog-summary > div {
  background: var(--ui-surface-soft);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
}

.public-catalog-summary strong {
  color: var(--ui-text);
  font-size: 1.2rem;
  line-height: 1;
}

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

.public-catalog-card,
.public-catalog-empty {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  min-width: 0;
  overflow: hidden;
}

.public-catalog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.public-catalog-card:hover {
  border-color: var(--ui-primary-border);
  transform: translateY(-1px);
}

.public-catalog-card-media,
.public-catalog-detail-media {
  background: var(--ui-surface-soft);
  display: block;
  overflow: hidden;
  position: relative;
}

.public-catalog-card-media {
  aspect-ratio: 1 / 1;
}

.public-catalog-card-media img,
.public-catalog-detail-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.public-catalog-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}

.public-catalog-card-body h2 {
  font-size: 1rem;
  line-height: 1.25;
}

.public-catalog-card-body h2 a {
  color: var(--ui-text);
  text-decoration: none;
}

.public-catalog-card-body p,
.public-catalog-detail-body p {
  line-height: 1.5;
  margin: 0;
}

.public-catalog-custom-note {
  background: var(--ui-info-soft);
  border: 1px solid color-mix(in srgb, var(--ui-info) 30%, var(--ui-border));
  border-radius: 8px;
  color: var(--ui-info-strong) !important;
  font-size: .82rem;
  font-weight: 850;
  padding: 8px 10px;
}

.public-catalog-custom-note.is-detail {
  justify-self: start;
}

.public-catalog-card-foot strong {
  color: var(--ui-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.public-catalog-card-foot {
  margin-top: auto;
}

.public-catalog-status {
  background: var(--ui-info-soft);
  border: 1px solid color-mix(in srgb, var(--ui-info) 32%, var(--ui-border));
  border-radius: 8px;
  color: var(--ui-info-strong);
  font-size: .76rem;
  font-weight: 850;
  padding: 6px 9px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.public-catalog-status.is-available {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border));
  color: var(--ui-success-strong);
}

.public-catalog-status.is-empty {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border));
  color: var(--ui-warning-strong);
}

.public-catalog-order {
  min-width: 92px;
  white-space: nowrap;
}

.public-catalog-order.is-wide {
  min-height: 50px;
  width: 100%;
}

.public-catalog-empty {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  justify-items: start;
  padding: 22px;
}

.public-catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.public-catalog-pagination a {
  align-items: center;
  min-width: 44px;
  text-decoration: none;
}

.public-catalog-pagination a.is-active {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
}

.public-catalog-detail-page {
  max-width: 1120px;
}

.public-catalog-detail-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 12px;
}

.public-catalog-detail {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
  overflow: hidden;
}

.public-catalog-detail-media {
  aspect-ratio: 1;
  min-height: 100%;
}

.public-catalog-detail-body {
  display: grid;
  gap: 15px;
  padding: 22px;
}

.public-catalog-detail-body h1 {
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  line-height: 1.08;
}

.public-catalog-detail-price,
.public-catalog-variant-panel {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  display: grid;
  gap: 6px;
  padding: 14px;
}

.public-catalog-detail-price strong {
  color: var(--ui-primary);
  font-size: 1.35rem;
}

.public-catalog-variant-list {
  display: grid;
  gap: 8px;
}

.public-catalog-size-option {
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 12px;
  text-decoration: none;
}

.public-catalog-size-option:hover {
  border-color: var(--ui-primary-border);
  color: var(--ui-primary);
}

.public-catalog-size-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.public-catalog-size-option strong,
.public-catalog-size-option small {
  overflow-wrap: anywhere;
}

.public-catalog-size-option em {
  color: var(--ui-success-strong);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.public-catalog-size-option.is-empty {
  background: var(--ui-surface-soft);
  color: var(--ui-text-muted);
  cursor: not-allowed;
  opacity: .72;
  pointer-events: none;
}

.public-catalog-size-option.is-empty em {
  color: var(--ui-warning-strong);
}

@media (max-width: 1060px) {
  .public-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .public-catalog-page {
    padding: 12px 10px calc(104px + env(safe-area-inset-bottom));
  }

  .public-catalog-hero {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    min-height: 168px;
  }

  .public-catalog-hero-copy {
    justify-items: start;
    text-align: left;
  }

  .public-catalog-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    top: 6px;
  }

  .public-catalog-submit {
    grid-column: 1 / -1;
    width: 100%;
  }

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

  .public-catalog-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-catalog-detail-media {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .public-catalog-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-catalog-filter-panel {
    --public-catalog-filter-safe-bottom: calc(86px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--public-catalog-filter-safe-bottom) - 20px);
    max-width: calc(100vw - 20px);
  }

  .public-catalog-filter-head {
    padding: 14px 14px 12px;
  }

  .public-catalog-filter-body {
    padding: 12px 14px;
  }

  .public-catalog-filter-actions {
    padding: 12px 14px 14px;
  }

  .public-catalog-check-list,
  .public-catalog-size-filter-list {
    max-height: min(168px, 24dvh);
  }

  .public-catalog-card-foot,
  .public-catalog-filter-actions,
  .public-catalog-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .public-catalog-order,
  .public-catalog-filter-actions a,
  .public-catalog-filter-actions button,
  .public-catalog-back {
    width: 100%;
  }
}

/* Pesanan Custom / Pickup: compact, task-first, fully theme-bound queue. */
body.invoice-page.custom-orders-route:has(#custom-order-pickup) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"],
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) {
  color: var(--ui-text) !important;
  max-width: 1240px !important;
  padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] > .invoice-builder-head,
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) > .invoice-builder-head {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  min-height: 72px !important;
  padding: 12px 18px !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] .custom-order-page-title,
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) .custom-order-page-title,
body.invoice-page .custom-orders-page #custom-order-pickup .packing-panel-head h2,
body.invoice-page .custom-orders-page #custom-order-pickup .packing-panel-head strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] .custom-order-section-title,
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) .custom-order-section-title,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-card-head strong,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary dd,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-meta dd {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] .custom-order-page-title,
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) .custom-order-page-title {
  font-size: clamp(1rem, 2.1vw, 1.45rem) !important;
  line-height: 1.05 !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] .custom-order-section-title,
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) .custom-order-section-title {
  font-size: clamp(1.05rem, 2.3vw, 1.65rem) !important;
  line-height: 1.05 !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] .custom-order-back-to-hub,
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) .custom-order-back-to-hub {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
  min-height: 44px !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] .custom-order-back-to-hub:hover,
body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) .custom-order-back-to-hub:hover {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  padding: 10px 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .packing-panel-head {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  margin-bottom: 10px !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .packing-panel-head p,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-card-head span,
body.invoice-page .custom-orders-page #custom-order-pickup dt,
body.invoice-page .custom-orders-page #custom-order-pickup small,
body.invoice-page .custom-orders-page #custom-order-pickup .cashier-empty-state p {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-list {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding-bottom: 24px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-card {
  align-self: start !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 4px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  padding: 12px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-card:hover {
  border-color: var(--ui-primary-border) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ui-text) 12%, transparent) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-card-head {
  gap: 10px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-payment-badge.is-status {
  background: var(--ui-info-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-info) 28%, var(--ui-border)) !important;
  color: var(--ui-info-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 10px 0 !important;
  padding: 7px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary > div {
  border-left: 1px solid var(--ui-border) !important;
  min-width: 0 !important;
  padding: 2px 8px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary > div:first-child {
  border-left: 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary dt {
  font-size: .68rem !important;
  font-weight: 750 !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary dd {
  font-size: .8rem !important;
  font-weight: 850 !important;
  margin: 2px 0 0 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary .is-paid dd {
  color: var(--ui-success-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary .is-unpaid dd {
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-handover {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  margin-top: 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-handover > summary {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
  min-height: 44px !important;
  padding: 7px 10px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-handover > summary:hover {
  background: var(--ui-primary-soft) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-handover > summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ui-focus) !important;
  outline: none !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-handover > summary b,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-handover > summary svg {
  color: var(--ui-primary) !important;
  stroke: currentColor !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-handover[open] > summary {
  border-bottom-color: var(--ui-border) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-detail {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  padding: 10px 10px 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-meta {
  gap: 7px 12px !important;
  margin: 0 0 9px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-products {
  border-top-color: var(--ui-border) !important;
  padding: 9px 0 2px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-products p {
  color: var(--ui-text) !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form {
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  gap: 10px !important;
  padding: 10px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form label {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form input,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form select {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  min-height: 44px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form select option {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form input:hover,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form select:hover {
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form input:focus,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-form select:focus,
body.invoice-page .custom-orders-page #custom-order-pickup button:focus-visible,
body.invoice-page .custom-orders-page #custom-order-pickup a:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: none !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup [data-pickup-submit] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  min-height: 44px !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup [data-pickup-submit]:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup [data-pickup-submit]:disabled,
body.invoice-page .custom-orders-page #custom-order-pickup input:disabled,
body.invoice-page .custom-orders-page #custom-order-pickup select:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .62 !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup [data-pickup-submit] i {
  border-color: color-mix(in srgb, var(--ui-on-primary) 42%, transparent) !important;
  border-top-color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .cashier-empty-state {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  grid-column: 1 / -1 !important;
}

body.invoice-page .custom-order-toast {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-order-toast > span {
  background: var(--ui-success-soft) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .custom-order-toast.is-error > span {
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .custom-order-toast strong,
body.invoice-page .custom-order-toast p,
body.invoice-page .custom-order-toast button {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-order-pickup-confirm {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-order-pickup-confirm::backdrop {
  background: var(--ui-overlay) !important;
}

body.invoice-page .custom-order-pickup-confirm-icon {
  background: var(--ui-warning-soft) !important;
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .custom-order-pickup-confirm h2,
body.invoice-page .custom-order-pickup-confirm p {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-order-pickup-confirm p strong {
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .custom-order-pickup-confirm button {
  border-color: var(--ui-border) !important;
}

body.invoice-page .custom-order-pickup-confirm [data-cancel-pickup-confirm] {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-order-pickup-confirm [data-accept-pickup-confirm] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-order-pickup-confirm button:hover,
body.invoice-page .custom-order-pickup-confirm button:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: none !important;
}

@media (max-width: 980px) {
  body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"],
  body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) {
    padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .custom-orders-page[data-active-custom-order-view="pickup"] > .invoice-builder-head,
  body.invoice-page .custom-orders-page:has(#custom-order-pickup:target) > .invoice-builder-head {
    min-height: 58px !important;
    padding: 8px 10px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-pickup {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .custom-orders-page #custom-order-pickup .packing-panel-head {
    border-radius: var(--ui-radius-sm) !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-card {
    padding: 10px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary {
    padding: 6px 4px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary > div {
    padding-inline: 6px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary dt {
    font-size: .62rem !important;
  }

  body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-summary dd {
    font-size: .72rem !important;
  }
}

/* Sistem Jahit: seluruh lapisan visual mengikuti kontrak tema global. */
body.invoice-page:has(.sewing-system-page) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .sewing-system-page,
body.invoice-page .sewing-system-page .cashier-workspace {
  color: var(--ui-text) !important;
}

body.invoice-page .sewing-system-page > .invoice-builder-head,
body.invoice-page .sewing-system-page .cashier-panel,
body.invoice-page .sewing-system-page .sewing-input-section,
body.invoice-page .sewing-system-page .sewing-job-row,
body.invoice-page .sewing-system-page .sewing-select-panel,
body.invoice-page .sewing-system-page .sewing-material-modal-card,
body.invoice-page .sewing-system-page .sewing-order-modal-panel,
body.invoice-page .sewing-system-page .sewing-bon-modal-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .sewing-system-page .sewing-input-section-head,
body.invoice-page .sewing-system-page .sewing-material-summary,
body.invoice-page .sewing-system-page .sewing-metrics > div,
body.invoice-page .sewing-system-page .sewing-receipt-summary > div,
body.invoice-page .sewing-system-page .sewing-proof-preview,
body.invoice-page .sewing-system-page .sewing-status-history li,
body.invoice-page .sewing-system-page .sewing-history-material-list > div,
body.invoice-page .sewing-system-page .packing-empty-state {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .sewing-system-page .sewing-input-section-head {
  background: linear-gradient(90deg, var(--ui-primary-soft), var(--ui-surface)) !important;
}

body.invoice-page .sewing-system-page .sewing-input-section-icon,
body.invoice-page .sewing-system-page .sewing-input-submit,
body.invoice-page .sewing-system-page .sewing-receipt-submit,
body.invoice-page .sewing-system-page .sewing-bon-filter-actions button,
body.invoice-page .sewing-system-page .sewing-payment-submit {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ui-primary) 20%, transparent) !important;
  color: var(--ui-on-primary) !important;
  -webkit-text-fill-color: var(--ui-on-primary) !important;
}

body.invoice-page .sewing-system-page .sewing-input-submit:hover,
body.invoice-page .sewing-system-page .sewing-input-submit:focus-visible,
body.invoice-page .sewing-system-page .sewing-receipt-submit:hover,
body.invoice-page .sewing-system-page .sewing-receipt-submit:focus-visible,
body.invoice-page .sewing-system-page .sewing-payment-submit:hover,
body.invoice-page .sewing-system-page .sewing-payment-submit:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.invoice-page .sewing-system-page input,
body.invoice-page .sewing-system-page select,
body.invoice-page .sewing-system-page textarea,
body.invoice-page .sewing-system-page .sewing-select-trigger,
body.invoice-page .sewing-system-page .sewing-select-search,
body.invoice-page .sewing-system-page .sewing-bon-filter-form input,
body.invoice-page .sewing-system-page .sewing-bon-filter-form select {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .sewing-system-page input::placeholder,
body.invoice-page .sewing-system-page textarea::placeholder {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .sewing-system-page input:focus,
body.invoice-page .sewing-system-page select:focus,
body.invoice-page .sewing-system-page textarea:focus,
body.invoice-page .sewing-system-page button:focus-visible,
body.invoice-page .sewing-system-page a:focus-visible,
body.invoice-page .sewing-system-page .sewing-themed-select.is-open .sewing-select-trigger {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: none !important;
}

body.invoice-page .sewing-system-page input:disabled,
body.invoice-page .sewing-system-page select:disabled,
body.invoice-page .sewing-system-page textarea:disabled,
body.invoice-page .sewing-system-page button:disabled,
body.invoice-page .sewing-system-page [aria-disabled="true"],
body.invoice-page .sewing-system-page .is-disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .62;
}

body.invoice-page .sewing-system-page .sewing-input-field.is-automatic input {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .sewing-system-page .sewing-tabs a,
body.invoice-page .sewing-system-page .sewing-tabs button,
body.invoice-page .sewing-system-page .sewing-proof-action,
body.invoice-page .sewing-system-page .sewing-material-add,
body.invoice-page .sewing-system-page .sewing-proof-change,
body.invoice-page .sewing-system-page .sewing-bon-filter-actions a,
body.invoice-page .sewing-system-page .sewing-order-modal-close,
body.invoice-page .sewing-system-page .sewing-material-modal-close,
body.invoice-page .sewing-system-page .sewing-bon-modal-close {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .sewing-system-page .sewing-tabs a:hover,
body.invoice-page .sewing-system-page .sewing-tabs button:hover,
body.invoice-page .sewing-system-page .sewing-select-option:hover,
body.invoice-page .sewing-system-page .sewing-select-option:focus,
body.invoice-page .sewing-system-page .sewing-proof-action:hover,
body.invoice-page .sewing-system-page .sewing-material-add:hover {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-focus) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .sewing-system-page .sewing-tabs a.active,
body.invoice-page .sewing-system-page .sewing-tabs button.active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary) 14%, transparent) !important;
}

body.invoice-page .sewing-system-page .sewing-tabs a::before,
body.invoice-page .sewing-system-page .sewing-tabs button::before,
body.invoice-page .sewing-system-page .sewing-select-trigger::after {
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .sewing-system-page .sewing-select-option {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .sewing-system-page h1,
body.invoice-page .sewing-system-page h2,
body.invoice-page .sewing-system-page h3,
body.invoice-page .sewing-system-page h4,
body.invoice-page .sewing-system-page strong,
body.invoice-page .sewing-system-page dd,
body.invoice-page .sewing-system-page .sewing-input-field > span:first-child {
  color: var(--ui-text) !important;
}

body.invoice-page .sewing-system-page p,
body.invoice-page .sewing-system-page small,
body.invoice-page .sewing-system-page dt,
body.invoice-page .sewing-system-page .sewing-field-affix,
body.invoice-page .sewing-system-page .sewing-field-help,
body.invoice-page .sewing-system-page .sewing-material-empty,
body.invoice-page .sewing-system-page .sewing-history-empty {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .sewing-system-page .dashboard-kicker,
body.invoice-page .sewing-system-page .sewing-field-help.is-auto,
body.invoice-page .sewing-system-page .sewing-material-total,
body.invoice-page .sewing-system-page .sewing-payment-proof-link,
body.invoice-page .sewing-system-page .sewing-input-history-details > summary,
body.invoice-page .sewing-system-page .sewing-input-history-details > summary span {
  color: var(--ui-primary) !important;
}

body.invoice-page .sewing-system-page .sewing-field-error,
body.invoice-page .sewing-system-page .sewing-required,
body.invoice-page .sewing-system-page .sewing-send-deadline {
  color: var(--ui-danger) !important;
}

body.invoice-page .sewing-system-page .has-error input,
body.invoice-page .sewing-system-page .has-error select,
body.invoice-page .sewing-system-page .has-error .sewing-select-trigger {
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 14%, transparent) !important;
}

body.invoice-page .sewing-system-page .sewing-proof-remove,
body.invoice-page .sewing-system-page .sewing-material-delete,
body.invoice-page .sewing-system-page .sewing-shipment-history-actions > form button {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .sewing-system-page .sewing-income-status-badge.is-match,
body.invoice-page .sewing-system-page .sewing-shipment-lock {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .sewing-system-page .sewing-income-status-badge.is-short,
body.invoice-page .sewing-system-page .sewing-receipt-status,
body.invoice-page .sewing-system-page .sewing-shipping-status {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .sewing-system-page .sewing-income-status-badge.is-over {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .sewing-system-page .sewing-order-modal,
body.invoice-page .sewing-system-page .sewing-material-modal,
body.invoice-page .sewing-system-page .sewing-bon-modal,
body.invoice-page .sewing-system-page .sewing-payment-modal,
body.invoice-page .sewing-system-page .sewing-shipping-select-backdrop {
  background: var(--ui-overlay) !important;
}

body.invoice-page .sewing-system-page .sewing-order-modal-panel,
body.invoice-page .sewing-system-page .sewing-material-modal-card,
body.invoice-page .sewing-system-page .sewing-bon-modal-card,
body.invoice-page .sewing-system-page .sewing-payment-modal-card {
  box-shadow: var(--ui-shadow-modal) !important;
}

body.invoice-page .sewing-system-page .sewing-input-history-details {
  border-top: 1px solid var(--ui-border);
  margin-top: 12px;
  padding-top: 8px;
}

body.invoice-page .sewing-system-page .sewing-input-history-details > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: .76rem;
  font-weight: 850;
  justify-content: space-between;
  min-height: 44px;
}

body.invoice-page .sewing-system-page .sewing-history-material-list {
  display: grid;
  gap: 8px;
  padding-top: 6px;
}

body.invoice-page .sewing-system-page .sewing-history-material-list > div {
  align-items: center;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

body.invoice-page .sewing-system-page .sewing-history-material-list span {
  display: grid;
  gap: 2px;
}

body.invoice-page .sewing-system-page .sewing-history-head {
  margin-bottom: 12px;
}

@media (max-width: 560px) {
  body.invoice-page .sewing-system-page [data-sewing-view="input"] .sewing-subtabs {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  body.invoice-page .sewing-system-page .sewing-input-history-card .sewing-job-main {
    align-items: flex-start;
  }

  body.invoice-page .sewing-system-page .sewing-input-history-card .sewing-cost-stack {
    align-items: flex-start;
    text-align: left;
  }
}

/* Reusable primitives for every page created or refactored after this file. */
.ui-page {
  background: var(--ui-bg);
  color: var(--ui-text);
}

.ui-surface,
.ui-card,
.ui-modal {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
}

.ui-surface-soft {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

.ui-field,
.ui-page input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.ui-page select,
.ui-page textarea {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

.ui-field::placeholder,
.ui-page input::placeholder,
.ui-page textarea::placeholder,
.ui-muted {
  color: var(--ui-text-muted);
}

.ui-field:focus,
.ui-page input:focus,
.ui-page select:focus,
.ui-page textarea:focus {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent);
  outline: 0;
}

.ui-button,
.ui-button-primary,
.ui-button-secondary,
.ui-button-danger {
  align-items: center;
  border-radius: var(--ui-radius-md);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
}

.ui-button-primary {
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  color: var(--ui-on-primary);
}

.ui-button-primary:hover,
.ui-button-primary:focus-visible {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

.ui-button-secondary {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  color: var(--ui-primary);
}

.ui-button-danger {
  background: var(--ui-danger);
  border: 1px solid var(--ui-danger);
  color: var(--ui-on-primary);
}

.ui-backdrop {
  background: var(--ui-overlay);
}

.ui-status-success { background: var(--ui-success-soft); color: var(--ui-success-strong); }
.ui-status-warning { background: var(--ui-warning-soft); color: var(--ui-warning-strong); }
.ui-status-danger { background: var(--ui-danger-soft); color: var(--ui-danger-strong); }
.ui-status-info { background: var(--ui-info-soft); color: var(--ui-info-strong); }

/* Kas Masuk · alokasi Deposit Pelanggan ke satu atau beberapa pesanan custom. */
body.invoice-page .cashier-cash-in-page [data-custom-order-code-field][hidden],
body.invoice-page .cashier-cash-in-page .cash-in-order-modal-backdrop[hidden] {
  display: none !important;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-code-field {
  grid-column: 1 / -1;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-code-trigger {
  align-items: flex-start;
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 4px;
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-code-trigger small {
  color: var(--ui-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-code-trigger:hover {
  background: var(--ui-primary-soft);
  border-color: var(--ui-primary-border);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-code-trigger:focus-visible,
body.invoice-page .cashier-cash-in-page .cash-in-order-modal :is(button, input):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 30%, transparent);
  outline-offset: 2px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-code-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal-backdrop {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: auto;
  padding: 20px;
  position: fixed;
  z-index: 10020;
}

body.cashier-modal-open.invoice-page .cashier-cash-in-page .cashier-workspace {
  position: relative;
  z-index: 10030;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-modal);
  color: var(--ui-text);
  display: grid;
  gap: 16px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  max-height: min(760px, calc(100dvh - 40px));
  overflow: hidden;
  padding: 20px;
  width: min(680px, 100%);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal > header,
body.invoice-page .cashier-cash-in-page .cash-in-order-modal > footer {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal h2,
body.invoice-page .cashier-cash-in-page .cash-in-order-modal p {
  color: var(--ui-text);
  margin: 0;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal header small,
body.invoice-page .cashier-cash-in-page .cash-in-order-modal label,
body.invoice-page .cashier-cash-in-page .cash-in-order-total small,
body.invoice-page .cashier-cash-in-page .cash-in-order-option small {
  color: var(--ui-text-muted);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal header > button {
  align-items: center;
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  color: var(--ui-text);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 42px;
  font: inherit;
  font-size: 1.4rem;
  height: 42px;
  justify-content: center;
  padding: 0;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal header > button:hover {
  background: var(--ui-danger-soft);
  border-color: var(--ui-danger);
  color: var(--ui-danger-strong);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-search {
  display: grid;
  font-weight: 700;
  gap: 7px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-search input {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  font: inherit;
  min-height: 48px;
  padding: 10px 13px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-search input::placeholder {
  color: var(--ui-text-muted);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal-status {
  border: 1px solid var(--ui-primary-border);
  border-radius: var(--ui-radius-sm);
  font-size: 0.82rem;
  padding: 10px 12px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-options {
  display: grid;
  gap: 8px;
  min-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-option {
  align-items: center;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 11px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 11px 12px;
  text-align: left;
  width: 100%;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-option:hover {
  background: var(--ui-primary-soft);
  border-color: var(--ui-primary-border);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-option.is-selected {
  background: var(--ui-primary-soft);
  border-color: var(--ui-primary);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-option-marker {
  align-items: center;
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  color: var(--ui-on-primary);
  display: inline-flex;
  height: 26px;
  justify-content: center;
  width: 26px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-option.is-selected .cash-in-order-option-marker {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}

body.invoice-page .cashier-cash-in-page .cash-in-order-option > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-option b {
  color: var(--ui-primary-hover);
  white-space: nowrap;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-empty {
  align-self: center;
  color: var(--ui-text-muted) !important;
  padding: 24px;
  text-align: center;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal > footer {
  border-top: 1px solid var(--ui-border);
  padding-top: 14px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-total {
  display: flex;
  gap: 18px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-total span {
  display: grid;
  gap: 2px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal footer > div:last-child {
  display: flex;
  gap: 8px;
}

body.invoice-page .cashier-cash-in-page .cash-in-order-modal footer button {
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 44px;
  padding: 9px 15px;
}

@media (max-width: 640px) {
  body.invoice-page .cashier-cash-in-page .cash-in-order-modal-backdrop {
    align-items: flex-end;
    padding: 10px 10px calc(88px + env(safe-area-inset-bottom));
  }

  body.invoice-page .cashier-cash-in-page .cash-in-order-modal {
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) var(--ui-radius-sm) var(--ui-radius-sm);
    max-height: calc(100dvh - 108px - env(safe-area-inset-bottom));
    padding: 16px;
  }

  body.invoice-page .cashier-cash-in-page .cash-in-order-option {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  body.invoice-page .cashier-cash-in-page .cash-in-order-option b {
    grid-column: 2;
  }

  body.invoice-page .cashier-cash-in-page .cash-in-order-modal > footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.invoice-page .cashier-cash-in-page .cash-in-order-modal footer > div:last-child,
  body.invoice-page .cashier-cash-in-page .cash-in-order-modal footer button {
    flex: 1;
  }
}

/* Theme settings UI uses the same contract it edits. */
.ui-theme-contract-note {
  background: var(--ui-primary-soft);
  border: 1px solid var(--ui-primary-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  margin: 16px 0;
  padding: 14px 16px;
}

.ui-theme-contract-note p {
  color: var(--ui-text-muted);
  margin: 5px 0 0;
}

.ui-theme-color-grid label > small {
  color: var(--ui-text-muted);
  display: block;
  line-height: 1.45;
  margin-top: 7px;
}

.settings-card button.ui-theme-reset-action {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border)) !important;
  color: var(--ui-warning) !important;
}

/*
 * Kas Keluar is the first complete reference implementation. Every visual
 * color in its page, controls, history, upload state, and dialogs resolves to
 * the global semantic contract.
 */
body.invoice-page .cashier-cash-out-page {
  --cashout-ink: var(--ui-text);
  --cashout-muted: var(--ui-text-muted);
  --cashout-panel: var(--ui-surface);
  --cashout-panel-soft: var(--ui-surface-soft);
  /* Compatibility aliases for the older Kas Keluar stylesheet. */
  --cashout-gold: var(--ui-primary-hover);
  --cashout-cyan: var(--ui-primary);
  --cashout-pink: var(--ui-accent);
  background: var(--ui-bg) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .invoice-builder-head,
body.invoice-page .cashier-cash-out-page .cashier-panel,
body.invoice-page .cashier-cash-out-page .cash-out-mode-tabs a,
body.invoice-page .cashier-cash-out-page .cash-out-history-item,
body.invoice-page .cashier-cash-out-page .cash-out-history-detail,
body.invoice-page .cashier-cash-out-page .cash-out-history-detail section,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-block,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-table,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-detail-view,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-line,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-line.is-customer-deposit,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-line-receipt,
body.invoice-page .cashier-cash-out-page .cash-out-category-summary,
body.invoice-page .cashier-cash-out-page .cash-out-category-account-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .invoice-builder-head h1,
body.invoice-page .cashier-cash-out-page .cash-out-mode-tabs span,
body.invoice-page .cashier-cash-out-page .cashier-panel .packing-panel-head h2,
body.invoice-page .cashier-cash-out-page .cashier-inline-head strong,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-row strong,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-row span,
body.invoice-page .cashier-cash-out-page .cash-out-category-summary strong,
body.invoice-page .cashier-cash-out-page .cash-out-history-trigger strong,
body.invoice-page .cashier-cash-out-page .cash-out-history-detail p,
body.invoice-page .cashier-cash-out-page .cash-out-history-detail b,
body.invoice-page .cashier-cash-out-page .cash-out-history-detail small {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-cash-out-page .invoice-builder-head p:not(.auth-brand),
body.invoice-page .cashier-cash-out-page .cash-out-mode-tabs small,
body.invoice-page .cashier-cash-out-page .cashier-panel .packing-panel-head small,
body.invoice-page .cashier-cash-out-page .cashier-inline-head small,
body.invoice-page .cashier-cash-out-page .cashier-panel label,
body.invoice-page .cashier-cash-out-page .cashier-cash-in-row span small,
body.invoice-page .cashier-cash-out-page .cash-out-category-empty,
body.invoice-page .cashier-cash-out-page .cash-out-history-category small,
body.invoice-page .cashier-cash-out-page .cash-out-history-date em {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-mode-tabs a::before {
  background: var(--ui-border) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-mode-tabs a.active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ui-primary) 13%, transparent) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-mode-tabs a.active::before {
  background: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-mode-tabs a.active span {
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-panel input,
body.invoice-page .cashier-cash-out-page .cashier-panel select,
body.invoice-page .cashier-cash-out-page .cashier-panel textarea,
body.invoice-page .cashier-cash-out-page .cash-out-combobox input,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter input,
body.invoice-page .cashier-cash-out-page .cashier-history-pager input {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-panel input::placeholder,
body.invoice-page .cashier-cash-out-page .cashier-panel textarea::placeholder,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter input::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 76%, transparent) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-panel input:focus,
body.invoice-page .cashier-cash-out-page .cashier-panel select:focus,
body.invoice-page .cashier-cash-out-page .cashier-panel textarea:focus,
body.invoice-page .cashier-cash-out-page .cash-out-combobox input:focus,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter input:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: 0;
}

body.invoice-page .cashier-cash-out-page .cashier-panel select option {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-panel select option:checked,
body.invoice-page .cashier-cash-out-page .cashier-panel select option:hover,
body.invoice-page .cashier-cash-out-page .cashier-panel select option:focus {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-combobox::after {
  border-top-color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-combobox-list,
body.invoice-page .cashier-cash-out-page .cash-out-combobox-empty,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter form,
body.invoice-page .cashier-cash-out-page .cashier-customer-options {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-combobox-list button,
body.invoice-page .cashier-cash-out-page .cashier-customer-options button {
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-combobox-list button:hover,
body.invoice-page .cashier-cash-out-page .cash-out-combobox-list button:focus,
body.invoice-page .cashier-cash-out-page .cashier-customer-options button:hover,
body.invoice-page .cashier-cash-out-page .cashier-customer-options button:focus-visible {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-proof-actions label,
body.invoice-page .cashier-cash-out-page .cashier-action-ghost,
body.invoice-page .cashier-cash-out-page .cashier-confirm-actions button:first-child,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter a {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-proof-actions label:hover,
body.invoice-page .cashier-cash-out-page .cash-out-proof-actions label:focus-within,
body.invoice-page .cashier-cash-out-page .cashier-action-ghost:hover,
body.invoice-page .cashier-cash-out-page .cashier-action-ghost:focus-visible {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-focus) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-cash-in-add-button,
body.invoice-page .cashier-cash-out-page .cashier-form-actions .invoice-print-button,
body.invoice-page .cashier-cash-out-page .cashier-history-pager button,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter button,
body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-save-cash-out-category],
body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-save-cash-out-payment],
body.invoice-page .cashier-cash-out-page .cash-out-category-new-button,
body.invoice-page .cashier-cash-out-page .cash-out-submit-button {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-accent)) !important;
  border-color: color-mix(in srgb, var(--ui-primary) 54%, var(--ui-border)) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--ui-primary) 20%, transparent) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-cash-in-add-button:hover,
body.invoice-page .cashier-cash-out-page .cashier-form-actions .invoice-print-button:hover,
body.invoice-page .cashier-cash-out-page .cashier-history-pager button:hover,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter button:hover,
body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-save-cash-out-category]:hover,
body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-save-cash-out-payment]:hover,
body.invoice-page .cashier-cash-out-page .cash-out-category-new-button:hover,
body.invoice-page .cashier-cash-out-page .cash-out-submit-button:hover {
  background: linear-gradient(135deg, var(--ui-primary-hover), var(--ui-accent)) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-delete-cash-out-category],
body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-delete-cash-out-payment],
body.invoice-page .cashier-cash-out-page .cash-out-proof-remove,
body.invoice-page .cashier-cash-out-page .cashier-detail-actions button,
body.invoice-page .cashier-cash-out-page [data-cash-out-category-confirm-submit],
body.invoice-page .cashier-cash-out-page [data-cash-out-payment-confirm-submit] {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 36%, var(--ui-border)) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-delete-cash-out-category]:hover,
body.invoice-page .cashier-cash-out-page .cash-out-category-actions [data-delete-cash-out-payment]:hover,
body.invoice-page .cashier-cash-out-page .cashier-detail-actions button:hover,
body.invoice-page .cashier-cash-out-page [data-cash-out-category-confirm-submit]:hover,
body.invoice-page .cashier-cash-out-page [data-cash-out-payment-confirm-submit]:hover {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-category-summary {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-category-summary b,
body.invoice-page .cashier-cash-out-page .cash-out-history-total strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-cash-in-total {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-cash-in-total strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-proof-thumb {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-proof-thumb::after {
  background: var(--ui-success) !important;
  border-color: var(--ui-surface) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-proof-preview span {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-proof-viewer,
body.invoice-page .cashier-cash-out-page .cashier-confirm-backdrop,
body.invoice-page .cashier-cash-out-page .cash-out-category-confirm-backdrop,
body.invoice-page .cashier-cash-out-page .cash-out-category-account-panel {
  background: var(--ui-overlay) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-proof-viewer-panel,
body.invoice-page .cashier-cash-out-page .cashier-confirm-modal,
body.invoice-page .cashier-cash-out-page .cash-out-category-confirm-modal {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-confirm-modal::before,
body.invoice-page .cashier-cash-out-page .cash-out-category-confirm-modal::before {
  background: linear-gradient(90deg, var(--ui-danger), var(--ui-accent)) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-confirm-mark,
body.invoice-page .cashier-cash-out-page .cash-out-category-confirm-modal .cashier-confirm-mark {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-confirm-modal .dashboard-kicker {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 24%, var(--ui-border)) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-confirm-modal h2 {
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-confirm-modal p:not(.dashboard-kicker) {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-confirm-modal strong,
body.invoice-page .cashier-cash-out-page .cash-out-category-confirm-modal strong {
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-confirm-actions button:last-child,
body.invoice-page .cashier-cash-out-page .cash-out-category-confirm-modal .cashier-confirm-actions button:last-child {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cash-out-history-toolbar-label,
body.invoice-page .cashier-cash-out-page .cash-out-history-filter summary,
body.invoice-page .cashier-cash-out-page .cash-out-proof-link,
body.invoice-page .cashier-cash-out-page .cashier-detail-actions a,
body.invoice-page .cashier-cash-out-page .cashier-history-pager a {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page .cashier-history-pager a.is-disabled {
  color: var(--ui-text-muted) !important;
  opacity: 0.55;
}

body.invoice-page .cashier-cash-out-page *:focus-visible {
  outline-color: var(--ui-focus) !important;
}

@media (max-width: 720px) {
  .ui-theme-color-grid {
    grid-template-columns: 1fr;
  }
}

/* Pickup filter is portaled to body so cards and legacy overflow contexts cannot clip it. */
body.invoice-page .custom-orders-page #custom-order-pickup .packing-panel-head {
  overflow: visible !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-filter {
  isolation: auto !important;
  z-index: auto !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-filter > summary {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-filter > summary:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-filter > summary:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: none !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-filter.has-active-filter > summary,
body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-filter[open] > summary {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-pickup .custom-order-pickup-filter > summary b {
  background: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

.custom-order-pickup-filter-panel.is-portaled {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 12px !important;
  left: var(--pickup-filter-left) !important;
  margin: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 14px !important;
  position: fixed !important;
  right: auto !important;
  top: var(--pickup-filter-top) !important;
  transform: none !important;
  width: var(--pickup-filter-width) !important;
  z-index: 1001 !important;
}

.custom-order-pickup-filter-panel-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.custom-order-pickup-filter-panel-head strong {
  color: var(--ui-text) !important;
}

.custom-order-pickup-filter-panel-head button {
  align-items: center;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text-muted) !important;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0 !important;
  width: 44px;
}

.custom-order-pickup-filter-panel-head button svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
  width: 20px;
}

.custom-order-pickup-filter-panel.is-portaled label {
  color: var(--ui-text-muted) !important;
  display: grid !important;
  font-weight: 800 !important;
  gap: 6px !important;
  margin: 0 !important;
}

.custom-order-pickup-filter-panel.is-portaled input,
.custom-order-pickup-filter-panel.is-portaled select {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-sizing: border-box !important;
  color: var(--ui-text) !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  width: 100% !important;
}

.custom-order-pickup-filter-panel.is-portaled select option {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

.custom-order-pickup-filter-panel.is-portaled input:hover,
.custom-order-pickup-filter-panel.is-portaled select:hover {
  border-color: var(--ui-primary-border) !important;
}

.custom-order-pickup-filter-panel.is-portaled input:focus,
.custom-order-pickup-filter-panel.is-portaled select:focus,
.custom-order-pickup-filter-panel.is-portaled button:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: none !important;
}

.custom-order-pickup-filter-panel.is-portaled [data-reset-pickup-filter] {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
  cursor: pointer;
  font-weight: 800 !important;
  min-height: 44px !important;
}

.custom-order-pickup-filter-panel.is-portaled [data-reset-pickup-filter]:hover,
.custom-order-pickup-filter-panel-head button:hover {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary-hover) !important;
}

.custom-order-pickup-filter-panel.is-portaled button:active {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-hover) !important;
}

.custom-order-pickup-filter-panel.is-portaled input:disabled,
.custom-order-pickup-filter-panel.is-portaled select:disabled,
.custom-order-pickup-filter-panel.is-portaled button:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .62;
}

.custom-order-pickup-filter-backdrop {
  background: var(--ui-overlay);
  border: 0;
  inset: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: fixed;
  z-index: 1000;
}

@media (max-width: 720px) {
  body.invoice-page.custom-orders-route.has-pickup-filter-open,
  body.has-pickup-filter-open {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .custom-order-pickup-filter-backdrop {
    opacity: 1;
  }

  .custom-order-pickup-filter-panel.is-portaled {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    max-height: min(78dvh, calc(100dvh - 32px)) !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
  }
}

/*
 * Global navigation is painted last so every route follows the same system
 * theme, including routes that still ship a legacy page-specific skin.
 */
html body .topbar.topbar {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-text) 8%, transparent) !important;
  color: var(--ui-text) !important;
}

html body .topbar.topbar .brand {
  color: var(--ui-primary) !important;
}

html body .topbar.topbar .topbar-nav a,
html body .topbar.topbar .topbar-nav button,
html body .topbar.topbar > form,
html body .topbar.topbar > form span {
  color: var(--ui-text-muted) !important;
}

html body .topbar.topbar .topbar-nav a:hover,
html body .topbar.topbar .topbar-nav a:focus-visible,
html body .topbar.topbar .topbar-nav button:hover,
html body .topbar.topbar .topbar-nav button:focus-visible,
html body .topbar.topbar .topbar-nav a.active,
html body .topbar.topbar .topbar-nav button.active {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  outline: 0;
}

html body .topbar.topbar .topbar-nav .nav-primary,
html body .topbar.topbar > form button {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

html body .topbar.topbar .topbar-nav .nav-primary:hover,
html body .topbar.topbar .topbar-nav .nav-primary:focus-visible,
html body .topbar.topbar > form button:hover,
html body .topbar.topbar > form button:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  color: var(--ui-on-primary) !important;
  outline: 0;
}

html body > .home-bottom-nav.home-bottom-nav {
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
  border-color: var(--ui-border) !important;
  box-shadow: 0 -10px 28px color-mix(in srgb, var(--ui-text) 9%, transparent) !important;
  color: var(--ui-text-muted) !important;
}

html body > .home-bottom-nav.home-bottom-nav a,
html body > .home-bottom-nav.home-bottom-nav button {
  background: transparent !important;
  color: var(--ui-text-muted) !important;
}

html body > .home-bottom-nav.home-bottom-nav a:hover,
html body > .home-bottom-nav.home-bottom-nav a:focus-visible,
html body > .home-bottom-nav.home-bottom-nav button:hover,
html body > .home-bottom-nav.home-bottom-nav button:focus-visible,
html body > .home-bottom-nav.home-bottom-nav a.active,
html body > .home-bottom-nav.home-bottom-nav button.active {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  outline: 0;
}

html body > .home-bottom-nav.home-bottom-nav a:focus-visible,
html body > .home-bottom-nav.home-bottom-nav button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ui-focus) !important;
}

html body > .home-bottom-nav.home-bottom-nav a[aria-disabled="true"],
html body > .home-bottom-nav.home-bottom-nav button:disabled,
html body > .home-bottom-nav.home-bottom-nav .is-disabled {
  background: transparent !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.55;
}

html body > .home-bottom-nav.home-bottom-nav em,
html body > .home-bottom-nav.home-bottom-nav [data-notification-badge] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-surface) !important;
  color: var(--ui-on-primary) !important;
}

html body > .home-bottom-nav.home-bottom-nav svg,
html body .topbar.topbar svg {
  stroke: currentColor;
}

@media (max-width: 720px) {
  html body > .home-bottom-nav.home-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }

  html body > .home-bottom-nav.home-bottom-nav a,
  html body > .home-bottom-nav.home-bottom-nav button {
    min-width: 0;
    overflow: hidden;
  }

  html body > .home-bottom-nav.home-bottom-nav small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Kendala Sistem: complete theme-aware page contract. */
body.invoice-page .system-issues-page {
  min-height: calc(100vh - 76px);
  padding: 24px clamp(14px, 4vw, 54px) 104px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issues-page *,
body.invoice-page .system-issues-page *::before,
body.invoice-page .system-issues-page *::after {
  box-sizing: border-box;
}

body.invoice-page .system-issues-head {
  position: sticky;
  top: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  backdrop-filter: blur(14px);
  isolation: isolate;
  overflow: hidden;
}

body.invoice-page .system-issues-head::after {
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  right: -100px;
  bottom: -190px;
  border-radius: 50%;
  background: var(--ui-primary-soft) !important;
  content: "";
}

body.invoice-page .system-issues-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

body.invoice-page .system-issues-head-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  border: 1px solid var(--ui-primary-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  place-items: center;
}

body.invoice-page .system-issues-head-mark svg {
  width: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body.invoice-page .system-issues-head-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 8px;
}

body.invoice-page .system-issues-head-stats > span {
  min-width: 76px;
  padding: 10px 12px;
  display: grid;
  gap: 1px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-soft);
  text-align: center;
}

body.invoice-page .system-issues-head-stats b {
  color: var(--ui-text) !important;
  font-size: 20px;
  line-height: 1;
}

body.invoice-page .system-issues-head-stats small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.invoice-page .system-issues-head-stats .is-warning {
  border-color: color-mix(in srgb, var(--ui-warning) 28%, var(--ui-border));
  background: var(--ui-warning-soft);
}

body.invoice-page .system-issues-head-stats .is-info {
  border-color: color-mix(in srgb, var(--ui-info) 28%, var(--ui-border));
  background: var(--ui-info-soft);
}

body.invoice-page .system-issues-head-stats .is-success {
  border-color: color-mix(in srgb, var(--ui-success) 28%, var(--ui-border));
  background: var(--ui-success-soft);
}

body.invoice-page .system-issues-head .dashboard-kicker {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border);
  border-radius: 999px;
  color: var(--ui-primary-hover) !important;
  display: inline-flex;
  line-height: 1;
  margin: 0 0 7px;
  padding: 6px 10px;
  width: fit-content;
}

body.invoice-page .system-issues-head h1 {
  margin: 1px 0 3px;
  color: var(--ui-text) !important;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.045em;
  line-height: 1;
  text-shadow: none !important;
}

body.invoice-page .system-issues-head small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .system-issue-guide-trigger {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 999px;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.invoice-page .system-issue-guide-trigger span {
  width: 22px;
  height: 22px;
  display: grid;
  border-radius: 50%;
  background: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  place-items: center;
}

body.invoice-page .system-issue-guide-trigger:hover,
body.invoice-page .system-issue-guide-trigger:focus-visible {
  border-color: var(--ui-focus) !important;
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  color: var(--ui-primary-hover) !important;
  outline: 0;
  transform: translateY(-1px);
}

body.invoice-page .system-issue-tabs {
  position: sticky;
  top: 112px;
  z-index: 13;
  padding: 8px !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(14px);
}

body.invoice-page .system-issue-tabs a {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 13px 15px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.invoice-page .system-issue-tabs a::before {
  background: var(--ui-border) !important;
}

body.invoice-page .system-issue-tabs a span {
  color: var(--ui-text) !important;
  align-self: start;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

body.invoice-page .system-issue-tabs a small {
  grid-column: 1 / -1;
  color: var(--ui-text-muted) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

body.invoice-page .system-issue-tabs a:hover,
body.invoice-page .system-issue-tabs a:focus-visible {
  border-color: var(--ui-primary-border) !important;
  background: var(--ui-primary-soft) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary) 12%, transparent) !important;
  outline: 0;
  transform: translateY(-1px);
}

body.invoice-page .system-issue-tabs a.active {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--ui-primary) 24%, transparent) !important;
}

body.invoice-page .system-issue-tabs a.active::before {
  background: var(--ui-primary) !important;
}

body.invoice-page .system-issue-tabs a.active span {
  color: var(--ui-on-primary) !important;
}

body.invoice-page .system-issue-tabs a.active small {
  color: color-mix(in srgb, var(--ui-on-primary) 76%, transparent) !important;
}

body.invoice-page .system-issue-tab-action {
  width: 30px;
  height: 30px;
  display: grid;
  border: 1px solid var(--ui-primary-border);
  border-radius: 50%;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  font-size: 20px;
  place-items: center;
}

body.invoice-page .system-issue-tabs a.active .system-issue-tab-action,
body.invoice-page .system-issue-tabs a.active .system-issue-tab-badge {
  border-color: color-mix(in srgb, var(--ui-on-primary) 42%, transparent) !important;
  background: color-mix(in srgb, var(--ui-on-primary) 16%, transparent) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .system-issue-tab-badge {
  min-width: 32px;
  min-height: 28px;
  padding: 4px 9px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 900;
}

body.invoice-page .system-issue-tab-badge.is-warning {
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border)) !important;
  background: var(--ui-warning-soft) !important;
  color: var(--ui-warning) !important;
}

body.invoice-page .system-issue-tab-badge.is-info {
  border-color: color-mix(in srgb, var(--ui-info) 30%, var(--ui-border)) !important;
  background: var(--ui-info-soft) !important;
  color: var(--ui-info) !important;
}

body.invoice-page .system-issue-tab-badge.is-success {
  border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border)) !important;
  background: var(--ui-success-soft) !important;
  color: var(--ui-success) !important;
}

body.invoice-page .system-issue-workspace {
  min-height: 0;
  overflow: visible !important;
}

body.invoice-page .system-issue-panel {
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(16px, 2.2vw, 28px) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-list-panel {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .system-issue-panel label,
body.invoice-page .system-issue-panel strong,
body.invoice-page .system-issue-panel p,
body.invoice-page .system-issue-panel b {
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-panel small,
body.invoice-page .system-issue-panel em {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .system-issue-form {
  gap: 18px !important;
}

body.invoice-page .system-issue-form > label,
body.invoice-page .system-issue-owner-note {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

body.invoice-page .system-issue-panel input,
body.invoice-page .system-issue-panel select,
body.invoice-page .system-issue-panel textarea,
body.invoice-page .system-issue-pager input {
  width: 100%;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-field) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-panel input::placeholder,
body.invoice-page .system-issue-panel textarea::placeholder {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .system-issue-panel input[readonly] {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
}

body.invoice-page .system-issue-panel input:focus,
body.invoice-page .system-issue-panel select:focus,
body.invoice-page .system-issue-panel textarea:focus,
body.invoice-page .system-issue-pager input:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: 0;
}

body.invoice-page .system-issue-form textarea {
  min-height: 170px;
  resize: vertical;
}

body.invoice-page .system-issue-photo-field {
  padding: clamp(16px, 2vw, 22px) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

body.invoice-page .system-issue-photo-field .cashier-inline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body.invoice-page .system-issue-photo-count {
  padding: 6px 10px;
  flex: 0 0 auto;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 999px;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  font-size: 12px;
  white-space: nowrap;
}

body.invoice-page .system-issue-dropzone {
  min-height: 150px;
  margin-top: 16px;
  padding: 22px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 2px dashed var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-text) !important;
  cursor: pointer;
  text-align: center;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.invoice-page .system-issue-dropzone:hover,
body.invoice-page .system-issue-dropzone:focus-visible,
body.invoice-page .system-issue-dropzone:focus-within {
  border-color: var(--ui-focus) !important;
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 16%, transparent) !important;
  outline: 0;
  transform: translateY(-1px);
}

body.invoice-page .system-issue-dropzone input {
  display: none;
}

body.invoice-page .system-issue-dropzone > span:not(.system-issue-dropzone-icon) {
  color: var(--ui-text) !important;
  font-weight: 900;
}

body.invoice-page .system-issue-dropzone small {
  max-width: 620px;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .system-issue-dropzone-icon {
  width: 42px;
  height: 42px;
  display: grid;
  border-radius: 50%;
  background: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  font-size: 26px;
  font-weight: 700;
  place-items: center;
}

body.invoice-page .system-issue-photo-preview,
body.invoice-page .system-issue-photo-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

body.invoice-page .system-issue-photo-preview figure,
body.invoice-page .system-issue-photo-grid button {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

body.invoice-page .system-issue-photo-preview img,
body.invoice-page .system-issue-photo-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
}

body.invoice-page .system-issue-photo-preview figure:hover,
body.invoice-page .system-issue-photo-grid button:hover,
body.invoice-page .system-issue-photo-grid button:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 16%, transparent) !important;
  outline: 0;
}

body.invoice-page .system-issue-photo-preview button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 32px;
  height: 32px;
  display: grid;
  padding: 0;
  border: 1px solid var(--ui-danger) !important;
  border-radius: 50%;
  background: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer;
  font-weight: 900;
  place-items: center;
}

body.invoice-page .system-issue-photo-preview button:hover,
body.invoice-page .system-issue-photo-preview button:focus-visible {
  background: color-mix(in srgb, var(--ui-danger) 82%, var(--ui-text)) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-danger) 22%, transparent);
}

body.invoice-page .system-issue-form .cashier-form-actions {
  padding-top: 18px;
  border-top: 1px solid var(--ui-border) !important;
}

body.invoice-page .system-issue-form .invoice-print-button,
body.invoice-page .system-issue-status-form button,
body.invoice-page .system-issue-pager button,
body.invoice-page .system-issue-guide-panel > footer button {
  min-height: 44px;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer;
  font-weight: 900;
  text-transform: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.invoice-page .system-issue-form .invoice-print-button:hover,
body.invoice-page .system-issue-form .invoice-print-button:focus-visible,
body.invoice-page .system-issue-status-form button:hover,
body.invoice-page .system-issue-status-form button:focus-visible,
body.invoice-page .system-issue-pager button:hover,
body.invoice-page .system-issue-pager button:focus-visible,
body.invoice-page .system-issue-guide-panel > footer button:hover,
body.invoice-page .system-issue-guide-panel > footer button:focus-visible {
  border-color: var(--ui-primary-hover) !important;
  background: var(--ui-primary-hover) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-primary) 22%, transparent) !important;
  outline: 0;
  transform: translateY(-1px);
}

body.invoice-page .system-issues-page button:disabled,
body.invoice-page .system-issues-page input:disabled,
body.invoice-page .system-issues-page select:disabled,
body.invoice-page .system-issues-page textarea:disabled,
body.invoice-page .system-issues-page .is-disabled {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.58;
  pointer-events: none;
}

body.invoice-page .system-issue-list {
  display: grid;
  gap: 12px;
}

body.invoice-page .system-issue-item {
  overflow: hidden;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-text) 5%, transparent) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-item.is-status-belum_teratasi {
  --system-issue-status: var(--ui-warning);
  --system-issue-status-soft: var(--ui-warning-soft);
}

body.invoice-page .system-issue-item.is-status-sedang_ditangani {
  --system-issue-status: var(--ui-info);
  --system-issue-status-soft: var(--ui-info-soft);
}

body.invoice-page .system-issue-item.is-status-clear {
  --system-issue-status: var(--ui-success);
  --system-issue-status-soft: var(--ui-success-soft);
}

body.invoice-page .system-issue-trigger {
  min-height: 92px;
  padding: 15px 17px !important;
  display: grid !important;
  grid-template-columns: 10px 92px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 14px;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease;
}

body.invoice-page .system-issue-trigger::-webkit-details-marker {
  display: none;
}

body.invoice-page .system-issue-status-mark {
  width: 9px;
  height: 44px;
  border-radius: 999px;
  background: var(--system-issue-status);
}

body.invoice-page .system-issue-trigger .cash-out-history-date {
  min-height: 54px;
  padding: 8px 10px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-soft);
}

body.invoice-page .system-issue-trigger .cash-out-history-date strong {
  font-size: 15px;
  line-height: 1.1;
}

body.invoice-page .system-issue-trigger .cash-out-history-date em {
  font-size: 11px;
  font-style: normal;
}

body.invoice-page .system-issue-trigger .cash-out-history-category {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body.invoice-page .system-issue-trigger .cash-out-history-category small {
  overflow: hidden;
  color: var(--ui-text-muted) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.invoice-page .system-issue-trigger:hover,
body.invoice-page .system-issue-trigger:focus-visible,
body.invoice-page .system-issue-item[open] > .system-issue-trigger {
  background: var(--ui-primary-soft) !important;
  outline: 0;
}

body.invoice-page .system-issue-trigger strong,
body.invoice-page .system-issue-detail strong,
body.invoice-page .system-issue-detail p,
body.invoice-page .system-issue-detail b {
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-trigger em,
body.invoice-page .system-issue-detail small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .system-issue-trigger .cash-out-history-category strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  line-height: 1.42;
}

body.invoice-page .system-issue-status-chip {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--system-issue-status) 30%, var(--ui-border));
  border-radius: 999px;
  background: var(--system-issue-status-soft);
  white-space: nowrap;
}

body.invoice-page .system-issue-status-chip strong {
  color: var(--system-issue-status) !important;
  font-size: 11px;
}

body.invoice-page .system-issue-trigger-chevron {
  width: 28px;
  height: 28px;
  display: grid;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: var(--ui-surface-soft);
  color: var(--ui-text-muted);
  place-items: center;
  transition: transform 160ms ease;
}

body.invoice-page .system-issue-trigger-chevron svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

body.invoice-page .system-issue-item[open] .system-issue-trigger-chevron {
  transform: rotate(180deg);
}

body.invoice-page .system-issue-item.is-status-belum_teratasi .cash-out-history-total strong {
  color: var(--ui-warning) !important;
}

body.invoice-page .system-issue-item.is-status-sedang_ditangani .cash-out-history-total strong {
  color: var(--ui-info) !important;
}

body.invoice-page .system-issue-item.is-status-clear .cash-out-history-total strong {
  color: var(--ui-success) !important;
}

body.invoice-page .system-issue-detail {
  padding: 14px !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-detail section,
body.invoice-page .system-issue-panel .cashier-empty-state {
  padding: 16px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-status-form {
  display: grid;
  gap: 12px;
}

body.invoice-page .system-issue-status-form textarea {
  min-height: 104px;
  resize: vertical;
}

body.invoice-page .system-issue-status-form button {
  justify-self: start;
  padding: 10px 18px;
}

body.invoice-page .system-issue-pager {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-pager a,
body.invoice-page .system-issue-pager strong,
body.invoice-page .system-issue-pager span {
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-pager a {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
}

body.invoice-page .system-issue-pager a:hover,
body.invoice-page .system-issue-pager a:focus-visible {
  border-color: var(--ui-focus) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  outline: 0;
}

body.invoice-page .system-issue-pager input {
  min-height: 40px;
}

body.invoice-page .system-issue-pager button {
  min-height: 40px;
}

body.invoice-page .system-issue-guide-dialog {
  width: min(900px, calc(100vw - 28px));
  max-height: min(88vh, 820px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-guide-dialog::backdrop {
  background: var(--ui-overlay) !important;
  backdrop-filter: blur(4px);
}

body.invoice-page .system-issue-guide-panel {
  max-height: min(88vh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-guide-panel > header {
  position: relative;
  padding: 24px 70px 20px 24px;
  border-bottom: 1px solid var(--ui-primary-border) !important;
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-hover)) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .system-issue-guide-panel > header small,
body.invoice-page .system-issue-guide-panel > header h2,
body.invoice-page .system-issue-guide-panel > header p {
  color: var(--ui-on-primary) !important;
}

body.invoice-page .system-issue-guide-panel > header small {
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.invoice-page .system-issue-guide-panel > header h2 {
  margin: 5px 0 6px;
}

body.invoice-page .system-issue-guide-panel > header p {
  margin: 0;
  opacity: 0.84;
}

body.invoice-page .system-issue-guide-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ui-on-primary) 42%, transparent) !important;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-on-primary) 10%, transparent) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer;
  font-size: 24px;
}

body.invoice-page .system-issue-guide-close:hover,
body.invoice-page .system-issue-guide-close:focus-visible {
  background: color-mix(in srgb, var(--ui-on-primary) 20%, transparent) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-on-primary) 24%, transparent);
}

body.invoice-page .system-issue-guide-content {
  padding: 20px 24px;
  display: grid;
  gap: 12px;
  overflow: auto;
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .system-issue-guide-content article {
  padding: 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-guide-content article > span {
  width: 38px;
  height: 38px;
  display: grid;
  border-radius: 50%;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  font-weight: 900;
  place-items: center;
}

body.invoice-page .system-issue-guide-content h3,
body.invoice-page .system-issue-guide-content p,
body.invoice-page .system-issue-guide-fields dt,
body.invoice-page .system-issue-guide-fields dd {
  color: var(--ui-text) !important;
}

body.invoice-page .system-issue-guide-content h3 {
  margin: 3px 0 5px;
}

body.invoice-page .system-issue-guide-content p {
  margin: 0;
}

body.invoice-page .system-issue-guide-fields {
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

body.invoice-page .system-issue-guide-fields > div {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .system-issue-guide-fields dt,
body.invoice-page .system-issue-guide-fields dd {
  line-height: 1.5;
}

body.invoice-page .system-issue-guide-fields dt {
  font-weight: 900;
}

body.invoice-page .system-issue-guide-fields dd {
  margin: 0;
}

body.invoice-page .system-issue-guide-content .system-issue-guide-note {
  margin-top: 9px;
  color: var(--ui-primary-hover) !important;
  font-weight: 800;
}

body.invoice-page .system-issue-guide-panel > footer {
  padding: 14px 24px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
}

body.invoice-page .system-issue-guide-panel > footer button {
  padding: 10px 20px;
}

body.invoice-page .system-issue-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  width: 100vw;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  background: var(--ui-overlay) !important;
}

body.invoice-page .system-issue-lightbox[hidden] {
  display: none;
}

html.system-issue-lightbox-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.invoice-page.system-issue-lightbox-open {
  position: fixed;
  top: var(--system-issue-scroll-y, 0);
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.invoice-page .system-issue-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1100px, 92vw);
  max-height: min(86dvh, calc(100dvh - 32px));
  object-fit: contain;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
}

body.invoice-page .system-issue-lightbox button {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ui-border) !important;
  border-radius: 50%;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  cursor: pointer;
  font-size: 24px;
  font-weight: 900;
}

body.invoice-page .system-issue-lightbox button:hover,
body.invoice-page .system-issue-lightbox button:focus-visible {
  border-color: var(--ui-focus) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 18%, transparent);
}

.system-issue-live-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1350;
  padding: 18px;
  display: grid;
  place-items: center;
  background: var(--ui-overlay) !important;
  animation: modal-fade-in 180ms ease both;
}

.system-issue-live-modal-backdrop[hidden] {
  display: none;
}

.system-issue-live-modal {
  position: relative;
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  animation: modal-pop-in 220ms cubic-bezier(0.2, 0.9, 0.2, 1.12) both;
}

.system-issue-live-modal h2 {
  margin: 6px 0 10px;
  color: var(--ui-text) !important;
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: 0;
  text-transform: uppercase;
}

.system-issue-live-modal p:not(.game-modal-eyebrow) {
  margin: 0;
  color: var(--ui-text-muted) !important;
  line-height: 1.55;
}

.system-issue-live-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.system-issue-live-actions a,
.system-issue-live-actions button {
  min-height: 42px;
  padding: 10px 16px;
  display: inline-grid;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  font-weight: 900;
  place-items: center;
  text-decoration: none;
}

.system-issue-live-actions button {
  border-color: var(--ui-primary-border) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

.system-issue-live-actions a:hover,
.system-issue-live-actions a:focus-visible,
.system-issue-live-actions button:hover,
.system-issue-live-actions button:focus-visible {
  border-color: var(--ui-primary-hover) !important;
  background: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 18%, transparent);
}

@media (max-width: 900px) {
  body.invoice-page .system-issues-head {
    align-items: flex-start;
  }

  body.invoice-page .system-issues-head-stats {
    grid-template-columns: repeat(3, minmax(64px, 1fr));
  }

  body.invoice-page .system-issue-tabs {
    top: 108px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.invoice-page .system-issue-detail {
    grid-template-columns: 1fr;
  }

  body.invoice-page .system-issue-trigger {
    grid-template-columns: 10px 82px minmax(0, 1fr) auto 28px;
    gap: 10px;
  }
}

@media (max-width: 620px) {
  body.invoice-page .system-issues-page {
    min-height: 100vh;
    padding: 10px 10px calc(94px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  body.invoice-page .system-issues-head {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    padding: 16px !important;
  }

  body.invoice-page .system-issues-heading {
    gap: 12px;
  }

  body.invoice-page .system-issues-head-mark {
    width: 48px;
    height: 48px;
  }

  body.invoice-page .system-issues-head-mark svg {
    width: 26px;
  }

  body.invoice-page .system-issues-head-stats {
    width: 100%;
  }

  body.invoice-page .system-issues-head-stats > span {
    min-width: 0;
    padding: 8px 6px;
  }

  body.invoice-page .system-issues-head h1 {
    font-size: clamp(28px, 9vw, 40px);
  }

  body.invoice-page .system-issue-guide-trigger {
    padding: 9px 11px;
  }

  body.invoice-page .system-issue-guide-trigger > span + * {
    display: none;
  }

  body.invoice-page .system-issue-tabs {
    position: relative;
    top: auto;
    grid-template-columns: 1fr 1fr;
    padding: 6px !important;
    gap: 6px;
  }

  body.invoice-page .system-issue-tabs a {
    min-height: 72px;
    padding: 9px 10px !important;
  }

  body.invoice-page .system-issue-tabs a span,
  body.invoice-page .system-issue-tabs a small {
    overflow-wrap: anywhere;
  }

  body.invoice-page .system-issue-panel {
    padding: 14px !important;
  }

  body.invoice-page .system-issue-photo-field .cashier-inline-head {
    align-items: stretch;
    flex-direction: column;
  }

  body.invoice-page .system-issue-photo-count {
    align-self: flex-start;
  }

  body.invoice-page .system-issue-photo-preview,
  body.invoice-page .system-issue-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.invoice-page .system-issue-form .invoice-print-button,
  body.invoice-page .system-issue-status-form button {
    width: 100%;
  }

  body.invoice-page .system-issue-trigger {
    align-items: flex-start;
    grid-template-columns: 8px minmax(0, 1fr) 28px;
    grid-template-rows: auto auto auto;
    gap: 9px 11px;
    padding: 13px !important;
  }

  body.invoice-page .system-issue-status-mark {
    height: 100%;
    min-height: 76px;
    grid-column: 1;
    grid-row: 1 / 4;
  }

  body.invoice-page .system-issue-trigger .cash-out-history-date {
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    grid-column: 2;
    grid-row: 1;
    border: 0;
    background: transparent;
  }

  body.invoice-page .system-issue-trigger .cash-out-history-category {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  body.invoice-page .system-issue-status-chip {
    justify-self: start;
    grid-column: 2 / 4;
    grid-row: 3;
  }

  body.invoice-page .system-issue-trigger-chevron {
    grid-column: 3;
    grid-row: 1;
  }

  body.invoice-page .system-issue-pager {
    align-items: stretch;
    flex-wrap: wrap;
  }

  body.invoice-page .system-issue-pager form {
    width: 100%;
  }

  body.invoice-page .system-issue-guide-dialog {
    width: calc(100vw - 16px);
    max-height: 92vh;
  }

  body.invoice-page .system-issue-guide-panel {
    max-height: 92vh;
  }

  body.invoice-page .system-issue-guide-panel > header,
  body.invoice-page .system-issue-guide-content,
  body.invoice-page .system-issue-guide-panel > footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.invoice-page .system-issue-guide-content article {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  body.invoice-page .system-issue-guide-content article > span {
    width: 32px;
    height: 32px;
  }

  body.invoice-page .system-issue-guide-fields > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Product database: semantic contract override for legacy product rows and editor. */
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-table {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  clip-path: none !important;
  overflow: hidden !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-row-head {
  background: var(--ui-surface-soft) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  clip-path: none !important;
  margin: 0 !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit {
  background: var(--ui-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
  clip-path: none !important;
  margin: 0 !important;
  min-height: 0;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row {
  background: var(--ui-surface) !important;
  border: 0 !important;
  color: var(--ui-text) !important;
  cursor: pointer;
  min-height: 78px;
  outline: 0;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row:hover {
  background: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit[open] summary.cashier-product-row {
  background: var(--ui-primary) !important;
  border-bottom: 1px solid var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row:focus-visible {
  box-shadow: inset 0 0 0 3px var(--ui-focus) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row:hover strong,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row:hover span,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit[open] summary.cashier-product-row strong,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit[open] summary.cashier-product-row span {
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-summary-action {
  align-items: center;
  color: var(--ui-primary) !important;
  display: inline-flex !important;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 6px;
  margin-top: 5px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-summary-chevron {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 0.18s ease;
  width: 16px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit[open] .cashier-product-summary-chevron {
  transform: rotate(180deg);
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-body {
  background: var(--ui-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 18px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-form {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 18px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-section {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-text) 7%, var(--ui-surface)) !important;
  box-sizing: border-box;
  margin: 0;
  min-inline-size: 0;
  padding: 16px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-section legend {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
  font-size: 0.84rem;
  font-weight: 900;
  padding: 7px 11px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid label {
  color: var(--ui-text) !important;
  display: grid;
  font-weight: 750;
  gap: 7px;
  min-width: 0;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid input,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid select {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid input:focus,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid select:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, var(--ui-surface)) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid input[readonly],
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid select[aria-readonly="true"] {
  background: color-mix(in srgb, var(--ui-field) 72%, var(--ui-border)) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid input:disabled,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid select:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  opacity: 0.62;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid input[aria-invalid="true"],
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid select[aria-invalid="true"] {
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 18%, var(--ui-surface)) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-stock-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar {
  align-items: center;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar > div {
  display: flex;
  gap: 10px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-status {
  color: var(--ui-text-muted) !important;
  font-size: 0.8rem;
  margin: 0;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-status[data-state="dirty"] {
  color: var(--ui-warning) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-status[data-state="loading"] {
  color: var(--ui-info) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-status[data-state="error"] {
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar button {
  border-radius: var(--ui-radius-sm) !important;
  min-height: 44px;
  padding-inline: 16px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar .cashier-action-secondary {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar .invoice-print-button:hover,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar .invoice-print-button:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar button:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.68;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone {
  align-items: center;
  background: var(--ui-danger-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-md) !important;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 14px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone > div {
  display: grid;
  gap: 3px;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone strong,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone small {
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone .cashier-product-delete-form {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone button {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-danger) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone button:hover,
body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone button:focus-visible {
  background: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
}

@media (max-width: 1020px) {
  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.invoice-page .cashier-products-page #cashier-product-database {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-table {
    overflow-x: auto !important;
  }

  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-body,
  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-form {
    padding: 12px;
  }

  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-grid,
  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-stock-grid {
    grid-template-columns: 1fr;
  }

  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar,
  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar > div {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar button,
  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone form,
  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-danger-zone button {
    width: 100%;
  }

  body.invoice-page .cashier-products-page #cashier-product-database .cashier-product-edit-action-bar button {
    grid-column: auto !important;
  }
}

/*
 * Database Kode Induk follows the same semantic contract as Kas Keluar.
 * Geometry remains page-local; every visual color resolves through --ui-*.
 */
body.invoice-page .cashier-products-page #cashier-base-code-database {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .packing-panel-head {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .packing-panel-head h2,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-section legend strong,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-fields label {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .packing-panel-head small,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-section legend small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .dashboard-kicker {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-table-tools {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-table-tools label {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database input,
body.invoice-page .cashier-products-page #cashier-base-code-database select,
body.invoice-page .cashier-products-page #cashier-base-code-database textarea,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-select-combo-input {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database input::placeholder,
body.invoice-page .cashier-products-page #cashier-base-code-database textarea::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 76%, transparent) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database input:focus,
body.invoice-page .cashier-products-page #cashier-base-code-database select:focus,
body.invoice-page .cashier-products-page #cashier-base-code-database textarea:focus,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-select-combo-input:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: 0;
}

body.invoice-page .cashier-products-page #cashier-base-code-database input[readonly] {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database input:disabled,
body.invoice-page .cashier-products-page #cashier-base-code-database select:disabled,
body.invoice-page .cashier-products-page #cashier-base-code-database button:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.58;
}

body.invoice-page .cashier-products-page #cashier-base-code-database select option {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-table-tools .invoice-print-button,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-actions .invoice-print-button:not(:disabled) {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-accent)) !important;
  border-color: color-mix(in srgb, var(--ui-primary) 54%, var(--ui-border)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary) 18%, transparent) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-table-tools .invoice-print-button:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-table-tools .invoice-print-button:focus-visible,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-actions .invoice-print-button:not(:disabled):hover,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-actions .invoice-print-button:not(:disabled):focus-visible {
  background: linear-gradient(135deg, var(--ui-primary-hover), var(--ui-accent)) !important;
  border-color: var(--ui-focus) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-secondary-link,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-cancel {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-secondary-link:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-secondary-link:focus-visible,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-cancel:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-cancel:focus-visible {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-focus) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database details.cashier-base-code-card {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database details.cashier-base-code-card:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database details.cashier-base-code-card[open] {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ui-primary) 15%, transparent) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database details.cashier-base-code-card > summary {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-hover)) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database details.cashier-base-code-card > summary:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database details.cashier-base-code-card > summary:focus-visible,
body.invoice-page .cashier-products-page #cashier-base-code-database details.cashier-base-code-card[open] > summary {
  background: linear-gradient(135deg, var(--ui-primary-hover), var(--ui-accent)) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-summary-copy strong,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-summary-actions em {
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-summary-copy small,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-summary-open-label {
  color: color-mix(in srgb, var(--ui-on-primary) 82%, transparent) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-summary-actions em {
  background: color-mix(in srgb, var(--ui-on-primary) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--ui-on-primary) 38%, transparent) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-summary-chevron {
  border-color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-form,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-base-code-meta {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-section,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-base-code-meta > span {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-edit-section legend > span:first-child,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-money-field {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-base-code-meta small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-base-code-meta strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-danger-zone {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-danger-zone strong,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-danger-zone small {
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-danger-zone .cashier-product-delete-form button {
  background: var(--ui-surface) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-danger-zone .cashier-product-delete-form button:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-danger-zone .cashier-product-delete-form button:focus-visible {
  background: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .custom-order-combo-menu,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-product-combo-menu {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .custom-order-combo-option {
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .custom-order-combo-option:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database .custom-order-combo-option:focus-visible {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-form-status,
body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-page-status {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-form-status.is-dirty {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border));
  color: var(--ui-warning);
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-form-status.is-loading {
  background: var(--ui-info-soft);
  border-color: color-mix(in srgb, var(--ui-info) 30%, var(--ui-border));
  color: var(--ui-info);
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-page-status.is-success {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border));
  color: var(--ui-success);
}

body.invoice-page .cashier-products-page #cashier-base-code-database .base-code-page-status.is-error {
  background: var(--ui-danger-soft);
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border));
  color: var(--ui-danger);
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-pagination,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-page-link,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-page-gap,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-page-jump {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-page-link:hover,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-page-link:focus-visible,
body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-page-link.is-active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-page-link.is-disabled {
  color: var(--ui-text-muted) !important;
  opacity: 0.55;
}

body.invoice-page .cashier-products-page #cashier-base-code-database .cashier-empty-state {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page:has(#cashier-base-code-database) .game-modal-backdrop[data-flash-modal] {
  background: var(--ui-overlay) !important;
}

body.invoice-page:has(#cashier-base-code-database) .game-modal-backdrop[data-flash-modal] .game-modal {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page:has(#cashier-base-code-database) .game-modal-backdrop[data-flash-modal] .game-modal h2,
body.invoice-page:has(#cashier-base-code-database) .game-modal-backdrop[data-flash-modal] .game-modal p {
  color: var(--ui-text) !important;
}

body.invoice-page:has(#cashier-base-code-database) .game-modal-backdrop[data-flash-modal][data-flash-success="1"] .game-modal-rank {
  background: var(--ui-success-soft) !important;
  border-color: var(--ui-success) !important;
  color: var(--ui-success) !important;
}

body.invoice-page:has(#cashier-base-code-database) .game-modal-backdrop[data-flash-modal][data-flash-error="1"] .game-modal-rank {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page:has(#cashier-base-code-database) .game-modal-backdrop[data-flash-modal] [data-flash-close] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-base-code-database *:focus-visible {
  outline-color: var(--ui-focus) !important;
}

/*
 * Kode Varian mirrors Kode Induk while resolving every visual state through
 * the global semantic contract. Geometry remains page-local in style.css.
 */
body.invoice-page .cashier-products-page .variant-code-create-panel,
body.invoice-page .cashier-products-page #cashier-variant-code-database {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel > .packing-panel-head,
body.invoice-page .cashier-products-page #cashier-variant-code-database > .packing-panel-head {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .packing-panel-head h2,
body.invoice-page .cashier-products-page #cashier-variant-code-database .packing-panel-head h2,
body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-form-section legend,
body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-form-section legend strong,
body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-fields label,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-table-tools label,
body.invoice-page .cashier-products-page #cashier-variant-code-database .variant-code-edit-form label {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .packing-panel-head small,
body.invoice-page .cashier-products-page #cashier-variant-code-database .packing-panel-head small,
body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-form-section legend small,
body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-field-hint {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .dashboard-kicker,
body.invoice-page .cashier-products-page #cashier-variant-code-database .dashboard-kicker {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
  display: inline-flex !important;
  padding: 4px 8px !important;
  width: fit-content !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-panel-toggle {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-panel-toggle:hover,
body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-panel-toggle:focus-visible {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel > .packing-panel-head::after {
  background: var(--ui-border) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-form-section,
body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-form-section legend {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-form-section {
  border-radius: var(--ui-radius-md) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-form-section legend > span:first-child {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-field-label em {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel .base-code-field-label em.is-required {
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel input,
body.invoice-page .cashier-products-page .variant-code-create-panel select,
body.invoice-page .cashier-products-page .variant-code-create-panel textarea,
body.invoice-page .cashier-products-page .variant-code-create-panel .cashier-select-combo-input,
body.invoice-page .cashier-products-page #cashier-variant-code-database input,
body.invoice-page .cashier-products-page #cashier-variant-code-database select,
body.invoice-page .cashier-products-page #cashier-variant-code-database textarea,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-select-combo-input {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel input::placeholder,
body.invoice-page .cashier-products-page .variant-code-create-panel textarea::placeholder,
body.invoice-page .cashier-products-page #cashier-variant-code-database input::placeholder,
body.invoice-page .cashier-products-page #cashier-variant-code-database textarea::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 76%, transparent) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel input:focus,
body.invoice-page .cashier-products-page .variant-code-create-panel select:focus,
body.invoice-page .cashier-products-page .variant-code-create-panel textarea:focus,
body.invoice-page .cashier-products-page .variant-code-create-panel .cashier-select-combo-input:focus,
body.invoice-page .cashier-products-page #cashier-variant-code-database input:focus,
body.invoice-page .cashier-products-page #cashier-variant-code-database select:focus,
body.invoice-page .cashier-products-page #cashier-variant-code-database textarea:focus,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-select-combo-input:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: 0;
}

body.invoice-page .cashier-products-page .variant-code-create-panel input:invalid:not(:placeholder-shown) {
  border-color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page .variant-code-action-bar {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-text) 8%, transparent) !important;
}

body.invoice-page .cashier-products-page .variant-code-action-bar p strong {
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page .variant-code-action-bar p small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page .variant-code-action-bar .base-code-cancel-button,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-cancel {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page .variant-code-action-bar .base-code-cancel-button:hover,
body.invoice-page .cashier-products-page .variant-code-action-bar .base-code-cancel-button:focus-visible,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-cancel:hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-cancel:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-focus) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-products-page .variant-code-action-bar .invoice-print-button,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-table-tools .invoice-print-button,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-actions .invoice-print-button:not(:disabled) {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-accent)) !important;
  border-color: color-mix(in srgb, var(--ui-primary) 54%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary) 18%, transparent) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page .variant-code-action-bar .invoice-print-button:hover,
body.invoice-page .cashier-products-page .variant-code-action-bar .invoice-print-button:focus-visible,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-table-tools .invoice-print-button:hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-table-tools .invoice-print-button:focus-visible,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-actions .invoice-print-button:not(:disabled):hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-actions .invoice-print-button:not(:disabled):focus-visible {
  background: linear-gradient(135deg, var(--ui-primary-hover), var(--ui-accent)) !important;
  border-color: var(--ui-focus) !important;
}

body.invoice-page .cashier-products-page .variant-code-create-panel button:disabled,
body.invoice-page .cashier-products-page #cashier-variant-code-database button:disabled,
body.invoice-page .cashier-products-page #cashier-variant-code-database input:disabled,
body.invoice-page .cashier-products-page #cashier-variant-code-database select:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.58;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database input[readonly] {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-table-tools,
body.invoice-page .cashier-products-page #cashier-variant-code-database .variant-code-edit-form,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-base-code-meta {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-secondary-link {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-secondary-link:hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-secondary-link:focus-visible {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-focus) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database details.cashier-variant-code-card {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database details.cashier-variant-code-card:hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database details.cashier-variant-code-card[open] {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ui-primary) 15%, transparent) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database details.cashier-variant-code-card > summary {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-hover)) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database details.cashier-variant-code-card > summary:hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database details.cashier-variant-code-card > summary:focus-visible,
body.invoice-page .cashier-products-page #cashier-variant-code-database details.cashier-variant-code-card[open] > summary {
  background: linear-gradient(135deg, var(--ui-primary-hover), var(--ui-accent)) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-variant-code-id,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-variant-code-count {
  color: var(--ui-on-primary) !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-variant-code-detail,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-summary-open-label {
  color: color-mix(in srgb, var(--ui-on-primary) 82%, transparent) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-variant-code-count {
  background: color-mix(in srgb, var(--ui-on-primary) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--ui-on-primary) 38%, transparent) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-summary-chevron {
  border-color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-base-code-meta > span {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone strong,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone small {
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone .cashier-product-delete-form {
  border-color: var(--ui-danger-soft) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone .cashier-product-delete-form button {
  background: var(--ui-surface) !important;
  border-color: var(--ui-danger) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone .cashier-product-delete-form button:hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone .cashier-product-delete-form button:focus-visible {
  background: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .custom-order-combo-menu,
body.invoice-page .cashier-products-page .variant-code-workspace .cashier-product-combo-menu {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .custom-order-combo-option {
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .custom-order-combo-option:hover,
body.invoice-page .cashier-products-page .variant-code-workspace .custom-order-combo-option:focus-visible {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .base-code-form-status,
body.invoice-page .cashier-products-page .variant-code-workspace .base-code-page-status {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .base-code-form-status.is-dirty {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border)) !important;
  color: var(--ui-warning) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .base-code-form-status.is-loading {
  background: var(--ui-info-soft) !important;
  border-color: color-mix(in srgb, var(--ui-info) 30%, var(--ui-border)) !important;
  color: var(--ui-info) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .base-code-form-status.is-error,
body.invoice-page .cashier-products-page .variant-code-workspace .base-code-page-status.is-error {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .cashier-products-page .variant-code-workspace .base-code-page-status.is-success {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border)) !important;
  color: var(--ui-success) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-pagination,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-page-link,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-page-gap {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-page-link:hover,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-page-link:focus-visible,
body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-page-link.is-active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-page-link.is-disabled {
  color: var(--ui-text-muted) !important;
  opacity: 0.55;
}

body.invoice-page .cashier-products-page #cashier-variant-code-database .cashier-empty-state {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text) !important;
}

/* Financial journal: heuristic-friendly, theme-driven ledger workspace. */
body.invoice-page:has(.financial-journal-page) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .invoice-builder-head,
body.invoice-page .financial-journal-page .cashier-panel,
body.invoice-page .financial-journal-page .financial-journal-summary-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .invoice-builder-head {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: clamp(18px, 3vw, 30px) !important;
}

body.invoice-page .financial-journal-page .auth-brand,
body.invoice-page .financial-journal-page .dashboard-kicker {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .financial-journal-page .auth-brand b {
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .financial-journal-page h1,
body.invoice-page .financial-journal-page h2,
body.invoice-page .financial-journal-page strong,
body.invoice-page .financial-journal-page b,
body.invoice-page .financial-journal-page label {
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .invoice-builder-head p:not(.auth-brand),
body.invoice-page .financial-journal-page .packing-panel-head small,
body.invoice-page .financial-journal-page .financial-journal-summary-card span,
body.invoice-page .financial-journal-page .financial-journal-summary-card small,
body.invoice-page .financial-journal-page .financial-journal-page-tools > span,
body.invoice-page .financial-journal-page .financial-journal-pagination > span {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card {
  border-radius: var(--ui-radius-md) !important;
  overflow: hidden;
  position: relative;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card::before {
  background: var(--ui-primary) !important;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 4px;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card.is-success::before {
  background: var(--ui-success) !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card.is-warning::before {
  background: var(--ui-warning) !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card.is-danger::before {
  background: var(--ui-danger) !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card.is-info::before {
  background: var(--ui-info) !important;
}

body.invoice-page .financial-journal-page .cashier-inline-note {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-warning) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filter-toggle,
body.invoice-page .financial-journal-page .cashier-action-button:not(.cashier-action-ghost):not(.financial-journal-delete-confirm) {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary) 18%, transparent) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filter-toggle:hover,
body.invoice-page .financial-journal-page .financial-journal-filter-toggle:focus-visible,
body.invoice-page .financial-journal-page .cashier-action-button:not(.cashier-action-ghost):not(.financial-journal-delete-confirm):hover,
body.invoice-page .financial-journal-page .cashier-action-button:not(.cashier-action-ghost):not(.financial-journal-delete-confirm):focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  color: var(--ui-on-primary) !important;
  filter: none !important;
}

body.invoice-page .financial-journal-page .cashier-action-ghost {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .financial-journal-page .cashier-action-ghost:hover,
body.invoice-page .financial-journal-page .cashier-action-ghost:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  color: var(--ui-primary-hover) !important;
  filter: none !important;
}

body.invoice-page .financial-journal-page .financial-journal-filter-badge {
  background: var(--ui-on-primary) !important;
  border-radius: 999px;
  color: var(--ui-primary-hover) !important;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  text-transform: uppercase;
}

body.invoice-page .financial-journal-page .financial-journal-filters {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filters label,
body.invoice-page .financial-journal-page .financial-journal-page-jump {
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filters input,
body.invoice-page .financial-journal-page .financial-journal-filters select,
body.invoice-page .financial-journal-page .financial-journal-page-jump input {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filters input::placeholder,
body.invoice-page .financial-journal-page .financial-journal-page-jump input::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 76%, transparent) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filters input:hover,
body.invoice-page .financial-journal-page .financial-journal-filters select:hover,
body.invoice-page .financial-journal-page .financial-journal-page-jump input:hover {
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filters input:focus,
body.invoice-page .financial-journal-page .financial-journal-filters select:focus,
body.invoice-page .financial-journal-page .financial-journal-page-jump input:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: 0;
}

body.invoice-page .financial-journal-page .cashier-action-button.is-disabled,
body.invoice-page .financial-journal-page button:disabled,
body.invoice-page .financial-journal-page input:disabled,
body.invoice-page .financial-journal-page select:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.56;
}

body.invoice-page .financial-journal-page .financial-journal-table {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row-head {
  background: var(--ui-overlay-solid) !important;
  border-color: var(--ui-border) !important;
  box-shadow: inset 0 -1px 0 var(--ui-border) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row-head span {
  color: var(--ui-on-primary) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head):nth-child(odd) {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):hover,
body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):focus-within {
  background: color-mix(in srgb, var(--ui-warning) 16%, var(--ui-surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):hover::before,
body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):focus-within::before {
  background: var(--ui-warning) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head)::before {
  background: var(--ui-border) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row.is-checked {
  background: color-mix(in srgb, var(--ui-success) 18%, var(--ui-surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-success) 40%, var(--ui-border)) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row.is-checked:hover,
body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row.is-checked:focus-within {
  background: color-mix(in srgb, var(--ui-success) 24%, var(--ui-surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-success) 58%, var(--ui-border)) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row.is-checked::before {
  background: var(--ui-success) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) strong,
body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) span,
body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) b {
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row a {
  color: var(--ui-primary) !important;
  text-decoration-color: var(--ui-primary-border) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row a:hover,
body.invoice-page .financial-journal-page .financial-journal-row a:focus-visible {
  color: var(--ui-primary-hover) !important;
  text-decoration-color: var(--ui-primary-hover) !important;
}

body.invoice-page .financial-journal-page .financial-journal-check input {
  accent-color: var(--ui-primary) !important;
}

body.invoice-page .financial-journal-page .financial-journal-icon-button {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .financial-journal-page .financial-journal-icon-button:hover,
body.invoice-page .financial-journal-page .financial-journal-icon-button:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .financial-journal-page .financial-journal-icon-button.is-danger {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 28%, var(--ui-border)) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .financial-journal-page .financial-journal-icon-button.is-danger:hover,
body.invoice-page .financial-journal-page .financial-journal-icon-button.is-danger:focus-visible {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-danger) 18%, transparent) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .financial-journal-page .cashier-empty-state {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .cashier-empty-state p {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  max-width: min(92vw, 520px);
  padding: 24px;
  width: 100%;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal::backdrop {
  background: var(--ui-overlay) !important;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal-head {
  align-items: center;
  display: flex;
  gap: 14px;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal-head h2 {
  margin: 5px 0 0;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal-icon {
  align-items: center;
  background: var(--ui-danger-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-danger) 28%, var(--ui-border));
  border-radius: var(--ui-radius-md);
  color: var(--ui-danger) !important;
  display: inline-flex;
  flex: 0 0 auto;
  height: 48px;
  justify-content: center;
  width: 48px;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal-icon svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 22px;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal > p {
  color: var(--ui-text-muted) !important;
  line-height: 1.55;
  margin: 18px 0 22px;
}

body.invoice-page .financial-journal-page .financial-journal-delete-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

body.invoice-page .financial-journal-page .financial-journal-delete-confirm {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .financial-journal-page .financial-journal-delete-confirm:hover,
body.invoice-page .financial-journal-page .financial-journal-delete-confirm:focus-visible {
  background: color-mix(in srgb, var(--ui-danger) 86%, var(--ui-overlay-solid)) !important;
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-danger) 18%, transparent) !important;
}

body.invoice-page .financial-journal-page *:focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px;
}

/* Journal refinement pass: denser hierarchy, explicit status, and safe navigation space. */
body.invoice-page .financial-journal-page {
  gap: 14px !important;
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

body.invoice-page .financial-journal-page .invoice-builder-head {
  align-items: center !important;
  min-height: 0 !important;
  padding: 20px 24px !important;
}

body.invoice-page .financial-journal-page .invoice-builder-head .auth-brand {
  margin: 0 0 10px !important;
  padding: 5px 10px !important;
}

body.invoice-page .financial-journal-page .invoice-builder-head h1 {
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

body.invoice-page .financial-journal-page .invoice-builder-head p:not(.auth-brand) {
  line-height: 1.45 !important;
  margin: 10px 0 0 !important;
}

body.invoice-page .financial-journal-page .cashier-head-actions {
  align-self: center !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary {
  gap: 10px !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card {
  gap: 5px !important;
  min-height: 112px !important;
  padding: 15px 16px 15px 20px !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-card strong {
  font-size: clamp(1.3rem, 2vw, 1.75rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere;
}

body.invoice-page .financial-journal-page .financial-journal-summary-status {
  align-items: center;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px;
  display: inline-flex !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  gap: 6px;
  justify-self: start;
  margin-top: 2px !important;
  padding: 4px 8px;
  width: fit-content;
}

body.invoice-page .financial-journal-page .financial-journal-summary-status::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 7px;
  width: 7px;
}

body.invoice-page .financial-journal-page .financial-journal-summary-status.is-success {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 28%, var(--ui-border)) !important;
  color: var(--ui-success) !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-status.is-warning {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 28%, var(--ui-border)) !important;
  color: var(--ui-warning) !important;
}

body.invoice-page .financial-journal-page .financial-journal-summary-status.is-danger {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 28%, var(--ui-border)) !important;
  color: var(--ui-danger) !important;
}

body.invoice-page .financial-journal-page .cashier-panel {
  gap: 12px !important;
  padding: 18px !important;
}

body.invoice-page .financial-journal-page .packing-panel-head,
body.invoice-page .financial-journal-page .packing-panel-head h2,
body.invoice-page .financial-journal-page .packing-panel-head small {
  margin-block: 0 !important;
}

body.invoice-page .financial-journal-page .packing-panel-head h2 {
  margin-top: 7px !important;
}

body.invoice-page .financial-journal-page .packing-panel-head small {
  margin-top: 4px !important;
}

body.invoice-page .financial-journal-page .cashier-inline-note {
  display: block;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
}

body.invoice-page .financial-journal-page .cashier-inline-note strong {
  color: var(--ui-warning) !important;
}

body.invoice-page .financial-journal-page .financial-journal-filter-panel {
  margin: 8px 0 4px !important;
}

body.invoice-page .financial-journal-page .financial-journal-filter-toggle,
body.invoice-page .financial-journal-page .cashier-action-button,
body.invoice-page .financial-journal-page .financial-journal-filters input,
body.invoice-page .financial-journal-page .financial-journal-filters select,
body.invoice-page .financial-journal-page .financial-journal-page-jump input {
  min-height: 44px !important;
}

body.invoice-page .financial-journal-page .financial-journal-filters {
  gap: 10px !important;
  padding: 12px !important;
}

body.invoice-page .financial-journal-page .financial-journal-page-tools {
  margin: 4px 0 8px !important;
}

body.invoice-page .financial-journal-page .financial-journal-page-tools-bottom {
  margin: 10px 0 4px !important;
}

body.invoice-page .financial-journal-page .financial-journal-row,
body.invoice-page .financial-journal-page .financial-journal-row-head {
  grid-template-columns: minmax(108px, 0.68fr) minmax(150px, 0.95fr) minmax(112px, 0.66fr) minmax(112px, 0.66fr) minmax(210px, 1.2fr) minmax(108px, 0.6fr) minmax(104px, 0.56fr) !important;
}

body.invoice-page .financial-journal-page .financial-journal-row-head {
  min-height: 48px !important;
}

body.invoice-page .financial-journal-page .financial-journal-row-head span,
body.invoice-page .financial-journal-page .financial-journal-row-head span:nth-child(3),
body.invoice-page .financial-journal-page .financial-journal-row-head span:nth-child(4) {
  color: var(--ui-on-primary) !important;
  font-weight: 800 !important;
  justify-self: start !important;
  opacity: 1 !important;
  text-align: left !important;
  visibility: visible !important;
}

body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) {
  min-height: 72px !important;
}

body.invoice-page .financial-journal-page .financial-journal-check {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  justify-content: flex-start;
  min-height: 44px;
  width: auto;
}

body.invoice-page .financial-journal-page .financial-journal-check input {
  flex: 0 0 auto;
  height: 22px !important;
  width: 22px !important;
}

body.invoice-page .financial-journal-page .financial-journal-check-state {
  background: var(--ui-warning-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 28%, var(--ui-border));
  border-radius: 999px;
  color: var(--ui-warning) !important;
  font-size: 0.68rem;
  font-weight: 800 !important;
  line-height: 1;
  padding: 5px 7px;
}

body.invoice-page .financial-journal-page .is-checked .financial-journal-check-state {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 28%, var(--ui-border));
  color: var(--ui-success) !important;
}

body.invoice-page .financial-journal-page .financial-journal-icon-button {
  height: 44px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  width: 44px !important;
}

body.invoice-page .financial-journal-page .financial-journal-actions {
  gap: 6px !important;
}

@media (max-width: 980px) {
  body.invoice-page .financial-journal-page .financial-journal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.invoice-page .financial-journal-page .financial-journal-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.invoice-page .financial-journal-page {
    padding-inline: 12px !important;
  }

  body.invoice-page .financial-journal-page .invoice-builder-head,
  body.invoice-page .financial-journal-page .cashier-panel {
    padding: 16px !important;
  }

  body.invoice-page .financial-journal-page .cashier-head-actions,
  body.invoice-page .financial-journal-page .financial-journal-filters,
  body.invoice-page .financial-journal-page .financial-journal-filter-actions,
  body.invoice-page .financial-journal-page .financial-journal-delete-modal-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.invoice-page .financial-journal-page .cashier-head-actions,
  body.invoice-page .financial-journal-page .financial-journal-filter-actions,
  body.invoice-page .financial-journal-page .financial-journal-delete-modal-actions {
    display: grid;
  }

  body.invoice-page .financial-journal-page .cashier-head-actions .cashier-action-button,
  body.invoice-page .financial-journal-page .financial-journal-filter-actions .cashier-action-button,
  body.invoice-page .financial-journal-page .financial-journal-delete-modal-actions .cashier-action-button {
    min-height: 44px;
    width: 100%;
  }

  body.invoice-page .financial-journal-page .financial-journal-filter-toggle span {
    display: inline;
  }

  body.invoice-page .financial-journal-page .financial-journal-table {
    background: transparent !important;
    border: 0 !important;
    display: grid;
    gap: 10px;
    max-height: none;
    overflow: visible;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-head {
    display: none;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow) !important;
    display: grid;
    font-size: 0.84rem;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0;
    padding: 12px 12px 12px 16px;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head)::before {
    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
    inset: 0 auto 0 0;
    width: 4px;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) > [data-label] {
    border-bottom: 1px solid var(--ui-border);
    display: grid;
    font-size: 0.84rem;
    gap: 4px;
    justify-items: start;
    min-height: 66px;
    overflow-wrap: anywhere;
    padding: 10px 8px;
    text-align: left;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) > [data-label]::before {
    color: var(--ui-text-muted) !important;
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) > [data-label="Data sumber"] {
    grid-column: 1 / -1;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) > [data-label="Status cek"],
  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) > [data-label="Aksi"] {
    border-bottom: 0;
  }

  body.invoice-page .financial-journal-page .financial-journal-row .is-amount,
  body.invoice-page .financial-journal-page .financial-journal-row a,
  body.invoice-page .financial-journal-page .financial-journal-row small {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  body.invoice-page .financial-journal-page .financial-journal-delete-modal {
    padding: 18px;
  }
}

@media (max-width: 480px) {
  body.invoice-page .financial-journal-page .financial-journal-summary {
    grid-template-columns: 1fr !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-summary-card {
    min-height: 96px !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) {
    grid-template-columns: 1fr !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) > [data-label] {
    grid-column: 1 / -1;
    min-height: 58px;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) > [data-label="Status cek"] {
    border-bottom: 1px solid var(--ui-border);
  }
}

body.invoice-page .cashier-products-page .variant-code-workspace *:focus-visible {
  outline-color: var(--ui-focus) !important;
}

/* Koreksi stok: responsive, theme-bound workspace */
body:has(.cashier-stock-adjustments-page) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body:has(.cashier-stock-adjustments-page) .shell {
  background: var(--ui-bg) !important;
}

.cashier-stock-adjustments-page {
  color: var(--ui-text) !important;
  gap: 16px !important;
  max-width: 1440px !important;
  width: 100%;
}

.cashier-stock-adjustments-page .stock-adjustment-hero,
.cashier-stock-adjustments-page .stock-summary-card,
.cashier-stock-adjustments-page .cashier-panel,
.cashier-stock-adjustments-page .stock-adjustment-history,
.cashier-stock-adjustments-page .cashier-cash-in-detail-view,
.cashier-stock-adjustments-page .custom-order-history-section {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.cashier-stock-adjustments-page .stock-adjustment-hero,
.cashier-stock-adjustments-page .stock-summary-card,
.cashier-stock-adjustments-page .cashier-panel {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
}

.cashier-stock-adjustments-page .stock-adjustment-hero {
  align-items: center !important;
  min-height: 0 !important;
  padding: 20px 24px !important;
}

.cashier-stock-adjustments-page .stock-adjustment-hero .auth-brand,
.cashier-stock-adjustments-page .dashboard-kicker {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary-hover) !important;
  display: inline-flex !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 8px !important;
  padding: 5px 9px !important;
  text-transform: uppercase;
  width: auto !important;
}

.cashier-stock-adjustments-page .stock-adjustment-hero h1,
.cashier-stock-adjustments-page .packing-panel-head h2,
.cashier-stock-adjustments-page .cashier-cash-in-row strong,
.cashier-stock-adjustments-page .cashier-cash-in-row span,
.cashier-stock-adjustments-page .custom-order-history-detail-grid b,
.cashier-stock-adjustments-page .custom-order-history-section strong {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

.cashier-stock-adjustments-page .stock-adjustment-hero h1 {
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

.cashier-stock-adjustments-page .stock-adjustment-hero p:not(.auth-brand),
.cashier-stock-adjustments-page .packing-panel-head small,
.cashier-stock-adjustments-page .stock-summary-card span,
.cashier-stock-adjustments-page .stock-summary-card small,
.cashier-stock-adjustments-page .stock-field-help,
.cashier-stock-adjustments-page .stock-form-status,
.cashier-stock-adjustments-page .cashier-cash-in-row span small,
.cashier-stock-adjustments-page .custom-order-history-detail-grid small,
.cashier-stock-adjustments-page .custom-order-history-section p {
  color: var(--ui-text-muted) !important;
}

.cashier-stock-adjustments-page .stock-adjustment-hero p:not(.auth-brand) {
  line-height: 1.45 !important;
  margin: 8px 0 0 !important;
  max-width: 820px;
}

.cashier-stock-adjustments-page .stock-adjustment-summary {
  gap: 12px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.cashier-stock-adjustments-page .stock-summary-card {
  gap: 7px !important;
  min-height: 126px;
  overflow: hidden;
  padding: 18px !important;
  position: relative;
}

.cashier-stock-adjustments-page .stock-summary-card::before {
  background: var(--ui-primary) !important;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 4px;
}

.cashier-stock-adjustments-page .stock-summary-in::before {
  background: var(--ui-success) !important;
}

.cashier-stock-adjustments-page .stock-summary-out::before {
  background: var(--ui-danger) !important;
}

.cashier-stock-adjustments-page .stock-summary-value::before {
  background: var(--ui-info) !important;
}

.cashier-stock-adjustments-page .stock-summary-card strong {
  color: var(--ui-text) !important;
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  line-height: 1.15;
}

.cashier-stock-adjustments-page .cashier-workspace {
  gap: 16px !important;
}

.cashier-stock-adjustments-page .cashier-panel {
  gap: 18px !important;
  padding: 22px !important;
}

.cashier-stock-adjustments-page .packing-panel-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.cashier-stock-adjustments-page .packing-panel-head h2 {
  margin: 0 0 4px !important;
}

.cashier-stock-adjustments-page .stock-adjustment-form {
  gap: 16px 18px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.cashier-stock-adjustments-page .stock-adjustment-form > label,
.cashier-stock-adjustments-page .stock-adjustment-form > .stock-product-field {
  color: var(--ui-text) !important;
  display: grid;
  font-weight: 800;
  gap: 7px;
  min-width: 0;
}

.cashier-stock-adjustments-page .stock-adjustment-form label > span:first-child,
.cashier-stock-adjustments-page .stock-adjustment-form label > span:first-child em {
  color: var(--ui-text) !important;
  font-style: normal;
}

.cashier-stock-adjustments-page .stock-adjustment-form label > span:first-child em {
  color: var(--ui-text-muted) !important;
  font-size: 0.72rem;
  font-weight: 600;
}

.cashier-stock-adjustments-page .stock-adjustment-form input,
.cashier-stock-adjustments-page .stock-adjustment-form select,
.cashier-stock-adjustments-page .stock-adjustment-form textarea,
.cashier-stock-adjustments-page .financial-journal-filters input {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  min-height: 48px;
}

.cashier-stock-adjustments-page .stock-adjustment-form textarea {
  line-height: 1.5;
  min-height: 92px;
  resize: vertical;
}

.cashier-stock-adjustments-page .stock-adjustment-form input::placeholder,
.cashier-stock-adjustments-page .stock-adjustment-form textarea::placeholder,
.cashier-stock-adjustments-page .financial-journal-filters input::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1;
}

.cashier-stock-adjustments-page .stock-input-unit {
  align-items: center;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
}

.cashier-stock-adjustments-page .stock-input-unit-prefix {
  grid-template-columns: auto minmax(0, 1fr);
}

.cashier-stock-adjustments-page .stock-input-unit input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 0;
  width: 100%;
}

.cashier-stock-adjustments-page .stock-input-unit > b {
  color: var(--ui-text-muted) !important;
  font-size: 0.78rem;
  padding: 0 14px;
}

.cashier-stock-adjustments-page .stock-field-readonly .stock-input-unit,
.cashier-stock-adjustments-page .stock-field-readonly input[readonly] {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

.cashier-stock-adjustments-page .stock-field-result .stock-input-unit,
.cashier-stock-adjustments-page .stock-field-result input[readonly] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

.cashier-stock-adjustments-page .stock-field-help,
.cashier-stock-adjustments-page .stock-field-error,
.cashier-stock-adjustments-page .stock-negative-warning {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.4;
}

.cashier-stock-adjustments-page .stock-field-error,
.cashier-stock-adjustments-page .stock-negative-warning {
  color: var(--ui-danger-strong) !important;
}

.cashier-stock-adjustments-page .stock-field-error[hidden],
.cashier-stock-adjustments-page .stock-negative-warning[hidden] {
  display: none !important;
}

.cashier-stock-adjustments-page [aria-invalid="true"],
.cashier-stock-adjustments-page .stock-input-unit:has([aria-invalid="true"]) {
  border-color: var(--ui-danger) !important;
}

.cashier-stock-adjustments-page input:focus-visible,
.cashier-stock-adjustments-page select:focus-visible,
.cashier-stock-adjustments-page textarea:focus-visible,
.cashier-stock-adjustments-page button:focus-visible,
.cashier-stock-adjustments-page a:focus-visible,
.stock-confirm-dialog button:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 20%, transparent) !important;
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px;
}

.cashier-stock-adjustments-page .cashier-action-button,
.cashier-stock-adjustments-page .invoice-print-button,
.stock-confirm-dialog .cashier-action-button {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-on-primary) !important;
  min-height: 44px;
  text-shadow: none !important;
}

.cashier-stock-adjustments-page .cashier-action-secondary,
.cashier-stock-adjustments-page .cashier-action-ghost,
.stock-confirm-dialog .cashier-action-ghost {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

.cashier-stock-adjustments-page .cashier-action-button:hover,
.cashier-stock-adjustments-page .invoice-print-button:hover,
.stock-confirm-dialog .cashier-action-button:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

.cashier-stock-adjustments-page button:disabled,
.cashier-stock-adjustments-page .is-disabled,
.stock-confirm-dialog button:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.65;
}

.cashier-stock-adjustments-page .cashier-form-actions {
  align-items: center;
  border-top: 1px solid var(--ui-border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-top: 18px;
}

.cashier-stock-adjustments-page .stock-product-field > label {
  color: var(--ui-text) !important;
  font-weight: 800;
}

.cashier-stock-adjustments-page .stock-adjustment-form-panel,
.cashier-stock-adjustments-page .stock-product-field {
  overflow: visible !important;
}

.cashier-stock-adjustments-page .stock-product-field {
  position: relative;
  z-index: 12;
}

.cashier-stock-adjustments-page .stock-product-combobox {
  display: block;
  position: relative;
}

.cashier-stock-adjustments-page .stock-product-search-shell {
  align-items: center;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.cashier-stock-adjustments-page .stock-product-search-shell:focus-within {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 20%, transparent) !important;
}

.cashier-stock-adjustments-page .stock-product-search-shell > svg {
  fill: none;
  height: 20px;
  margin-left: 14px;
  stroke: var(--ui-text-muted) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

.cashier-stock-adjustments-page .stock-product-search-shell input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
  width: 100%;
}

.cashier-stock-adjustments-page .stock-product-search-shell input:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.cashier-stock-adjustments-page .stock-product-clear {
  align-items: center;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  color: var(--ui-text-muted) !important;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1.2rem;
  height: 36px;
  justify-content: center;
  margin-right: 8px;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  width: 36px;
}

.cashier-stock-adjustments-page .stock-product-clear:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

.cashier-stock-adjustments-page .stock-product-clear[hidden],
.cashier-stock-adjustments-page .stock-product-results[hidden] {
  display: none !important;
}

.cashier-stock-adjustments-page .stock-product-results {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid;
  left: 0;
  max-height: min(420px, 58vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
}

.cashier-stock-adjustments-page .stock-product-results [role="option"] {
  background: var(--ui-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 4px;
  min-height: 76px;
  padding: 12px 14px !important;
  text-align: left;
  width: 100%;
}

.cashier-stock-adjustments-page .stock-product-results [role="option"]:hover,
.cashier-stock-adjustments-page .stock-product-results [role="option"].is-active,
.cashier-stock-adjustments-page .stock-product-results [role="option"][aria-selected="true"] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

.cashier-stock-adjustments-page .stock-product-results [role="option"] strong {
  color: var(--ui-text) !important;
  font-size: 0.9rem;
}

.cashier-stock-adjustments-page .stock-product-results [role="option"] span {
  color: var(--ui-text) !important;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cashier-stock-adjustments-page .stock-product-results [role="option"] small,
.cashier-stock-adjustments-page .stock-product-result-hint,
.cashier-stock-adjustments-page .stock-product-empty {
  color: var(--ui-text-muted) !important;
  font-size: 0.74rem;
  line-height: 1.4;
}

.cashier-stock-adjustments-page .stock-product-result-hint,
.cashier-stock-adjustments-page .stock-product-empty {
  background: var(--ui-surface-soft) !important;
  display: block;
  padding: 12px 14px;
}

.cashier-stock-adjustments-page .stock-product-search-status {
  color: var(--ui-text-muted) !important;
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

.cashier-stock-adjustments-page .stock-product-search-status[data-state="selected"],
.cashier-stock-adjustments-page .stock-product-search-status[data-state="results"] {
  color: var(--ui-success-strong) !important;
}

.cashier-stock-adjustments-page .stock-product-search-status[data-state="loading"] {
  color: var(--ui-info-strong) !important;
}

.cashier-stock-adjustments-page .stock-product-search-status[data-state="error"],
.cashier-stock-adjustments-page .stock-product-search-status[data-state="empty"] {
  color: var(--ui-danger-strong) !important;
}

.cashier-stock-adjustments-page .stock-active-filter {
  align-items: center;
  background: var(--ui-info-soft) !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-info-strong) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
}

.cashier-stock-adjustments-page .stock-active-filter a {
  color: var(--ui-primary-hover) !important;
  font-weight: 800;
  margin-left: auto;
}

.cashier-stock-adjustments-page .stock-filter-panel {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
}

.cashier-stock-adjustments-page .financial-journal-filter-toggle {
  color: var(--ui-text) !important;
  min-height: 44px;
}

.cashier-stock-adjustments-page .financial-journal-filter-toggle svg {
  stroke: var(--ui-primary) !important;
}

.cashier-stock-adjustments-page .financial-journal-filters label {
  color: var(--ui-text) !important;
}

.cashier-stock-adjustments-page .stock-adjustment-history {
  max-height: none !important;
  overflow: visible !important;
}

.cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  grid-template-columns: 140px minmax(240px, 1.35fr) minmax(160px, 0.8fr) minmax(130px, 0.65fr) minmax(120px, 0.65fr) !important;
  min-height: 76px;
}

.cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row-head {
  background: var(--ui-overlay-solid) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  min-height: 50px;
  position: sticky;
  top: 0;
}

.cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row-head span {
  color: var(--ui-on-overlay) !important;
}

.cashier-stock-adjustments-page .stock-movement-badge {
  align-items: center;
  background: var(--ui-success-soft) !important;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-success-strong) !important;
  display: inline-flex;
  font-size: 0.72rem;
  gap: 5px;
  padding: 5px 8px;
  width: fit-content;
}

.cashier-stock-adjustments-page .stock-movement-badge.is-out {
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger-strong) !important;
}

.cashier-stock-adjustments-page .cashier-cash-in-detail-view {
  border-top: 1px solid var(--ui-border) !important;
}

.cashier-stock-adjustments-page .cashier-history-pager .is-selected {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

.stock-confirm-dialog {
  background: transparent !important;
  border: 0 !important;
  color: var(--ui-text) !important;
  max-width: min(92vw, 560px);
  padding: 0;
  width: 100%;
}

.stock-confirm-dialog::backdrop {
  background: var(--ui-overlay) !important;
}

.stock-confirm-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-modal);
  color: var(--ui-text) !important;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  padding: 24px;
}

.stock-confirm-icon {
  align-items: center;
  background: var(--ui-warning-soft) !important;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-warning-strong) !important;
  display: flex;
  font-size: 1.25rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.stock-confirm-card h2,
.stock-confirm-card p,
.stock-confirm-summary b {
  color: var(--ui-text) !important;
}

.stock-confirm-card h2,
.stock-confirm-card p {
  margin: 0;
}

.stock-confirm-card .dashboard-kicker,
.stock-confirm-summary small {
  color: var(--ui-text-muted) !important;
}

.stock-confirm-summary,
.stock-confirm-actions {
  grid-column: 1 / -1;
}

.stock-confirm-summary {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px;
}

.stock-confirm-summary span {
  display: grid;
  gap: 4px;
}

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

/* Stock adjustments uses one consistent bottom dock on desktop and mobile. */
body:has(.cashier-stock-adjustments-page) > .topbar {
  display: none !important;
}

body:has(.cashier-stock-adjustments-page) > .home-bottom-nav {
  align-items: stretch;
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 22px;
  bottom: 16px;
  display: flex !important;
  gap: 4px;
  left: 50%;
  min-height: 72px;
  padding: 6px;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
}

body:has(.cashier-stock-adjustments-page) > .home-bottom-nav a,
body:has(.cashier-stock-adjustments-page) > .home-bottom-nav button {
  border-radius: 15px;
  flex: 0 0 104px;
  min-width: 0;
  padding: 7px 10px;
}

body:has(.cashier-stock-adjustments-page) > .home-bottom-nav small {
  line-height: 1.15;
}

body:has(.cashier-stock-adjustments-page) .shell {
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

@media (max-width: 720px) {
  body:has(.cashier-stock-adjustments-page) > .home-bottom-nav {
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 20px 20px 0 0;
    border-right: 0 !important;
    bottom: 0;
    gap: 0;
    left: 0;
    padding: 6px max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    right: 0;
    transform: none;
    width: auto;
  }

  body:has(.cashier-stock-adjustments-page) > .home-bottom-nav a,
  body:has(.cashier-stock-adjustments-page) > .home-bottom-nav button {
    flex: 1 1 0;
    padding: 6px 2px;
  }

  body:has(.cashier-stock-adjustments-page) > .home-bottom-nav small {
    font-size: 10px;
  }

  body:has(.cashier-stock-adjustments-page) .shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .cashier-stock-adjustments-page {
    padding-inline: 12px;
  }

  .cashier-stock-adjustments-page .stock-adjustment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cashier-stock-adjustments-page .stock-adjustment-form {
    grid-template-columns: 1fr !important;
  }

  .cashier-stock-adjustments-page .stock-adjustment-form .cashier-span {
    grid-column: auto !important;
  }

  .cashier-stock-adjustments-page .cashier-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cashier-stock-adjustments-page .cashier-form-actions button {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .cashier-stock-adjustments-page {
    gap: 12px !important;
    padding-inline: 8px;
  }

  .cashier-stock-adjustments-page .stock-adjustment-hero,
  .cashier-stock-adjustments-page .cashier-panel {
    padding: 16px !important;
  }

  .cashier-stock-adjustments-page .stock-adjustment-hero {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .cashier-stock-adjustments-page .stock-adjustment-hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
  }

  .cashier-stock-adjustments-page .cashier-head-actions,
  .cashier-stock-adjustments-page .cashier-head-actions a,
  .cashier-stock-adjustments-page .cashier-panel-actions,
  .cashier-stock-adjustments-page .cashier-panel-actions form,
  .cashier-stock-adjustments-page .cashier-panel-actions button {
    display: grid !important;
    max-width: none !important;
    width: 100% !important;
  }

  .cashier-stock-adjustments-page .packing-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history {
    background: transparent !important;
    border: 0 !important;
    display: grid;
    gap: 10px;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row-head {
    display: none !important;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-edit {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row:not(.cashier-cash-in-row-head) {
    border: 0 !important;
    display: grid !important;
    gap: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0;
    padding: 6px !important;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row:not(.cashier-cash-in-row-head) > [data-label] {
    border-bottom: 1px solid var(--ui-border);
    display: grid;
    gap: 5px;
    justify-items: start;
    min-height: 76px;
    padding: 10px;
    text-align: left;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row:not(.cashier-cash-in-row-head) > [data-label]::before {
    color: var(--ui-text-muted) !important;
    content: attr(data-label);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row:not(.cashier-cash-in-row-head) > [data-label="Produk"] {
    grid-column: 1 / -1;
  }

  .cashier-stock-adjustments-page .cashier-history-pager {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cashier-stock-adjustments-page .cashier-history-pager a {
    min-height: 44px;
    min-width: 0;
    width: 100%;
  }

  .cashier-stock-adjustments-page .stock-active-filter {
    align-items: flex-start;
    flex-direction: column;
  }

  .cashier-stock-adjustments-page .stock-active-filter a {
    margin-left: 0;
  }

  .stock-confirm-card {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .stock-confirm-summary,
  .stock-confirm-actions {
    grid-column: auto;
  }

  .stock-confirm-summary {
    grid-template-columns: 1fr;
  }

  .stock-confirm-actions {
    display: grid;
  }

  .stock-confirm-actions button {
    min-height: 48px;
    width: 100%;
  }
}

@media (max-width: 479px) {
  .cashier-stock-adjustments-page .stock-adjustment-summary {
    grid-template-columns: 1fr !important;
  }

  .cashier-stock-adjustments-page .stock-summary-card {
    min-height: 104px;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row:not(.cashier-cash-in-row-head) {
    grid-template-columns: 1fr !important;
  }

  .cashier-stock-adjustments-page .stock-adjustment-history .cashier-cash-in-row:not(.cashier-cash-in-row-head) > [data-label] {
    grid-column: 1 / -1;
    min-height: 64px;
  }
}

@media (max-width: 720px) {
  body.invoice-page .cashier-products-page #cashier-variant-code-database {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .cashier-products-page .variant-code-action-bar,
  body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-actions,
  body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  body.invoice-page .cashier-products-page .variant-code-action-bar > div,
  body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) !important;
  }

  body.invoice-page .cashier-products-page .variant-code-action-bar > div,
  body.invoice-page .cashier-products-page .variant-code-action-bar button,
  body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-edit-actions button,
  body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone form,
  body.invoice-page .cashier-products-page #cashier-variant-code-database .base-code-danger-zone button {
    width: 100% !important;
  }
}

/* Pesanan Custom / detail riwayat dan editor Status Sablon. */
body.custom-order-history-modal-open {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  overflow: hidden !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal {
  background: var(--ui-overlay) !important;
  border: 0 !important;
  color: var(--ui-text) !important;
  height: min(900px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  max-width: min(980px, calc(100vw - 32px)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: min(980px, calc(100vw - 32px)) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal::backdrop {
  background: var(--ui-overlay) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal-panel {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal-header {
  align-items: center !important;
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 16px !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  padding: 12px 18px !important;
  position: relative !important;
  z-index: 4 !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal-header strong {
  color: var(--ui-text) !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal-header button {
  align-items: center !important;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-primary) !important;
  display: inline-flex !important;
  flex: 0 0 48px !important;
  font-size: 1.6rem !important;
  height: 48px !important;
  justify-content: center !important;
  min-width: 48px !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal-header button:hover {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal-body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 14px !important;
  scroll-padding-bottom: 92px !important;
}

body.invoice-page .custom-orders-page .custom-order-history-card-modal-body > .cashier-cash-in-detail-view,
body.invoice-page .custom-orders-page .custom-order-history-card-modal-body > .custom-order-edit-form {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.invoice-page .custom-orders-page .custom-order-history-section,
body.invoice-page .custom-orders-page .custom-order-history-detail-grid > span,
body.invoice-page .custom-orders-page .custom-order-history-payment > div > span,
body.invoice-page .custom-orders-page .custom-order-history-item-list > div,
body.invoice-page .custom-orders-page .custom-order-design-timeline > div > span {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page .custom-order-history-section > strong,
body.invoice-page .custom-orders-page .custom-order-history-detail-grid b,
body.invoice-page .custom-orders-page .custom-order-history-item-list b,
body.invoice-page .custom-orders-page .custom-order-history-payment b {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-section small,
body.invoice-page .custom-orders-page .custom-order-history-section p,
body.invoice-page .custom-orders-page .custom-order-history-detail-grid small,
body.invoice-page .custom-orders-page .custom-order-history-item-list small,
body.invoice-page .custom-orders-page .custom-order-history-item-list span {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] .custom-order-history-card-modal .custom-order-history-detail-grid {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-detail-grid > span {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  min-height: 92px !important;
  overflow: visible !important;
  padding: 12px !important;
}

body.invoice-page .custom-orders-page .custom-order-history-actions {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  bottom: 0 !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  display: flex !important;
  gap: 10px !important;
  margin-inline: 0 !important;
  padding: 10px !important;
  position: sticky !important;
  z-index: 3 !important;
}

body.invoice-page .custom-orders-page .custom-order-history-actions button,
body.invoice-page .custom-orders-page .custom-order-history-actions a {
  min-height: 48px !important;
  min-width: 48px !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-status.is-editable {
  overflow: visible !important;
  position: relative !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-trigger {
  align-items: center !important;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  cursor: pointer !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
  margin-top: 5px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  text-align: left !important;
  width: 100% !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-trigger b {
  color: var(--ui-warning-strong) !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-status.is-partial .custom-order-history-sablon-trigger b {
  color: var(--ui-info-strong) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-status.is-complete .custom-order-history-sablon-trigger b {
  color: var(--ui-success-strong) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-trigger svg {
  fill: none !important;
  flex: 0 0 20px !important;
  height: 20px !important;
  stroke: var(--ui-primary) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
  width: 20px !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-trigger:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

.custom-order-history-sablon-form[popover] {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: none;
  gap: 14px !important;
  inset: auto !important;
  left: var(--history-sablon-left) !important;
  margin: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  max-width: calc(100vw - 32px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 16px 16px !important;
  position: fixed !important;
  top: var(--history-sablon-top) !important;
  width: var(--history-sablon-width) !important;
}

.custom-order-history-sablon-form[popover]:popover-open {
  display: grid !important;
}

.custom-order-history-sablon-form-head {
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 3px !important;
  margin-inline: -16px !important;
  padding: 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.custom-order-history-sablon-form-head strong {
  color: var(--ui-text) !important;
  font-size: 1rem !important;
}

.custom-order-history-sablon-form-head small,
.custom-order-history-sablon-form label {
  color: var(--ui-text-muted) !important;
}

.custom-order-history-sablon-form label {
  display: grid !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  gap: 7px !important;
}

.custom-order-history-sablon-form select,
.custom-order-history-sablon-form input {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  font: inherit !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  width: 100% !important;
}

.custom-order-history-sablon-form select option {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

.custom-order-history-sablon-form select:hover,
.custom-order-history-sablon-form input:hover {
  border-color: var(--ui-primary-border) !important;
}

.custom-order-history-sablon-actions {
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border) !important;
  bottom: 0 !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0 -16px -16px !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  position: sticky !important;
  z-index: 2 !important;
}

.custom-order-history-sablon-actions button {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-weight: 850 !important;
  min-height: 48px !important;
  min-width: 0 !important;
}

.custom-order-history-sablon-actions button:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

.custom-order-history-sablon-actions button[type="submit"] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

.custom-order-history-sablon-actions button[type="submit"]:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page .custom-order-history-sablon-trigger:focus-visible,
.custom-order-history-sablon-form select:focus-visible,
.custom-order-history-sablon-form input:focus-visible,
.custom-order-history-sablon-form button:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px var(--ui-primary-soft) !important;
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

.custom-order-history-sablon-form select:disabled,
.custom-order-history-sablon-form input:disabled,
.custom-order-history-sablon-form button:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .62 !important;
}

@media (max-width: 720px) {
  body.invoice-page .custom-orders-page .custom-order-history-card-modal {
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  body.invoice-page .custom-orders-page .custom-order-history-card-modal-panel {
    border-radius: 0 !important;
  }

  body.invoice-page .custom-orders-page .custom-order-history-card-modal-header {
    min-height: 64px !important;
    padding: 8px 12px !important;
  }

  body.invoice-page .custom-orders-page .custom-order-history-card-modal-body {
    padding: 10px !important;
  }

  body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] .custom-order-history-card-modal .custom-order-history-detail-grid,
  body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] .custom-order-history-card-modal .custom-order-history-payment > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page .custom-orders-page .custom-order-history-detail-grid > span {
    min-height: 84px !important;
  }

  .custom-order-history-sablon-form[popover] {
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important;
    border-right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    max-height: min(78dvh, 620px) !important;
    max-width: 100vw !important;
    right: 0 !important;
    top: auto !important;
    width: 100vw !important;
  }

  .custom-order-history-sablon-form[popover]::backdrop {
    background: var(--ui-overlay) !important;
  }
}

@media (max-width: 360px) {
  body.invoice-page .custom-orders-page .custom-order-history-card-modal-body {
    padding-inline: 8px !important;
  }

  .custom-order-history-sablon-form[popover] {
    padding-inline: 12px !important;
  }

  .custom-order-history-sablon-form-head {
    margin-inline: -12px !important;
    padding-inline: 12px !important;
  }

  .custom-order-history-sablon-actions {
    margin-inline: -12px !important;
    padding-inline: 12px !important;
  }
}

/* Pesanan Custom / Belum Disiapkan: compact, single-scroll and theme-bound. */
body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] > .invoice-builder-head {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  min-height: 104px !important;
  padding: 14px 22px !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] .custom-order-page-title {
  color: var(--ui-primary) !important;
  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 4px !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] .custom-order-section-title {
  color: var(--ui-text) !important;
  font-size: clamp(1.8rem, 3vw, 2.7rem) !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] > .cashier-workspace,
body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] #custom-order-prepare {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-gutter: auto !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  display: inline-flex !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  padding: 5px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text-muted) !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a span,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a b {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a.active,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a[aria-current="page"] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  -webkit-text-fill-color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a:focus-visible,
body.invoice-page .custom-orders-page #custom-order-prepare button:focus-visible,
body.invoice-page .custom-orders-page #custom-order-prepare input:focus-visible,
body.invoice-page .custom-orders-page .custom-order-prepare-confirm button:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: none !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tab-badge,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-return-tab-badge {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-primary-hover) !important;
  min-height: 24px !important;
  min-width: 24px !important;
  padding: 2px 7px !important;
  text-align: center !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a.active .custom-order-prepare-tab-badge,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a.active .custom-order-return-tab-badge {
  background: color-mix(in srgb, var(--ui-on-primary) 18%, var(--ui-primary)) !important;
  border-color: color-mix(in srgb, var(--ui-on-primary) 42%, var(--ui-primary)) !important;
  color: var(--ui-on-primary) !important;
  -webkit-text-fill-color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-list {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-card {
  align-items: center !important;
  background: var(--ui-surface) !important;
  background-image: linear-gradient(90deg, var(--ui-primary-soft), var(--ui-surface) 24%) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-left: 4px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-text) 7%, transparent) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr) !important;
  min-width: 0 !important;
  padding: 14px 16px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-card:hover {
  border-color: var(--ui-primary) !important;
  box-shadow: var(--ui-shadow) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-main,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-form-grid,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-field {
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-identity {
  align-items: start !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-identity > .ui-product-preview {
  align-self: start !important;
  margin-top: 2px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-code,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-product-name {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-stock-note {
  background: var(--ui-warning-soft);
  border: 1px solid var(--ui-warning);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-stock-note strong {
  color: var(--ui-warning-strong);
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-stock-note.is-override-approved {
  background: var(--ui-primary-soft);
  border-color: color-mix(in srgb, var(--ui-primary) 50%, var(--ui-border));
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-stock-note.is-override-approved strong {
  color: var(--ui-primary-strong);
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-stock-note span {
  color: var(--ui-text-muted);
  line-height: 1.45;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override {
  align-items: start !important;
  appearance: none !important;
  background: var(--ui-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 54%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary-strong) !important;
  cursor: pointer !important;
  display: grid !important;
  font: inherit !important;
  gap: 4px !important;
  justify-items: start !important;
  line-height: 1.35 !important;
  min-height: 64px !important;
  padding: 12px 14px !important;
  text-align: left !important;
  width: 100% !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override input {
  accent-color: var(--ui-primary) !important;
  height: 18px !important;
  margin-top: 2px !important;
  width: 18px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override span {
  color: var(--ui-text-muted) !important;
  display: grid !important;
  gap: 3px !important;
  line-height: 1.35 !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override strong {
  color: var(--ui-primary-strong) !important;
  font-size: .9rem !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override small {
  color: var(--ui-text-muted) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override:focus-within {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override:hover,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-override:focus-visible {
  background: color-mix(in srgb, var(--ui-primary-soft) 76%, var(--ui-surface)) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-physical-shortage-button {
  align-items: center;
  background: var(--ui-warning-soft);
  border: 1px solid var(--ui-warning);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-warning-strong);
  display: inline-flex;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  justify-content: center;
  margin-top: 10px;
  min-height: 44px;
  padding: 8px 12px;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-physical-shortage-button:hover,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-physical-shortage-button:focus-visible {
  background: var(--ui-warning);
  color: var(--ui-surface);
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-physical-shortage-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 28%, transparent);
  outline-offset: 2px;
}

html.custom-order-physical-shortage-open,
body.custom-order-physical-shortage-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog {
  background: transparent;
  border: 0;
  color: var(--ui-text);
  inset: 0;
  margin: auto;
  max-height: calc(100dvh - 32px);
  max-width: min(560px, calc(100vw - 28px));
  padding: 0;
  width: 100%;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog::backdrop {
  background: var(--ui-overlay);
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog > form {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-modal);
  color: var(--ui-text);
  display: grid;
  gap: 16px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog header,
body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog label {
  display: grid;
  gap: 7px;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog header > span {
  color: var(--ui-warning-strong);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog h2,
body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog p,
body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog dl {
  color: var(--ui-text);
  margin: 0;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog p,
body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog dt,
body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog label small {
  color: var(--ui-text-muted);
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog dl,
body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog aside {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  display: grid;
  gap: 10px;
  padding: 12px;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog dl > div {
  display: grid;
  gap: 3px;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog dd {
  color: var(--ui-text);
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog input {
  background: var(--ui-field);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  min-height: 48px;
  padding: 10px 12px;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog input:focus-visible {
  border-color: var(--ui-focus);
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, transparent);
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog aside {
  border-color: var(--ui-warning);
  color: var(--ui-text);
  line-height: 1.5;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1.45fr;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-actions button {
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  min-height: 48px;
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-actions [data-physical-shortage-save] {
  background: var(--ui-warning);
  border-color: var(--ui-warning);
  color: var(--ui-surface);
}

body.invoice-page .custom-orders-page .custom-order-physical-shortage-actions button:disabled {
  background: var(--ui-surface-soft);
  color: var(--ui-text-muted);
  cursor: not-allowed;
  opacity: .68;
}

@media (max-width: 520px) {
  body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog {
    max-height: calc(100dvh - 20px);
    max-width: calc(100vw - 20px);
  }

  body.invoice-page .custom-orders-page .custom-order-physical-shortage-dialog > form {
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  body.invoice-page .custom-orders-page .custom-order-physical-shortage-actions {
    grid-template-columns: 1fr;
  }
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-customer,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-form-grid small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-badges .is-waiting {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 32%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-badges .is-ready {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-badges .is-stock {
  background: var(--ui-info-soft) !important;
  border-color: color-mix(in srgb, var(--ui-info) 30%, var(--ui-border)) !important;
  color: var(--ui-info-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-badges span,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-badges b {
  color: inherit !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-title {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-title b {
  color: var(--ui-danger) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-trigger {
  background: var(--ui-primary-soft) !important;
  border: 1px dashed var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary-hover) !important;
  min-height: 48px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-trigger:hover {
  background: color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-trigger span,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-trigger strong {
  color: inherit !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-preview,
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-feedback {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-preview img {
  background: var(--ui-field) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-meta strong {
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-actions button,
body.invoice-page .custom-orders-page #custom-order-prepare [data-prepare-photo-retry] {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  min-height: 44px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-actions [data-prepare-photo-remove] {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-error-row {
  align-items: center !important;
  background: var(--ui-danger-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: space-between !important;
  padding: 8px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-error-row[hidden],
body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-feedback[hidden] {
  display: none !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-error {
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-upload-feedback {
  border-radius: var(--ui-radius-sm) !important;
  display: grid !important;
  gap: 6px !important;
  padding: 8px 10px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-progress {
  background: var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  height: 6px !important;
  overflow: hidden !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-progress span {
  animation: customOrderPrepareProgress 1.25s ease-in-out infinite !important;
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent)) !important;
  border-radius: inherit !important;
  display: block !important;
  height: 100% !important;
  width: 46% !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-button {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  min-height: 48px !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-button:hover:not(:disabled) {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-button:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-button.is-loading:disabled {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  cursor: wait !important;
  opacity: 1 !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-spinner {
  border-color: color-mix(in srgb, var(--ui-on-primary) 42%, transparent) !important;
  border-top-color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-success {
  background: var(--ui-success-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-success) 30%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-live {
  color: var(--ui-text-muted) !important;
  font-size: .8rem !important;
  min-height: 1em !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm {
  background: transparent !important;
  border: 0 !important;
  color: var(--ui-text) !important;
  max-width: min(520px, calc(100vw - 28px)) !important;
  padding: 0 !important;
  width: 100% !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm::backdrop {
  background: var(--ui-overlay) !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm > section {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 14px !important;
  padding: 22px !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm-kicker {
  color: var(--ui-primary) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm h2,
body.invoice-page .custom-orders-page .custom-order-prepare-confirm p {
  color: var(--ui-text) !important;
  margin: 0 !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm p,
body.invoice-page .custom-orders-page .custom-order-prepare-confirm dt {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm dl {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm dl > div {
  display: grid !important;
  gap: 2px !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm dd {
  color: var(--ui-text) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm-actions {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 1fr 1.35fr !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm-actions button {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  min-height: 48px !important;
}

body.invoice-page .custom-orders-page .custom-order-prepare-confirm-actions [data-prepare-confirm-accept] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

@keyframes customOrderPrepareProgress {
  from { transform: translateX(-105%); }
  to { transform: translateX(225%); }
}

@media (max-width: 960px) {
  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] {
    overflow-x: hidden !important;
  }

  body.invoice-page .custom-orders-page[data-active-custom-order-view="prepare"] > .invoice-builder-head {
    min-height: 72px !important;
    padding: 10px 14px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-prepare {
    padding: 10px 10px calc(112px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs a {
    justify-content: center !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-card {
    background-image: none !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-preview {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }

  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-photo-actions button,
  body.invoice-page .custom-orders-page #custom-order-prepare [data-prepare-photo-retry] {
    flex: 1 1 auto !important;
  }

  body.invoice-page .custom-orders-page .custom-order-prepare-confirm {
    margin: auto 14px 14px !important;
    max-width: calc(100vw - 28px) !important;
  }

  body.invoice-page .custom-orders-page .custom-order-prepare-confirm > section {
    padding: 18px !important;
  }
}

@media (max-width: 420px) {
  body.invoice-page .custom-orders-page #custom-order-prepare .custom-order-prepare-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page .custom-orders-page .custom-order-prepare-confirm-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Invoice Studio: semantic theme contract and responsive editor. */
body.invoice-page:has(.invoice-builder) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-builder {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
}

body.invoice-page .invoice-builder-head,
body.invoice-page .invoice-saved-panel,
body.invoice-page .invoice-unpaid-panel,
body.invoice-page .invoice-form,
body.invoice-page .invoice-paper,
body.invoice-page .invoice-bottom-actions {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-builder-head {
  border-radius: var(--ui-radius-lg) !important;
}

body.invoice-page .invoice-builder-head h1,
body.invoice-page .invoice-paper h2,
body.invoice-page .invoice-form label,
body.invoice-page .invoice-items-head strong,
body.invoice-page .invoice-unpaid-panel strong,
body.invoice-page .invoice-paper b,
body.invoice-page .invoice-paper dd,
body.invoice-page .invoice-paper td {
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-builder-head .auth-brand {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: none !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .invoice-builder-head .auth-brand b,
body.invoice-page #previewNumber,
body.invoice-page .invoice-paper .invoice-balance.is-paid dd {
  color: var(--ui-success-strong) !important;
}

body.invoice-page .invoice-form small,
body.invoice-page .invoice-form .field-hint,
body.invoice-page .invoice-unpaid-panel small,
body.invoice-page .invoice-unpaid-empty,
body.invoice-page .invoice-paper span,
body.invoice-page .invoice-paper dt,
body.invoice-page .invoice-paper th,
body.invoice-page .invoice-paper em,
body.invoice-page .invoice-selected-orders > small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .invoice-saved-panel,
body.invoice-page .invoice-unpaid-panel,
body.invoice-page .invoice-form,
body.invoice-page .invoice-paper,
body.invoice-page .invoice-bottom-actions,
body.invoice-page .invoice-order-picker,
body.invoice-page .invoice-payment,
body.invoice-page .invoice-summary > div,
body.invoice-page .invoice-summary dl,
body.invoice-page .invoice-meta > span {
  background-image: none !important;
}

body.invoice-page .invoice-saved-panel,
body.invoice-page .invoice-unpaid-panel,
body.invoice-page .invoice-bottom-actions,
body.invoice-page .invoice-order-picker,
body.invoice-page .invoice-payment,
body.invoice-page .invoice-summary > div,
body.invoice-page .invoice-summary dl,
body.invoice-page .invoice-meta > span,
body.invoice-page .invoice-unpaid-item,
body.invoice-page .invoice-selected-order {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-form input,
body.invoice-page .invoice-form select,
body.invoice-page .invoice-form textarea,
body.invoice-page .invoice-form .country-trigger,
body.invoice-page .invoice-saved-panel select,
body.invoice-page .invoice-order-picker select {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-saved-field {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  position: relative !important;
}

body.invoice-page .invoice-saved-native {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
}

body.invoice-page .invoice-saved-combobox {
  display: block !important;
  min-width: 0 !important;
  position: relative !important;
}

body.invoice-page #savedInvoiceSearch {
  background:
    linear-gradient(45deg, transparent 50%, var(--ui-text-muted) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ui-text-muted) 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
    var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  min-height: 48px !important;
  padding: 0 40px 0 14px !important;
  width: 100% !important;
}

body.invoice-page #savedInvoiceSearch::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.invoice-page #savedInvoiceSearch:focus,
body.invoice-page #savedInvoiceSearch[aria-expanded=true] {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  outline: none !important;
}

body.invoice-page .invoice-saved-menu {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 6px !important;
  left: 0 !important;
  max-height: clamp(190px, calc(100dvh - 300px - env(safe-area-inset-bottom)), 312px) !important;
  min-width: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: 8px !important;
  position: absolute !important;
  right: 0 !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
  top: calc(100% + 6px) !important;
  z-index: 34 !important;
}

body.invoice-page .invoice-saved-menu[hidden] {
  display: none !important;
}

body.invoice-page .invoice-saved-menu::-webkit-scrollbar {
  width: 10px !important;
}

body.invoice-page .invoice-saved-menu::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .invoice-saved-menu::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .invoice-saved-option {
  align-items: start !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-surface) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 3px !important;
  justify-items: start !important;
  min-height: 48px !important;
  padding: 9px 11px !important;
  text-align: left !important;
  width: 100% !important;
}

body.invoice-page .invoice-saved-option strong {
  color: var(--ui-text) !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .invoice-saved-option small {
  color: var(--ui-text-muted) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .invoice-saved-option:hover,
body.invoice-page .invoice-saved-option:focus-visible,
body.invoice-page .invoice-saved-option.is-active,
body.invoice-page .invoice-saved-option[aria-selected=true] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: none !important;
}

body.invoice-page .invoice-saved-option:hover strong,
body.invoice-page .invoice-saved-option:focus-visible strong,
body.invoice-page .invoice-saved-option.is-active strong,
body.invoice-page .invoice-saved-option[aria-selected=true] strong {
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .invoice-saved-option.is-create {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .invoice-saved-option.is-create strong {
  color: var(--ui-primary-hover) !important;
}

@media (max-width: 720px) {
  body.invoice-page .invoice-saved-panel {
    overflow: visible !important;
  }

  body.invoice-page .invoice-saved-menu {
    max-height: clamp(170px, calc(100dvh - 390px - env(safe-area-inset-bottom)), 248px) !important;
  }
}


body.invoice-page .invoice-form input::placeholder,
body.invoice-page .invoice-form textarea::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.invoice-page .invoice-form input[readonly],
body.invoice-page .invoice-form textarea[readonly] {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .invoice-form input:focus,
body.invoice-page .invoice-form select:focus,
body.invoice-page .invoice-form textarea:focus,
body.invoice-page .invoice-saved-panel select:focus,
body.invoice-page .invoice-order-picker select:focus,
body.invoice-page .invoice-form .country-trigger:focus-visible,
body.invoice-page .invoice-builder button:focus-visible,
body.invoice-page .invoice-builder a:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  outline: none !important;
}

body.invoice-page .invoice-builder button,
body.invoice-page .invoice-saved-panel a,
body.invoice-page .invoice-pdf-modal a {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  text-shadow: none !important;
}

body.invoice-page .invoice-builder button:hover:not(:disabled),
body.invoice-page .invoice-saved-panel a:hover,
body.invoice-page .invoice-pdf-modal a:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option {
  background: var(--ui-surface) !important;
  border-color: var(--ui-surface) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option:hover,
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option:focus-visible,
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option.is-active,
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option[aria-selected=true],
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option.is-create {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option strong {
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option:hover strong,
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option:focus-visible strong,
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option.is-active strong,
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option[aria-selected=true] strong,
body.invoice-page .invoice-builder .invoice-saved-menu .invoice-saved-option.is-create strong {
  color: var(--ui-primary-hover) !important;
}


body.invoice-page .invoice-builder button:disabled,
body.invoice-page .invoice-builder input:disabled,
body.invoice-page .invoice-builder select:disabled,
body.invoice-page .invoice-builder textarea:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
}

body.invoice-page .invoice-saved-panel .danger,
body.invoice-page .invoice-result-modal.is-error .invoice-modal-close {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .invoice-item-row button,
body.invoice-page .invoice-deposit-row button,
body.invoice-page .invoice-selected-order button {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .invoice-item-row button:hover,
body.invoice-page .invoice-deposit-row button:hover,
body.invoice-page .invoice-selected-order button:hover {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-on-danger) !important;
}

body.invoice-page .invoice-unpaid-panel,
body.invoice-page .invoice-unpaid-item {
  border-color: var(--ui-warning) !important;
}

body.invoice-page .invoice-order-picker {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  display: grid !important;
  gap: 12px !important;
  margin: 14px 0 !important;
  padding: 14px !important;
}

body.invoice-page .invoice-order-picker .invoice-items-head {
  align-items: center !important;
}

body.invoice-page .invoice-order-picker .invoice-items-head > div {
  display: grid !important;
  gap: 3px !important;
}

body.invoice-page .invoice-order-picker-controls {
  min-width: 0 !important;
}

body.invoice-page .invoice-order-picker-controls select {
  min-height: 46px !important;
  width: 100% !important;
}

body.invoice-page .invoice-selected-orders {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-height: 24px !important;
}

body.invoice-page .invoice-selected-order {
  align-items: center !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: inline-grid !important;
  gap: 2px 8px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  max-width: 100% !important;
  padding: 7px 8px 7px 10px !important;
}

body.invoice-page .invoice-selected-order strong {
  color: var(--ui-text) !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .invoice-selected-order small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .invoice-selected-order button {
  align-self: center !important;
  border-radius: var(--ui-radius-sm) !important;
  grid-row: 1 / span 2 !important;
  min-height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}

body.invoice-page .invoice-result-modal-backdrop,
body.invoice-page .invoice-pdf-modal-backdrop {
  background: var(--ui-overlay) !important;
}

body.invoice-page .invoice-result-modal,
body.invoice-page .invoice-pdf-modal {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-result-modal h2,
body.invoice-page .invoice-result-modal p,
body.invoice-page .invoice-pdf-modal h2,
body.invoice-page .invoice-pdf-modal label,
body.invoice-page .invoice-pdf-modal small {
  color: var(--ui-text) !important;
}

body.invoice-page .invoice-result-modal.is-success {
  border-color: var(--ui-success) !important;
}

body.invoice-page .invoice-result-modal.is-error {
  border-color: var(--ui-danger) !important;
}

body.invoice-page .invoice-result-modal.is-pending {
  border-color: var(--ui-info) !important;
}

body.invoice-page .home-bottom-nav {
  background: var(--ui-surface) !important;
  border-top-color: var(--ui-border) !important;
  box-shadow: 0 -10px 28px color-mix(in srgb, var(--ui-text) 10%, transparent) !important;
}

body.invoice-page .home-bottom-nav a,
body.invoice-page .home-bottom-nav button {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .home-bottom-nav a.active,
body.invoice-page .home-bottom-nav button.active,
body.invoice-page .home-bottom-nav a:hover,
body.invoice-page .home-bottom-nav button:hover {
  color: var(--ui-primary) !important;
}

@media (max-width: 980px) {
  body.invoice-page .invoice-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page .invoice-paper {
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  body.invoice-page .invoice-builder {
    padding: 10px 10px calc(124px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .invoice-builder-head,
  body.invoice-page .invoice-saved-panel,
  body.invoice-page .invoice-unpaid-panel,
  body.invoice-page .invoice-form,
  body.invoice-page .invoice-paper,
  body.invoice-page .invoice-bottom-actions {
    border-radius: var(--ui-radius-md) !important;
  }

  body.invoice-page .invoice-form-row,
  body.invoice-page .invoice-saved-panel,
  body.invoice-page .invoice-bottom-actions,
  body.invoice-page .invoice-summary,
  body.invoice-page .invoice-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page .invoice-saved-panel button,
  body.invoice-page .invoice-bottom-actions button,
  body.invoice-page .invoice-update-actions button {
    min-height: 46px !important;
    width: 100% !important;
  }

  body.invoice-page .invoice-update-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page .invoice-item-row {
    grid-template-columns: minmax(0, 1fr) 58px minmax(82px, .8fr) 36px !important;
  }
}

/* Product preview layout adapters. Kept global so product surfaces stay consistent. */
.custom-order-combo-option:has(> .ui-product-preview),
.purchase-combobox-option:has(> .ui-product-preview) {
  align-items: center;
  display: grid !important;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

body.cashier-sales-route .cashier-sales-page .cashier-product-option:has(> .ui-product-preview),
.cashier-stock-adjustments-page .stock-product-results [role="option"]:has(> .ui-product-preview) {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) !important;
}

body.cashier-sales-route .cashier-sales-page .cashier-product-option > .ui-product-preview-content {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}

body.cashier-sales-route .cashier-sales-page .cashier-product-option > .ui-product-preview-content > small {
  grid-column: 1;
}

body.cashier-sales-route .cashier-sales-page .cashier-product-option > .ui-product-preview-content > .cashier-product-stock {
  grid-column: 2;
  grid-row: 1 / span 2;
}

body.invoice-page .custom-orders-page .custom-order-product-result:has(> .ui-product-preview) {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) !important;
}

body.invoice-page .custom-orders-page .custom-order-product-result > .ui-product-preview-content {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
/* Cashier account database scan-friendly cards. */body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-list{display:grid!important;gap:10px!important;padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-md)!important;box-shadow:var(--ui-shadow)!important;margin:0!important;overflow:hidden!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open]{border-color:var(--ui-primary-border)!important;box-shadow:var(--ui-shadow-modal)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary{align-items:center!important;background:var(--ui-surface-soft)!important;color:var(--ui-text)!important;display:grid!important;gap:10px!important;grid-template-columns:minmax(210px,1.25fr) minmax(220px,1.05fr) minmax(64px,.35fr) minmax(230px,1.25fr) minmax(132px,.75fr) auto!important;min-height:0!important;padding:12px 14px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary:hover{background:color-mix(in srgb,var(--ui-primary-soft) 48%,var(--ui-surface-soft))!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary:focus-visible{box-shadow:inset 0 0 0 3px var(--ui-focus)!important;outline:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open]>.cashier-account-history-summary{border-bottom:1px solid var(--ui-border)!important}.cashier-account-cell{display:grid;gap:3px;min-width:0}.cashier-account-cell>small{color:var(--ui-text-muted)!important;font-size:.68rem!important;font-weight:850!important;letter-spacing:0!important;line-height:1.15;text-transform:uppercase}.cashier-account-cell>b{color:var(--ui-text)!important;font-size:.94rem!important;font-weight:850!important;line-height:1.25;overflow-wrap:anywhere}.cashier-account-cell>span:not(.cashier-account-chip-list){color:var(--ui-text-muted)!important;font-size:.78rem!important;font-weight:700!important;line-height:1.3;overflow-wrap:anywhere}.cashier-account-chip-list{align-items:center;display:flex;flex-wrap:wrap;gap:4px;min-width:0}.cashier-account-chip{background:var(--ui-primary-soft)!important;border:1px solid color-mix(in srgb,var(--ui-primary) 32%,var(--ui-border))!important;border-radius:var(--ui-radius-sm)!important;color:var(--ui-primary-hover)!important;font-size:.72rem!important;font-style:normal!important;font-weight:800!important;line-height:1.15;padding:3px 6px!important}.cashier-account-chip.is-role{background:var(--ui-info-soft)!important;border-color:color-mix(in srgb,var(--ui-info) 32%,var(--ui-border))!important;color:var(--ui-info-strong)!important}.cashier-account-chip.is-empty{background:var(--ui-surface)!important;border-color:var(--ui-border)!important;color:var(--ui-text-muted)!important}.cashier-account-cell-order{text-align:center}.cashier-account-cell-order b{font-size:1rem!important}.cashier-account-edit-button{align-self:center!important;background:var(--ui-field)!important;border:1px solid var(--ui-primary-border)!important;color:var(--ui-primary)!important;justify-self:end!important;position:static!important}.cashier-account-edit-button:hover{background:var(--ui-primary-soft)!important;color:var(--ui-primary-hover)!important}.cashier-account-history-detail{background:var(--ui-surface)!important;border-top:0!important;gap:10px!important;padding:12px 14px!important}.cashier-account-history-detail .custom-order-history-section{background:var(--ui-surface-soft)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;padding:10px!important}.cashier-account-history-detail .custom-order-history-section small{color:var(--ui-text-muted)!important}.cashier-account-history-detail .custom-order-history-section b{color:var(--ui-text)!important}@media (max-width:1180px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary{grid-template-columns:minmax(190px,1fr) minmax(210px,1fr) minmax(70px,.35fr) minmax(220px,1.15fr) auto!important}.cashier-account-cell-role{grid-column:2/5}.cashier-account-edit-button{grid-column:5;grid-row:1/3}}@media (max-width:760px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-list{padding-bottom:calc(128px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(128px + env(safe-area-inset-bottom))!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary{grid-template-columns:minmax(0,1fr) auto!important;padding:12px!important}.cashier-account-cell{grid-column:1/-1}.cashier-account-cell-name{grid-column:1}.cashier-account-edit-button{grid-column:2;grid-row:1;min-height:40px!important;min-width:40px!important}.cashier-account-cell-order{text-align:left}.cashier-account-chip{font-size:.7rem!important}.cashier-account-history-detail{padding:10px!important}}
}

body.invoice-page .custom-orders-page .custom-order-product-result > .ui-product-preview-content > small {
  grid-column: 1;
}

body.invoice-page .custom-orders-page .custom-order-product-result > .ui-product-preview-content > .custom-order-product-result-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
}

body.invoice-page .cashier-products-page .cashier-product-row > .cashier-product-identity {
  align-items: center;
  display: grid !important;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

@media (max-width: 520px) {
  body.invoice-page .custom-orders-page .custom-order-product-result > .ui-product-preview-content {
    grid-template-columns: minmax(0, 1fr);
  }

  body.invoice-page .custom-orders-page .custom-order-product-result > .ui-product-preview-content > .custom-order-product-result-meta {
    grid-column: 1;
    grid-row: auto;
    justify-items: start;
  }
}
/* Global notification center: theme-driven, accessible, and responsive. */
body.notification-modal-open { overflow: hidden; }
.notification-modal-backdrop {
  align-items: center !important; background: var(--ui-overlay) !important; display: flex; inset: 0; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
}
.notification-modal {
  background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important; color: var(--ui-text) !important; display: flex !important; flex-direction: column;
  max-height: min(820px, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  max-width: 520px !important; overflow: hidden !important; padding: 0 !important; width: min(100%, 520px) !important;
}
.notification-modal-head {
  background: var(--ui-surface) !important; border-bottom: 1px solid var(--ui-border); flex: 0 0 auto; gap: 5px;
  padding: 18px 64px 16px !important; position: relative; z-index: 2;
}
.notification-modal-head .game-modal-rank.is-success { background: var(--ui-success-soft) !important; border-color: var(--ui-success) !important; color: var(--ui-success-strong) !important; }
.notification-modal-head .game-modal-eyebrow { background: var(--ui-primary-soft) !important; border: 1px solid var(--ui-primary-border); color: var(--ui-primary-hover) !important; }
.notification-modal-head h2, .push-notification-card strong, .notification-list strong, .notification-empty-state strong, .notification-error-state strong { color: var(--ui-text) !important; }
.notification-modal-description, .push-notification-card p, .notification-list p, .notification-list small, .notification-empty-state p, .notification-error-state p, .notification-end-state { color: var(--ui-text-muted) !important; }
.notification-modal-description { font-size: 12px; line-height: 1.45; margin: 0; }
.notification-modal-close {
  align-items: center; background: var(--ui-surface-soft) !important; border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important; color: var(--ui-text) !important; display: inline-flex; height: 44px !important;
  justify-content: center; min-height: 44px; min-width: 44px; position: absolute; right: 14px; top: 14px; width: 44px !important;
}
.notification-modal-close svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 22px; }
.notification-modal-close:hover { background: var(--ui-primary-soft) !important; border-color: var(--ui-primary-border) !important; color: var(--ui-primary-hover) !important; }
.notification-modal-close:focus-visible, .push-notification-card button:focus-visible, .notification-list a:focus-visible, .notification-error-state button:focus-visible {
  border-color: var(--ui-focus) !important; outline: 3px solid var(--ui-focus) !important; outline-offset: 2px;
}
.notification-modal-scroll { overscroll-behavior: contain; overflow-x: hidden; overflow-y: auto; padding: 16px; scrollbar-color: var(--ui-primary) var(--ui-surface-soft); scrollbar-width: thin; }
.notification-modal-scroll::-webkit-scrollbar { width: 10px; }
.notification-modal-scroll::-webkit-scrollbar-track { background: var(--ui-surface-soft); }
.notification-modal-scroll::-webkit-scrollbar-thumb { background: var(--ui-primary); border: 2px solid var(--ui-surface-soft); border-radius: var(--ui-radius-sm); }
.push-notification-card, .notification-list a, .notification-empty-state, .notification-error-state {
  background: var(--ui-surface-soft) !important; border: 1px solid var(--ui-border) !important; box-shadow: none !important; color: var(--ui-text) !important;
}
.push-notification-card button, .notification-error-state button {
  background: var(--ui-primary) !important; border: 1px solid var(--ui-primary) !important; border-radius: var(--ui-radius-sm); color: var(--ui-on-primary) !important; min-height: 44px;
}
.push-notification-card button:hover:not(:disabled), .notification-error-state button:hover { background: var(--ui-primary-hover) !important; border-color: var(--ui-primary-hover) !important; }
.push-notification-card button:disabled { background: var(--ui-surface-soft) !important; border-color: var(--ui-border) !important; color: var(--ui-text-muted) !important; cursor: not-allowed; opacity: .72; }
.notification-list a { min-height: 44px; }
.notification-list a.is-unread { border-color: var(--ui-primary-border) !important; box-shadow: inset 4px 0 0 var(--ui-primary) !important; }
.notification-list a.is-pinned { border-color: var(--ui-warning) !important; box-shadow: inset 4px 0 0 var(--ui-warning) !important; }
.notification-list a:hover { background: var(--ui-primary-soft) !important; border-color: var(--ui-primary-border) !important; transform: translateY(-1px); }
.notification-empty-state, .notification-error-state { align-items: center; border-radius: var(--ui-radius-md); display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
.notification-empty-state svg { fill: none; height: 28px; stroke: var(--ui-text-muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 28px; }
.notification-empty-state p, .notification-error-state p { margin: 4px 0 0; }
.notification-error-state { background: var(--ui-danger-soft) !important; border-color: var(--ui-danger) !important; grid-template-columns: minmax(0, 1fr) auto; margin-top: 10px; }
.notification-loading-state { display: grid; gap: 10px; margin-top: 10px; }
.notification-skeleton { animation: notification-skeleton-pulse 1.2s ease-in-out infinite alternate; background: linear-gradient(90deg, var(--ui-surface-soft), var(--ui-primary-soft), var(--ui-surface-soft)); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); display: block; height: 74px; }
.notification-end-state { border-top: 1px solid var(--ui-border); font-size: 12px; margin: 14px 0 0; padding-top: 14px; text-align: center; }
.notification-load-sentinel { block-size: 1px; }
@keyframes notification-skeleton-pulse { from { opacity: .62; } to { opacity: 1; } }
@media (max-width: 600px) {
  .notification-modal-backdrop { align-items: flex-end !important; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(max(8px, env(safe-area-inset-bottom)) + 72px) max(8px, env(safe-area-inset-left)) !important; }
  .notification-modal { border-radius: var(--ui-radius-lg) var(--ui-radius-lg) var(--ui-radius-sm) var(--ui-radius-sm) !important; max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  .notification-modal-head { justify-items: start; padding: 14px 58px 13px 14px !important; text-align: left; }
  .notification-modal-head .game-modal-rank { display: none; }
  .notification-modal-close { right: 8px; top: 8px; }
  .notification-modal-scroll { padding: 12px; }
  .push-notification-card, .notification-error-state { grid-template-columns: minmax(0, 1fr); }
  .push-notification-card button, .notification-error-state button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .notification-modal, .notification-skeleton, .notification-list a { animation: none !important; transition: none !important; } }
/* Cashier account database: theme-managed search, filters, and result states. */ body.invoice-page:has(.cashier-accounts-page) .cashier-accounts-page{background:var(--ui-bg);color:var(--ui-text)}body.invoice-page:has(.cashier-accounts-page) .cashier-accounts-page .invoice-builder-head,body.invoice-page:has(.cashier-accounts-page) .cashier-accounts-page .cashier-panel,body.invoice-page:has(.cashier-accounts-page) .cashier-accounts-page .cashier-account-history-card{background:var(--ui-surface)!important;border-color:var(--ui-border)!important;box-shadow:var(--ui-shadow);color:var(--ui-text)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-tabs{background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-tabs a{color:var(--ui-text-muted)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-tabs a.active,body.invoice-page:has(.cashier-accounts-page) .cashier-account-tabs a:hover{background:var(--ui-primary-soft)!important;color:var(--ui-primary-hover)!important}.cashier-account-filter{align-items:end;background:var(--ui-surface-soft);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);display:grid;gap:12px;grid-template-columns:minmax(220px,1.6fr) minmax(170px,1fr) minmax(190px,1fr) auto;margin:16px 0;padding:14px}.cashier-account-filter label{display:grid;gap:6px;min-width:0}.cashier-account-filter label>span{color:var(--ui-text-muted);font-size:.78rem;font-weight:700}.cashier-account-filter input,.cashier-account-filter select{background:var(--ui-field);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);color:var(--ui-text);min-height:44px;padding:0 12px;width:100%}.cashier-account-filter input:focus,.cashier-account-filter select:focus,.cashier-account-filter button:focus-visible{border-color:var(--ui-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-focus) 24%,transparent);outline:none}.cashier-account-filter-reset{background:var(--ui-primary);border:1px solid var(--ui-primary);border-radius:var(--ui-radius-sm);color:var(--ui-on-primary);min-height:44px;padding:0 14px}.cashier-account-filter-reset:hover:not(:disabled){background:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}.cashier-account-filter-reset:disabled{background:var(--ui-surface-soft);border-color:var(--ui-border);color:var(--ui-text-muted);cursor:not-allowed}.cashier-account-filter-result{color:var(--ui-text-muted);font-size:.84rem;grid-column:1/-1;margin:0}.cashier-account-filter-empty{background:var(--ui-surface-soft);border:1px dashed var(--ui-border);border-radius:var(--ui-radius-md);color:var(--ui-text);padding:24px;text-align:center}.cashier-account-filter-empty p{color:var(--ui-text-muted);margin:6px 0 0}.cashier-account-history-list{scrollbar-color:var(--ui-primary) var(--ui-surface-soft);scrollbar-width:thin}.cashier-account-history-list::-webkit-scrollbar{width:10px}.cashier-account-history-list::-webkit-scrollbar-track{background:var(--ui-surface-soft)}.cashier-account-history-list::-webkit-scrollbar-thumb{background:var(--ui-primary);border:2px solid var(--ui-surface-soft);border-radius:var(--ui-radius-sm)}@media (max-width:820px){.cashier-account-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.cashier-account-filter-reset{width:100%}}@media (max-width:560px){.cashier-account-filter{grid-template-columns:minmax(0,1fr);padding:12px}.cashier-account-filter-result{grid-column:auto}}
/* Cashier account input refinement. */body.invoice-page:has(.cashier-accounts-page){background:var(--ui-bg)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-accounts-page{gap:14px;padding-bottom:calc(104px + env(safe-area-inset-bottom))}body.invoice-page:has(.cashier-accounts-page) .cashier-accounts-page .invoice-builder-head{align-items:center;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) auto;min-height:0;padding:20px 24px!important}body.invoice-page:has(.cashier-accounts-page) .invoice-builder-head .auth-brand{margin:0 0 6px!important}body.invoice-page:has(.cashier-accounts-page) .invoice-builder-head h1{font-size:clamp(1.8rem,3vw,2.5rem)!important;letter-spacing:.02em;line-height:1.05;margin:0!important}body.invoice-page:has(.cashier-accounts-page) .invoice-builder-head p:not(.auth-brand){color:var(--ui-text-muted)!important;margin:6px 0 0!important}body.invoice-page:has(.cashier-accounts-page) .cashier-panel{padding:clamp(16px,2vw,24px)!important}body.invoice-page:has(.cashier-accounts-page) .packing-panel-head{background:var(--ui-surface-soft)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-md);padding:14px 16px!important}body.invoice-page:has(.cashier-accounts-page) .packing-panel-head h2,body.invoice-page:has(.cashier-accounts-page) .packing-panel-head small{color:var(--ui-text)!important}.cashier-account-create-context{background:var(--ui-info-soft);border:1px solid color-mix(in srgb,var(--ui-info) 30%,var(--ui-border));border-radius:var(--ui-radius-sm);color:var(--ui-text-muted);font-size:.88rem;line-height:1.5;margin:14px 0 0;padding:10px 12px}.cashier-account-create-context b,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>label:has([required])>span{color:var(--ui-danger-strong)}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form{background:var(--ui-surface)!important;border:0!important;display:grid!important;gap:14px!important;grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 0!important;padding:0!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>label,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>.cashier-dropdown-field{background:var(--ui-surface-soft)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-md);color:var(--ui-text)!important;display:grid!important;gap:7px;margin:0!important;min-width:0;padding:14px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>label{font-weight:700}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>label:has([required])::before{color:var(--ui-danger-strong);content:'* Wajib';font-size:.72rem;font-weight:700;order:-1}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-span{grid-column:1/-1}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form input,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form select,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form summary{background:var(--ui-field)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;color:var(--ui-text)!important;min-height:46px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form input::placeholder{color:var(--ui-text-muted)!important;opacity:1}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form input:focus,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form select:focus,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form summary:focus-visible{border-color:var(--ui-focus)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-focus) 24%,transparent)!important;outline:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form [aria-invalid=true]{border-color:var(--ui-danger)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu{background:var(--ui-surface)!important;border-color:var(--ui-primary-border)!important;box-shadow:var(--ui-shadow-modal)!important;color:var(--ui-text)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:hover{background:var(--ui-primary-soft)!important}.cashier-account-submit-row{align-items:center;background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-md);bottom:calc(76px + env(safe-area-inset-bottom));display:flex!important;gap:12px;justify-content:space-between;padding:10px!important;position:sticky;z-index:3}.cashier-account-form-status{color:var(--ui-text-muted);font-size:.86rem;margin:0}.cashier-account-form-status[data-state=warning]{color:var(--ui-warning-strong)}.cashier-account-form-status[data-state=success]{color:var(--ui-success-strong)}body.invoice-page:has(.cashier-accounts-page) .cashier-account-submit{background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:var(--ui-on-primary)!important;min-height:46px}body.invoice-page:has(.cashier-accounts-page) .cashier-account-submit:hover:not(:disabled){background:var(--ui-primary-hover)!important;border-color:var(--ui-primary-hover)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-submit:disabled{background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important;color:var(--ui-text-muted)!important;cursor:not-allowed}@media (max-width:700px){body.invoice-page:has(.cashier-accounts-page) .cashier-accounts-page .invoice-builder-head{grid-template-columns:minmax(0,1fr);padding:16px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-head-actions{justify-content:flex-start}.cashier-account-submit-row{align-items:stretch;bottom:calc(68px + env(safe-area-inset-bottom));flex-direction:column}.cashier-account-submit{width:100%}}@media (max-width:620px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form{grid-template-columns:minmax(0,1fr)}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>label,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>.cashier-dropdown-field{padding:12px!important}}
/* Cashier account input neutral validation polish. */body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>label,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>.cashier-dropdown-field,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>.cashier-dropdown-field>span{color:var(--ui-text)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form>.cashier-dropdown-field>span{font-weight:800}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-account-field-error{color:var(--ui-danger-strong)!important;font-size:.78rem;font-weight:700;line-height:1.35;min-height:0}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-account-field-error:empty{display:none}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form [aria-invalid=false]{box-shadow:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form summary[data-selection-count]{color:var(--ui-text)!important;font-weight:800}body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form summary[data-selection-count="0"]{color:var(--ui-text-muted)!important;font-weight:700}.cashier-account-form-status[data-state=info]{color:var(--ui-info-strong)}.cashier-account-form-status[data-state=warning]{background:var(--ui-warning-soft);border:1px solid color-mix(in srgb,var(--ui-warning) 30%,var(--ui-border));border-radius:var(--ui-radius-sm);color:var(--ui-warning-strong);padding:7px 9px}.cashier-account-form-status[data-state=success]{background:var(--ui-success-soft);border:1px solid color-mix(in srgb,var(--ui-success) 30%,var(--ui-border));border-radius:var(--ui-radius-sm);color:var(--ui-success-strong);padding:7px 9px}.cashier-account-submit-row{bottom:calc(72px + env(safe-area-inset-bottom));min-height:0!important;padding:8px 10px!important}.cashier-account-submit-row .cashier-account-submit{min-height:42px!important;padding-block:8px!important}.cashier-account-create-form{padding-bottom:0!important}body.invoice-page:has(.cashier-accounts-page) .cashier-panel:has(.cashier-account-create-form){padding-bottom:clamp(12px,2vw,20px)!important}@media (max-width:700px){.cashier-account-submit-row{bottom:calc(64px + env(safe-area-inset-bottom));gap:8px;padding:8px!important}.cashier-account-form-status{font-size:.82rem}.cashier-account-submit-row .cashier-account-submit{min-height:40px!important}}

/* Cashier account database final usability pass. */body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter{position:relative;z-index:8}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-menu{background:var(--ui-surface)!important;border:1px solid var(--ui-primary-border)!important;border-radius:var(--ui-radius-md)!important;box-shadow:var(--ui-shadow-modal)!important;color:var(--ui-text)!important;max-height:min(260px,var(--cashier-account-combo-max,260px))!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-color:var(--ui-primary) var(--ui-surface-soft);scrollbar-width:thin;z-index:40!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-menu::-webkit-scrollbar{width:10px}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-menu::-webkit-scrollbar-track{background:var(--ui-surface-soft)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-menu::-webkit-scrollbar-thumb{background:var(--ui-primary)!important;border:2px solid var(--ui-surface-soft)!important;border-radius:var(--ui-radius-sm)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-menu.drop-up{transform-origin:bottom center}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-menu.drop-down{transform-origin:top center}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-option{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;color:var(--ui-text)!important;margin:6px!important;min-height:40px!important;padding:9px 10px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-option:hover,body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter .cashier-account-combo-option[aria-selected=true]{background:var(--ui-primary-soft)!important;border-color:var(--ui-primary-border)!important;color:var(--ui-primary-hover)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-list{gap:8px!important;padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card{background:color-mix(in srgb,var(--ui-surface) 88%,var(--ui-surface-soft))!important;border-color:var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;box-shadow:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open]{background:var(--ui-surface)!important;border-color:var(--ui-primary-border)!important;box-shadow:var(--ui-shadow)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary{background:var(--ui-surface)!important;border:1px solid color-mix(in srgb,var(--ui-border) 80%,var(--ui-surface))!important;border-radius:var(--ui-radius-sm)!important;gap:8px!important;grid-template-columns:minmax(190px,1.25fr) minmax(200px,1.05fr) minmax(56px,.28fr) minmax(220px,1.2fr) minmax(126px,.65fr) 44px!important;padding:10px 12px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary:hover{background:color-mix(in srgb,var(--ui-primary-soft) 32%,var(--ui-surface))!important;border-color:var(--ui-primary-border)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary:focus-visible{box-shadow:inset 0 0 0 3px var(--ui-focus)!important;outline:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open]>.cashier-account-history-summary{background:var(--ui-primary-soft)!important;border-color:var(--ui-primary-border)!important}.cashier-account-cell{gap:2px!important}.cashier-account-cell>small{color:var(--ui-text-muted)!important;font-size:.66rem!important;font-weight:850!important;letter-spacing:0!important;text-transform:none!important}.cashier-account-cell>b{color:var(--ui-text)!important;font-size:.88rem!important;font-weight:850!important;line-height:1.18}.cashier-account-cell>span:not(.cashier-account-chip-list){color:var(--ui-text-muted)!important;font-size:.75rem!important;line-height:1.22}.cashier-account-chip-list{display:flex!important;flex-wrap:wrap!important;gap:4px!important}.cashier-account-cell-flow .cashier-account-chip-list,.cashier-account-cell-role .cashier-account-chip-list{max-height:44px;overflow:hidden}.cashier-account-chip{align-items:center;background:var(--ui-primary-soft)!important;border:1px solid color-mix(in srgb,var(--ui-primary) 36%,var(--ui-border))!important;border-radius:var(--ui-radius-sm)!important;color:var(--ui-primary-hover)!important;display:inline-flex!important;font-size:.68rem!important;font-style:normal!important;font-weight:800!important;line-height:1!important;min-height:22px;padding:4px 7px!important}.cashier-account-chip.is-role{background:var(--ui-info-soft)!important;border-color:color-mix(in srgb,var(--ui-info) 36%,var(--ui-border))!important;color:var(--ui-info-strong)!important}.cashier-account-chip.is-empty{background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important;color:var(--ui-text-muted)!important}.cashier-account-edit-button{background:var(--ui-field)!important;border-color:var(--ui-primary-border)!important;color:var(--ui-primary)!important;min-height:38px!important;min-width:38px!important}.cashier-account-edit-button:hover{background:var(--ui-primary-soft)!important;color:var(--ui-primary-hover)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-detail{background:var(--ui-surface)!important;gap:8px!important;padding:10px 12px!important}@media (max-width:1040px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary{grid-template-columns:minmax(180px,1fr) minmax(190px,1fr) minmax(58px,.35fr) minmax(220px,1.1fr) 44px!important}.cashier-account-cell-role{grid-column:2/5!important}.cashier-account-edit-button{grid-column:5!important;grid-row:1/3!important}}@media (max-width:760px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-filter{z-index:12}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-list{gap:8px!important;padding-bottom:calc(170px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(170px + env(safe-area-inset-bottom))!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-summary{grid-template-columns:minmax(0,1fr) 40px!important;padding:10px!important}.cashier-account-cell{grid-column:1/-1!important}.cashier-account-cell-name{grid-column:1!important}.cashier-account-edit-button{grid-column:2!important;grid-row:1!important;min-height:36px!important;min-width:36px!important}.cashier-account-cell-order{text-align:left!important}.cashier-account-cell-flow .cashier-account-chip-list,.cashier-account-cell-role .cashier-account-chip-list{max-height:none}.cashier-account-chip{font-size:.67rem!important;min-height:21px;padding:4px 6px!important}}
/* Public catalog filter heuristic refinement: theme-bound modal, states, and controls. */
:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-primary) !important;
}

:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
):hover {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-on-primary) !important;
}

:where(
  .ksrf-back-button,
  .back-link,
  .account-back-link,
  .cashier-purchase-back,
  .community-back-link,
  .custom-order-back-to-hub,
  .display-production-back,
  .public-catalog-back,
  .vendor-stock-back
):focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 22%, transparent), var(--ui-shadow) !important;
  outline: 2px solid var(--ui-focus) !important;
}

body.public-catalog-route,
body.public-catalog-route .shell,
.public-catalog-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

.public-catalog-filter-backdrop {
  background: var(--ui-overlay) !important;
  backdrop-filter: blur(4px);
}

.public-catalog-filter-panel {
  --public-catalog-filter-safe-bottom: calc(84px + env(safe-area-inset-bottom));
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  max-height: min(780px, calc(100dvh - var(--public-catalog-filter-safe-bottom) - 24px)) !important;
  width: min(100%, 700px) !important;
}

.public-catalog-filter-head,
.public-catalog-filter-actions {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

.public-catalog-filter-head {
  padding: 16px 20px !important;
}

.public-catalog-filter-head > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.public-catalog-filter-head strong,
.public-catalog-filter-section-head strong {
  color: var(--ui-text) !important;
}

.public-catalog-filter-head small,
.public-catalog-filter-section-head small,
.public-catalog-filter-actions p,
.public-catalog-filter-empty-state {
  color: var(--ui-text-muted) !important;
}

.public-catalog-filter-head button {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  flex: 0 0 44px;
  width: 44px;
}

.public-catalog-filter-head button:hover,
.public-catalog-filter-head button:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

.public-catalog-filter-body {
  background: var(--ui-surface-soft) !important;
  gap: 12px !important;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin;
}

.public-catalog-filter-body::-webkit-scrollbar,
.public-catalog-check-list::-webkit-scrollbar,
.public-catalog-size-filter-list::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.public-catalog-filter-body::-webkit-scrollbar-track,
.public-catalog-check-list::-webkit-scrollbar-track,
.public-catalog-size-filter-list::-webkit-scrollbar-track {
  background: var(--ui-surface-soft);
}

.public-catalog-filter-body::-webkit-scrollbar-thumb,
.public-catalog-check-list::-webkit-scrollbar-thumb,
.public-catalog-size-filter-list::-webkit-scrollbar-thumb {
  background: var(--ui-primary);
  border: 2px solid var(--ui-surface-soft);
  border-radius: var(--ui-radius-sm);
}

.public-catalog-filter-section,
.public-catalog-stock-filter {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text) !important;
  gap: 10px !important;
  padding: 12px !important;
}

.public-catalog-filter-section-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.public-catalog-filter-search,
.public-catalog-filter-panel select,
.public-catalog-size-filter-row input[type="number"] {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.public-catalog-filter-search:focus-within,
.public-catalog-filter-panel select:focus,
.public-catalog-size-filter-row input[type="number"]:focus,
.public-catalog-check-option:focus-within,
.public-catalog-size-filter-row:focus-within {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  outline: none !important;
}

.public-catalog-check-list,
.public-catalog-size-filter-list {
  gap: 8px !important;
  max-height: min(220px, 30dvh) !important;
  padding-right: 4px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin;
}

.public-catalog-check-option,
.public-catalog-size-filter-row {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  min-height: 44px !important;
}

.public-catalog-check-option:hover,
.public-catalog-size-filter-row:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

.public-catalog-check-option.is-selected,
.public-catalog-size-filter-row.is-selected {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary-hover) !important;
}

.public-catalog-check-option input,
.public-catalog-size-filter-row input[type="checkbox"] {
  accent-color: var(--ui-primary) !important;
}

.public-catalog-check-option em,
.public-catalog-size-filter-row em {
  color: var(--ui-text-muted) !important;
}

.public-catalog-filter-state,
.public-catalog-filter-empty-state {
  border-radius: var(--ui-radius-sm);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.45;
  margin: 0;
  padding: 10px 12px;
}

.public-catalog-filter-empty-state {
  background: var(--ui-info-soft);
  border: 1px dashed var(--ui-border);
}

.public-catalog-filter-state.is-loading {
  background: var(--ui-info-soft);
  border: 1px solid color-mix(in srgb, var(--ui-info) 30%, var(--ui-border));
  color: var(--ui-info-strong) !important;
}

.public-catalog-filter-state.is-error,
.public-catalog-filter-panel[data-filter-state="error"] .public-catalog-filter-actions p {
  background: var(--ui-danger-soft);
  border: 1px solid color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border));
  color: var(--ui-danger-strong) !important;
}

.public-catalog-filter-panel[data-filter-state="loading"] .public-catalog-filter-body,
.public-catalog-filter-panel[data-filter-state="loading"] .public-catalog-filter-actions {
  cursor: progress;
}

.public-catalog-filter-panel select:disabled,
.public-catalog-size-filter-row input:disabled,
.public-catalog-filter-search input:disabled,
.public-catalog-filter-actions button:disabled,
.public-catalog-filter-actions a[aria-disabled="true"] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .7;
}

.public-catalog-filter-actions {
  align-items: center !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  position: sticky;
  bottom: 0;
}

.public-catalog-filter-actions p {
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
}

.public-catalog-filter-actions a,
.public-catalog-filter-actions button {
  min-width: 118px;
}

.public-catalog-filter-actions a {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.public-catalog-filter-actions a:hover,
.public-catalog-filter-actions a:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

.public-catalog-filter-actions button {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

.public-catalog-filter-actions button:hover:not(:disabled),
.public-catalog-filter-actions button:focus-visible:not(:disabled) {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

.public-catalog-summary,
.public-catalog-card,
.public-catalog-empty,
.public-catalog-detail,
.public-catalog-detail-price,
.public-catalog-variant-panel,
.public-catalog-size-option {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.public-catalog-card:hover,
.public-catalog-size-option:hover {
  border-color: var(--ui-primary-border) !important;
}

.public-catalog-status.is-available {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

.public-catalog-status.is-empty {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

@media (max-width: 640px) {
  .public-catalog-filter-panel {
    --public-catalog-filter-safe-bottom: calc(74px + env(safe-area-inset-bottom));
    bottom: calc(74px + env(safe-area-inset-bottom));
    left: 10px !important;
    max-height: calc(100dvh - var(--public-catalog-filter-safe-bottom) - 12px) !important;
    max-width: none !important;
    right: 10px;
    top: auto !important;
    transform: none !important;
    width: auto !important;
  }

  .public-catalog-filter-head {
    padding: 13px 14px !important;
  }

  .public-catalog-filter-body {
    padding: 12px !important;
  }

  .public-catalog-check-list,
  .public-catalog-size-filter-list {
    max-height: min(180px, 24dvh) !important;
  }

  .public-catalog-filter-actions {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .public-catalog-filter-actions a,
  .public-catalog-filter-actions button {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-catalog-filter-panel,
  .public-catalog-check-option,
  .public-catalog-size-filter-row,
  .public-catalog-card,
  .public-catalog-size-option {
    transition: none !important;
  }
}
/* Cashier account edit mode compact pass. */body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open]{overflow:visible!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open] .cashier-account-history-detail{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;display:grid!important;gap:8px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:8px 10px 0!important;padding:8px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open] .cashier-account-history-detail .custom-order-history-section{background:var(--ui-surface-soft)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;box-shadow:none!important;min-height:0!important;padding:8px 10px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open] .cashier-account-history-detail .custom-order-history-section small{color:var(--ui-text-muted)!important;font-size:.66rem!important;font-weight:800!important;letter-spacing:0!important;line-height:1.1;text-transform:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open] .cashier-account-history-detail .custom-order-history-section b{color:var(--ui-text)!important;font-size:.82rem!important;font-weight:850!important;line-height:1.18}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;display:grid!important;gap:8px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:8px 10px 10px!important;padding:10px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form>label,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form>.cashier-dropdown-field{background:var(--ui-surface-soft)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;box-shadow:none!important;color:var(--ui-text)!important;display:grid!important;gap:5px!important;margin:0!important;min-height:0!important;padding:9px 10px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form>label,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form>.cashier-dropdown-field>span{color:var(--ui-text)!important;font-size:.76rem!important;font-weight:850!important;letter-spacing:0!important;line-height:1.15;text-transform:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form input,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form select,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form summary{background:var(--ui-field)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;box-shadow:none!important;color:var(--ui-text)!important;font-size:.86rem!important;font-weight:800!important;min-height:40px!important;padding:0 12px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form input:focus,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form select:focus,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form summary:focus-visible{border-color:var(--ui-focus)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-focus) 22%,transparent)!important;outline:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-span{grid-column:1/-1!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form>.cashier-dropdown-field{padding:9px 10px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-dropdown{position:relative!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu{background:var(--ui-surface)!important;border:1px solid var(--ui-primary-border)!important;border-radius:var(--ui-radius-md)!important;box-shadow:var(--ui-shadow-modal)!important;color:var(--ui-text)!important;max-height:var(--cashier-multi-menu-max,220px)!important;overflow:auto!important;scrollbar-color:var(--ui-primary) var(--ui-surface-soft);scrollbar-width:thin;z-index:50!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu::-webkit-scrollbar{width:10px}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu::-webkit-scrollbar-track{background:var(--ui-surface-soft)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu::-webkit-scrollbar-thumb{background:var(--ui-primary)!important;border:2px solid var(--ui-surface-soft)!important;border-radius:var(--ui-radius-sm)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;color:var(--ui-text)!important;margin:6px!important;min-height:36px!important;padding:8px 10px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:hover{background:var(--ui-primary-soft)!important;border-color:var(--ui-primary-border)!important;color:var(--ui-primary-hover)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-actions{align-items:center!important;background:color-mix(in srgb,var(--ui-surface) 94%,transparent)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;display:flex!important;justify-content:flex-end!important;margin:0!important;min-height:0!important;padding:8px!important;position:sticky!important;z-index:7!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-actions .invoice-print-button{background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:var(--ui-on-primary)!important;font-size:.86rem!important;font-weight:850!important;min-height:40px!important;padding:8px 16px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-actions .invoice-print-button:hover{background:var(--ui-primary-hover)!important;border-color:var(--ui-primary-hover)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-actions .invoice-print-button:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-focus) 24%,transparent)!important;outline:none!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-actions .invoice-print-button:disabled{background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important;color:var(--ui-text-muted)!important}@media (max-width:900px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open] .cashier-account-history-detail{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media (max-width:620px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open] .cashier-account-history-detail,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form{grid-template-columns:minmax(0,1fr)!important;margin-inline:8px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form>label,body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form>.cashier-dropdown-field{padding:8px!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-actions{bottom:calc(68px + env(safe-area-inset-bottom))!important;justify-content:stretch!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-actions .invoice-print-button{width:100%!important}}

/* Cashier account dropdown contrast pass. */
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-dropdown,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-dropdown{position:relative!important;min-width:0!important;z-index:12!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-dropdown[open],
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-dropdown[open]{z-index:80!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-dropdown summary,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-dropdown summary{align-items:center!important;color:var(--ui-text)!important;display:flex!important;font-weight:850!important;gap:8px!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-dropdown summary[data-selection-count="0"],
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-dropdown summary[data-selection-count="0"]{color:var(--ui-text-muted)!important;font-weight:800!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-md)!important;box-shadow:var(--ui-shadow-modal)!important;color:var(--ui-text)!important;max-height:var(--cashier-multi-menu-max,220px)!important;overflow:auto!important;overscroll-behavior:contain!important;padding:6px!important;scrollbar-color:var(--ui-primary) var(--ui-field)!important;scrollbar-width:thin!important;z-index:90!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-dropdown.drop-down .cashier-multi-menu,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-dropdown.drop-down .cashier-multi-menu{top:calc(100% + 8px)!important;bottom:auto!important;transform-origin:top center!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-dropdown.drop-up .cashier-multi-menu,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-dropdown.drop-up .cashier-multi-menu{top:auto!important;bottom:calc(100% + 8px)!important;transform-origin:bottom center!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu::-webkit-scrollbar,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu::-webkit-scrollbar{width:10px!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu::-webkit-scrollbar-track,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu::-webkit-scrollbar-track{background:var(--ui-field)!important;border-radius:var(--ui-radius-sm)!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu::-webkit-scrollbar-thumb,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu::-webkit-scrollbar-thumb{background:var(--ui-primary)!important;border:2px solid var(--ui-field)!important;border-radius:var(--ui-radius-sm)!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label{align-items:center!important;background:var(--ui-field)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;color:var(--ui-text)!important;display:flex!important;font-weight:850!important;gap:8px!important;line-height:1.2!important;margin:0 0 6px!important;min-height:34px!important;padding:7px 10px!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label span,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label span{color:var(--ui-text)!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:hover,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:focus-within,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:hover,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:focus-within{background:var(--ui-primary-soft)!important;border-color:var(--ui-focus)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-focus) 22%,transparent)!important;color:var(--ui-primary)!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:hover span,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:focus-within span,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:hover span,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:focus-within span{color:var(--ui-primary)!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:has(input:checked),
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:has(input:checked){background:var(--ui-primary-soft)!important;border-color:var(--ui-primary)!important;color:var(--ui-primary)!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:has(input:checked) span,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:has(input:checked) span{color:var(--ui-primary)!important;font-weight:900!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu input,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu input{accent-color:var(--ui-primary)!important;flex:0 0 auto!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:has(input:disabled),
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:has(input:disabled){background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important;color:var(--ui-text-muted)!important;cursor:not-allowed!important;opacity:.82!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu label:has(input:disabled) span,
body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu label:has(input:disabled) span{color:var(--ui-text-muted)!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-list{padding-bottom:calc(168px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(168px + env(safe-area-inset-bottom))!important}
@media (max-width:760px){body.invoice-page:has(.cashier-accounts-page) .cashier-account-edit-form .cashier-multi-menu,body.invoice-page:has(.cashier-accounts-page) .cashier-account-create-form .cashier-multi-menu{max-height:min(var(--cashier-multi-menu-max,200px),42vh)!important}body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-list{padding-bottom:calc(190px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(190px + env(safe-area-inset-bottom))!important}}

/* Cashier account performance pass. */
body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card{content-visibility:auto;contain-intrinsic-size:96px!important}
body.invoice-page:has(.cashier-accounts-page) .cashier-account-history-card[open]{content-visibility:visible;contain-intrinsic-size:auto!important}

/* Public catalog compact accordion filters. */
.public-catalog-filter-section:not(.is-open) > .public-catalog-filter-search,
.public-catalog-filter-section:not(.is-open) > .public-catalog-check-list,
.public-catalog-filter-section:not(.is-open) > .public-catalog-size-filter-list,
.public-catalog-filter-section:not(.is-open) > .public-catalog-filter-empty-state {
  display: none !important;
}

.public-catalog-filter-section-head[role="button"] {
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  min-height: 44px;
  outline: none;
  padding: 2px 34px 2px 0;
  position: relative;
}

.public-catalog-filter-section-head[role="button"]::after {
  border-color: currentColor;
  border-style: solid;
  border-width: 0 2px 2px 0;
  content: "";
  height: 9px;
  margin-top: -6px;
  opacity: .72;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: rotate(45deg);
  transition: transform .18s ease;
  width: 9px;
}

.public-catalog-filter-section.is-open .public-catalog-filter-section-head[role="button"]::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

.public-catalog-filter-section-head[role="button"]:hover,
.public-catalog-filter-section-head[role="button"]:focus-visible {
  color: var(--ui-primary-hover) !important;
}

.public-catalog-filter-section:not(.is-open) {
  gap: 0 !important;
  padding-bottom: 10px !important;
  padding-top: 10px !important;
}

.public-catalog-check-option span b {
  color: inherit;
  display: block;
  font: inherit;
}

.public-catalog-check-option span small {
  color: var(--ui-text-muted);
  display: block;
  font-size: .74rem;
  font-weight: 750;
  line-height: 1.25;
  margin-top: 2px;
}

/* Public catalog mobile modal visibility guard. */
.public-catalog-filter-open > .public-catalog-filter-backdrop,
body > .public-catalog-filter-backdrop {
  z-index: 9000 !important;
}

.public-catalog-filter-open > .public-catalog-filter-panel,
body > .public-catalog-filter-panel {
  z-index: 9010 !important;
}

@media (max-width: 640px) {
  body.public-catalog-filter-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body > .public-catalog-filter-backdrop:not([hidden]) {
    display: block !important;
    inset: 0 !important;
    position: fixed !important;
  }

  body > .public-catalog-filter-panel:not([hidden]) {
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    position: fixed !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    transform: none !important;
    width: auto !important;
  }

  body > .public-catalog-filter-panel .public-catalog-filter-body {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Public catalog mobile two-column product grid and unboxed stats. */
@media (max-width: 560px) {
  body.public-catalog-route .public-catalog-summary {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.public-catalog-route .public-catalog-summary > div {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 2px !important;
    padding: 0 !important;
  }

  body.public-catalog-route .public-catalog-summary span {
    font-size: .72rem !important;
    line-height: 1.15 !important;
  }

  body.public-catalog-route .public-catalog-summary strong {
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  body.public-catalog-route .public-catalog-grid {
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.public-catalog-route .public-catalog-card {
    border-radius: 8px !important;
  }

  body.public-catalog-route .public-catalog-card-body {
    gap: 5px !important;
    padding: 8px !important;
  }

  body.public-catalog-route .public-catalog-card-body small {
    font-size: .62rem !important;
    line-height: 1.15 !important;
  }

  body.public-catalog-route .public-catalog-card-body h2 {
    font-size: .78rem !important;
    line-height: 1.16 !important;
  }

  body.public-catalog-route .public-catalog-card-body p {
    font-size: .7rem !important;
    line-height: 1.25 !important;
  }

  body.public-catalog-route .public-catalog-card-foot {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body.public-catalog-route .public-catalog-card-foot strong {
    font-size: .82rem !important;
    line-height: 1.15 !important;
  }

  body.public-catalog-route .public-catalog-order {
    min-height: 34px !important;
    padding: 7px 9px !important;
    width: 100% !important;
  }

  body.public-catalog-route .public-catalog-status {
    font-size: .62rem !important;
    min-height: 26px !important;
    min-width: 0 !important;
    padding: 5px 7px !important;
    right: 7px !important;
    top: 7px !important;
  }
}

/* Financial report searchable dropdown: token-driven replacement for native select popups. */
body.invoice-page .financial-reports-page .financial-journal-filters label:has(.financial-filter-combobox) {
  min-width: 0 !important;
  position: relative !important;
}

body.invoice-page .financial-reports-page .financial-filter-native-select {
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox {
  display: block !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 8 !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox.is-open {
  z-index: 80 !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox input {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  font: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  min-height: 44px !important;
  outline: none !important;
  padding: 0 12px !important;
  width: 100% !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox input::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox input:hover {
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox input:focus {
  background: var(--ui-surface) !important;
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list,
body.invoice-page .financial-reports-page .financial-filter-combobox-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  left: 0 !important;
  max-height: min(320px, 52vh) !important;
  overflow: auto !important;
  padding: 6px !important;
  position: absolute !important;
  right: 0 !important;
  scrollbar-color: var(--ui-primary) var(--ui-field) !important;
  scrollbar-width: thin !important;
  top: calc(100% + 8px) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list::-webkit-scrollbar {
  width: 10px !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list::-webkit-scrollbar-track {
  background: var(--ui-field) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-field) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list button {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  cursor: pointer !important;
  display: block !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  text-align: left !important;
  width: 100% !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list button:last-child {
  margin-bottom: 0 !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list button:hover,
body.invoice-page .financial-reports-page .financial-filter-combobox-list button:focus-visible,
body.invoice-page .financial-reports-page .financial-filter-combobox-list button[aria-selected="true"] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: none !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list button:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-empty:not([hidden]) {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 10px 12px !important;
}

@media (max-width: 720px) {
  body.invoice-page .financial-reports-page .financial-filter-combobox input {
    font-size: 0.78rem !important;
    min-height: 38px !important;
    padding: 0 10px !important;
  }

  body.invoice-page .financial-reports-page .financial-filter-combobox-list,
  body.invoice-page .financial-reports-page .financial-filter-combobox-empty {
    max-height: min(260px, 46vh) !important;
  }

  body.invoice-page .financial-reports-page .financial-filter-combobox-list button {
    font-size: 0.76rem !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
  }
}

/* Financial capital flow page: scoped token contract and navbar removal. */
body.invoice-page:has(.financial-reports-page) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.invoice-page:has(.financial-reports-page) > .topbar {
  display: none !important;
}

body.invoice-page:has(.financial-reports-page)::before,
body.invoice-page:has(.financial-reports-page)::after {
  background: var(--ui-bg) !important;
}

body.invoice-page:has(.financial-reports-page)::-webkit-scrollbar,
body.invoice-page .financial-reports-page *::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

body.invoice-page:has(.financial-reports-page)::-webkit-scrollbar-track,
body.invoice-page .financial-reports-page *::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page:has(.financial-reports-page)::-webkit-scrollbar-thumb,
body.invoice-page .financial-reports-page *::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .financial-reports-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  gap: 24px !important;
  margin-inline: auto !important;
  max-width: min(1724px, calc(100% - 32px)) !important;
  padding: 28px 0 calc(132px + env(safe-area-inset-bottom)) !important;
}

body.invoice-page .financial-reports-page .invoice-builder-head {
  align-items: center !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  margin: 0 !important;
  padding: clamp(22px, 3vw, 34px) !important;
}

body.invoice-page .financial-reports-page .invoice-builder-head h1,
body.invoice-page .financial-reports-page .cashier-panel h2,
body.invoice-page .financial-reports-page .cashier-summary article b,
body.invoice-page .financial-reports-page .financial-journal-row strong,
body.invoice-page .financial-reports-page .financial-journal-row b {
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page .invoice-builder-head p:not(.auth-brand),
body.invoice-page .financial-reports-page .cashier-summary article span,
body.invoice-page .financial-reports-page .cashier-summary article small,
body.invoice-page .financial-reports-page .cashier-panel > p,
body.invoice-page .financial-reports-page .financial-journal-row small,
body.invoice-page .financial-reports-page .financial-journal-meta,
body.invoice-page .financial-reports-page .financial-pagination-info,
body.invoice-page .financial-reports-page .financial-row-count {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .financial-reports-page .auth-brand,
body.invoice-page .financial-reports-page .dashboard-kicker {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .financial-reports-page .cashier-summary article,
body.invoice-page .financial-reports-page .cashier-panel,
body.invoice-page .financial-reports-page .financial-group-investor-recap,
body.invoice-page .financial-reports-page .financial-journal-filters,
body.invoice-page .financial-reports-page .financial-journal-filter-panel,
body.invoice-page .financial-reports-page .cashier-empty-state {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page .financial-journal-filters label,
body.invoice-page .financial-reports-page .financial-group-investor-metric,
body.invoice-page .financial-reports-page .financial-group-investor-reconciliation,
body.invoice-page .financial-reports-page .financial-group-investor-table,
body.invoice-page .financial-reports-page .financial-reference-table,
body.invoice-page .financial-reports-page .financial-journal-table {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page input,
body.invoice-page .financial-reports-page select,
body.invoice-page .financial-reports-page textarea,
body.invoice-page .financial-reports-page .financial-filter-combobox input {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page input::placeholder,
body.invoice-page .financial-reports-page textarea::placeholder,
body.invoice-page .financial-reports-page .financial-filter-combobox input::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.invoice-page .financial-reports-page input:hover,
body.invoice-page .financial-reports-page select:hover,
body.invoice-page .financial-reports-page textarea:hover,
body.invoice-page .financial-reports-page .financial-filter-combobox input:hover {
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .financial-reports-page input:focus,
body.invoice-page .financial-reports-page select:focus,
body.invoice-page .financial-reports-page textarea:focus,
body.invoice-page .financial-reports-page .financial-filter-combobox input:focus,
body.invoice-page .financial-reports-page button:focus-visible,
body.invoice-page .financial-reports-page a:focus-visible,
body.invoice-page .financial-reports-page summary:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

body.invoice-page .financial-reports-page button,
body.invoice-page .financial-reports-page .cashier-action-button,
body.invoice-page .financial-reports-page .financial-journal-filter-toggle,
body.invoice-page .financial-reports-page .financial-pagination a,
body.invoice-page .financial-reports-page .financial-pagination span {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .financial-reports-page button:hover:not(:disabled),
body.invoice-page .financial-reports-page .cashier-action-button:hover:not(:disabled),
body.invoice-page .financial-reports-page .financial-journal-filter-toggle:hover,
body.invoice-page .financial-reports-page .financial-pagination a:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .financial-reports-page .cashier-action-ghost,
body.invoice-page .financial-reports-page .financial-pagination .is-disabled,
body.invoice-page .financial-reports-page .financial-pagination span {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .financial-reports-page button:disabled,
body.invoice-page .financial-reports-page .cashier-action-button:disabled,
body.invoice-page .financial-reports-page [aria-disabled="true"] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-list,
body.invoice-page .financial-reports-page .financial-filter-combobox-empty {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-option {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-option:hover,
body.invoice-page .financial-reports-page .financial-filter-combobox-option.is-active,
body.invoice-page .financial-reports-page .financial-filter-combobox-option[aria-selected="true"] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .financial-reports-page .financial-filter-combobox-empty {
  background: var(--ui-warning-soft) !important;
  border-color: var(--ui-warning) !important;
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .financial-reports-page .financial-partner-flow-table > .financial-journal-row:not(.financial-journal-row-head),
body.invoice-page .financial-reports-page .financial-group-investor-table > .financial-journal-row:not(.financial-journal-row-head),
body.invoice-page .financial-reports-page .financial-reference-table > .financial-journal-row:not(.financial-journal-row-head) {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-left-color: var(--ui-primary) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page .financial-partner-flow-table > .financial-journal-row:not(.financial-journal-row-head):hover,
body.invoice-page .financial-reports-page .financial-group-investor-table > .financial-journal-row:not(.financial-journal-row-head):hover,
body.invoice-page .financial-reports-page .financial-reference-table > .financial-journal-row:not(.financial-journal-row-head):hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .financial-reports-page .financial-journal-row-head {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page .financial-journal-row-head span,
body.invoice-page .financial-reports-page .financial-journal-row-head b {
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page .financial-flow-source-cell a,
body.invoice-page .financial-reports-page .financial-reference-link,
body.invoice-page .financial-reports-page details > summary {
  color: var(--ui-primary) !important;
}

body.invoice-page .financial-reports-page .financial-flow-source-cell a:hover,
body.invoice-page .financial-reports-page .financial-reference-link:hover,
body.invoice-page .financial-reports-page details > summary:hover {
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .financial-reports-page .is-amount,
body.invoice-page .financial-reports-page .is-positive,
body.invoice-page .financial-reports-page .financial-group-investor-positive {
  color: var(--ui-success-strong) !important;
}

body.invoice-page .financial-reports-page .is-negative,
body.invoice-page .financial-reports-page .financial-group-investor-negative,
body.invoice-page .financial-reports-page .is-danger {
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .financial-reports-page .financial-group-investor-reconciliation {
  background: var(--ui-warning-soft) !important;
  border: 1px solid var(--ui-warning) !important;
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .financial-reports-page .financial-group-investor-reconciliation.is-balanced {
  background: var(--ui-success-soft) !important;
  border-color: var(--ui-success) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .financial-reports-page .financial-group-investor-reconciliation.is-unbalanced,
body.invoice-page .financial-reports-page .ui-status-error,
body.invoice-page .financial-reports-page .alert-error,
body.invoice-page .financial-reports-page [data-state="error"] {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .financial-reports-page .ui-status-success,
body.invoice-page .financial-reports-page .alert-success,
body.invoice-page .financial-reports-page [data-state="success"] {
  background: var(--ui-success-soft) !important;
  border-color: var(--ui-success) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .financial-reports-page dialog,
body.invoice-page .financial-reports-page .modal,
body.invoice-page .financial-reports-page .notification-modal,
body.invoice-page .financial-reports-page .cashier-modal,
body.invoice-page .financial-reports-page [role="dialog"] {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-reports-page dialog::backdrop {
  background: var(--ui-overlay) !important;
}

body.invoice-page .financial-reports-page .cashier-empty-state {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
  padding-bottom: clamp(24px, 4vw, 44px) !important;
}

body.invoice-page .financial-reports-page .is-group-investor-flow > .financial-journal-row.is-group-investor-row {
  grid-template-columns: minmax(120px, 0.55fr) minmax(210px, 1fr) minmax(240px, 1.25fr) minmax(120px, 0.6fr) minmax(120px, 0.6fr) !important;
}

body.invoice-page:has(.financial-reports-page) > .home-bottom-nav {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text-muted) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

body.invoice-page:has(.financial-reports-page) > .home-bottom-nav a,
body.invoice-page:has(.financial-reports-page) > .home-bottom-nav button {
  color: var(--ui-text-muted) !important;
}

body.invoice-page:has(.financial-reports-page) > .home-bottom-nav a:hover,
body.invoice-page:has(.financial-reports-page) > .home-bottom-nav button:hover,
body.invoice-page:has(.financial-reports-page) > .home-bottom-nav .active {
  color: var(--ui-primary) !important;
}

@media (max-width: 980px) {
  body.invoice-page .financial-reports-page {
    max-width: calc(100% - 20px) !important;
    padding-bottom: calc(144px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .financial-reports-page .financial-journal-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.invoice-page .financial-reports-page .financial-partner-flow-table > .financial-journal-row:not(.financial-journal-row-head),
  body.invoice-page .financial-reports-page .financial-group-investor-table > .financial-journal-row:not(.financial-journal-row-head),
  body.invoice-page .financial-reports-page .financial-reference-table > .financial-journal-row:not(.financial-journal-row-head),
  body.invoice-page .financial-reports-page .is-group-investor-flow > .financial-journal-row.is-group-investor-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 680px) {
  body.invoice-page .financial-reports-page {
    gap: 16px !important;
    max-width: calc(100% - 14px) !important;
    padding: 14px 0 calc(156px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .financial-reports-page .invoice-builder-head {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  body.invoice-page .financial-reports-page .invoice-builder-head .cashier-head-actions {
    justify-content: flex-start !important;
  }

  body.invoice-page .financial-reports-page .invoice-builder-head h1 {
    font-size: clamp(2rem, 12vw, 3.2rem) !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere !important;
  }

  body.invoice-page .financial-reports-page .cashier-summary,
  body.invoice-page .financial-reports-page .financial-journal-filters,
  body.invoice-page .financial-reports-page .financial-pagination,
  body.invoice-page .financial-reports-page .financial-partner-flow-table > .financial-journal-row:not(.financial-journal-row-head),
  body.invoice-page .financial-reports-page .financial-group-investor-table > .financial-journal-row:not(.financial-journal-row-head),
  body.invoice-page .financial-reports-page .financial-reference-table > .financial-journal-row:not(.financial-journal-row-head),
  body.invoice-page .financial-reports-page .is-group-investor-flow > .financial-journal-row.is-group-investor-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page .financial-reports-page .financial-filter-combobox-list,
  body.invoice-page .financial-reports-page .financial-filter-combobox-empty {
    max-height: min(300px, 46vh) !important;
  }
}

/* KSRF Business Hub: fully bound to the global --ui-* theme contract. */
body:has(.business-hub-page) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body:has(.business-hub-page) > .shell {
  max-width: none;
  padding: 0;
}

.business-hub-page {
  background: var(--ui-bg);
  color: var(--ui-text);
  display: grid;
  gap: 20px;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 100dvh;
  padding: clamp(18px, 3vw, 38px) clamp(16px, 4vw, 56px) calc(112px + env(safe-area-inset-bottom));
  width: 100%;
}

.business-hub-head {
  align-items: center;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: clamp(18px, 2.5vw, 28px) !important;
}

.business-hub-head h1,
.business-hub-section-head h2,
.business-hub-panel h2,
.business-hub-empty h2,
.business-hub-card strong,
.business-hub-type-card strong,
.business-hub-summary strong,
.business-hub-history-list b,
.business-hub-history-list strong,
.business-hub-definition-list dd,
.business-hub-finance-list dd {
  color: var(--ui-text) !important;
}

.business-hub-head p,
.business-hub-empty p,
.business-hub-type-card p,
.business-hub-panel p,
.business-hub-card span,
.business-hub-card em,
.business-hub-card small,
.business-hub-summary span,
.business-hub-definition-list dt,
.business-hub-finance-list dt,
.business-hub-history-list small,
.business-hub-history-list p,
.business-hub-form label small {
  color: var(--ui-text-muted) !important;
}

.business-hub-head .auth-brand,
.business-hub-section-head .dashboard-kicker,
.business-hub-panel .dashboard-kicker {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 999px !important;
  color: var(--ui-primary-hover) !important;
  display: inline-flex;
  width: fit-content;
}

.business-hub-primary,
.business-hub-form-actions button {
  align-items: center;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 850;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.business-hub-primary:hover,
.business-hub-primary:focus-visible,
.business-hub-form-actions button:hover,
.business-hub-form-actions button:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ui-primary) 22%, transparent) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 28%, transparent);
  outline-offset: 2px;
}

.business-hub-primary:active,
.business-hub-form-actions button:active,
.business-hub-card:active {
  transform: translateY(1px);
}

.business-hub-primary[aria-disabled="true"],
.business-hub-form-actions button:disabled,
.business-hub-form input:disabled,
.business-hub-form textarea:disabled,
.business-hub-form select:disabled {
  cursor: not-allowed !important;
  opacity: 0.58;
}

.business-hub-summary,
.business-hub-grid,
.business-hub-type-grid,
.business-hub-workspace,
.business-hub-form-grid,
.business-hub-plan-grid,
.business-hub-module-list,
.business-hub-status-flow,
.business-hub-finance-list,
.business-hub-history-list {
  display: grid;
  gap: 12px;
}

.business-hub-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.business-hub-summary article,
.business-hub-card,
.business-hub-type-card,
.business-hub-panel,
.business-hub-empty,
.business-hub-plan-card,
.business-hub-history-list article,
.business-hub-definition-list div,
.business-hub-finance-list div {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

.business-hub-summary article {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 16px;
}

.business-hub-summary strong {
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.business-hub-section,
.business-hub-form,
.business-hub-workspace {
  display: grid;
  gap: 16px;
}

.business-hub-section-head {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.business-hub-section-head h2,
.business-hub-panel h2,
.business-hub-empty h2 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: 0;
  line-height: 1.18;
  margin: 0;
}

.business-hub-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.business-hub-card {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 150px;
  padding: 18px;
  position: relative;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.business-hub-card:hover,
.business-hub-card:focus-visible,
.business-hub-type-card:hover,
.business-hub-plan-card:has(input:focus-visible),
.business-hub-plan-card:has(input:checked) {
  border-color: var(--ui-primary-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  outline: none;
  transform: translateY(-2px);
}

.business-hub-logo {
  align-items: center;
  aspect-ratio: 1;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-md);
  color: var(--ui-primary-hover) !important;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  width: 58px;
}

.business-hub-logo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.business-hub-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.business-hub-copy strong,
.business-hub-copy em,
.business-hub-copy span {
  overflow-wrap: anywhere;
}

.business-hub-copy em {
  font-style: normal;
  font-weight: 750;
}

.business-hub-status,
.business-hub-module-list span,
.business-hub-status-flow span,
.business-hub-type-card span,
.business-hub-history-list em {
  background: var(--ui-info-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-info) 28%, var(--ui-border)) !important;
  border-radius: 999px;
  color: var(--ui-info-strong) !important;
  display: inline-flex;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  padding: 7px 10px;
  width: fit-content;
}

.business-hub-status.is-success {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 28%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

.business-hub-status.is-warning,
.business-hub-history-list em {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 28%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

.business-hub-empty {
  align-items: center;
  display: grid;
  min-height: 300px;
  padding: clamp(24px, 5vw, 54px);
}

.business-hub-empty > div {
  display: grid;
  gap: 12px;
  max-width: 680px;
}

.business-hub-type-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.business-hub-type-card {
  display: grid;
  gap: 10px;
  min-height: 176px;
  padding: 18px;
}

.business-hub-type-card div,
.business-hub-module-list,
.business-hub-status-flow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.business-hub-panel {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 26px);
}

.business-hub-panel-head,
.business-hub-profile-row {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.business-hub-panel-head > span {
  align-items: center;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 999px;
  color: var(--ui-primary-hover) !important;
  display: inline-flex;
  flex: 0 0 36px;
  font-weight: 900;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.business-hub-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-hub-form label {
  color: var(--ui-text) !important;
  display: grid;
  font-weight: 800;
  gap: 8px;
  min-width: 0;
}

.business-hub-form input,
.business-hub-form textarea,
.business-hub-form select {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  font: inherit;
  min-height: 46px;
  padding: 10px 12px;
  width: 100%;
}

.business-hub-form textarea {
  min-height: 96px;
  resize: vertical;
}

.business-hub-form input::placeholder,
.business-hub-form textarea::placeholder {
  color: var(--ui-text-muted) !important;
}

.business-hub-form input:focus,
.business-hub-form textarea:focus,
.business-hub-form select:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: none;
}

.business-hub-wide,
.business-hub-combobox-field {
  grid-column: 1 / -1;
}

.business-hub-combobox-menu {
  left: 0;
  max-height: 280px;
  overflow: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
}

.business-hub-combobox-menu::-webkit-scrollbar,
.business-hub-history-list::-webkit-scrollbar,
.business-hub-page::-webkit-scrollbar {
  width: 10px;
}

.business-hub-combobox-menu::-webkit-scrollbar-track,
.business-hub-history-list::-webkit-scrollbar-track,
.business-hub-page::-webkit-scrollbar-track {
  background: var(--ui-surface-soft);
}

.business-hub-combobox-menu::-webkit-scrollbar-thumb,
.business-hub-history-list::-webkit-scrollbar-thumb,
.business-hub-page::-webkit-scrollbar-thumb {
  background: var(--ui-primary-border);
  border-radius: 999px;
}

.business-hub-combobox-menu .ui-combobox-option {
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.business-hub-plan-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.business-hub-plan-card {
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 160px;
  padding: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.business-hub-plan-card input {
  min-height: auto;
  width: fit-content;
}

.business-hub-plan-card span {
  color: var(--ui-primary-hover) !important;
  font-weight: 900;
}

.business-hub-plan-card small {
  color: var(--ui-text-muted) !important;
  font-weight: 500;
  line-height: 1.45;
}

.business-hub-form-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.business-hub-form-actions a {
  align-items: center;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: inline-flex;
  font-weight: 850;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
}

.business-hub-form-actions a:hover,
.business-hub-form-actions a:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, transparent);
  outline-offset: 2px;
}

.business-hub-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
}

.business-hub-brand-panel,
.business-hub-history-panel {
  grid-column: 1 / -1;
}

.business-hub-definition-list,
.business-hub-finance-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0;
}

.business-hub-definition-list div,
.business-hub-finance-list div {
  box-shadow: none !important;
  display: grid;
  gap: 4px;
  min-height: 80px;
  padding: 12px;
}

.business-hub-definition-list dt,
.business-hub-finance-list dt {
  font-size: 0.78rem;
  font-weight: 800;
}

.business-hub-definition-list dd,
.business-hub-finance-list dd {
  font-weight: 850;
  margin: 0;
  overflow-wrap: anywhere;
}

.business-hub-module-list span.is-disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  text-decoration: line-through;
}

.business-hub-history-list {
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.business-hub-history-list article {
  align-items: center;
  box-shadow: none !important;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 74px;
  padding: 12px;
}

.business-hub-history-list article > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.business-hub-history-list p {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm);
  margin: 0;
  padding: 14px;
}

@media (max-width: 960px) {
  .business-hub-head,
  .business-hub-card,
  .business-hub-history-list article {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .business-hub-head .business-hub-primary,
  .business-hub-card .business-hub-status,
  .business-hub-history-list em {
    grid-column: 2;
    justify-self: start;
  }

  .business-hub-summary,
  .business-hub-plan-grid,
  .business-hub-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .business-hub-page {
    gap: 14px;
    padding: 12px 10px calc(104px + env(safe-area-inset-bottom));
  }

  .business-hub-head,
  .business-hub-summary,
  .business-hub-form-grid,
  .business-hub-plan-grid,
  .business-hub-workspace,
  .business-hub-history-list article {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .business-hub-head .back-link,
  .business-hub-head .business-hub-primary,
  .business-hub-card .business-hub-status,
  .business-hub-history-list em {
    grid-column: auto;
  }

  .business-hub-head .business-hub-primary,
  .business-hub-form-actions,
  .business-hub-form-actions a,
  .business-hub-form-actions button {
    width: 100%;
  }

  .business-hub-form-actions {
    display: grid;
  }

  .business-hub-card {
    align-items: start;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    min-height: 0;
    padding: 14px;
  }

  .business-hub-logo {
    width: 52px;
  }

  .business-hub-panel-head,
  .business-hub-profile-row,
  .business-hub-section-head {
    align-items: flex-start;
  }
}

/* Pesanan Custom mobile product modal: global UI theme contract. */
body.invoice-page .custom-orders-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft);
}


body.invoice-page .custom-orders-page :where(.custom-order-section-card, .custom-order-form-section, .custom-order-product-panel, .custom-order-product-card, .custom-order-summary-card, .custom-order-history-card, .custom-order-history-item, .custom-order-product-summary, .custom-order-product-display, .custom-order-product-filter, .custom-order-product-multiselect, .custom-order-price-summary, .custom-order-note-card, .custom-order-status-card) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-tab, .custom-order-filter-tab, .custom-order-status-pill, .custom-order-product-chip, .custom-order-pill, .custom-order-badge) {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-tab[aria-current="page"], .custom-order-tab.is-active, .custom-order-filter-tab.is-active, .custom-order-product-chip.is-selected, .custom-order-status-pill.is-active) {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page :where(input, select, textarea, .custom-order-searchable-trigger, .custom-order-product-multiselect-button, .custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu) {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(input, select, textarea)::placeholder,
body.invoice-page .custom-orders-page :where(label > span, legend, small, .hint, .custom-order-product-price-note) {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .custom-orders-page :where(input, select, textarea, button, a, summary, [tabindex]):focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px var(--ui-focus) !important;
  outline: 0 !important;
}

body.invoice-page .custom-orders-page :where(input, select, textarea, button)[disabled],
body.invoice-page .custom-orders-page :where(input, select, textarea)[readonly],
body.invoice-page .custom-orders-page :where(.is-disabled, [aria-disabled="true"]) {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-product-modal-body, .custom-order-history-list, .custom-order-scroll-area) {
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft);
  scrollbar-width: thin;
}

body.invoice-page .custom-orders-page :where(.custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-product-modal-body, .custom-order-history-list, .custom-order-scroll-area)::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

body.invoice-page .custom-orders-page :where(.custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-product-modal-body, .custom-order-history-list, .custom-order-scroll-area)::-webkit-scrollbar-track {
  background: var(--ui-surface-soft);
}

body.invoice-page .custom-orders-page :where(.custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-product-modal-body, .custom-order-history-list, .custom-order-scroll-area)::-webkit-scrollbar-thumb {
  background: var(--ui-primary-border);
  border: 2px solid var(--ui-surface-soft);
  border-radius: var(--ui-radius-pill);
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-editor {
  align-items: center !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  display: grid !important;
  inset: 0 !important;
  justify-items: center !important;
  height: 100dvh !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: 12px !important;
  place-items: center !important;
  position: fixed !important;
  transform: none !important;
  width: 100vw !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-editor::backdrop {
  background: var(--ui-overlay) !important;
  backdrop-filter: blur(4px);
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-dialog {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  max-height: calc(100dvh - 24px) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: min(560px, calc(100vw - 24px)) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-head {
  align-items: start !important;
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 14px 16px !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-card-head {
  align-items: start !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-card-head strong {
  color: var(--ui-text) !important;
  font-size: clamp(1rem, 4vw, 1.18rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-close {
  align-items: center !important;
  aspect-ratio: 1 !important;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text-muted) !important;
  display: inline-grid !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 42px !important;
  padding: 0 !important;
  width: 42px !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-close:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-body {
  background: var(--ui-surface) !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 14px 16px 18px !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-body > * {
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-body input,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-body select,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-body textarea,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-filter-grid select,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-multiselect-button {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  min-height: 46px !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-price-preview,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-total-preview,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-filter-results,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-multiselect-menu {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-price-preview strong,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-total-preview strong,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-filter-results strong,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-multiselect-menu strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-multiselect-menu button,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-filter-results button,
body.invoice-page .custom-orders-page .custom-order-dropdown-menu button {
  background: none !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-multiselect-menu button:hover,
body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-filter-results button:hover,
body.invoice-page .custom-orders-page .custom-order-dropdown-menu button:hover {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions {
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) !important;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions button {
  align-items: center !important;
  border-radius: var(--ui-radius-sm) !important;
  border-style: solid !important;
  border-width: 1px !important;
  display: inline-flex !important;
  font-size: clamp(0.84rem, 3.5vw, 0.96rem) !important;
  font-weight: 800 !important;
  gap: 8px !important;
  justify-content: center !important;
  min-height: 48px !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  padding: 10px 12px !important;
  text-align: center !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions [data-save-product] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions [data-save-product]:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions [data-remove-product] {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions [data-remove-product]:hover {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-on-danger) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-toast, .custom-order-success-modal, .custom-order-error-modal, .custom-order-notification-modal) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-toast.is-success, .custom-order-success-modal) {
  background: var(--ui-success-soft) !important;
  border-color: var(--ui-success) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-toast.is-error, .custom-order-error-modal) {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

@media (max-width: 620px) {
  body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-editor {
    height: 100dvh !important;
    max-height: none !important;
    max-width: none !important;
    padding: 8px !important;
    width: 100vw !important;
  }

  body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-dialog {
    border-radius: var(--ui-radius-md) !important;
    max-height: calc(100dvh - 16px) !important;
    width: calc(100vw - 16px) !important;
  }

  body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-head {
    padding: 12px 14px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-modal-body {
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px 14px 16px !important;
  }

  body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .custom-orders-page #custom-order-input .custom-order-product-actions [data-remove-product] {
    min-height: 44px !important;
  }
}

/* Pesanan Custom product editor width fix for history/detail contexts. */
body.invoice-page .custom-orders-page .custom-order-product-editor {
  align-items: center !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  display: grid !important;
  inset: 0 !important;
  justify-items: center !important;
  margin: auto !important;
  max-height: calc(100dvh - 24px) !important;
  max-width: calc(100vw - 24px) !important;
  overflow: visible !important;
  padding: 12px !important;
  place-items: center !important;
  width: min(680px, calc(100vw - 24px)) !important;
}

body.invoice-page .custom-orders-page .custom-order-product-editor[hidden] {
  display: none !important;
}

body.invoice-page .custom-orders-page .custom-order-product-editor::backdrop {
  background: var(--ui-overlay) !important;
  backdrop-filter: blur(4px);
}

body.invoice-page .custom-orders-page .custom-order-product-dialog {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  max-height: calc(100dvh - 24px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: min(680px, calc(100vw - 24px)) !important;
}

body.invoice-page .custom-orders-page .custom-order-product-modal-head {
  align-items: start !important;
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 14px 16px !important;
}

body.invoice-page .custom-orders-page .custom-order-product-modal-body {
  background: var(--ui-surface) !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 14px 16px 18px !important;
}

body.invoice-page .custom-orders-page .custom-order-product-modal-body > * {
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page .custom-order-product-filter-results {
  max-height: min(280px, 38dvh) !important;
  min-width: 0 !important;
  overflow: auto !important;
}

body.invoice-page .custom-orders-page .custom-order-product-filter-results :where(button, label, article, li, div) {
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page .custom-order-product-filter-results :where(strong, b, span, small, p) {
  overflow-wrap: anywhere !important;
}

body.invoice-page .custom-orders-page .custom-order-product-actions {
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) !important;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 620px) {
  body.invoice-page .custom-orders-page .custom-order-product-editor {
    max-height: calc(100dvh - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 8px !important;
    width: calc(100vw - 16px) !important;
  }

  body.invoice-page .custom-orders-page .custom-order-product-dialog {
    border-radius: var(--ui-radius-md) !important;
    max-height: calc(100dvh - 16px) !important;
    width: calc(100vw - 16px) !important;
  }

  body.invoice-page .custom-orders-page .custom-order-product-modal-body {
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px 14px 16px !important;
  }

  body.invoice-page .custom-orders-page .custom-order-product-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/* Public catalog detail: readable product, stock, and CTA layout bound to the global UI theme. */
body.public-catalog-route .public-catalog-detail-page {
  padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
}

body.public-catalog-route .public-catalog-detail {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  display: grid !important;
  gap: clamp(14px, 2vw, 22px) !important;
  grid-template-columns: minmax(320px, .92fr) minmax(360px, 1.08fr) !important;
  overflow: visible !important;
  padding: clamp(12px, 2vw, 18px) !important;
}

body.public-catalog-route .public-catalog-detail-media {
  align-items: center !important;
  aspect-ratio: 4 / 3 !important;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  display: grid !important;
  justify-items: center !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

body.public-catalog-route .public-catalog-detail-media img {
  display: block !important;
  height: 100% !important;
  object-fit: contain !important;
  width: 100% !important;
}

body.public-catalog-route .public-catalog-detail-media.is-placeholder {
  aspect-ratio: 16 / 10 !important;
  min-height: 260px !important;
  padding: clamp(18px, 4vw, 36px) !important;
}

body.public-catalog-route .public-catalog-detail-media.is-placeholder img {
  max-height: min(180px, 44%) !important;
  max-width: min(360px, 72%) !important;
  opacity: .34 !important;
}

body.public-catalog-route .public-catalog-media-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text-muted) !important;
  font-size: .9rem !important;
  font-weight: 850 !important;
  padding: 10px 14px !important;
  position: absolute !important;
  text-align: center !important;
}

body.public-catalog-route .public-catalog-detail-body {
  align-content: start !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 12px !important;
  padding: clamp(4px, 1vw, 8px) !important;
}

body.public-catalog-route .public-catalog-detail-body > small,
body.public-catalog-route .public-catalog-detail-body > p,
body.public-catalog-route .public-catalog-variant-head span,
body.public-catalog-route .public-catalog-size-option small {
  color: var(--ui-text-muted) !important;
}

body.public-catalog-route .public-catalog-detail-body h1 {
  color: var(--ui-text) !important;
  font-size: clamp(1.35rem, 2.3vw, 2rem) !important;
  line-height: 1.14 !important;
}

body.public-catalog-route .public-catalog-detail-price,
body.public-catalog-route .public-catalog-variant-panel {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.public-catalog-route .public-catalog-detail-price strong {
  color: var(--ui-primary) !important;
}

body.public-catalog-route .public-catalog-variant-panel {
  max-height: min(420px, 48vh) !important;
  overflow: auto !important;
  padding: 12px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft);
  scrollbar-width: thin;
}

body.public-catalog-route .public-catalog-variant-panel::-webkit-scrollbar {
  width: 10px;
}

body.public-catalog-route .public-catalog-variant-panel::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.public-catalog-route .public-catalog-variant-panel::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.public-catalog-route .public-catalog-variant-head {
  border-bottom: 1px solid var(--ui-border) !important;
  margin-bottom: 4px !important;
  padding-bottom: 8px !important;
}

body.public-catalog-route .public-catalog-variant-head strong {
  color: var(--ui-text) !important;
}

body.public-catalog-route .public-catalog-size-option {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  min-height: 78px !important;
}

body.public-catalog-route .public-catalog-size-option:hover,
body.public-catalog-route .public-catalog-size-option:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.public-catalog-route .public-catalog-size-option strong {
  color: var(--ui-text) !important;
}

body.public-catalog-route .public-catalog-size-option em {
  background: var(--ui-success-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-success-strong) !important;
  padding: 6px 10px !important;
}

body.public-catalog-route .public-catalog-size-option.is-empty {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  opacity: .78 !important;
}

body.public-catalog-route .public-catalog-size-option.is-empty em {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

body.public-catalog-route .public-catalog-detail-actions {
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border) !important;
  bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  margin-top: 2px !important;
  padding-top: 10px !important;
  position: sticky !important;
  z-index: 5 !important;
}

body.public-catalog-route .public-catalog-order.is-wide {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  min-height: 50px !important;
}

body.public-catalog-route .public-catalog-order.is-wide:hover,
body.public-catalog-route .public-catalog-order.is-wide:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, var(--ui-surface)) !important;
  outline-offset: 2px !important;
}

@media (max-width: 900px) {
  body.public-catalog-route .public-catalog-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.public-catalog-route .public-catalog-detail-media,
  body.public-catalog-route .public-catalog-detail-media.is-placeholder {
    aspect-ratio: 4 / 3 !important;
    min-height: 220px !important;
  }

  body.public-catalog-route .public-catalog-variant-panel {
    max-height: none !important;
  }
}

@media (max-width: 560px) {
  body.public-catalog-route .public-catalog-detail-page {
    padding-inline: 10px !important;
  }

  body.public-catalog-route .public-catalog-detail {
    gap: 12px !important;
    padding: 10px !important;
  }

  body.public-catalog-route .public-catalog-detail-head {
    align-items: center !important;
    flex-direction: row !important;
  }

  body.public-catalog-route .public-catalog-size-option {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.public-catalog-route .public-catalog-size-option em {
    align-self: flex-start !important;
  }
}
/* Public catalog detail refinement: 1:1 product canvas and safer CTA spacing. */
body.public-catalog-route .public-catalog-detail-page {
  padding-bottom: calc(148px + env(safe-area-inset-bottom)) !important;
}

body.public-catalog-route .public-catalog-detail {
  align-items: start !important;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) !important;
}

body.public-catalog-route .public-catalog-detail-media,
body.public-catalog-route .public-catalog-detail-media.is-placeholder {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  max-height: min(620px, calc(100vh - 210px)) !important;
}

body.public-catalog-route .public-catalog-detail-media img {
  height: 100% !important;
  object-fit: contain !important;
  padding: clamp(10px, 2vw, 18px) !important;
  width: 100% !important;
}

body.public-catalog-route .public-catalog-detail-media.is-placeholder {
  max-height: min(420px, calc(100vh - 240px)) !important;
}

body.public-catalog-route .public-catalog-detail-media.is-placeholder img {
  max-height: min(150px, 36%) !important;
  max-width: min(300px, 62%) !important;
  padding: 0 !important;
}

body.public-catalog-route .public-catalog-detail-body {
  gap: 10px !important;
  min-width: 0 !important;
}

body.public-catalog-route .public-catalog-detail-body > small {
  font-size: .78rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body.public-catalog-route .public-catalog-detail-body h1 {
  font-size: clamp(1.28rem, 1.9vw, 1.72rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  max-width: 22em !important;
}

body.public-catalog-route .public-catalog-detail-body > p:not(.public-catalog-custom-note) {
  font-size: .95rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: 42em !important;
}

body.public-catalog-route .public-catalog-custom-note.is-detail {
  align-self: start !important;
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  padding: 9px 12px !important;
}

body.public-catalog-route .public-catalog-detail-price {
  padding: 14px 16px !important;
}

body.public-catalog-route .public-catalog-detail-price span {
  color: var(--ui-text-muted) !important;
  font-size: .9rem !important;
}

body.public-catalog-route .public-catalog-detail-price strong {
  font-size: clamp(1.18rem, 1.7vw, 1.5rem) !important;
  line-height: 1.1 !important;
}

body.public-catalog-route .public-catalog-variant-panel {
  margin-bottom: 12px !important;
  max-height: min(560px, calc(100vh - 360px)) !important;
  padding: 14px !important;
}

body.public-catalog-route .public-catalog-size-option:not(.is-empty) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
}

body.public-catalog-route .public-catalog-size-option:not(.is-empty) strong {
  color: var(--ui-primary-hover) !important;
}

body.public-catalog-route .public-catalog-size-option.is-empty {
  cursor: not-allowed !important;
  filter: saturate(.72) !important;
}

body.public-catalog-route .public-catalog-size-option.is-empty:hover {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body.public-catalog-route .public-catalog-detail-actions {
  border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0 !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -14px 26px color-mix(in srgb, var(--ui-surface) 82%, var(--ui-overlay)) !important;
  margin-top: 12px !important;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom)) !important;
}

body.public-catalog-route .public-catalog-order.is-wide {
  min-height: 54px !important;
}

@media (max-width: 900px) {
  body.public-catalog-route .public-catalog-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.public-catalog-route .public-catalog-detail-media,
  body.public-catalog-route .public-catalog-detail-media.is-placeholder {
    aspect-ratio: 1 / 1 !important;
    max-height: min(520px, 78vw) !important;
  }

  body.public-catalog-route .public-catalog-variant-panel {
    max-height: none !important;
  }

  body.public-catalog-route .public-catalog-detail-actions {
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 560px) {
  body.public-catalog-route .public-catalog-detail-page {
    padding-bottom: calc(136px + env(safe-area-inset-bottom)) !important;
  }

  body.public-catalog-route .public-catalog-detail-media,
  body.public-catalog-route .public-catalog-detail-media.is-placeholder {
    max-height: none !important;
  }

  body.public-catalog-route .public-catalog-detail-body h1 {
    font-size: clamp(1.2rem, 7vw, 1.45rem) !important;
  }

  body.public-catalog-route .public-catalog-detail-actions {
    padding-inline: 0 !important;
  }
}
/* Chat options / customer custom-order status card: global UI theme contract. */
body.chat-page .chat-customer-info-grid a.chat-customer-info-link,
body.chat-panel-embed .chat-customer-info-grid a.chat-customer-info-link {
  align-content: start !important;
  background: var(--ui-info-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary) 8%, transparent) !important;
  color: var(--ui-text) !important;
  gap: 7px !important;
  min-height: 112px !important;
  overflow: hidden !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
}

body.chat-page .chat-customer-info-grid a.chat-customer-info-link > span,
body.chat-panel-embed .chat-customer-info-grid a.chat-customer-info-link > span {
  color: var(--ui-primary-hover) !important;
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
  text-decoration: none !important;
  text-transform: none !important;
}

body.chat-page .chat-customer-info-grid a.chat-customer-info-link strong,
body.chat-panel-embed .chat-customer-info-grid a.chat-customer-info-link strong {
  align-items: center !important;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: 999px !important;
  color: var(--ui-on-primary) !important;
  display: inline-flex !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 28px !important;
  min-width: 28px !important;
  padding: 5px 9px !important;
  width: fit-content !important;
}

body.chat-page .chat-customer-info-grid a.chat-customer-info-link small,
body.chat-panel-embed .chat-customer-info-grid a.chat-customer-info-link small {
  color: var(--ui-text-muted) !important;
  font-size: 0.74rem !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
  text-decoration: none !important;
}

body.chat-page .chat-customer-info-grid a.chat-customer-info-link:hover,
body.chat-panel-embed .chat-customer-info-grid a.chat-customer-info-link:hover,
body.chat-page .chat-customer-info-grid a.chat-customer-info-link:focus-visible,
body.chat-panel-embed .chat-customer-info-grid a.chat-customer-info-link:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent), var(--ui-shadow) !important;
  outline: none !important;
}

/* Beranda katalog KSRF: semua warna mengikuti token tema global. */
body.home-page,
body.home-page .shell {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.home-page .shell {
  max-width: none !important;
  padding: 0 !important;
}

body.home-page .home-screen {
  background:
    linear-gradient(130deg, color-mix(in srgb, var(--ui-surface) 88%, var(--ui-bg)) 0%, var(--ui-bg) 58%, color-mix(in srgb, var(--ui-primary) 10%, var(--ui-bg)) 100%) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: clamp(20px, 3vw, 34px) !important;
  min-height: calc(100dvh - 78px) !important;
  overflow: auto !important;
  padding: clamp(24px, 5vw, 76px) max(18px, calc((100vw - 1420px) / 2)) calc(96px + env(safe-area-inset-bottom)) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.home-page .home-screen::-webkit-scrollbar,
body.home-page .home-catalog-preview::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

body.home-page .home-screen::-webkit-scrollbar-track,
body.home-page .home-catalog-preview::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.home-page .home-screen::-webkit-scrollbar-thumb,
body.home-page .home-catalog-preview::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.home-page .home-header {
  align-items: center !important;
  display: flex !important;
  gap: 18px !important;
  justify-content: space-between !important;
  min-height: 72px !important;
}

body.home-page .home-logo {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow) !important;
  height: clamp(54px, 6vw, 72px) !important;
  object-fit: contain !important;
  padding: 6px !important;
  width: auto !important;
}

body.home-page .home-profile-link,
body.home-page .home-login-note a,
body.home-page .home-catalog-more {
  color: var(--ui-primary-hover) !important;
}

body.home-page .home-profile-link {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow) !important;
  min-height: 40px !important;
  padding: 9px 13px !important;
  text-decoration: none !important;
}

body.home-page .home-layout {
  align-items: end !important;
  display: grid !important;
  gap: clamp(18px, 4vw, 48px) !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr) !important;
}

body.home-page .home-intro {
  display: grid !important;
  gap: clamp(14px, 2vw, 22px) !important;
  max-width: min(760px, 100%) !important;
}

body.home-page .home-kicker,
body.home-page .home-panel-head span,
body.home-page .home-summary-grid small,
body.home-page .home-catalog-card small,
body.home-page .home-catalog-empty small {
  color: var(--ui-text-muted) !important;
}

body.home-page .home-kicker {
  font-size: clamp(.76rem, 1.5vw, .9rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

body.home-page .home-intro h1 {
  color: var(--ui-text) !important;
  font-size: clamp(3rem, 7.2vw, 7rem) !important;
  letter-spacing: 0 !important;
  line-height: .9 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  text-transform: uppercase !important;
}

body.home-page .home-intro > p:not(.home-kicker):not(.home-login-note) {
  color: var(--ui-text-muted) !important;
  font-size: clamp(1rem, 1.7vw, 1.3rem) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: 620px !important;
}

body.home-page .home-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body.home-page .home-actions :where(.primary-link, .secondary-link),
body.home-page .home-catalog-more {
  align-items: center !important;
  border-radius: var(--ui-radius-sm) !important;
  display: inline-flex !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease !important;
}

body.home-page .home-actions .primary-link {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.home-page .home-actions .secondary-link,
body.home-page .home-catalog-more {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.home-page .home-actions :where(.primary-link, .secondary-link):hover,
body.home-page .home-catalog-more:hover,
body.home-page .home-catalog-card:hover,
body.home-page .home-summary-grid a:hover,
body.home-page .home-profile-link:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  transform: translateY(-1px) !important;
}

body.home-page .home-actions .primary-link:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.home-page .home-actions :where(.primary-link, .secondary-link):focus-visible,
body.home-page .home-catalog-more:focus-visible,
body.home-page .home-catalog-card:focus-visible,
body.home-page .home-summary-grid a:focus-visible,
body.home-page .home-profile-link:focus-visible,
body.home-page :where(input, select, textarea, button):focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: none !important;
}

body.home-page :where(button, input, select, textarea, a)[disabled],
body.home-page :where(button, input, select, textarea, a)[aria-disabled="true"] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
  pointer-events: none !important;
}

body.home-page .home-login-note {
  color: var(--ui-text-muted) !important;
  font-size: .92rem !important;
  margin: 0 !important;
}

body.home-page .home-catalog-panel {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 14px !important;
  padding: clamp(14px, 2vw, 20px) !important;
}

body.home-page .home-panel-head,
body.home-page .home-summary-grid,
body.home-page .home-catalog-card {
  align-items: center !important;
}

body.home-page .home-panel-head {
  display: flex !important;
  justify-content: space-between !important;
}

body.home-page .home-panel-head strong {
  color: var(--ui-primary-hover) !important;
  font-size: 1.55rem !important;
}

body.home-page .home-summary-grid {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.home-page .home-summary-grid a,
body.home-page .home-catalog-card,
body.home-page .home-catalog-empty {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  text-decoration: none !important;
}

body.home-page .home-summary-grid a {
  display: grid !important;
  gap: 3px !important;
  min-height: 74px !important;
  padding: 12px !important;
}

body.home-page .home-summary-grid strong {
  color: var(--ui-text) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

body.home-page .home-catalog-preview {
  display: grid !important;
  gap: 9px !important;
  max-height: min(330px, 40dvh) !important;
  overflow: auto !important;
  padding-right: 2px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.home-page .home-catalog-card {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  min-height: 88px !important;
  padding: 8px !important;
}

body.home-page .home-catalog-card img {
  aspect-ratio: 1 !important;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  height: 72px !important;
  object-fit: cover !important;
  width: 72px !important;
}

body.home-page .home-catalog-card span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body.home-page .home-catalog-card strong,
body.home-page .home-catalog-card small {
  overflow-wrap: anywhere !important;
}

body.home-page .home-catalog-status {
  align-self: start !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
  padding: 5px 8px !important;
}

body.home-page .home-catalog-status.is-available {
  background: var(--ui-success-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-success) 36%, var(--ui-border)) !important;
  color: var(--ui-success) !important;
}

body.home-page .home-catalog-status.is-empty {
  background: var(--ui-warning-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 36%, var(--ui-border)) !important;
  color: var(--ui-warning) !important;
}

body.home-page .home-catalog-empty {
  display: grid !important;
  gap: 5px !important;
  min-height: 112px !important;
  padding: 16px !important;
}

body.home-page .home-catalog-more {
  justify-self: start !important;
}

body.public-catalog-route .public-catalog-hero-nav {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  position: relative !important;
}

body.public-catalog-route .public-catalog-hero-nav .ksrf-back-button {
  flex: 0 0 auto !important;
}

@media (max-width: 980px) {
  body.home-page .home-layout {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.home-page .home-catalog-panel {
    max-width: 720px !important;
  }
}

@media (max-width: 640px) {
  body.home-page .home-screen {
    gap: 18px !important;
    min-height: calc(100dvh - 74px) !important;
    padding: 16px 12px calc(86px + env(safe-area-inset-bottom)) !important;
  }

  body.home-page .home-header {
    min-height: 54px !important;
  }

  body.home-page .home-logo {
    height: 48px !important;
    max-width: min(230px, 72vw) !important;
  }

  body.home-page .home-intro h1 {
    font-size: clamp(2.7rem, 17vw, 4.8rem) !important;
  }

  body.home-page .home-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.home-page .home-actions :where(.primary-link, .secondary-link),
  body.home-page .home-catalog-more {
    min-height: 42px !important;
    padding: 9px 10px !important;
    width: 100% !important;
  }

  body.home-page .home-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.home-page .home-summary-grid a {
    min-height: 66px !important;
    padding: 9px !important;
  }

  body.home-page .home-catalog-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  body.home-page .home-catalog-card img {
    height: 58px !important;
    width: 58px !important;
  }

  body.home-page .home-catalog-status {
    justify-self: start !important;
  }
}

/* Public review showcase: owner-moderated reviews bound to global UI tokens. */
.review-stars {
  align-items: center !important;
  display: inline-flex !important;
  gap: 2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.review-stars span {
  color: color-mix(in srgb, var(--ui-review-star) 18%, var(--ui-border)) !important;
  font-size: 1.12rem !important;
  text-shadow: none !important;
}

.review-stars span.is-filled {
  color: var(--ui-review-star) !important;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--ui-review-star) 22%, transparent) !important;
}

body.invoice-page .review-board .review-card,
body.public-reviews-route .public-review-card,
body.home-page .home-review-card,
body.home-page .home-review-section,
body.public-reviews-route .public-reviews-hero,
body.public-reviews-route .public-review-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .review-board .review-card.is-public {
  border-color: var(--ui-primary-border) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ui-primary) 10%, transparent) !important;
}

body.invoice-page .review-board .review-card-head,
body.invoice-page .review-board .review-card-foot,
body.public-reviews-route .public-review-card-head,
body.home-page .home-review-head,
body.home-page .home-review-card-head {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
}

body.invoice-page .review-board .review-card p,
body.public-reviews-route .public-review-card p,
body.home-page .home-review-card p,
body.public-reviews-route .public-reviews-hero p,
body.public-reviews-route .public-review-empty p {
  color: var(--ui-text-muted) !important;
  line-height: 1.45 !important;
}

body.invoice-page .review-board .review-public-status {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
}

body.invoice-page .review-board .review-public-status.is-visible {
  background: var(--ui-success-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  color: var(--ui-success) !important;
}

body.invoice-page .review-board .review-public-status.is-hidden {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .review-board .review-public-form button,
body.home-page .home-review-more {
  align-items: center !important;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  text-decoration: none !important;
}

body.invoice-page .review-board .review-public-form button:hover,
body.home-page .home-review-more:hover,
body.invoice-page .review-board .review-public-form button:focus-visible,
body.home-page .home-review-more:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  color: var(--ui-on-primary) !important;
  outline: none !important;
}

body.home-page .home-review-section {
  display: grid !important;
  gap: 16px !important;
  margin-top: clamp(10px, 2vw, 24px) !important;
  padding: clamp(14px, 2vw, 20px) !important;
}

body.home-page .home-review-head h2,
body.public-reviews-route .public-reviews-hero h1,
body.public-reviews-route .public-review-card h2,
body.home-page .home-review-card h3 {
  color: var(--ui-text) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

body.home-page .home-review-grid,
body.public-reviews-route .public-review-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.home-page .home-review-card,
body.public-reviews-route .public-review-card {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 14px !important;
}

body.home-page .home-review-card p,
body.public-reviews-route .public-review-card p {
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

body.home-page .home-review-card small,
body.public-reviews-route .public-review-card small {
  color: var(--ui-text-muted) !important;
}

body.home-page .review-mockup-strip,
body.public-reviews-route .review-mockup-strip {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(auto-fit, minmax(54px, 72px)) !important;
  margin: 2px 0 !important;
}

body.home-page .review-mockup-strip img,
body.public-reviews-route .review-mockup-strip img {
  aspect-ratio: 1 / 1 !important;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow) !important;
  height: auto !important;
  object-fit: cover !important;
  width: 100% !important;
}

body.home-page .review-mockup-thumb,
body.public-reviews-route .review-mockup-thumb {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--ui-radius-sm) !important;
  cursor: zoom-in !important;
  display: block !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.home-page .review-mockup-thumb:hover img,
body.public-reviews-route .review-mockup-thumb:hover img,
body.home-page .review-mockup-thumb:focus-visible img,
body.public-reviews-route .review-mockup-thumb:focus-visible img {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent), var(--ui-shadow) !important;
}

body.home-page .review-mockup-thumb:focus-visible,
body.public-reviews-route .review-mockup-thumb:focus-visible {
  outline: none !important;
}

.review-image-modal {
  align-items: center !important;
  background: var(--ui-overlay) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  inset: 0 !important;
  justify-items: center !important;
  padding: clamp(12px, 3vw, 28px) !important;
  position: fixed !important;
  z-index: 4000 !important;
}

.review-image-modal[hidden] {
  display: none !important;
}

html.review-image-modal-open,
body.review-image-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.review-image-modal figure {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  max-height: min(92dvh, 920px) !important;
  max-width: min(96vw, 1100px) !important;
  padding: clamp(8px, 2vw, 14px) !important;
}

.review-image-modal img {
  background: var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-md) !important;
  display: block !important;
  max-height: calc(88dvh - 70px) !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.review-image-modal figcaption {
  color: var(--ui-text) !important;
  font-weight: 850 !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

.review-image-modal-close {
  align-items: center !important;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: 999px !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer !important;
  display: grid !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  height: 44px !important;
  justify-items: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  position: fixed !important;
  right: clamp(12px, 3vw, 22px) !important;
  top: clamp(12px, 3vw, 22px) !important;
  width: 44px !important;
  z-index: 4001 !important;
}

.review-image-modal-close:hover,
.review-image-modal-close:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent), var(--ui-shadow) !important;
  outline: none !important;
}

body.public-reviews-route,
body.public-reviews-route .shell {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.public-reviews-route .shell {
  max-width: none !important;
  padding: 0 !important;
}

body.public-reviews-route .public-reviews-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 18px !important;
  min-height: calc(100dvh - 78px) !important;
  padding: clamp(18px, 4vw, 58px) max(16px, calc((100vw - 1280px) / 2)) calc(96px + env(safe-area-inset-bottom)) !important;
}

body.public-reviews-route .public-reviews-hero {
  align-items: center !important;
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  padding: clamp(18px, 3vw, 32px) !important;
}

body.public-reviews-route .public-review-empty {
  display: grid !important;
  gap: 7px !important;
  grid-column: 1 / -1 !important;
  padding: 18px !important;
}

@media (max-width: 900px) {
  body.home-page .home-review-grid,
  body.public-reviews-route .public-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.home-page .home-review-head,
  body.invoice-page .review-board .review-card-head,
  body.invoice-page .review-board .review-card-foot,
  body.public-reviews-route .public-reviews-hero,
  body.public-reviews-route .public-review-card-head,
  body.home-page .home-review-card-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.home-page .home-review-grid,
  body.public-reviews-route .public-review-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.public-reviews-route .public-reviews-page {
    padding: 12px 10px calc(86px + env(safe-area-inset-bottom)) !important;
  }
}

/* Customer point history: direct from chat, fully bound to the global KSRF theme contract. */
body.chat-page .chat-customer-info-card[aria-disabled="true"] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .78 !important;
}

body.invoice-page .cashier-customer-points-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 16px !important;
  margin: 0 auto !important;
  max-width: 1180px !important;
  min-height: 100dvh !important;
  padding: clamp(16px, 3vw, 34px) clamp(12px, 4vw, 40px) calc(108px + env(safe-area-inset-bottom)) !important;
  width: 100% !important;
}

body.invoice-page .cashier-customer-points-hero,
body.invoice-page .cashier-customer-points-summary article,
body.invoice-page .cashier-customer-points-panel,
body.invoice-page .cashier-customer-points-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-customer-points-hero {
  align-items: center !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  padding: clamp(14px, 2.4vw, 22px) !important;
}

body.invoice-page .cashier-customer-points-hero > div,
body.invoice-page .cashier-customer-points-panel-head > div,
body.invoice-page .cashier-customer-points-row > span {
  min-width: 0 !important;
}

body.invoice-page .cashier-customer-points-hero .auth-brand {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 999px !important;
  color: var(--ui-primary-hover) !important;
  display: inline-flex !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
  margin: 0 0 8px !important;
  padding: 6px 10px !important;
  text-transform: uppercase !important;
}

body.invoice-page .cashier-customer-points-hero h1,
body.invoice-page .cashier-customer-points-panel h2 {
  color: var(--ui-text) !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .cashier-customer-points-hero h1 {
  font-size: clamp(1.55rem, 4vw, 2.7rem) !important;
}

body.invoice-page .cashier-customer-points-hero p:not(.auth-brand),
body.invoice-page .cashier-customer-points-panel-head p,
body.invoice-page .cashier-customer-points-summary small,
body.invoice-page .cashier-customer-points-row small,
body.invoice-page .cashier-customer-points-empty p {
  color: var(--ui-text-muted) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

body.invoice-page .cashier-customer-points-summary {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.invoice-page .cashier-customer-points-summary article {
  display: grid !important;
  gap: 6px !important;
  min-height: 132px !important;
  padding: clamp(14px, 2vw, 18px) !important;
}

body.invoice-page .cashier-customer-points-summary span,
body.invoice-page .cashier-customer-points-panel-head h2,
body.invoice-page .cashier-customer-points-row strong {
  color: var(--ui-text) !important;
  font-weight: 850 !important;
}

body.invoice-page .cashier-customer-points-summary strong {
  color: var(--ui-primary-hover) !important;
  font-size: clamp(1.65rem, 4vw, 2.55rem) !important;
  line-height: 1 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .cashier-customer-points-summary article:nth-child(2) strong {
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .cashier-customer-points-panel {
  display: grid !important;
  gap: 14px !important;
  overflow: hidden !important;
  padding: clamp(14px, 2vw, 20px) !important;
}

body.invoice-page .cashier-customer-points-panel-head {
  align-items: start !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.invoice-page .cashier-customer-points-action {
  align-items: center !important;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  text-decoration: none !important;
}

body.invoice-page .cashier-customer-points-action:hover,
body.invoice-page .cashier-customer-points-action:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  color: var(--ui-on-primary) !important;
  outline: none !important;
}

body.invoice-page .cashier-customer-points-action[aria-disabled="true"],
body.invoice-page .cashier-customer-points-action:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .7 !important;
  pointer-events: none !important;
}

body.invoice-page .cashier-customer-points-table {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: grid !important;
  max-height: min(64dvh, 720px) !important;
  overflow: auto !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.invoice-page .cashier-customer-points-row {
  align-items: center !important;
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(92px, .72fr) minmax(180px, 1.55fr) minmax(120px, .9fr) minmax(110px, .9fr) minmax(92px, .65fr) minmax(92px, .65fr) !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
}

body.invoice-page .cashier-customer-points-row:hover {
  background: var(--ui-primary-soft) !important;
}

body.invoice-page .cashier-customer-points-head {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  position: sticky !important;
  text-transform: uppercase !important;
  top: 0 !important;
  z-index: 1 !important;
}

body.invoice-page .cashier-customer-points-row.is-held {
  background: var(--ui-warning-soft) !important;
}

body.invoice-page .cashier-customer-points-row code {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: inline-flex !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  padding: 4px 7px !important;
}

body.invoice-page .cashier-customer-points-code-link {
  color: var(--ui-primary-hover) !important;
  display: inline-flex !important;
  max-width: 100% !important;
  text-decoration: none !important;
}

body.invoice-page .cashier-customer-points-code-link code {
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-customer-points-code-link:hover code,
body.invoice-page .cashier-customer-points-code-link:focus-visible code {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-customer-points-code-link:focus-visible {
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: none !important;
}

body.invoice-page .cashier-customer-points-row .is-plus {
  color: var(--ui-success-strong) !important;
  font-weight: 900 !important;
}

body.invoice-page .cashier-customer-points-row .is-minus {
  color: var(--ui-danger-strong) !important;
  font-weight: 900 !important;
}

body.invoice-page .cashier-customer-points-row .is-held {
  color: var(--ui-warning-strong) !important;
  font-weight: 900 !important;
}

body.invoice-page .cashier-customer-points-empty {
  display: grid !important;
  gap: 6px !important;
  margin: 12px !important;
  padding: 16px !important;
}

body.invoice-page .cashier-customer-points-empty strong {
  color: var(--ui-text) !important;
}

@media (max-width: 900px) {
  body.invoice-page .cashier-customer-points-summary,
  body.invoice-page .cashier-customer-points-panel-head {
    grid-template-columns: 1fr !important;
  }

  body.invoice-page .cashier-customer-points-action {
    justify-self: start !important;
  }

  body.invoice-page .cashier-customer-points-row,
  body.invoice-page .cashier-customer-points-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page .cashier-customer-points-head {
    display: none !important;
  }

  body.invoice-page .cashier-customer-points-row {
    align-items: start !important;
    gap: 6px !important;
    padding: 12px !important;
  }

  body.invoice-page .cashier-customer-points-row > span::before {
    color: var(--ui-text-muted) !important;
    content: attr(role) !important;
    display: none !important;
  }
}

@media (max-width: 640px) {
  body.invoice-page .cashier-customer-points-page {
    gap: 12px !important;
    padding: 12px 10px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .cashier-customer-points-hero {
    align-items: start !important;
    grid-template-columns: 1fr !important;
  }

  body.invoice-page .cashier-customer-points-action {
    width: 100% !important;
  }
}

/* Cashier fund movement searchable dropdown: replaces mobile native select picker with theme-bound combobox. */
body.invoice-page .cashier-fund-movement-page select.cashier-fund-native-select {
  block-size: 1px !important;
  border: 0 !important;
  inline-size: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox {
  display: block !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  position: relative !important;
  z-index: 4 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox.is-open {
  z-index: 36 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"] {
  background-color: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  inline-size: 100% !important;
  min-block-size: 46px !important;
  min-inline-size: 0 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 76%, transparent) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]:hover {
  background-color: var(--ui-surface-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]:focus,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"][aria-expanded="true"] {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: 0 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]:disabled,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"][aria-disabled="true"] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .68 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-list,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-empty {
  inline-size: 100% !important;
  inset-block-start: calc(100% + 6px) !important;
  inset-inline: 0 !important;
  max-block-size: min(42dvh, 320px) !important;
  overflow: auto !important;
  position: absolute !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
  z-index: 38 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-list[hidden],
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-empty[hidden] {
  display: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-list::-webkit-scrollbar {
  inline-size: 10px !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-list::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-list::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option {
  cursor: pointer !important;
  display: block !important;
  font: inherit !important;
  font-weight: 820 !important;
  inline-size: 100% !important;
  min-block-size: 42px !important;
  overflow-wrap: anywhere !important;
  padding: 9px 10px !important;
  text-align: start !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option[hidden] {
  display: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option[aria-selected="true"] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text-muted) !important;
  display: block !important;
  padding: 10px 12px !important;
}

@media (max-width: 640px) {
  body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-list,
  body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-empty {
    max-block-size: min(48dvh, 360px) !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option {
    min-block-size: 48px !important;
    padding-block: 11px !important;
  }
}

/* Kas Masuk empty add buttons must stay compact after theme overrides. */
body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page .cash-out-category-new-button.cashier-cash-in-add-button,
body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page [data-add-cash-in-detail].cashier-cash-in-add-button,
body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page [data-add-cash-in-receipt].cashier-cash-in-add-button {
  align-items: center !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  gap: 7px !important;
  height: 38px !important;
  justify-content: center !important;
  justify-self: start !important;
  max-height: 38px !important;
  min-height: 38px !important;
  min-width: 92px !important;
  padding: 0 14px !important;
  width: auto !important;
}

body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page .cash-out-category-new-button.cashier-cash-in-add-button svg,
body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page [data-add-cash-in-detail].cashier-cash-in-add-button svg,
body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page [data-add-cash-in-receipt].cashier-cash-in-add-button svg {
  flex: 0 0 16px !important;
  height: 16px !important;
  width: 16px !important;
}

body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page .cashier-cash-in-add-row,
body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page .cash-out-category-empty + .cashier-cash-in-add-row {
  align-items: center !important;
  display: flex !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  max-width: none !important;
  min-height: 0 !important;
  padding-top: 6px !important;
  width: auto !important;
}

body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page .cashier-cash-in-category-block,
body.invoice-page .cashier-cash-in-skin-page.cashier-cash-out-page .cashier-cash-in-receipt-block {
  gap: 10px !important;
  min-height: 0 !important;
}
/* Kas Keluar normal browser scroll and compact empty actions. */
html:has(body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page)),
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)),
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .shell,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page),
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .invoice-builder-head,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cashier-workspace,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-input-panel {
  block-size: auto !important;
  height: auto !important;
  inset: auto !important;
  max-block-size: none !important;
  max-height: none !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  z-index: auto !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) {
  gap: 10px !important;
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  padding-top: 18px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .invoice-builder-head {
  border-radius: 16px !important;
  padding: 18px 28px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .invoice-builder-head h1 {
  font-size: clamp(2.3rem, 4.4vw, 4rem) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a {
  border-radius: 14px !important;
  min-height: 52px !important;
  padding: 10px 14px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cashier-workspace {
  margin-top: 8px !important;
  padding-bottom: 0 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-input-panel {
  border-radius: 16px !important;
  padding: 14px 18px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-form {
  gap: 12px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-block {
  align-content: start !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-empty {
  margin: 2px 0 0 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-add-row,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-empty + .cashier-cash-in-add-row {
  align-items: center !important;
  display: flex !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  max-width: none !important;
  min-height: 0 !important;
  padding-top: 6px !important;
  width: auto !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) [data-add-cash-out-detail].cashier-cash-in-add-button,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) [data-add-cash-out-payment].cashier-cash-in-add-button {
  align-items: center !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  gap: 7px !important;
  height: 38px !important;
  justify-content: center !important;
  justify-self: start !important;
  max-height: 38px !important;
  min-height: 38px !important;
  min-width: 92px !important;
  padding: 0 14px !important;
  width: auto !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) [data-add-cash-out-detail].cashier-cash-in-add-button svg,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) [data-add-cash-out-payment].cashier-cash-in-add-button svg {
  flex: 0 0 16px !important;
  height: 16px !important;
  width: 16px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) [data-add-cash-out-detail].cashier-cash-in-add-button span,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) [data-add-cash-out-payment].cashier-cash-in-add-button span {
  font-size: .86rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-total {
  align-items: center !important;
  gap: 14px !important;
  justify-content: flex-end !important;
  margin-top: 4px !important;
  min-height: 42px !important;
  padding: 9px 16px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-form-actions {
  margin-top: 2px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-submit-button {
  min-height: 46px !important;
  padding: 11px 22px !important;
}

@media (max-width: 900px) {
  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) {
    padding-top: 12px !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .invoice-builder-head {
    padding: 16px !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) {
    padding: 8px 8px calc(88px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .invoice-builder-head h1 {
    font-size: 2.05rem !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a {
    min-height: 48px !important;
    padding: 8px 10px !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-input-panel,
  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-block {
    padding: 12px !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-total {
    justify-content: flex-start !important;
  }
}
/* Kas Keluar final theme contract: every visible state follows --ui-* tokens. */
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page))::-webkit-scrollbar,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) *::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page))::-webkit-scrollbar-track,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) *::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page))::-webkit-scrollbar-thumb,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) *::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) {
  --cashout-ink: var(--ui-text) !important;
  --cashout-muted: var(--ui-text-muted) !important;
  --cashout-panel: var(--ui-surface) !important;
  --cashout-panel-soft: var(--ui-surface-soft) !important;
  --cashout-gold: var(--ui-primary-hover) !important;
  --cashout-cyan: var(--ui-primary) !important;
  --cashout-pink: var(--ui-accent) !important;
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  gap: 9px !important;
  padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page)::before,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page)::after {
  background: transparent !important;
  content: none !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-compact-head {
  align-items: center !important;
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  display: flex !important;
  gap: 14px !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  padding: 16px 24px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-head-title {
  align-items: center !important;
  display: flex !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-head-title > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-compact-head h1 {
  color: var(--ui-text) !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  gap: 6px !important;
  padding: 6px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  min-height: 46px !important;
  padding: 8px 12px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a::before {
  background: var(--ui-border) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a.active,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a:hover,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a:focus-visible,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(button, a, input, select, textarea, summary, [role="button"]):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: none !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a.active::before,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a:hover::before,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a:focus-visible::before {
  background: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs span,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs small {
  color: inherit !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(
  .cashier-panel,
  .cashier-cash-in-block,
  .cashier-cash-in-line,
  .cashier-cash-in-table,
  .cashier-cash-in-detail-view,
  .cash-out-category-summary,
  .cash-out-category-account-card,
  .cash-out-history-item,
  .cash-out-history-detail,
  .cash-out-history-detail section,
  .cash-out-history-filter form,
  .cash-out-combobox-list,
  .cash-out-combobox-empty,
  .cashier-customer-options,
  .cash-out-proof-viewer-panel,
  .cashier-confirm-modal,
  .cash-out-category-confirm-modal,
  .cash-out-submit-modal
) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-input-panel {
  padding: 14px 18px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-form {
  gap: 11px !important;
  padding-bottom: 0 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-block {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  gap: 9px !important;
  padding: 13px 15px !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(
  label,
  .cashier-inline-head strong,
  .cashier-cash-in-row strong,
  .cash-out-category-summary strong,
  .cash-out-history-trigger strong,
  .cash-out-history-detail p,
  .cash-out-history-detail b,
  .cash-out-history-detail small,
  .cashier-confirm-modal h2
) {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(
  .cashier-inline-head small,
  .cash-out-category-empty,
  .cash-out-history-category small,
  .cash-out-history-date em,
  .cash-out-proof-preview span,
  .cashier-confirm-modal p:not(.dashboard-kicker)
) {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(input, select, textarea, .cash-out-combobox input) {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(input, textarea)::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(input, select, textarea, .cash-out-combobox input):focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  outline: none !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(input, select, textarea, button):disabled,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(input, select, textarea, button)[aria-disabled="true"] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where([aria-invalid="true"], input:invalid:not(:placeholder-shown), select:invalid) {
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 20%, transparent) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-combobox-list,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-customer-options {
  box-shadow: var(--ui-shadow-modal) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-combobox-list button,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-customer-options button {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-combobox-list button:hover,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-combobox-list button:focus,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-customer-options button:hover,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-customer-options button:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(
  .cashier-cash-in-add-button,
  .cashier-form-actions .invoice-print-button,
  .cashier-history-pager button,
  .cash-out-history-filter button,
  .cash-out-category-actions [data-save-cash-out-category],
  .cash-out-category-actions [data-save-cash-out-payment],
  .cash-out-category-new-button,
  .cash-out-submit-button
) {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(
  .cashier-cash-in-add-button,
  .cashier-form-actions .invoice-print-button,
  .cashier-history-pager button,
  .cash-out-history-filter button,
  .cash-out-category-actions [data-save-cash-out-category],
  .cash-out-category-actions [data-save-cash-out-payment],
  .cash-out-category-new-button,
  .cash-out-submit-button
):hover:not(:disabled) {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(.cashier-action-ghost, .cash-out-proof-actions label, .cash-out-history-filter a, .cashier-confirm-actions button:first-child) {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where(.cashier-action-ghost, .cash-out-proof-actions label, .cash-out-history-filter a, .cashier-confirm-actions button:first-child):hover,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-proof-actions label:focus-within {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-focus) !important;
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where([data-delete-cash-out-category], [data-delete-cash-out-payment], .cash-out-proof-remove, .cashier-detail-actions button, [data-cash-out-category-confirm-submit], [data-cash-out-payment-confirm-submit]) {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) :where([data-delete-cash-out-category], [data-delete-cash-out-payment], .cash-out-proof-remove, .cashier-detail-actions button, [data-cash-out-category-confirm-submit], [data-cash-out-payment-confirm-submit]):hover {
  background: var(--ui-danger) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-total,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-summary,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-history-trigger:hover,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-history-item[open] .cash-out-history-trigger {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-cash-in-total strong,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-summary b,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-history-total strong,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-history-detail a {
  color: var(--ui-primary) !important;
}

body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-confirm-backdrop,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-confirm-backdrop,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-proof-viewer,
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop[data-flash-modal],
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop.cash-out-submit-result-modal {
  background: var(--ui-overlay) !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop[data-flash-modal] .game-modal,
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop.cash-out-submit-result-modal .game-modal {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop[data-flash-modal] .game-modal::before,
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop.cash-out-submit-result-modal .game-modal::before,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-confirm-modal::before,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-confirm-modal::before {
  background: var(--ui-primary) !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop[data-flash-modal][data-flash-error="1"] .game-modal::before,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-confirm-modal::before {
  background: var(--ui-danger) !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-rank.is-success,
body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop[data-flash-success="1"] .game-modal-rank {
  background: var(--ui-success-soft) !important;
  border-color: var(--ui-success) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page:has(.cashier-cash-out-page:not(.cashier-cash-in-skin-page)) .game-modal-backdrop[data-flash-error="1"] .game-modal-rank,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cashier-confirm-mark,
body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-category-confirm-modal .cashier-confirm-mark {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

@media (max-width: 900px) {
  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-compact-head {
    align-items: stretch !important;
    padding: 14px 16px !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-head-title {
    gap: 12px !important;
  }
}

@media (max-width: 560px) {
  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-compact-head h1 {
    font-size: 1.86rem !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) .cash-out-compact-head .ksrf-back-button {
    flex: 0 0 auto !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs {
    gap: 5px !important;
    padding: 5px !important;
  }

  body.invoice-page .cashier-cash-out-page:not(.cashier-cash-in-skin-page) > .cash-out-mode-tabs a {
    min-height: 46px !important;
  }
}

body.chat-page .chat-scheduled-message-section,
body.chat-panel-embed .chat-scheduled-message-section {
  color: var(--ui-text);
}

body.chat-page .chat-scheduled-message-form input[type="datetime-local"],
body.chat-panel-embed .chat-scheduled-message-form input[type="datetime-local"] {
  width: 100%;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-field);
  color: var(--ui-text);
  min-height: 46px;
  padding: 10px 12px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.chat-page .chat-scheduled-message-form input[type="datetime-local"]:hover,
body.chat-panel-embed .chat-scheduled-message-form input[type="datetime-local"]:hover {
  border-color: var(--ui-primary-border);
  background: var(--ui-surface);
}

body.chat-page .chat-scheduled-message-form input[type="datetime-local"]:focus,
body.chat-panel-embed .chat-scheduled-message-form input[type="datetime-local"]:focus {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent);
}

body.chat-page .chat-scheduled-message-form input[type="datetime-local"]:disabled,
body.chat-panel-embed .chat-scheduled-message-form input[type="datetime-local"]:disabled {
  background: var(--ui-field);
  color: var(--ui-text-muted);
  border-color: var(--ui-border);
  cursor: not-allowed;
}

body.chat-page .chat-scheduled-message-list,
body.chat-panel-embed .chat-scheduled-message-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-height: min(34vh, 280px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft);
}

body.chat-page .chat-scheduled-message-list::-webkit-scrollbar,
body.chat-panel-embed .chat-scheduled-message-list::-webkit-scrollbar {
  width: 8px;
}

body.chat-page .chat-scheduled-message-list::-webkit-scrollbar-track,
body.chat-panel-embed .chat-scheduled-message-list::-webkit-scrollbar-track {
  background: var(--ui-surface-soft);
}

body.chat-page .chat-scheduled-message-list::-webkit-scrollbar-thumb,
body.chat-panel-embed .chat-scheduled-message-list::-webkit-scrollbar-thumb {
  background: var(--ui-primary);
  border-radius: 999px;
}

body.chat-page .chat-scheduled-message-card,
body.chat-panel-embed .chat-scheduled-message-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-field);
  color: var(--ui-text);
  padding: 10px;
}

body.chat-page .chat-scheduled-message-card.is-failed,
body.chat-panel-embed .chat-scheduled-message-card.is-failed {
  border-color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

body.chat-page .chat-scheduled-message-card strong,
body.chat-panel-embed .chat-scheduled-message-card strong {
  display: block;
  color: var(--ui-text);
  font-size: .92rem;
  line-height: 1.25;
}

body.chat-page .chat-scheduled-message-card small,
body.chat-panel-embed .chat-scheduled-message-card small,
body.chat-page .chat-scheduled-message-card em,
body.chat-panel-embed .chat-scheduled-message-card em,
body.chat-page .chat-scheduled-message-empty,
body.chat-panel-embed .chat-scheduled-message-empty {
  color: var(--ui-text-muted);
}

body.chat-page .chat-scheduled-message-card p,
body.chat-panel-embed .chat-scheduled-message-card p {
  margin: 6px 0 0;
  color: var(--ui-text);
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.chat-page .chat-scheduled-message-card form button,
body.chat-panel-embed .chat-scheduled-message-card form button {
  border: 1px solid var(--ui-danger);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-danger-soft);
  color: var(--ui-danger-strong);
  min-height: 38px;
  padding: 8px 10px;
  font-weight: 800;
}

body.chat-page .chat-scheduled-message-card form button:hover,
body.chat-panel-embed .chat-scheduled-message-card form button:hover {
  background: var(--ui-danger);
  color: var(--ui-on-danger);
}

body.chat-page .chat-scheduled-message-card form button:focus-visible,
body.chat-panel-embed .chat-scheduled-message-card form button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent);
}

body.chat-page .chat-scheduled-message-empty,
body.chat-panel-embed .chat-scheduled-message-empty {
  border: 1px dashed var(--ui-border);
  border-radius: var(--ui-radius-sm);
  margin: 0;
  padding: 12px;
  text-align: center;
}

@media (max-width: 640px) {
  body.chat-page .chat-scheduled-message-card,
  body.chat-panel-embed .chat-scheduled-message-card {
    grid-template-columns: 1fr;
  }

  body.chat-page .chat-scheduled-message-card form,
  body.chat-panel-embed .chat-scheduled-message-card form,
  body.chat-page .chat-scheduled-message-card form button,
  body.chat-panel-embed .chat-scheduled-message-card form button {
    width: 100%;
  }
}
/* Transfer & Penyesuaian final theme contract. */
body.invoice-page:has(.cashier-fund-movement-page) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.invoice-page:has(.cashier-fund-movement-page)::-webkit-scrollbar,
body.invoice-page .cashier-fund-movement-page *::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

body.invoice-page:has(.cashier-fund-movement-page)::-webkit-scrollbar-track,
body.invoice-page .cashier-fund-movement-page *::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page:has(.cashier-fund-movement-page)::-webkit-scrollbar-thumb,
body.invoice-page .cashier-fund-movement-page *::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .cashier-cash-out-page.cashier-fund-movement-page {
  width: min(100%, 1080px) !important;
  margin-inline: auto !important;
  justify-self: center !important;
  align-self: center !important;
  padding: clamp(14px, 2.4vw, 28px) 14px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 10px !important;
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-compact-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: clamp(16px, 2.4vw, 24px) !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-head-title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-head-title > div {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-compact-head .auth-brand {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-compact-head h1 {
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-size: clamp(2rem, 4.4vw, 3.5rem) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-compact-head p:not(.auth-brand) {
  max-width: 680px !important;
  margin: 0 !important;
  color: var(--ui-text-muted) !important;
  line-height: 1.42 !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a {
  min-height: 48px !important;
  padding: 10px 14px !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a::before {
  background: var(--ui-border) !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a span {
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a:hover,
body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a:focus-visible,
body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a.active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: none !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a:hover::before,
body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a:focus-visible::before,
body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a.active::before {
  background: var(--ui-primary) !important;
}

body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs a:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-workspace,
body.invoice-page .cashier-fund-movement-page .cashier-panel,
body.invoice-page .cashier-fund-movement-page .cash-out-input-panel,
body.invoice-page .cashier-fund-movement-page .cashier-cash-in-block,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card,
body.invoice-page .cashier-fund-movement-page .cashier-empty-state {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-panel,
body.invoice-page .cashier-fund-movement-page .cash-out-input-panel {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  padding: clamp(16px, 2.2vw, 24px) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-form-grid {
  gap: 14px 16px !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-form-grid label,
body.invoice-page .cashier-fund-movement-page .cashier-journal-input-line label {
  gap: 7px !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-form-grid label small,
body.invoice-page .cashier-fund-movement-page .cashier-inline-head small,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card small,
body.invoice-page .cashier-fund-movement-page .cashier-empty-state span {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-fund-movement-page input,
body.invoice-page .cashier-fund-movement-page select,
body.invoice-page .cashier-fund-movement-page textarea,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"] {
  min-height: 48px !important;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page textarea {
  min-height: 92px !important;
  resize: vertical !important;
}

body.invoice-page .cashier-fund-movement-page input::placeholder,
body.invoice-page .cashier-fund-movement-page textarea::placeholder,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 76%, transparent) !important;
}

body.invoice-page .cashier-fund-movement-page input:hover,
body.invoice-page .cashier-fund-movement-page select:hover,
body.invoice-page .cashier-fund-movement-page textarea:hover,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]:hover {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

body.invoice-page .cashier-fund-movement-page input:focus,
body.invoice-page .cashier-fund-movement-page select:focus,
body.invoice-page .cashier-fund-movement-page textarea:focus,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]:focus,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"][aria-expanded="true"] {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: none !important;
}

body.invoice-page .cashier-fund-movement-page input:disabled,
body.invoice-page .cashier-fund-movement-page select:disabled,
body.invoice-page .cashier-fund-movement-page textarea:disabled,
body.invoice-page .cashier-fund-movement-page button:disabled,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

body.invoice-page .cashier-fund-movement-page input:invalid,
body.invoice-page .cashier-fund-movement-page select:invalid,
body.invoice-page .cashier-fund-movement-page textarea:invalid,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox input[role="combobox"]:invalid {
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 18%, transparent) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-list,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option {
  background: var(--ui-surface) !important;
  border: 1px solid transparent !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option:hover,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option:focus-visible,
body.invoice-page .cashier-fund-movement-page .cashier-fund-combobox-option[aria-selected="true"] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-inline-head {
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-cash-in-block {
  padding: clamp(14px, 2vw, 20px) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-journal-input-line {
  gap: 10px !important;
  padding: 10px 0 !important;
  border-color: var(--ui-border) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-transfer-preview,
body.invoice-page .cashier-fund-movement-page .cashier-history-summary,
body.invoice-page .cashier-fund-movement-page .cashier-cash-in-total {
  min-height: 0 !important;
  padding: 12px 16px !important;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-transfer-preview {
  display: grid !important;
  gap: 6px !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-history-summary {
  gap: 10px !important;
  justify-content: space-between !important;
  margin: 0 0 12px !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-history-summary b,
body.invoice-page .cashier-fund-movement-page .cashier-cash-in-total strong,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card b,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card strong {
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-fund-movement-page [data-journal-balance-state].is-balanced {
  color: var(--ui-success-strong) !important;
}

body.invoice-page .cashier-fund-movement-page [data-journal-balance-state].is-unbalanced {
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .cashier-fund-movement-page .invoice-print-button,
body.invoice-page .cashier-fund-movement-page .cashier-cash-in-add-button {
  min-height: 44px !important;
  padding: 10px 18px !important;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .cashier-fund-movement-page .invoice-print-button:hover,
body.invoice-page .cashier-fund-movement-page .invoice-print-button:focus-visible,
body.invoice-page .cashier-fund-movement-page .cashier-cash-in-add-button:hover,
body.invoice-page .cashier-fund-movement-page .cashier-cash-in-add-button:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent), var(--ui-shadow) !important;
  color: var(--ui-on-primary) !important;
  outline: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-action-ghost {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-fund-movement-page [data-remove-journal-line] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  background: var(--ui-danger-soft) !important;
  border: 1px solid var(--ui-danger) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .cashier-fund-movement-page [data-remove-journal-line]:hover,
body.invoice-page .cashier-fund-movement-page [data-remove-journal-line]:focus-visible {
  background: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-form-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-history {
  display: grid !important;
  gap: 10px !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card {
  padding: 14px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card > header,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer {
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card > header small {
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card p,
body.invoice-page .cashier-fund-movement-page .cashier-movement-lines span {
  color: var(--ui-text) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer a,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer button {
  min-height: 34px !important;
  padding: 7px 11px !important;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer button {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer a:hover,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer a:focus-visible {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
  outline: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer button:hover,
body.invoice-page .cashier-fund-movement-page .cashier-movement-card > footer button:focus-visible {
  background: var(--ui-danger) !important;
  color: var(--ui-on-primary) !important;
  outline: none !important;
}

body.invoice-page .cashier-fund-movement-page .cashier-empty-state {
  padding: 18px !important;
  border: 1px dashed var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text) !important;
}

body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop[data-flash-modal],
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop.cash-out-submit-result-modal {
  background: var(--ui-overlay) !important;
}

body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop[data-flash-modal] .game-modal,
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop.cash-out-submit-result-modal .game-modal {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
}

body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop[data-flash-modal][data-flash-success="1"] .game-modal-rank,
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop.cash-out-submit-result-modal .game-modal-rank.is-success {
  background: var(--ui-success-soft) !important;
  border-color: var(--ui-success) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop[data-flash-modal][data-flash-error="1"] .game-modal-rank,
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop.cash-out-submit-result-modal .game-modal-rank.is-error {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop[data-flash-modal] [data-flash-close],
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop.cash-out-submit-result-modal .game-modal button {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop[data-flash-modal] [data-flash-close]:hover,
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop[data-flash-modal] [data-flash-close]:focus-visible,
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop.cash-out-submit-result-modal .game-modal button:hover,
body.invoice-page:has(.cashier-fund-movement-page) .game-modal-backdrop.cash-out-submit-result-modal .game-modal button:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
}

@media (max-width: 760px) {
  body.invoice-page .cashier-cash-out-page.cashier-fund-movement-page {
    padding-inline: 10px !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-fund-compact-head {
    padding: 14px !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-fund-head-title {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-fund-compact-head h1 {
    font-size: clamp(1.85rem, 11vw, 2.7rem) !important;
  }

  body.invoice-page .cashier-fund-movement-page .cash-out-mode-tabs {
    grid-template-columns: 1fr !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-panel,
  body.invoice-page .cashier-fund-movement-page .cash-out-input-panel {
    padding: 14px !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-form-grid,
  body.invoice-page .cashier-fund-movement-page .cashier-journal-input-line {
    grid-template-columns: 1fr !important;
  }

  body.invoice-page .cashier-fund-movement-page [data-remove-journal-line] {
    width: 100% !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-form-actions {
    justify-content: stretch !important;
    flex-direction: column-reverse !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-form-actions .invoice-print-button {
    width: 100% !important;
  }

  body.invoice-page .cashier-fund-movement-page .cashier-history-summary,
  body.invoice-page .cashier-fund-movement-page .cashier-cash-in-total {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Domino Gaplek: owner-only dev game bound to the global UI theme contract. */
body.domino-page{background:var(--ui-bg)!important;color:var(--ui-text)!important}body.domino-page>.shell{max-width:none;padding:0}.domino-shell{background:var(--ui-bg);color:var(--ui-text);display:grid;gap:14px;min-height:100dvh;padding:clamp(14px,2vw,28px) clamp(12px,3vw,40px) calc(96px + env(safe-area-inset-bottom))}.domino-head,.domino-panel,.domino-board-panel,.domino-tournament .domino-panel{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow);color:var(--ui-text)}.domino-head{align-items:center;display:grid;gap:14px;grid-template-columns:auto minmax(0,1fr) auto;padding:clamp(14px,2vw,22px)}.domino-head h1,.domino-panel h2{color:var(--ui-text);letter-spacing:0;margin:0}.domino-head p:not(.auth-brand),.domino-panel p,.domino-status,.domino-history p,.domino-summary span,.domino-bracket span,.domino-player-row small{color:var(--ui-text-muted)}.domino-icon-button,.domino-actions button,.domino-tabs button,.domino-modal button,.domino-tournament button,.domino-offline-form button{align-items:center;background:var(--ui-primary);border:1px solid var(--ui-primary);border-radius:var(--ui-radius-sm);color:var(--ui-on-primary);cursor:pointer;display:inline-flex;font:inherit;font-weight:800;justify-content:center;min-height:42px;padding:10px 14px}.domino-icon-button{background:var(--ui-field);border-color:var(--ui-border);color:var(--ui-text);min-width:42px;padding:0}.domino-icon-button svg{fill:none;height:22px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:22px}.domino-actions .domino-secondary,.domino-tabs button{background:var(--ui-field);border-color:var(--ui-border);color:var(--ui-text)}.domino-tabs{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);display:flex;gap:8px;overflow:auto;padding:8px;scrollbar-color:var(--ui-primary) var(--ui-surface-soft);scrollbar-width:thin}.domino-tabs::-webkit-scrollbar,.domino-history::-webkit-scrollbar,.domino-combo-menu::-webkit-scrollbar,.domino-hand::-webkit-scrollbar{height:10px;width:10px}.domino-tabs::-webkit-scrollbar-track,.domino-history::-webkit-scrollbar-track,.domino-combo-menu::-webkit-scrollbar-track,.domino-hand::-webkit-scrollbar-track{background:var(--ui-surface-soft)}.domino-tabs::-webkit-scrollbar-thumb,.domino-history::-webkit-scrollbar-thumb,.domino-combo-menu::-webkit-scrollbar-thumb,.domino-hand::-webkit-scrollbar-thumb{background:var(--ui-primary);border:2px solid var(--ui-surface-soft);border-radius:var(--ui-radius-sm)}.domino-tabs button.is-active,.domino-tabs button:hover,.domino-tabs button:focus-visible{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-on-primary)}.domino-layout{display:grid;gap:14px;grid-template-columns:minmax(240px,.75fr) minmax(420px,1.6fr) minmax(260px,.8fr)}.domino-panel,.domino-board-panel{display:grid;gap:14px;min-width:0;padding:clamp(12px,2vw,18px)}.domino-field-grid,.domino-offline-grid{display:grid;gap:12px}.domino-field-grid label,.domino-searchable,.domino-offline-form label{display:grid;gap:6px}.domino-field-grid span,.domino-searchable label,.domino-offline-form span{color:var(--ui-text-muted);font-size:.78rem;font-weight:800}.domino-field-grid input,.domino-field-grid select,.domino-searchable input,.domino-offline-form input{background:var(--ui-field);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);color:var(--ui-text);font:inherit;min-height:42px;padding:10px 12px;width:100%}.domino-searchable{position:relative}.domino-combo-menu{background:var(--ui-surface);border:1px solid var(--ui-primary-border);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-modal);color:var(--ui-text);display:grid;gap:6px;left:0;max-height:220px;overflow:auto;padding:8px;position:absolute;right:0;top:calc(100% + 6px);z-index:10}.domino-combo-menu button,.domino-combo-menu p{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);color:var(--ui-text);font:inherit;margin:0;padding:9px 10px;text-align:left}.domino-combo-menu button:hover,.domino-combo-menu button:focus-visible{background:var(--ui-primary-soft);border-color:var(--ui-primary-border);color:var(--ui-primary-hover)}.domino-player-list,.domino-summary,.domino-bracket,.domino-history,.domino-score-strip{display:grid;gap:8px}.domino-player-row,.domino-summary article,.domino-bracket article,.domino-score-strip span,.domino-history p{background:var(--ui-surface-soft);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);color:var(--ui-text);margin:0;padding:10px}.domino-player-row{align-items:center;display:grid;gap:4px 10px;grid-template-columns:minmax(0,1fr) auto}.domino-player-row input{accent-color:var(--ui-primary)}.domino-actions,.domino-play-actions{display:flex;flex-wrap:wrap;gap:8px}.domino-actions button:disabled,.domino-actions button[disabled]{background:var(--ui-surface-soft);border-color:var(--ui-border);color:var(--ui-text-muted);cursor:not-allowed;opacity:.72}.domino-actions button:hover:not(:disabled),.domino-actions button:focus-visible,.domino-icon-button:hover,.domino-icon-button:focus-visible,.domino-tile-button:hover,.domino-tile-button:focus-visible,.domino-field-grid input:focus,.domino-field-grid select:focus,.domino-searchable input:focus,.domino-offline-form input:focus{border-color:var(--ui-focus);outline:3px solid color-mix(in srgb,var(--ui-focus) 24%,transparent);outline-offset:2px}.domino-actions button:hover:not(:disabled),.domino-tournament button:hover,.domino-offline-form button:hover{background:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}.domino-canvas{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);display:block;height:auto;max-height:58dvh;width:100%}.domino-score-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.domino-score-strip span.is-active{background:var(--ui-primary-soft);border-color:var(--ui-primary-border)}.domino-score-strip b,.domino-summary b,.domino-bracket b{color:var(--ui-text);display:block;overflow-wrap:anywhere}.domino-score-strip small,.domino-summary small,.domino-bracket small{color:var(--ui-text-muted);display:block;font-size:.75rem;font-weight:750}.domino-hand{align-items:center;background:var(--ui-surface-soft);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);display:flex;gap:8px;min-height:74px;overflow:auto;padding:10px;scrollbar-color:var(--ui-primary) var(--ui-surface-soft);scrollbar-width:thin}.domino-tile-button{align-items:center;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);color:var(--ui-text);cursor:pointer;display:grid;flex:0 0 76px;font:inherit;font-weight:900;gap:4px;grid-template-columns:1fr auto 1fr;min-height:48px;padding:8px}.domino-tile-button i{background:var(--ui-border);display:block;height:28px;width:1px}.domino-tile-button.is-selected{background:var(--ui-primary-soft);border-color:var(--ui-primary-border);color:var(--ui-primary-hover)}.domino-status{background:var(--ui-info-soft);border:1px solid color-mix(in srgb,var(--ui-info) 32%,var(--ui-border));border-radius:var(--ui-radius-sm);padding:10px 12px}.domino-history{max-height:360px;overflow:auto;padding-right:2px}.domino-tournament[hidden],.domino-modal-backdrop[hidden]{display:none!important}.domino-modal-backdrop{align-items:center;background:var(--ui-overlay);display:flex;inset:0;justify-content:center;padding:18px;position:fixed;z-index:1200}.domino-modal{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-modal);color:var(--ui-text);display:grid;gap:10px;max-width:460px;padding:22px;width:min(100%,460px)}.domino-modal h2,.domino-modal p{margin:0}.domino-modal p:not(.game-modal-eyebrow){color:var(--ui-text-muted)}.domino-modal .game-modal-rank{align-items:center;background:var(--ui-danger-soft);border:1px solid color-mix(in srgb,var(--ui-danger) 34%,var(--ui-border));border-radius:999px;color:var(--ui-danger-strong);display:inline-flex;font-weight:900;justify-content:center;min-height:42px;width:42px}.domino-modal .game-modal-rank.is-success{background:var(--ui-success-soft);border-color:color-mix(in srgb,var(--ui-success) 34%,var(--ui-border));color:var(--ui-success-strong)}.domino-modal .game-modal-eyebrow{background:var(--ui-primary-soft);border:1px solid var(--ui-primary-border);border-radius:999px;color:var(--ui-primary-hover);font-size:.75rem;font-weight:850;justify-self:start;padding:5px 10px}@media (max-width:1120px){.domino-layout{grid-template-columns:minmax(0,1fr)}.domino-side-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:720px){.domino-shell{padding-inline:10px}.domino-head{grid-template-columns:minmax(0,1fr) auto}.domino-head .ksrf-back-button{grid-column:1/-1;justify-self:start}.domino-tabs button{flex:0 0 auto}.domino-score-strip,.domino-side-panel,.domino-offline-grid{grid-template-columns:minmax(0,1fr)}.domino-canvas{max-height:none}.domino-actions button{flex:1 1 140px}}

/* Domino Gaplek arena pass: landscape-first game shell. */
body.domino-page,
body.domino-page > .shell {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.domino-page > .home-bottom-nav {
  display: none !important;
}

body.domino-page .page-guide-fab {
  display: none !important;
}

.domino-shell {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  width: 100% !important;
}

.domino-arena-topbar {
  align-items: center !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(150px, .8fr) minmax(260px, 1fr) auto !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
}

.domino-arena-title {
  min-width: 0 !important;
}

.domino-arena-title .auth-brand {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  display: inline-flex !important;
  font-size: .64rem !important;
  font-weight: 850 !important;
  letter-spacing: .18em !important;
  margin: 0 0 3px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 3px 7px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.domino-arena-title h1 {
  color: var(--ui-text) !important;
  font-size: clamp(1rem, 3.5dvh, 1.5rem) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.domino-top-actions {
  display: flex !important;
  gap: 6px !important;
  justify-content: end !important;
}

.domino-icon-button {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  min-height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}

.domino-icon-button svg,
.domino-rotate-overlay svg {
  fill: none !important;
  height: 21px !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
  width: 21px !important;
}

.domino-tabs {
  align-items: center !important;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: flex !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding: 5px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

.domino-tabs button,
.domino-actions button,
.domino-tournament button,
.domino-offline-form button,
.domino-modal button:not(.domino-icon-button) {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-on-primary) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-weight: 850 !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
}

.domino-tabs button {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  flex: 1 0 auto !important;
  min-width: 78px !important;
}

.domino-tabs button.is-active,
.domino-tabs button:hover,
.domino-tabs button:focus-visible {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

.domino-arena {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(118px, 14dvw) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.domino-player-rail,
.domino-table-zone,
.domino-hand-zone,
.domino-panel,
.domino-board-panel {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

.domino-player-rail {
  grid-row: 1 / 3 !important;
  overflow: hidden !important;
  padding: 8px !important;
}

.domino-score-strip {
  display: grid !important;
  gap: 7px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  height: 100% !important;
  overflow: auto !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

.domino-score-strip span {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 2px !important;
  min-height: 62px !important;
  padding: 8px !important;
}

.domino-score-strip span.is-active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: inset 4px 0 0 var(--ui-primary) !important;
}

.domino-score-strip b,
.domino-summary b,
.domino-bracket b {
  color: var(--ui-text) !important;
  font-size: .88rem !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

.domino-score-strip small,
.domino-score-strip em,
.domino-summary small,
.domino-summary span,
.domino-bracket small,
.domino-bracket span,
.domino-history p,
.domino-modal p:not(.game-modal-eyebrow),
.domino-rotate-overlay span {
  color: var(--ui-text-muted) !important;
  font-size: .74rem !important;
  font-style: normal !important;
  line-height: 1.25 !important;
}

.domino-table-zone {
  display: grid !important;
  gap: 8px !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  padding: 10px !important;
}

.domino-canvas {
  background: var(--ui-bg) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  display: block !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  width: 100% !important;
}

.domino-status {
  background: var(--ui-info-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-info) 32%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-info-strong) !important;
  font-weight: 760 !important;
  min-height: 38px !important;
  overflow: hidden !important;
  padding: 9px 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.domino-hand-zone {
  align-items: center !important;
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  padding: 8px !important;
}

.domino-hand {
  align-items: center !important;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: flex !important;
  gap: 7px !important;
  min-height: 58px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 7px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

.domino-tile-button {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  flex: 0 0 66px !important;
  font: inherit !important;
  font-weight: 900 !important;
  gap: 3px !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  min-height: 44px !important;
  padding: 7px !important;
}

.domino-tile-button i {
  background: var(--ui-border) !important;
  height: 25px !important;
  width: 1px !important;
}

.domino-tile-button.is-playable {
  border-color: var(--ui-primary-border) !important;
  box-shadow: inset 0 -3px 0 var(--ui-primary) !important;
}

.domino-tile-button.is-selected {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary-hover) !important;
}

.domino-play-actions {
  display: grid !important;
  gap: 7px !important;
  grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
}

.domino-actions .domino-secondary,
.domino-actions button:disabled,
.domino-actions button[disabled] {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

.domino-actions button:hover:not(:disabled),
.domino-tournament button:hover,
.domino-offline-form button:hover,
.domino-icon-button:hover,
.domino-combo-menu button:hover,
.domino-tile-button:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

.domino-actions button:focus-visible,
.domino-tournament button:focus-visible,
.domino-offline-form button:focus-visible,
.domino-icon-button:focus-visible,
.domino-tabs button:focus-visible,
.domino-tile-button:focus-visible,
.domino-field-grid input:focus,
.domino-field-grid select:focus,
.domino-searchable input:focus {
  border-color: var(--ui-focus) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline-offset: 2px !important;
}

.domino-drawer-scrim {
  background: var(--ui-overlay) !important;
  border: 0 !important;
  inset: 0 !important;
  position: fixed !important;
  z-index: 1190 !important;
}

.domino-drawer {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100dvh !important;
  max-width: min(380px, 88dvw) !important;
  min-width: min(340px, 88dvw) !important;
  padding: 0 !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  transform: translateX(105%) !important;
  transition: transform .18s ease !important;
  z-index: 1200 !important;
}

.domino-drawer.is-open {
  transform: translateX(0) !important;
}

.domino-drawer > header,
.domino-setup-modal > header {
  align-items: center !important;
  border-bottom: 1px solid var(--ui-border) !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
  padding: 12px !important;
}

.domino-drawer h2,
.domino-modal h2,
.domino-panel h2 {
  color: var(--ui-text) !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.domino-drawer-scroll {
  display: grid !important;
  gap: 12px !important;
  overflow: auto !important;
  padding: 12px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

.domino-summary,
.domino-bracket,
.domino-history,
.domino-player-list {
  display: grid !important;
  gap: 8px !important;
}

.domino-summary article,
.domino-bracket article,
.domino-history p,
.domino-player-row {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  margin: 0 !important;
  padding: 9px !important;
}

.domino-modal-backdrop {
  align-items: center !important;
  background: var(--ui-overlay) !important;
  display: flex !important;
  inset: 0 !important;
  justify-content: center !important;
  padding: 14px !important;
  position: fixed !important;
  z-index: 1300 !important;
}

.domino-modal-backdrop[hidden] {
  display: none !important;
}

.domino-modal {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 12px !important;
  max-height: calc(100dvh - 28px) !important;
  max-width: min(520px, 94dvw) !important;
  overflow: auto !important;
  padding: 16px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
  width: 100% !important;
}

.domino-setup-modal {
  max-width: min(720px, 94dvw) !important;
}

.domino-field-grid {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.domino-field-grid label,
.domino-searchable,
.domino-offline-form label {
  display: grid !important;
  gap: 6px !important;
}

.domino-field-grid span,
.domino-searchable label,
.domino-offline-form span {
  color: var(--ui-text-muted) !important;
  font-size: .75rem !important;
  font-weight: 850 !important;
}

.domino-field-grid input,
.domino-field-grid select,
.domino-searchable input,
.domino-offline-form input {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  font: inherit !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  width: 100% !important;
}

.domino-searchable {
  position: relative !important;
}

.domino-combo-menu {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 6px !important;
  left: 0 !important;
  max-height: 180px !important;
  overflow: auto !important;
  padding: 8px !important;
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  z-index: 1320 !important;
}

.domino-combo-menu[hidden] {
  display: none !important;
}

.domino-combo-menu button,
.domino-combo-menu p {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  font: inherit !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  text-align: left !important;
}

.domino-tournament[hidden] {
  display: none !important;
}

.domino-tournament {
  inset: auto 10px 10px auto !important;
  max-width: min(520px, calc(100dvw - 20px)) !important;
  position: fixed !important;
  z-index: 1180 !important;
}

.domino-offline-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
}

.domino-rotate-overlay {
  display: none !important;
}

.domino-tabs::-webkit-scrollbar,
.domino-score-strip::-webkit-scrollbar,
.domino-hand::-webkit-scrollbar,
.domino-drawer-scroll::-webkit-scrollbar,
.domino-modal::-webkit-scrollbar,
.domino-combo-menu::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

.domino-tabs::-webkit-scrollbar-track,
.domino-score-strip::-webkit-scrollbar-track,
.domino-hand::-webkit-scrollbar-track,
.domino-drawer-scroll::-webkit-scrollbar-track,
.domino-modal::-webkit-scrollbar-track,
.domino-combo-menu::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

.domino-tabs::-webkit-scrollbar-thumb,
.domino-score-strip::-webkit-scrollbar-thumb,
.domino-hand::-webkit-scrollbar-thumb,
.domino-drawer-scroll::-webkit-scrollbar-thumb,
.domino-modal::-webkit-scrollbar-thumb,
.domino-combo-menu::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

@media (orientation: portrait) and (max-width: 820px) {
  .domino-rotate-overlay {
    align-items: center !important;
    background: color-mix(in srgb, var(--ui-overlay-solid) 74%, transparent) !important;
    color: var(--ui-on-overlay) !important;
    display: flex !important;
    inset: 0 !important;
    justify-content: center !important;
    padding: 24px !important;
    position: fixed !important;
    z-index: 1600 !important;
  }

  .domino-rotate-overlay > div {
    align-items: center !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-modal) !important;
    color: var(--ui-text) !important;
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important;
    max-width: 280px !important;
    padding: 20px !important;
    text-align: center !important;
  }

  .domino-rotate-overlay svg {
    color: var(--ui-primary) !important;
    height: 42px !important;
    width: 42px !important;
  }

  .domino-rotate-overlay strong {
    color: var(--ui-text) !important;
    font-size: 1.2rem !important;
  }
}

@media (max-width: 860px) and (orientation: landscape) {
  .domino-shell {
    gap: 6px !important;
    padding: 6px !important;
  }

  .domino-arena-topbar {
    gap: 6px !important;
    grid-template-columns: auto minmax(108px, .7fr) minmax(210px, 1fr) auto !important;
    padding: 6px !important;
  }

  .domino-arena-title h1 {
    font-size: .95rem !important;
  }

  .domino-arena-title .auth-brand {
    display: none !important;
  }

  .domino-icon-button {
    min-height: 34px !important;
    min-width: 34px !important;
  }

  .domino-tabs {
    gap: 4px !important;
    padding: 4px !important;
  }

  .domino-tabs button,
  .domino-actions button {
    font-size: .78rem !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
  }

  .domino-arena {
    gap: 6px !important;
    grid-template-columns: minmax(96px, 18dvw) minmax(0, 1fr) !important;
  }

  .domino-player-rail,
  .domino-table-zone,
  .domino-hand-zone {
    border-radius: var(--ui-radius-sm) !important;
    padding: 6px !important;
  }

  .domino-score-strip span {
    min-height: 46px !important;
    padding: 6px !important;
  }

  .domino-score-strip b {
    font-size: .74rem !important;
  }

  .domino-score-strip small,
  .domino-score-strip em {
    font-size: .62rem !important;
  }

  .domino-status {
    font-size: .78rem !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
  }

  .domino-hand-zone {
    grid-template-columns: minmax(0, 1fr) minmax(230px, auto) !important;
  }

  .domino-hand {
    min-height: 46px !important;
    padding: 5px !important;
  }

  .domino-tile-button {
    flex-basis: 54px !important;
    min-height: 36px !important;
    padding: 5px !important;
  }

  .domino-tile-button i {
    height: 20px !important;
  }

  .domino-play-actions {
    grid-template-columns: repeat(3, minmax(68px, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .domino-field-grid,
  .domino-offline-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Domino Gaplek fullscreen browser mode. */
body.domino-fullscreen-active {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
}

.domino-shell:fullscreen,
.domino-shell:-webkit-full-screen,
.domino-shell.is-fullscreen {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)) !important;
  width: 100dvw !important;
}

.domino-shell.is-fullscreen [data-toggle-fullscreen],
.domino-shell:fullscreen [data-toggle-fullscreen],
.domino-shell:-webkit-full-screen [data-toggle-fullscreen] {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

.domino-shell.is-fullscreen .domino-arena-topbar,
.domino-shell:fullscreen .domino-arena-topbar,
.domino-shell:-webkit-full-screen .domino-arena-topbar {
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 5px 6px !important;
}

.domino-shell.is-fullscreen .domino-table-zone,
.domino-shell:fullscreen .domino-table-zone,
.domino-shell:-webkit-full-screen .domino-table-zone,
.domino-shell.is-fullscreen .domino-player-rail,
.domino-shell:fullscreen .domino-player-rail,
.domino-shell:-webkit-full-screen .domino-player-rail,
.domino-shell.is-fullscreen .domino-hand-zone,
.domino-shell:fullscreen .domino-hand-zone,
.domino-shell:-webkit-full-screen .domino-hand-zone {
  box-shadow: none !important;
}

@media (max-width: 920px) and (orientation: landscape) {
  .domino-shell.is-fullscreen,
  .domino-shell:fullscreen,
  .domino-shell:-webkit-full-screen {
    gap: 4px !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .domino-shell.is-fullscreen .domino-arena-topbar,
  .domino-shell:fullscreen .domino-arena-topbar,
  .domino-shell:-webkit-full-screen .domino-arena-topbar {
    gap: 4px !important;
    grid-template-columns: auto minmax(92px, .52fr) minmax(156px, 1fr) auto !important;
  }

  .domino-shell.is-fullscreen .domino-arena-title h1,
  .domino-shell:fullscreen .domino-arena-title h1,
  .domino-shell:-webkit-full-screen .domino-arena-title h1 {
    font-size: .84rem !important;
  }

  .domino-shell.is-fullscreen .domino-tabs button,
  .domino-shell:fullscreen .domino-tabs button,
  .domino-shell:-webkit-full-screen .domino-tabs button {
    font-size: .72rem !important;
    min-height: 30px !important;
    min-width: 64px !important;
    padding: 5px 7px !important;
  }

  .domino-shell.is-fullscreen .domino-icon-button,
  .domino-shell:fullscreen .domino-icon-button,
  .domino-shell:-webkit-full-screen .domino-icon-button {
    min-height: 30px !important;
    min-width: 30px !important;
  }

  .domino-shell.is-fullscreen .domino-arena,
  .domino-shell:fullscreen .domino-arena,
  .domino-shell:-webkit-full-screen .domino-arena {
    gap: 4px !important;
    grid-template-columns: minmax(86px, 16dvw) minmax(0, 1fr) !important;
  }

  .domino-shell.is-fullscreen .domino-table-zone,
  .domino-shell:fullscreen .domino-table-zone,
  .domino-shell:-webkit-full-screen .domino-table-zone,
  .domino-shell.is-fullscreen .domino-player-rail,
  .domino-shell:fullscreen .domino-player-rail,
  .domino-shell:-webkit-full-screen .domino-player-rail,
  .domino-shell.is-fullscreen .domino-hand-zone,
  .domino-shell:fullscreen .domino-hand-zone,
  .domino-shell:-webkit-full-screen .domino-hand-zone {
    padding: 4px !important;
  }

  .domino-shell.is-fullscreen .domino-hand,
  .domino-shell:fullscreen .domino-hand,
  .domino-shell:-webkit-full-screen .domino-hand {
    min-height: 42px !important;
  }
}

/* Domino Gaplek GameFlow polish: stronger table focus, clearer actions, and playable feedback. */
.domino-table-zone {
  background: linear-gradient(180deg, var(--ui-surface), var(--ui-primary-soft)) !important;
  border-color: var(--ui-primary-border) !important;
  padding: 12px !important;
}

.domino-canvas {
  background: radial-gradient(circle at 50% 42%, #f8fffe 0%, #e4f5f3 58%, var(--ui-bg) 100%) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-primary) 10%, transparent), 0 12px 28px rgba(15, 23, 42, .08) !important;
}

.domino-status {
  align-items: center !important;
  display: grid !important;
  gap: 2px !important;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr) !important;
  min-height: 50px !important;
  white-space: normal !important;
}

.domino-status strong {
  color: var(--ui-primary-hover) !important;
  font-size: .92rem !important;
  line-height: 1.2 !important;
}

.domino-status span {
  color: var(--ui-text) !important;
  font-size: .86rem !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
}

.domino-hand-zone {
  background: color-mix(in srgb, var(--ui-surface) 82%, var(--ui-primary-soft)) !important;
  border-color: var(--ui-primary-border) !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, auto) !important;
  padding: 10px !important;
}

.domino-hand {
  border-color: var(--ui-primary-border) !important;
  gap: 10px !important;
  min-height: 76px !important;
  padding: 10px !important;
}

.domino-hand p {
  color: var(--ui-primary-hover) !important;
  font-weight: 850 !important;
  margin: 0 !important;
}

.domino-tile-button {
  border-width: 2px !important;
  flex-basis: 86px !important;
  font-size: 1.04rem !important;
  min-height: 56px !important;
  padding: 9px !important;
  position: relative !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}

.domino-tile-button i {
  height: 33px !important;
}

.domino-tile-button.is-playable {
  background: var(--ui-surface) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: inset 0 -4px 0 var(--ui-primary), 0 6px 16px rgba(8, 123, 120, .14) !important;
}

.domino-tile-button.is-playable::after {
  background: var(--ui-primary) !important;
  border-radius: 999px !important;
  content: "" !important;
  height: 7px !important;
  position: absolute !important;
  right: 7px !important;
  top: 7px !important;
  width: 7px !important;
}

.domino-tile-button.is-selected {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 24%, transparent), 0 8px 18px rgba(8, 123, 120, .18) !important;
  color: var(--ui-primary-hover) !important;
  transform: translateY(-4px) !important;
}

.domino-tile-button.is-locked {
  color: var(--ui-text-muted) !important;
  opacity: .7 !important;
}

.domino-play-actions {
  min-width: 340px !important;
}

.domino-actions button:disabled,
.domino-actions button[disabled] {
  cursor: not-allowed !important;
  opacity: .66 !important;
}

.domino-score-strip span {
  border-left: 4px solid transparent !important;
  min-height: 76px !important;
}

.domino-score-strip span::before {
  align-items: center !important;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 999px !important;
  color: var(--ui-primary-hover) !important;
  content: "AI" !important;
  display: inline-flex !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  height: 26px !important;
  justify-content: center !important;
  justify-self: start !important;
  width: 34px !important;
}

.domino-score-strip span:first-child::before {
  content: "U" !important;
}

.domino-score-strip span.is-active {
  border-color: var(--ui-primary) !important;
  box-shadow: inset 4px 0 0 var(--ui-primary), 0 8px 20px rgba(8, 123, 120, .13) !important;
}

.domino-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.domino-field-grid label:last-child {
  grid-column: 1 / -1 !important;
}

@media (max-width: 920px) {
  .domino-status,
  .domino-hand-zone,
  .domino-field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .domino-play-actions {
    min-width: 0 !important;
    width: 100% !important;
  }

  .domino-tile-button {
    flex-basis: 78px !important;
    min-height: 52px !important;
  }
}
.domino-score-strip span.is-human::before {
  content: "U" !important;
}

.domino-score-strip span.is-bot::before {
  content: "AI" !important;
}

/* Kas Masuk QRIS source picker: custom dropdown bound to the global --ui-* contract. */
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-native {
  block-size: 1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-picker {
  position: relative !important;
  width: 100% !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-trigger {
  align-items: center !important;
  background:
    linear-gradient(45deg, transparent 50%, var(--ui-text-muted) 50%) calc(100% - 20px) 52% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--ui-text-muted) 50%, transparent 50%) calc(100% - 14px) 52% / 7px 7px no-repeat,
    var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: flex !important;
  font: inherit !important;
  font-weight: 850 !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 10px 42px 10px 14px !important;
  text-align: left !important;
  width: 100% !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-trigger:hover,
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-picker.is-open .cash-in-qris-source-trigger {
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-trigger:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: none !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-trigger:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-trigger span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-menu {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 6px !important;
  left: 0 !important;
  max-height: min(260px, 45dvh) !important;
  overflow: auto !important;
  padding: 8px !important;
  position: absolute !important;
  right: 0 !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
  top: calc(100% + 6px) !important;
  z-index: 80 !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-menu[hidden] {
  display: none !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option,
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  min-height: 52px !important;
  padding: 9px 11px !important;
  text-align: left !important;
  width: 100% !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option strong {
  color: var(--ui-text) !important;
  font-size: .9rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option small,
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-empty {
  color: var(--ui-text-muted) !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option:hover,
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option:focus-visible,
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option[aria-selected="true"] {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: none !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option:hover strong,
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option:focus-visible strong,
body.invoice-page .cashier-cash-in-skin-page .cash-in-qris-source-option[aria-selected="true"] strong {
  color: var(--ui-primary-hover) !important;
}

/* Kas Masuk Mandiri source field layout: keep QRIS/EDC picker aligned with the two-column form grid. */
body.invoice-page .cashier-cash-in-skin-page .cash-out-category-editor > .cash-in-source-code-field {
  align-items: start !important;
  column-gap: 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  row-gap: 6px !important;
  width: 100% !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-label {
  color: var(--ui-text-muted) !important;
  display: block !important;
  font: inherit !important;
  font-weight: 850 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field:has(:required)::after {
  align-self: center !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field .cash-in-qris-source-native {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field .cash-in-qris-source-picker {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field .cash-in-qris-source-trigger {
  box-sizing: border-box !important;
  min-height: 44px !important;
  width: 100% !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field .cash-in-qris-source-trigger span {
  display: block !important;
  grid-column: auto !important;
  min-width: 0 !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field [data-qris-mandiri-source-help] {
  color: var(--ui-text-muted) !important;
  display: block !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  grid-column: 1 / -1 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field .cash-in-qris-source-menu {
  min-height: 0 !important;
  width: 100% !important;
}

body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-field .cash-in-qris-source-empty {
  background: var(--ui-surface-soft) !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
}

@media (max-width: 560px) {
  body.invoice-page .cashier-cash-in-skin-page .cash-in-source-code-label {
    white-space: normal !important;
  }
}

/* Financial journal checklist row contrast v2. */
body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head) {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-success) 32%, transparent) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head)::before {
  background: var(--ui-success) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head):hover,
body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head):focus-within {
  background: color-mix(in srgb, var(--ui-success) 18%, var(--ui-surface)) !important;
  border-color: color-mix(in srgb, var(--ui-success) 44%, var(--ui-border)) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-success) 42%, transparent) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):hover,
body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):focus-within {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-warning) 40%, transparent) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):hover::before,
body.invoice-page .financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):focus-within::before {
  background: var(--ui-warning) !important;
}

/* Financial journal checklist row default contrast v3. */
.financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 72%, transparent) !important;
}

.financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked)::before {
  background: var(--ui-border) !important;
}

.financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head) {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-success) 34%, transparent) !important;
}

.financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head)::before {
  background: var(--ui-success) !important;
}

.financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):hover,
.financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):focus-within {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-warning) 34%, transparent) !important;
}

.financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):hover::before,
.financial-journal-page .financial-journal-ledger-table > .financial-journal-row:not(.financial-journal-row-head):not(.is-checked):focus-within::before {
  background: var(--ui-warning) !important;
}

.financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head):hover,
.financial-journal-page .financial-journal-ledger-table > .financial-journal-row.is-checked:not(.financial-journal-row-head):focus-within {
  background: color-mix(in srgb, var(--ui-success) 16%, var(--ui-surface)) !important;
  border-color: var(--ui-success) !important;
}

.phone-validation-status {
  align-items: center;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm, 8px);
  background: var(--ui-surface-soft);
  color: var(--ui-text-muted);
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 6px;
  margin-top: 6px;
  min-height: 32px;
  padding: 7px 10px;
}

.phone-validation-status::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  content: "";
  height: 8px;
  width: 8px;
}

.phone-validation-status[data-state="checking"] {
  background: color-mix(in srgb, var(--ui-info) 10%, var(--ui-surface));
  border-color: color-mix(in srgb, var(--ui-info) 30%, var(--ui-border));
  color: var(--ui-info);
}

.phone-validation-status[data-state="checking"]::before {
  animation: ksrf-phone-check-pulse 900ms ease-in-out infinite;
}

.phone-validation-status[data-state="success"] {
  background: color-mix(in srgb, var(--ui-success) 12%, var(--ui-surface));
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border));
  color: var(--ui-success);
}

.phone-validation-status[data-state="error"] {
  background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-surface));
  border-color: color-mix(in srgb, var(--ui-danger) 32%, var(--ui-border));
  color: var(--ui-danger);
}

@keyframes ksrf-phone-check-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.78); }
  50% { opacity: 1; transform: scale(1); }
}

/* Event builder */
body.invoice-page .event-builder-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1180px;
  padding: 24px 18px 120px;
}

body.invoice-page .event-builder-hero,
body.invoice-page .event-builder-section,
body.invoice-page .event-form-panel,
body.invoice-page .event-card,
body.invoice-page .event-builder-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .event-builder-hero {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 18px;
}

body.invoice-page .event-builder-hero h1,
body.invoice-page .event-builder-section h2,
body.invoice-page .event-form-head h2,
body.invoice-page .event-card h3 {
  color: var(--ui-text) !important;
  letter-spacing: 0 !important;
  line-height: 1.18;
  margin: 0;
}

body.invoice-page .event-builder-hero p,
body.invoice-page .event-card p,
body.invoice-page .event-builder-empty p,
body.invoice-page .event-card dd,
body.invoice-page .event-card dt,
body.invoice-page .event-form label small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .event-builder-kicker,
body.invoice-page .event-builder-status,
body.invoice-page .event-card-meta span {
  align-items: center;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  color: var(--ui-primary-hover) !important;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 850;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
}

body.invoice-page .event-builder-kicker {
  margin: 0 0 7px;
  text-transform: uppercase;
}

body.invoice-page .event-builder-status.is-upcoming {
  background: var(--ui-info-soft) !important;
  color: var(--ui-info-strong) !important;
}

body.invoice-page .event-builder-status.is-finished {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page .event-builder-status.is-ongoing {
  background: var(--ui-success-soft) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .event-builder-primary,
body.invoice-page .event-builder-secondary,
body.invoice-page .event-builder-danger,
body.invoice-page .event-form-actions button {
  align-items: center;
  border-radius: 8px !important;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 850;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

body.invoice-page .event-builder-primary,
body.invoice-page .event-form-actions button {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .event-builder-primary:hover,
body.invoice-page .event-builder-primary:focus-visible,
body.invoice-page .event-form-actions button:hover,
body.invoice-page .event-form-actions button:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-builder-secondary {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .event-builder-secondary:hover,
body.invoice-page .event-builder-secondary:focus-visible {
  background: var(--ui-primary-soft) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-builder-danger {
  background: var(--ui-danger-soft) !important;
  border: 1px solid var(--ui-danger) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .event-builder-danger:hover,
body.invoice-page .event-builder-danger:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-builder-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.invoice-page .event-builder-summary a {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 16px;
  text-decoration: none !important;
}

body.invoice-page .event-builder-summary a:hover,
body.invoice-page .event-builder-summary a:focus-visible {
  background: var(--ui-primary-soft) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-builder-summary span {
  color: var(--ui-text-muted) !important;
  font-weight: 750;
}

body.invoice-page .event-builder-summary strong {
  color: var(--ui-primary-hover) !important;
  font-size: 1.8rem;
  line-height: 1;
}

body.invoice-page .event-builder-groups {
  display: grid;
  gap: 18px;
}

body.invoice-page .event-builder-section {
  display: grid;
  gap: 14px;
  padding: 16px;
}

body.invoice-page .event-builder-section-head,
body.invoice-page .event-form-head,
body.invoice-page .event-card-actions,
body.invoice-page .event-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

body.invoice-page .event-form-actions {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  bottom: 16px;
  box-shadow: var(--ui-shadow-modal) !important;
  margin-top: 4px;
  padding: 10px;
  position: sticky;
  z-index: 90;
}

body.invoice-page .event-builder-section-head small {
  color: var(--ui-text-muted) !important;
  font-weight: 800;
}

body.invoice-page .event-builder-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.invoice-page .event-card {
  display: grid;
  overflow: hidden;
}

body.invoice-page .event-card-media {
  align-items: center;
  aspect-ratio: 16 / 7;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-primary-hover) !important;
  display: flex;
  font-weight: 900;
  justify-content: center;
  overflow: hidden;
  text-decoration: none !important;
}

body.invoice-page .event-card-media img,
body.invoice-page .event-card-media video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body.invoice-page .event-card-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

body.invoice-page .event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.invoice-page .event-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

body.invoice-page .event-card dl div {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

body.invoice-page .event-card dt,
body.invoice-page .event-card dd {
  margin: 0;
}

body.invoice-page .event-card dt {
  font-size: .76rem;
  font-weight: 850;
  text-transform: uppercase;
}

body.invoice-page .event-card dd {
  overflow-wrap: anywhere;
}

body.invoice-page .event-card-actions form {
  margin: 0;
}

body.invoice-page .event-builder-empty {
  display: grid;
  gap: 6px;
  padding: 24px;
  text-align: center;
}

body.invoice-page .event-form {
  display: grid;
  gap: 16px;
}

body.invoice-page .event-form-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

body.invoice-page .event-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.invoice-page .event-form label {
  color: var(--ui-text) !important;
  display: grid;
  font-weight: 800;
  gap: 8px;
}

body.invoice-page .event-form .event-form-span {
  grid-column: 1 / -1;
}

body.invoice-page .event-form input,
body.invoice-page .event-form select,
body.invoice-page .event-form textarea {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  font: inherit;
  min-height: 44px;
  padding: 11px 12px;
  width: 100%;
}

body.invoice-page .event-form textarea {
  line-height: 1.5;
  min-height: 120px;
  resize: vertical;
}

body.invoice-page .event-content-visibility {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  padding: 12px;
}

body.invoice-page .event-toggle-row {
  align-items: center;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text-muted) !important;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 10px;
}

body.invoice-page .event-toggle-row input[type="checkbox"] {
  accent-color: var(--ui-primary);
  flex: 0 0 auto;
  min-height: 22px;
  min-width: 22px;
  padding: 0;
  width: 22px;
}

body.invoice-page .event-toggle-row input[type="hidden"] {
  display: none !important;
}

body.invoice-page .event-toggle-row:has(input[type="checkbox"]:focus-visible) {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
}

body.invoice-page .event-toggle-row:has(input[type="checkbox"]:checked) {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .event-form input::placeholder,
body.invoice-page .event-form textarea::placeholder {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .event-form input:focus-visible,
body.invoice-page .event-form select:focus-visible,
body.invoice-page .event-form textarea:focus-visible,
body.invoice-page .event-form-actions a:focus-visible,
body.invoice-page .event-form-actions button:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-form input:disabled,
body.invoice-page .event-form select:disabled,
body.invoice-page .event-form textarea:disabled,
body.invoice-page .event-form button:disabled {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
}

body.invoice-page .event-color-field input[type="color"] {
  cursor: pointer;
  min-height: 56px;
  padding: 8px;
}

body.invoice-page .event-color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

body.invoice-page .event-color-field input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--ui-border) !important;
  border-radius: 6px;
}

body.invoice-page .event-color-field small {
  color: var(--ui-text-muted) !important;
  line-height: 1.45;
}

body.invoice-page .event-builder-page ::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

body.invoice-page .event-builder-page ::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .event-builder-page ::-webkit-scrollbar-thumb {
  background: var(--ui-border) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: 999px;
}

@media (max-width: 920px) {
  body.invoice-page .event-builder-hero {
    grid-template-columns: 1fr;
  }

  body.invoice-page .event-builder-summary,
  body.invoice-page .event-builder-grid,
  body.invoice-page .event-form-grid {
    grid-template-columns: 1fr;
  }

  body.invoice-page .event-builder-primary,
  body.invoice-page .event-builder-secondary,
  body.invoice-page .event-builder-danger,
  body.invoice-page .event-form-actions button,
  body.invoice-page .event-card-actions form {
    width: 100%;
  }

  body.invoice-page .event-card-actions,
  body.invoice-page .event-form-actions {
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  body.invoice-page .event-builder-page {
    padding: 14px 10px 110px;
  }

  body.invoice-page .event-builder-hero,
  body.invoice-page .event-builder-section,
  body.invoice-page .event-form-panel {
    padding: 12px;
  }
}

body.invoice-page .event-competition-list {
  display: grid;
  gap: 12px;
}

body.invoice-page .event-competition-card {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: grid;
  gap: 12px;
  padding: 12px;
}

body.invoice-page .event-competition-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
}

body.invoice-page .event-competition-summary::-webkit-details-marker {
  display: none;
}

body.invoice-page .event-competition-summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.invoice-page .event-competition-summary strong {
  color: var(--ui-text) !important;
  font-weight: 900;
}

body.invoice-page .event-competition-summary small {
  color: var(--ui-text-muted) !important;
  overflow-wrap: anywhere;
}

body.invoice-page .event-competition-summary:hover strong,
body.invoice-page .event-competition-summary:focus-visible strong,
body.invoice-page .event-competition-card[open] .event-competition-summary strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .event-competition-summary:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-competition-detail {
  display: grid;
  gap: 12px;
}

body.invoice-page .event-competition-card:not([open]) {
  gap: 0;
}

body.invoice-page .event-competition-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.invoice-page .event-competition-add {
  width: 100%;
}

body.invoice-page .event-card-competitions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.invoice-page .event-card-competitions span {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  color: var(--ui-primary-strong) !important;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 7px 10px;
}

body.invoice-page .event-competition-remove:disabled,
body.invoice-page .event-form input[aria-disabled="true"] {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: .68;
}

body.invoice-page .event-schedule-builder {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

body.invoice-page .event-schedule-builder-head,
body.invoice-page .event-schedule-card-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

body.invoice-page .event-schedule-builder-head strong,
body.invoice-page .event-schedule-card-head strong {
  color: var(--ui-text) !important;
}

body.invoice-page .event-schedule-builder-head small,
body.invoice-page .event-schedule-legacy small {
  color: var(--ui-text-muted) !important;
  line-height: 1.45;
}

body.invoice-page .event-schedule-list,
body.invoice-page .event-schedule-extra-list {
  display: grid;
  gap: 12px;
}

body.invoice-page .event-schedule-card,
body.invoice-page .event-schedule-extra {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

body.invoice-page .event-schedule-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.invoice-page .event-schedule-extra {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
}

body.invoice-page .event-schedule-end-field {
  gap: 8px !important;
}

body.invoice-page .event-schedule-finish-toggle {
  align-items: center;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  color: var(--ui-text) !important;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  width: max-content;
}

body.invoice-page .event-schedule-finish-toggle:hover,
body.invoice-page .event-schedule-finish-toggle:focus-within {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 20%, transparent) !important;
}

body.invoice-page .event-schedule-finish-toggle input {
  accent-color: var(--ui-primary);
  min-height: 0 !important;
  width: auto !important;
}

body.invoice-page .event-schedule-end-field input[data-schedule-end-time]:disabled {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
}

body.invoice-page .event-schedule-add,
body.invoice-page .event-schedule-extra-add,
body.invoice-page .event-schedule-remove,
body.invoice-page .event-schedule-extra-remove {
  min-height: 42px;
}

body.invoice-page .event-schedule-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
}

body.invoice-page .event-schedule-summary::-webkit-details-marker {
  display: none;
}

body.invoice-page .event-schedule-summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.invoice-page .event-schedule-summary small {
  color: var(--ui-text-muted) !important;
  overflow-wrap: anywhere;
}

body.invoice-page .event-schedule-summary:hover strong,
body.invoice-page .event-schedule-summary:focus-visible strong,
body.invoice-page .event-schedule-card[open] .event-schedule-summary strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .event-schedule-summary:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-schedule-detail {
  display: grid;
  gap: 12px;
}

body.invoice-page .event-schedule-card:not([open]) {
  gap: 0;
}

body.invoice-page .event-schedule-add {
  width: 100%;
}

body > .event-schedule-modal[hidden],
body.invoice-page .event-schedule-modal[hidden] {
  display: none !important;
}

body.invoice-page .event-schedule-modal,
body > .event-schedule-modal {
  align-items: center;
  display: grid;
  height: 100dvh;
  inset: 0;
  justify-items: center;
  overflow: hidden;
  padding: clamp(12px, 3vw, 26px);
  place-items: center;
  position: fixed;
  width: 100vw;
  z-index: 2147483000;
}

body.invoice-page .event-schedule-modal-backdrop,
body > .event-schedule-modal .event-schedule-modal-backdrop {
  background: var(--ui-overlay) !important;
  border: 0 !important;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

body.invoice-page .event-schedule-modal-dialog,
body > .event-schedule-modal .event-schedule-modal-dialog {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid;
  gap: 14px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(760px, calc(100dvh - 28px));
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2.4vw, 20px);
  position: relative;
  width: min(640px, 100%);
}

body.invoice-page .event-schedule-modal-head,
body.invoice-page .event-schedule-modal-actions,
body > .event-schedule-modal .event-schedule-modal-head,
body > .event-schedule-modal .event-schedule-modal-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

body.invoice-page .event-schedule-modal-head > div,
body > .event-schedule-modal .event-schedule-modal-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.invoice-page .event-schedule-modal-head strong,
body > .event-schedule-modal .event-schedule-modal-head strong {
  color: var(--ui-text) !important;
  font-weight: 900;
}

body.invoice-page .event-schedule-modal-head small,
body > .event-schedule-modal .event-schedule-modal-head small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .event-schedule-modal-body,
body > .event-schedule-modal .event-schedule-modal-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-color: var(--ui-border) var(--ui-surface-soft);
  scrollbar-width: thin;
}

body.invoice-page .event-schedule-modal-body::-webkit-scrollbar,
body > .event-schedule-modal .event-schedule-modal-body::-webkit-scrollbar {
  width: 10px;
}

body.invoice-page .event-schedule-modal-body::-webkit-scrollbar-track,
body > .event-schedule-modal .event-schedule-modal-body::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .event-schedule-modal-body::-webkit-scrollbar-thumb,
body > .event-schedule-modal .event-schedule-modal-body::-webkit-scrollbar-thumb {
  background: var(--ui-border) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: 8px;
}

body.invoice-page .event-schedule-modal-body .event-schedule-card,
body > .event-schedule-modal .event-schedule-modal-body .event-schedule-card,
body > .event-schedule-modal .event-schedule-modal-body .event-sponsor-card {
  box-shadow: none !important;
}

body > .event-schedule-modal label {
  color: var(--ui-text) !important;
  display: grid;
  font-weight: 800;
  gap: 8px;
}

body > .event-schedule-modal input,
body > .event-schedule-modal select,
body > .event-schedule-modal textarea {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  font: inherit;
  min-height: 44px;
  padding: 11px 12px;
  width: 100%;
}

body > .event-schedule-modal input::placeholder,
body > .event-schedule-modal textarea::placeholder {
  color: var(--ui-text-muted) !important;
}

body > .event-schedule-modal input:focus-visible,
body > .event-schedule-modal select:focus-visible,
body > .event-schedule-modal textarea:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body > .event-schedule-modal input:disabled,
body > .event-schedule-modal select:disabled,
body > .event-schedule-modal textarea:disabled,
body > .event-schedule-modal button:disabled {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
  opacity: .68;
}

html.event-schedule-modal-open,
body.event-schedule-modal-open,
body.invoice-page.event-schedule-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.event-schedule-modal-open > .home-bottom-nav {
  pointer-events: none;
  z-index: 1 !important;
}

@media (max-width: 920px) {
  body.invoice-page .event-schedule-grid,
  body.invoice-page .event-schedule-extra {
    grid-template-columns: 1fr;
  }

  body.invoice-page .event-schedule-builder-head,
  body.invoice-page .event-schedule-card-head,
  body.invoice-page .event-schedule-summary,
  body.invoice-page .event-competition-summary,
  body.invoice-page .event-schedule-modal-head,
  body.invoice-page .event-schedule-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.invoice-page .event-schedule-summary,
  body.invoice-page .event-competition-summary {
    display: grid;
  }

  body.invoice-page .event-form-actions {
    bottom: auto;
    position: static;
  }
}

@media (max-width: 920px) {
  body.invoice-page .event-competition-grid {
    grid-template-columns: 1fr;
  }

  body.invoice-page .event-competition-add,
  body.invoice-page .event-competition-remove {
    width: 100%;
  }

  body.invoice-page .event-competition-summary {
    align-items: stretch;
    flex-direction: column;
  }
}

body.invoice-page .event-native-select {
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
}

body.invoice-page .event-dropdown {
  position: relative;
  width: 100%;
  z-index: 1;
}

body.invoice-page .event-dropdown.is-open {
  z-index: 30;
}

body.invoice-page .event-dropdown-trigger {
  align-items: center;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 800;
  justify-content: space-between;
  min-height: 46px;
  padding: 11px 42px 11px 13px;
  position: relative;
  text-align: left;
  width: 100%;
}

body.invoice-page .event-dropdown-trigger::after {
  border-color: var(--ui-text-muted) transparent transparent transparent;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  content: "";
  position: absolute;
  right: 14px;
  top: calc(50% - 2px);
}

body.invoice-page .event-dropdown-trigger:hover,
body.invoice-page .event-dropdown-trigger:focus-visible,
body.invoice-page .event-dropdown.is-open .event-dropdown-trigger {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-dropdown-menu {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--ui-shadow-modal) !important;
  display: none;
  left: 0;
  max-height: 240px;
  overflow: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
}

body.invoice-page .event-dropdown.is-open .event-dropdown-menu {
  display: grid;
  gap: 4px;
}

body.invoice-page .event-dropdown-option {
  background: var(--ui-surface) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--ui-text) !important;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  min-height: 38px;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

body.invoice-page .event-dropdown-option:hover,
body.invoice-page .event-dropdown-option:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: 0;
}

body.invoice-page .event-dropdown-option.is-selected {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .event-dropdown-menu::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

body.invoice-page .event-dropdown-menu::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .event-dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--ui-border) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: 8px;
}

@media (max-width: 560px) {
  body.invoice-page .event-dropdown-menu {
    max-height: 210px;
  }
}

body.invoice-page .event-template-guide {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  display: grid;
  gap: 8px;
  padding: 12px;
}

body.invoice-page .event-template-guide strong {
  color: var(--ui-primary-hover) !important;
  font-weight: 900;
}

body.invoice-page .event-template-guide p {
  color: var(--ui-text-muted) !important;
  margin: 0;
}

body.invoice-page .event-template-guide [data-template-guide-tags] {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body.invoice-page .event-template-guide [data-template-guide-tags] span {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  color: var(--ui-primary-strong) !important;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.2;
  padding: 6px 9px;
}

body.public-event-route {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.public-event-route .shell {
  background: var(--ui-bg) !important;
}

.public-event-page {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 960px;
  padding: clamp(12px, 2.5vw, 28px);
}

.public-event-hero {
  background: var(--ui-surface) !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 0;
}

.public-event-hero-media,
.public-event-hero > img {
  aspect-ratio: 16 / 9;
  border: 0 !important;
  border-radius: 0;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.public-event-hero-copy {
  display: grid;
  gap: 10px;
  padding: 0 clamp(14px, 2.4vw, 22px) clamp(14px, 2.4vw, 22px);
}

.public-event-kicker,
.public-event-meta span,
.public-event-activity span,
.public-event-aside span {
  color: var(--ui-primary) !important;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-event-hero-copy h1,
.public-event-section h2,
.public-event-activity h3,
.public-event-aside strong {
  color: var(--ui-text) !important;
  letter-spacing: 0;
  margin: 0;
}

.public-event-hero-copy h1 {
  font-size: clamp(1.95rem, 5vw, 3.45rem);
  line-height: 1.05;
}

.public-event-hero-copy p,
.public-event-section p,
.public-event-activity dd,
.public-event-activity p {
  color: var(--ui-text-muted) !important;
  line-height: 1.7;
  margin: 0;
}

.public-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.public-event-meta span {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  text-transform: none;
}

.public-event-meta span:not(:last-child)::after {
  color: var(--ui-text-muted);
  content: "·";
  display: inline-block;
  margin-left: 14px;
}

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

.public-event-main,
.public-event-section,
.public-event-info-grid,
.public-event-activity-list,
.public-event-aside {
  display: grid;
  gap: 16px;
}

.public-event-section,
.public-event-activity,
.public-event-aside {
  background: var(--ui-surface) !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: clamp(16px, 2.4vw, 22px) clamp(14px, 2.4vw, 22px);
}

.public-event-section,
.public-event-activity {
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 64%, transparent) !important;
}

.public-event-section {
  gap: 12px;
}

.public-event-section h2 {
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1.12;
}

.public-event-activity h3 {
  font-size: clamp(1.18rem, 3.5vw, 1.85rem);
  line-height: 1.16;
}

.public-event-info-grid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}

.public-event-info-grid article {
  background: var(--ui-surface) !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 54%, transparent) !important;
  border-radius: 0;
  padding: 16px 0 0;
}

.public-event-activity {
  gap: 12px;
}

.public-event-activity-banner {
  aspect-ratio: 16 / 9;
  background: var(--ui-surface-soft) !important;
  border: 0 !important;
  border-radius: 0;
  display: block;
  object-fit: cover;
  width: 100%;
}

.public-event-activity dl {
  display: grid;
  gap: 0 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.public-event-activity dl div,
.public-event-aside div {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 52%, transparent) !important;
  border-radius: 0;
  display: grid;
  gap: 4px;
  padding: 11px 0;
}

.public-event-activity dt {
  color: var(--ui-text-muted) !important;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.public-event-activity dd {
  font-weight: 700;
}

.public-event-activity-terms {
  font-size: .86rem;
  line-height: 1.55;
  margin-top: -2px;
  white-space: pre-line;
}

.public-event-schedule-list {
  display: grid;
  gap: 12px;
}

.public-event-schedule-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 52%, transparent) !important;
  border-radius: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  padding: 14px 0 0;
}

.public-event-schedule-time {
  align-content: start;
  display: grid;
  gap: 6px;
}

.public-event-schedule-time span,
.public-event-schedule-body dt {
  color: var(--ui-primary) !important;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-event-schedule-time strong,
.public-event-schedule-body h3 {
  color: var(--ui-text) !important;
  margin: 0;
}

.public-event-schedule-body {
  display: grid;
  gap: 10px;
}

.public-event-schedule-body dl {
  display: grid;
  gap: 8px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.public-event-schedule-body dl div {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 48%, transparent) !important;
  border-radius: 0;
  display: grid;
  gap: 4px;
  padding: 10px 0 0;
}

.public-event-schedule-body dd {
  color: var(--ui-text-muted) !important;
  font-weight: 700;
  margin: 0;
}

.public-event-section-head {
  display: grid;
  gap: 8px;
}

.public-event-calendar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  display: grid;
  gap: 12px;
  padding: 0;
}

.public-event-calendar-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.public-event-calendar-head strong {
  color: var(--ui-text) !important;
  font-size: 1.05rem;
  font-weight: 900;
}

.public-event-calendar-head span {
  background: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-surface)) !important;
  border: 0 !important;
  border-radius: 999px;
  color: var(--ui-primary) !important;
  font-size: .78rem;
  font-weight: 850;
  padding: 7px 10px;
}

.public-event-calendar-weekdays,
.public-event-calendar-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.public-event-calendar-weekdays span {
  color: var(--ui-text-muted) !important;
  font-size: .74rem;
  font-weight: 900;
  text-align: center;
}

.public-event-calendar-day {
  align-items: start;
  background: var(--ui-field) !important;
  border: 0 !important;
  border-radius: 6px;
  color: var(--ui-text) !important;
  display: grid;
  font: inherit;
  font-weight: 900;
  gap: 4px;
  min-height: 66px;
  padding: 9px;
  text-align: left;
}

.public-event-calendar-day.is-muted {
  color: var(--ui-text-muted) !important;
  opacity: .58;
}

.public-event-calendar-day small {
  color: var(--ui-text-muted) !important;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.15;
}

button.public-event-calendar-day.is-marked {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  cursor: pointer;
}

button.public-event-calendar-day.is-marked small {
  color: var(--ui-primary) !important;
}

button.public-event-calendar-day.is-marked:hover,
button.public-event-calendar-day.is-marked:focus-visible {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  color: var(--ui-on-primary) !important;
  outline: 0;
}

button.public-event-calendar-day.is-marked:hover small,
button.public-event-calendar-day.is-marked:focus-visible small {
  color: var(--ui-on-primary) !important;
}

.public-event-schedule-details[hidden],
.public-event-schedule-modal[hidden] {
  display: none !important;
}

.public-event-schedule-modal,
body > .public-event-schedule-modal {
  align-items: center;
  display: grid;
  height: 100dvh;
  inset: 0;
  justify-items: center;
  overflow: hidden;
  padding: clamp(12px, 3vw, 26px);
  place-items: center;
  position: fixed;
  width: 100vw;
  z-index: 2147483000;
}

.public-event-schedule-modal-backdrop,
body > .public-event-schedule-modal .public-event-schedule-modal-backdrop {
  background: var(--ui-overlay) !important;
  border: 0 !important;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.public-event-schedule-modal-dialog,
body > .public-event-schedule-modal .public-event-schedule-modal-dialog {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid;
  gap: 14px;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(760px, calc(100dvh - 28px));
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2.4vw, 20px);
  position: relative;
  width: min(640px, 100%);
}

.public-event-schedule-modal-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.public-event-schedule-modal-head strong,
.public-event-schedule-body h4 {
  color: var(--ui-text) !important;
  font-weight: 900;
  margin: 0;
}

.public-event-schedule-modal-close {
  align-items: center;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  color: var(--ui-primary) !important;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
}

.public-event-schedule-modal-close:hover,
.public-event-schedule-modal-close:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

.public-event-schedule-modal-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-color: var(--ui-border) var(--ui-surface-soft);
  scrollbar-width: thin;
}

.public-event-schedule-modal-body::-webkit-scrollbar {
  width: 10px;
}

.public-event-schedule-modal-body::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

.public-event-schedule-modal-body::-webkit-scrollbar-thumb {
  background: var(--ui-border) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: 8px;
}

.public-event-schedule-modal-body > h3 {
  color: var(--ui-text) !important;
  font-size: 1.08rem;
  margin: 0;
}

html.public-event-schedule-modal-open,
body.public-event-schedule-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.public-event-schedule-modal-open > .home-bottom-nav {
  pointer-events: none;
  z-index: 1 !important;
}

.public-event-aside {
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 48%, transparent) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: static;
}

.public-event-aside div:first-child {
  grid-column: 1 / -1;
}

.public-event-aside strong {
  font-size: 1rem;
  line-height: 1.35;
}

.public-event-cta {
  align-items: center;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: 8px;
  color: var(--ui-primary-contrast) !important;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  text-decoration: none;
}

.public-event-cta:hover,
.public-event-cta:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

.public-event-map-link {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  color: var(--ui-primary) !important;
  display: inline-flex;
  font-weight: 850;
  justify-content: center;
  margin-top: 4px;
  min-height: 0;
  padding: 0;
  text-decoration: none;
  width: max-content;
}

.public-event-map-link:hover,
.public-event-map-link:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0;
  text-decoration: underline;
}

@media (max-width: 860px) {
  .public-event-layout,
  .public-event-info-grid,
  .public-event-activity dl {
    grid-template-columns: 1fr;
  }

  .public-event-schedule-item,
  .public-event-schedule-body dl {
    grid-template-columns: 1fr;
  }

  .public-event-aside {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .public-event-page {
    max-width: none;
    padding: 0 0 18px;
    width: 100%;
  }

  .public-event-hero {
    padding: 0 0 14px;
  }

  .public-event-section,
  .public-event-activity,
  .public-event-aside {
    padding: 14px;
  }

  .public-event-hero-media,
  .public-event-hero > img {
    margin-left: 0;
    width: 100%;
  }

  .public-event-hero-copy {
    padding: 0 14px 14px;
  }

  .public-event-hero-copy h1 {
    font-size: clamp(1.85rem, 11vw, 2.55rem);
  }
}

/* Public event competition scoring. */
.public-event-scoring {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 54%, transparent) !important;
  border-radius: 0;
  display: grid;
  gap: 12px;
  padding: 14px 0 0;
}

.public-event-scoring section {
  display: grid;
  gap: 8px;
}

.public-event-scoring h4 {
  color: var(--ui-text) !important;
  font-size: .98rem;
  font-weight: 900;
  margin: 0;
}

.public-event-scoring ol,
.public-event-score-list,
.public-event-winner-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.public-event-scoring li,
.public-event-score-list article,
.public-event-winner-list span {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent) !important;
  border-radius: 0;
  color: var(--ui-text) !important;
  padding: 11px 0;
}

.public-event-scoring li:first-child,
.public-event-score-list article:first-child,
.public-event-winner-list span:first-child {
  border-top: 0 !important;
}

.public-event-scoring li {
  display: grid;
  gap: 10px;
}

.public-event-leaderboard-main {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.public-event-leaderboard-main b {
  color: var(--ui-text-muted) !important;
  display: inline-block;
  min-width: 2ch;
}

.public-event-score-editor {
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 52%, transparent) !important;
  padding-top: 10px;
}

.public-event-score-editor summary {
  color: var(--ui-primary) !important;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 900;
}

.public-event-score-editor form {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(110px, .8fr) minmax(90px, .6fr) minmax(0, 1fr) auto;
  margin-top: 10px;
}

.public-event-score-editor label {
  color: var(--ui-text-muted) !important;
  display: grid;
  font-size: .72rem;
  font-weight: 900;
  gap: 4px;
  text-transform: uppercase;
}

.public-event-score-editor input,
.public-event-score-editor select {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  color: var(--ui-text) !important;
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
  text-transform: none;
}

.public-event-score-editor button {
  align-self: end;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: 8px;
  color: var(--ui-primary-contrast) !important;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  min-height: 40px;
  padding: 8px 12px;
}

.public-event-score-editor button:hover,
.public-event-score-editor button:focus-visible,
.public-event-score-editor input:focus,
.public-event-score-editor select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

.public-event-scoring li strong,
.public-event-score-list strong {
  color: var(--ui-primary) !important;
  font-weight: 900;
}

.public-event-score-list article {
  display: grid;
  gap: 4px;
}

.public-event-score-list span,
.public-event-score-list small {
  color: var(--ui-text-muted) !important;
}

.public-event-winner-list {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

@media (max-width: 680px) {
  .public-event-score-editor form {
    grid-template-columns: 1fr 1fr;
  }

  .public-event-score-editor label:nth-of-type(3),
  .public-event-score-editor button {
    grid-column: 1 / -1;
  }
}
/* Event sponsor controls and public sponsor placement. */
body.invoice-page .event-sponsor-panel {
  align-content: start;
}

body.invoice-page .event-sponsor-rules,
body.invoice-page .event-sponsor-card,
body > .event-schedule-modal .event-sponsor-card {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: grid;
  gap: 0;
  padding: 0;
}

body.invoice-page .event-sponsor-rules[open],
body.invoice-page .event-sponsor-card[open],
body > .event-schedule-modal .event-sponsor-card[open] {
  gap: 12px;
  padding-bottom: 12px;
}

body.invoice-page .event-sponsor-summary,
body > .event-schedule-modal .event-sponsor-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-height: 52px;
  padding: 12px;
}

body.invoice-page .event-sponsor-summary::-webkit-details-marker,
body > .event-schedule-modal .event-sponsor-summary::-webkit-details-marker {
  display: none;
}

body.invoice-page .event-sponsor-summary > span,
body > .event-schedule-modal .event-sponsor-summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.invoice-page .event-sponsor-summary strong,
body > .event-schedule-modal .event-sponsor-summary strong {
  color: var(--ui-text) !important;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body.invoice-page .event-sponsor-summary small,
body > .event-schedule-modal .event-sponsor-summary small,
body.invoice-page .event-sponsor-detail p,
body > .event-schedule-modal .event-sponsor-detail p {
  color: var(--ui-text-muted) !important;
  line-height: 1.45;
}

body.invoice-page .event-sponsor-summary:hover strong,
body.invoice-page .event-sponsor-summary:focus-visible strong,
body.invoice-page .event-sponsor-card[open] .event-sponsor-summary strong,
body.invoice-page .event-sponsor-rules[open] .event-sponsor-summary strong,
body > .event-schedule-modal .event-sponsor-summary:hover strong,
body > .event-schedule-modal .event-sponsor-summary:focus-visible strong,
body > .event-schedule-modal .event-sponsor-card[open] .event-sponsor-summary strong {
  color: var(--ui-primary) !important;
}

body.invoice-page .event-sponsor-summary:focus-visible,
body > .event-schedule-modal .event-sponsor-summary:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-sponsor-detail,
body > .event-schedule-modal .event-sponsor-detail {
  display: grid;
  gap: 10px;
  padding: 0 12px;
}

body.invoice-page .event-sponsor-detail p,
body > .event-schedule-modal .event-sponsor-detail p {
  margin: 0;
}

body.invoice-page .event-sponsor-list {
  display: grid;
  gap: 12px;
}

body.invoice-page .event-sponsor-grid,
body > .event-schedule-modal .event-sponsor-grid {
  align-items: start;
}

body.invoice-page .event-sponsor-card:not([open]) .event-sponsor-remove {
  min-width: 104px;
}

.public-event-main-sponsors {
  align-items: center;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 12px;
}

.public-event-main-sponsors > span {
  color: var(--ui-primary) !important;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-event-main-sponsors > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.public-event-main-sponsors a,
.public-event-main-sponsors img {
  display: block;
}

.public-event-main-sponsors a {
  max-width: min(320px, 100%);
}

.public-event-main-sponsors img {
  aspect-ratio: 4 / 1;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  height: auto;
  max-height: 86px;
  object-fit: contain;
  padding: 12px 16px;
  width: min(320px, 100%);
}

.public-event-sponsor-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.public-event-sponsor-logo {
  align-items: center;
  aspect-ratio: 3 / 2;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  text-decoration: none;
}

.public-event-sponsor-logo img {
  display: block;
  height: 100%;
  max-height: 96px;
  object-fit: contain;
  width: 100%;
}

.public-event-main-sponsors a:hover img,
.public-event-main-sponsors a:focus-visible img,
.public-event-sponsor-logo:hover,
.public-event-sponsor-logo:focus-visible {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
  outline: 0;
}

@media (max-width: 920px) {
  body.invoice-page .event-sponsor-summary,
  body > .event-schedule-modal .event-sponsor-summary {
    align-items: stretch;
    flex-direction: column;
  }

  body.invoice-page .event-sponsor-summary .event-sponsor-remove,
  body > .event-schedule-modal .event-sponsor-summary .event-sponsor-remove {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .public-event-main-sponsors img {
    max-height: 72px;
    padding: 10px 12px;
    width: 100%;
  }

  .public-event-sponsor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-event-sponsor-logo {
    min-height: 84px;
    padding: 12px;
  }
}
/* Event competition scoring controls. */
body.invoice-page .event-scoring-panel,
body > .event-schedule-modal .event-scoring-panel {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: grid;
  gap: 12px;
  padding: 12px;
}

body.invoice-page .event-scoring-panel[hidden],
body > .event-schedule-modal .event-scoring-panel[hidden] {
  display: none !important;
}

body.invoice-page .event-scoring-head,
body > .event-schedule-modal .event-scoring-head {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

body.invoice-page .event-scoring-head strong,
body > .event-schedule-modal .event-scoring-head strong,
body.invoice-page .event-scoreboard > strong,
body > .event-schedule-modal .event-scoreboard > strong {
  color: var(--ui-text) !important;
  font-weight: 900;
}

body.invoice-page .event-scoring-head small,
body > .event-schedule-modal .event-scoring-head small,
body.invoice-page .event-scoring-summary small,
body > .event-schedule-modal .event-scoring-summary small,
body.invoice-page .event-scoreboard small,
body > .event-schedule-modal .event-scoreboard small {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .event-scoring-panel.is-score-locked,
body > .event-schedule-modal .event-scoring-panel.is-score-locked {
  border-color: color-mix(in srgb, var(--ui-warning) 36%, var(--ui-border)) !important;
}

body.invoice-page .event-scoring-section,
body > .event-schedule-modal .event-scoring-section {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: grid;
  gap: 0;
  padding: 0;
}

body.invoice-page .event-scoring-section[open],
body > .event-schedule-modal .event-scoring-section[open] {
  gap: 10px;
  padding-bottom: 10px;
}

body.invoice-page .event-scoring-summary,
body > .event-schedule-modal .event-scoring-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  min-height: 48px;
  padding: 10px 12px;
}

body.invoice-page .event-scoring-summary::-webkit-details-marker,
body > .event-schedule-modal .event-scoring-summary::-webkit-details-marker {
  display: none;
}

body.invoice-page .event-scoring-summary span,
body > .event-schedule-modal .event-scoring-summary span {
  color: var(--ui-text) !important;
  font-weight: 900;
}

body.invoice-page .event-scoring-summary:hover span,
body.invoice-page .event-scoring-summary:focus-visible span,
body > .event-schedule-modal .event-scoring-summary:hover span,
body > .event-schedule-modal .event-scoring-summary:focus-visible span {
  color: var(--ui-primary) !important;
}

body.invoice-page .event-scoring-summary:focus-visible,
body > .event-schedule-modal .event-scoring-summary:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

body.invoice-page .event-scoring-body,
body > .event-schedule-modal .event-scoring-body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 12px;
}

body.invoice-page .event-scoring-grid,
body > .event-schedule-modal .event-scoring-grid {
  align-items: stretch;
}

body.invoice-page .event-scoring-switch,
body > .event-schedule-modal .event-scoring-switch {
  align-items: center;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  display: flex !important;
  gap: 10px !important;
  min-height: 44px;
  padding: 10px 12px;
}

body.invoice-page .event-scoring-switch input[type="checkbox"],
body > .event-schedule-modal .event-scoring-switch input[type="checkbox"] {
  accent-color: var(--ui-primary);
  height: 18px;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

body.invoice-page .event-scoring-list,
body > .event-schedule-modal .event-scoring-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: var(--ui-border) var(--ui-surface-soft);
  scrollbar-width: thin;
}

body.invoice-page .event-scoring-list::-webkit-scrollbar,
body > .event-schedule-modal .event-scoring-list::-webkit-scrollbar {
  width: 10px;
}

body.invoice-page .event-scoring-list::-webkit-scrollbar-track,
body > .event-schedule-modal .event-scoring-list::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .event-scoring-list::-webkit-scrollbar-thumb,
body > .event-schedule-modal .event-scoring-list::-webkit-scrollbar-thumb {
  background: var(--ui-border) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: 8px;
}

body.invoice-page .event-scoring-row,
body > .event-schedule-modal .event-scoring-row {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
}

body.invoice-page .event-scoring-row[data-scoring-row="match"],
body > .event-schedule-modal .event-scoring-row[data-scoring-row="match"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.invoice-page .event-scoring-remove,
body > .event-schedule-modal .event-scoring-remove {
  grid-column: 1 / -1;
}

body.invoice-page .event-scoreboard,
body > .event-schedule-modal .event-scoreboard {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  padding: 12px;
}

body.invoice-page .event-scoring-board-list,
body.invoice-page .event-scoring-history,
body > .event-schedule-modal .event-scoring-board-list,
body > .event-schedule-modal .event-scoring-history {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

body.invoice-page .event-scoring-board-list span,
body > .event-schedule-modal .event-scoring-board-list span {
  color: var(--ui-text) !important;
  font-weight: 800;
}

body.invoice-page .event-scoring-panel input:disabled,
body.invoice-page .event-scoring-panel select:disabled,
body > .event-schedule-modal .event-scoring-panel input:disabled,
body > .event-schedule-modal .event-scoring-panel select:disabled {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  body.invoice-page .event-scoring-head,
  body.invoice-page .event-scoring-summary,
  body > .event-schedule-modal .event-scoring-head,
  body > .event-schedule-modal .event-scoring-summary {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  body.invoice-page .event-scoring-summary,
  body > .event-schedule-modal .event-scoring-summary {
    flex-direction: column;
  }

  body.invoice-page .event-scoring-row,
  body.invoice-page .event-scoring-row[data-scoring-row="match"],
  body > .event-schedule-modal .event-scoring-row,
  body > .event-schedule-modal .event-scoring-row[data-scoring-row="match"] {
    grid-template-columns: 1fr;
  }
}
/* Event activity CTA/form controls. */
body.invoice-page .event-activity-action-panel {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: grid;
  gap: 12px;
  padding: 12px;
}

body.invoice-page .event-activity-action-head {
  display: grid;
  gap: 4px;
}

body.invoice-page .event-activity-action-head strong {
  color: var(--ui-text) !important;
  font-weight: 900;
}

body.invoice-page .event-activity-action-head small,
body.invoice-page .event-activity-switch span {
  color: var(--ui-text-muted) !important;
}

body.invoice-page .event-activity-toggle-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.invoice-page .event-activity-switch {
  align-items: center;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  display: flex !important;
  gap: 10px !important;
  min-height: 44px;
  padding: 10px 12px;
}

body.invoice-page .event-activity-switch input[type="checkbox"] {
  accent-color: var(--ui-primary);
  height: 18px;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

body.invoice-page .event-activity-action-panel .phone-field,
body > .event-schedule-modal .event-activity-action-panel .phone-field {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(116px, 136px) minmax(0, 1fr);
  min-width: 0;
  position: relative;
  width: 100%;
}

body.invoice-page .event-activity-action-panel .country-native-select,
body > .event-schedule-modal .event-activity-action-panel .country-native-select,
body.invoice-page .event-activity-action-panel .phone-field > .event-dropdown,
body > .event-schedule-modal .event-activity-action-panel .phone-field > .event-dropdown {
  display: none !important;
}

body.invoice-page .event-activity-action-panel .country-picker,
body > .event-schedule-modal .event-activity-action-panel .country-picker {
  min-height: 44px;
  min-width: 0;
  position: relative;
}

body.invoice-page .event-activity-action-panel .country-trigger,
body > .event-schedule-modal .event-activity-action-panel .country-trigger {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  min-height: 44px;
  padding: 10px 11px;
}

body.invoice-page .event-activity-action-panel .phone-field > input[data-phone-local],
body > .event-schedule-modal .event-activity-action-panel .phone-field > input[data-phone-local] {
  min-height: 44px;
}

body.invoice-page .event-activity-action-panel .country-menu,
body > .event-schedule-modal .event-activity-action-panel .country-menu {
  max-width: calc(100vw - 40px);
  width: min(360px, 100%);
  z-index: 40;
}

.public-event-activity-cta {
  align-items: center;
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: 8px;
  color: var(--ui-primary-contrast) !important;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 46px;
  padding: 11px 16px;
  text-decoration: none;
}

.public-event-activity-cta:hover,
.public-event-activity-cta:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 0;
}

@media (max-width: 720px) {
  body.invoice-page .event-activity-toggle-grid,
  body.invoice-page .event-activity-cta-grid {
    grid-template-columns: 1fr;
  }

  body.invoice-page .event-activity-action-panel .phone-field,
  body > .event-schedule-modal .event-activity-action-panel .phone-field {
    grid-template-columns: minmax(108px, 132px) minmax(0, 1fr);
  }

  body.invoice-page .event-activity-action-panel .country-menu,
  body > .event-schedule-modal .event-activity-action-panel .country-menu {
    width: min(330px, calc(100vw - 56px));
  }
}

@media (max-width: 420px) {
  body.invoice-page .event-activity-action-panel .phone-field,
  body > .event-schedule-modal .event-activity-action-panel .phone-field {
    grid-template-columns: 1fr;
  }

  body.invoice-page .event-activity-action-panel .country-menu,
  body > .event-schedule-modal .event-activity-action-panel .country-menu {
    width: 100%;
  }
}

/* Mobile event edit ergonomics. */
body.invoice-page .event-form-page {
  scroll-padding-top: 132px;
}

body.invoice-page .event-form-step-nav {
  align-items: center;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  box-shadow: var(--ui-shadow);
  display: flex;
  gap: 8px;
  margin: -4px 0 0;
  overflow-x: auto;
  padding: 8px;
  position: sticky;
  scrollbar-width: none;
  top: 8px;
  z-index: 82;
}

body.invoice-page .event-form-step-nav::-webkit-scrollbar {
  display: none;
}

body.invoice-page .event-form-step-nav a {
  align-items: center;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  color: var(--ui-text) !important;
  display: inline-flex;
  font-size: .84rem;
  font-weight: 900;
  justify-content: center;
  min-height: 40px;
  padding: 9px 12px;
  text-decoration: none;
  white-space: nowrap;
}

body.invoice-page .event-form-step-nav a:hover,
body.invoice-page .event-form-step-nav a:focus-visible,
body.invoice-page .event-form-step-nav a.is-active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: 0;
}

body.invoice-page .event-form-panel {
  scroll-margin-top: 96px;
}

body.invoice-page .event-form-head {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

body.invoice-page .event-form-panel-toggle {
  align-items: center;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px;
  color: var(--ui-text) !important;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  justify-content: center;
  min-height: 36px;
  min-width: 72px;
  padding: 7px 10px;
}

body.invoice-page .event-form-panel-toggle:hover,
body.invoice-page .event-form-panel-toggle:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 22%, transparent);
  outline-offset: 2px;
}

body.invoice-page .event-form-panel.is-collapsed {
  gap: 0;
}

body.invoice-page .event-form-panel.is-collapsed > :not(.event-form-head) {
  display: none !important;
}


@media (max-width: 920px) {
  body.invoice-page .event-builder-page.event-form-page {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }

  body.invoice-page .event-form-step-nav {
    margin-left: -2px;
    margin-right: -2px;
    top: 6px;
  }

  body.invoice-page .event-form-actions {
    align-items: stretch;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    box-shadow: var(--ui-shadow-modal);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    padding: 10px;
    position: sticky;
    z-index: 88;
  }

  body.invoice-page .event-form-actions a,
  body.invoice-page .event-form-actions button {
    min-height: 46px;
    width: auto;
  }
}

@media (max-width: 760px) {
  body.invoice-page .event-form-page {
    scroll-padding-top: 118px;
  }

  body.invoice-page .event-builder-page.event-form-page {
    gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  body.invoice-page .event-form-step-nav {
    gap: 6px;
    padding: 7px;
  }

  body.invoice-page .event-form-step-nav a {
    font-size: .78rem;
    min-height: 38px;
    padding: 8px 10px;
  }

  body.invoice-page .event-form-panel {
    scroll-margin-top: 108px;
  }

  body.invoice-page .event-form-head {
    grid-template-columns: 1fr auto;
  }

  body.invoice-page .event-form-head .event-builder-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  body.invoice-page .event-form-head h2 {
    font-size: 1.12rem;
    min-width: 0;
  }

  body.invoice-page .event-form-panel-toggle {
    min-width: 64px;
  }

  body > .event-schedule-modal,
  body.invoice-page .event-schedule-modal {
    align-items: stretch;
    padding: 0;
  }

  body > .event-schedule-modal .event-schedule-modal-dialog,
  body.invoice-page .event-schedule-modal-dialog {
    border-radius: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw;
  }

  body > .event-schedule-modal .event-schedule-modal-body,
  body.invoice-page .event-schedule-modal-body {
    max-height: none;
  }

  body > .event-schedule-modal .event-schedule-modal-actions,
  body.invoice-page .event-schedule-modal-actions {
    background: var(--ui-surface) !important;
    border-top: 1px solid var(--ui-border) !important;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    margin: 0 -16px -16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    position: sticky;
    z-index: 2;
  }

  body > .event-schedule-modal .event-schedule-modal-actions button,
  body.invoice-page .event-schedule-modal-actions button {
    width: auto;
  }
}

@media (max-width: 420px) {
  body.invoice-page .event-form-actions {
    grid-template-columns: 1fr;
  }
}

/* Packing ongkir heuristic pass: responsive, token-bound, and theme-managed. */
body.packing-page,
body.packing-page > .shell {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.packing-page .shell {
  max-width: none !important;
  padding: clamp(14px, 2vw, 28px) clamp(12px, 3vw, 36px) calc(104px + env(safe-area-inset-bottom)) !important;
}

body.packing-page .packing-board {
  color: var(--ui-text) !important;
  gap: 14px !important;
  margin: 0 auto !important;
  max-width: 1380px !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.packing-page .invoice-builder-head,
body.packing-page .packing-tabs,
body.packing-page .packing-panel,
body.packing-page .packing-entry-card,
body.packing-page .packing-history-filters,
body.packing-page .packing-edit-form,
body.packing-page .dashboard-card-empty {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  min-width: 0 !important;
}

body.packing-page .invoice-builder-head {
  align-items: center !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  padding: clamp(14px, 2vw, 22px) !important;
}

body.packing-page .invoice-builder-head h1,
body.packing-page .packing-section h2,
body.packing-page .packing-panel-head h2,
body.packing-page .packing-entry-toggle-name,
body.packing-page .packing-entry-card strong,
body.packing-page .packing-entry-card dd,
body.packing-page .packing-shipping-sale-override strong,
body.packing-page .packing-shipping-sale-options strong {
  color: var(--ui-text) !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.packing-page .invoice-builder-head .auth-brand,
body.packing-page .dashboard-kicker,
body.packing-page .dashboard-status,
body.packing-page .packing-status-row .is-done,
body.packing-page .packing-status-row .packing-input-badge,
body.packing-page .packing-status-row .is-received {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.packing-page .packing-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  padding: 8px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.packing-page .packing-tabs::-webkit-scrollbar,
body.packing-page .packing-history-list::-webkit-scrollbar,
body.packing-page .packing-shipping-sale-options::-webkit-scrollbar,
body.packing-page .packing-recipient-options::-webkit-scrollbar,
body.packing-page .packing-shipping-menu::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

body.packing-page .packing-tabs::-webkit-scrollbar-track,
body.packing-page .packing-history-list::-webkit-scrollbar-track,
body.packing-page .packing-shipping-sale-options::-webkit-scrollbar-track,
body.packing-page .packing-recipient-options::-webkit-scrollbar-track,
body.packing-page .packing-shipping-menu::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.packing-page .packing-tabs::-webkit-scrollbar-thumb,
body.packing-page .packing-history-list::-webkit-scrollbar-thumb,
body.packing-page .packing-shipping-sale-options::-webkit-scrollbar-thumb,
body.packing-page .packing-recipient-options::-webkit-scrollbar-thumb,
body.packing-page .packing-shipping-menu::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.packing-page .packing-tabs a,
body.packing-page .packing-guide-tab {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  flex: 0 0 auto !important;
  min-height: 42px !important;
  white-space: nowrap !important;
}

body.packing-page .packing-tabs a:hover,
body.packing-page .packing-tabs a:focus-visible,
body.packing-page .packing-tabs a.active,
body.packing-page .packing-guide-tab:hover,
body.packing-page .packing-guide-tab:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  outline-offset: 2px !important;
}

body.packing-page .packing-tabs em,
body.packing-page .bottom-chat-link em,
body.packing-page .bottom-dashboard-badge,
body.packing-page .bottom-notification-button em {
  background: var(--ui-primary) !important;
  border-color: var(--ui-surface) !important;
  color: var(--ui-on-primary) !important;
}

body.packing-page .packing-history-list {
  align-items: start !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-width: 0 !important;
}

body.packing-page .packing-entry-card,
body.packing-page .packing-entry-expanded,
body.packing-page .packing-entry-detail,
body.packing-page .packing-process-form,
body.packing-page .packing-file-field,
body.packing-page .shipping-fee-payment-field,
body.packing-page .packing-shipping-sale-field,
body.packing-page .packing-shipping-sale-override-reason,
body.packing-page .packing-checks label,
body.packing-page .packing-checks span,
body.packing-page .packing-checks small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.packing-page .packing-entry-toggle,
body.packing-page .packing-entry-card p,
body.packing-page .packing-entry-card small,
body.packing-page .packing-entry-toggle small,
body.packing-page .packing-entry-card dt,
body.packing-page .packing-checks small,
body.packing-page .packing-panel > small,
body.packing-page .packing-recipient-picker > small,
body.packing-page .packing-inline-check small,
body.packing-page .packing-delivery-note,
body.packing-page .packing-shipping-sale-field > small,
body.packing-page .packing-shipping-sale-override small,
body.packing-page .packing-shipping-sale-override-reason small,
body.packing-page .packing-shipping-sale-options button small,
body.packing-page .packing-shipping-sale-empty,
body.packing-page .packing-process-feedback:empty::before {
  color: var(--ui-text-muted) !important;
}

body.packing-page .packing-entry-toggle small,
body.packing-page .packing-shipping-sale-options button small {
  white-space: normal !important;
}

body.packing-page .packing-panel input,
body.packing-page .packing-panel select,
body.packing-page .packing-panel textarea,
body.packing-page .packing-history-filters input,
body.packing-page .packing-history-filters select,
body.packing-page .packing-edit-form input,
body.packing-page .packing-edit-form select,
body.packing-page .packing-edit-form textarea,
body.packing-page .packing-shipping-trigger,
body.packing-page .country-trigger,
body.packing-page .shipping-fee-sale-search {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  min-height: 44px !important;
  width: 100% !important;
}

body.packing-page .packing-panel input::placeholder,
body.packing-page .packing-panel textarea::placeholder,
body.packing-page .packing-history-filters input::placeholder,
body.packing-page .packing-edit-form input::placeholder,
body.packing-page .packing-edit-form textarea::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.packing-page .packing-panel input:focus,
body.packing-page .packing-panel select:focus,
body.packing-page .packing-panel textarea:focus,
body.packing-page .packing-history-filters input:focus,
body.packing-page .packing-history-filters select:focus,
body.packing-page .packing-edit-form input:focus,
body.packing-page .packing-edit-form select:focus,
body.packing-page .packing-edit-form textarea:focus,
body.packing-page .country-trigger:focus-visible,
body.packing-page .packing-shipping-trigger:focus-visible,
body.packing-page .shipping-fee-sale-search:focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: none !important;
}

body.packing-page .packing-panel input[readonly],
body.packing-page .packing-panel input:disabled,
body.packing-page .packing-panel select:disabled,
body.packing-page .packing-panel textarea:disabled,
body.packing-page .shipping-fee-sale-search[readonly] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
}

body.packing-page .packing-panel input:invalid:not(:placeholder-shown),
body.packing-page .packing-panel textarea:invalid:not(:placeholder-shown),
body.packing-page .packing-panel select:invalid,
body.packing-page .packing-process-form input:invalid,
body.packing-page .packing-process-form textarea:invalid,
body.packing-page .packing-process-form select:invalid {
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 18%, transparent) !important;
}

body.packing-page .packing-inline-check,
body.packing-page .packing-checks,
body.packing-page .packing-file-field,
body.packing-page .packing-note,
body.packing-page .packing-shipping-sale-override,
body.packing-page .packing-file-preview figure,
body.packing-page .packing-thumb-row img {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.packing-page .packing-checks input[type="checkbox"],
body.packing-page .packing-inline-check input[type="checkbox"] {
  accent-color: var(--ui-primary) !important;
}

body.packing-page .packing-checks input[type="checkbox"]:disabled + span,
body.packing-page .packing-checks input[type="checkbox"]:disabled + span small {
  color: var(--ui-text-muted) !important;
}

body.packing-page .packing-status-row span {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body.packing-page .packing-shipping-sale-picker {
  display: block !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 40 !important;
}

body.packing-page .packing-shipping-sale-picker::after {
  border-color: var(--ui-primary) !important;
}

body.packing-page .packing-recipient-options,
body.packing-page .packing-shipping-menu,
body.packing-page .packing-shipping-sale-options {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  max-height: min(300px, 52dvh) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
  z-index: 80 !important;
}

body.packing-page .packing-recipient-options button,
body.packing-page .packing-shipping-option,
body.packing-page .packing-shipping-sale-options button {
  background: var(--ui-surface) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  min-width: 0 !important;
}

body.packing-page .packing-shipping-sale-options button {
  display: grid !important;
  gap: 4px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

body.packing-page .packing-recipient-options button:hover,
body.packing-page .packing-recipient-options button:focus-visible,
body.packing-page .packing-recipient-options button.is-selected,
body.packing-page .packing-shipping-option:hover,
body.packing-page .packing-shipping-option:focus-visible,
body.packing-page .packing-shipping-option.is-selected,
body.packing-page .packing-shipping-sale-options button:hover,
body.packing-page .packing-shipping-sale-options button:focus-visible,
body.packing-page .packing-shipping-sale-options button.is-active {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
  outline: none !important;
}

body.packing-page .packing-shipping-sale-empty {
  background: var(--ui-info-soft) !important;
  border: 1px dashed color-mix(in srgb, var(--ui-info) 34%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  display: block !important;
  margin: 0 !important;
  padding: 12px !important;
  text-align: center !important;
}

body.packing-page .packing-shipping-sale-empty[hidden] {
  display: none !important;
}

body.packing-page .packing-process-grid,
body.packing-page .packing-process-grid-photo-only,
body.packing-page .packing-form-row,
body.packing-page .packing-form-row-three,
body.packing-page .packing-delivery-actions {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-width: 0 !important;
}

body.packing-page .packing-file-field {
  padding: 12px !important;
}

body.packing-page .shipping-fee-payment-field {
  gap: 12px !important;
}

body.packing-page .packing-file-preview:not([hidden]):empty::before,
body.packing-page [data-process-preview]:not([hidden]):empty::before {
  align-items: center !important;
  background: var(--ui-info-soft) !important;
  border: 1px dashed color-mix(in srgb, var(--ui-info) 34%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-info-strong) !important;
  content: "Belum ada bukti yang dipilih." !important;
  display: flex !important;
  min-height: 92px !important;
  padding: 14px !important;
  width: 100% !important;
}

body.packing-page .packing-submit,
body.packing-page .packing-update-button,
body.packing-page .packing-print-address-button,
body.packing-page .packing-history-filters button,
body.packing-page .packing-edit-form button,
body.packing-page .packing-quick-customer-actions button:first-child {
  background: var(--ui-primary) !important;
  background-image: none !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ui-primary) 20%, transparent) !important;
  color: var(--ui-on-primary) !important;
  min-height: 44px !important;
}

body.packing-page .packing-submit:hover:not(:disabled),
body.packing-page .packing-submit:focus-visible,
body.packing-page .packing-update-button:hover:not(:disabled),
body.packing-page .packing-update-button:focus-visible,
body.packing-page .packing-print-address-button:hover,
body.packing-page .packing-print-address-button:focus-visible,
body.packing-page .packing-history-filters button:hover,
body.packing-page .packing-edit-form button:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent), var(--ui-shadow) !important;
  outline: none !important;
}

body.packing-page .packing-secondary-action,
body.packing-page .packing-product-head button,
body.packing-page .packing-product-row button,
body.packing-page .packing-file-action,
body.packing-page .packing-update-button-secondary,
body.packing-page .packing-edit-panel summary {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
}

body.packing-page .packing-secondary-action:hover,
body.packing-page .packing-secondary-action:focus-visible,
body.packing-page .packing-product-head button:hover,
body.packing-page .packing-product-row button:hover,
body.packing-page .packing-file-action:hover,
body.packing-page .packing-file-action:focus-within,
body.packing-page .packing-update-button-secondary:hover:not(:disabled),
body.packing-page .packing-update-button-secondary:focus-visible,
body.packing-page .packing-edit-panel summary:hover,
body.packing-page .packing-edit-panel summary:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.packing-page .packing-product-head button:disabled,
body.packing-page .packing-submit:disabled,
body.packing-page .packing-update-button:disabled,
body.packing-page .packing-update-button[aria-busy="true"] {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

body.packing-page .packing-process-feedback {
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text-muted) !important;
  font-size: .84rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow-wrap: anywhere !important;
}

body.packing-page .packing-process-feedback:empty {
  display: none !important;
}

body.packing-page .packing-process-feedback[data-state="loading"] {
  background: var(--ui-info-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-info) 34%, var(--ui-border)) !important;
  color: var(--ui-info-strong) !important;
  display: block !important;
  padding: 8px 10px !important;
}

body.packing-page .packing-process-feedback[data-state="error"] {
  background: var(--ui-danger-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
  display: block !important;
  padding: 8px 10px !important;
}

body.packing-page .packing-process-feedback[data-state="success"] {
  background: var(--ui-success-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
  display: block !important;
  padding: 8px 10px !important;
}

body.packing-page .dashboard-card-empty {
  display: grid !important;
  min-height: 156px !important;
  place-items: center !important;
  text-align: center !important;
}

body.packing-page .dashboard-card-empty p {
  color: var(--ui-text-muted) !important;
}

body.packing-page .home-bottom-nav {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text-muted) !important;
}

body.packing-page .home-bottom-nav a,
body.packing-page .home-bottom-nav button {
  color: var(--ui-text-muted) !important;
}

body.packing-page .home-bottom-nav a.active,
body.packing-page .home-bottom-nav button.active,
body.packing-page .home-bottom-nav a:hover,
body.packing-page .home-bottom-nav button:hover {
  color: var(--ui-primary) !important;
}

body.packing-page .packing-board[aria-busy="true"]::after {
  background: var(--ui-info-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-info) 34%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-info-strong) !important;
  content: "Memuat tampilan packing..." !important;
  display: block !important;
  padding: 10px 12px !important;
}

@media (max-width: 1100px) {
  body.packing-page .packing-history-list,
  body.packing-page .packing-process-grid,
  body.packing-page .packing-process-grid-photo-only,
  body.packing-page .packing-form-row,
  body.packing-page .packing-form-row-three,
  body.packing-page .packing-delivery-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  body.packing-page .shell {
    padding-inline: 10px !important;
  }

  body.packing-page .invoice-builder-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.packing-page .invoice-builder-head .ksrf-back-button {
    justify-self: start !important;
  }

  body.packing-page .packing-panel,
  body.packing-page .packing-entry-card,
  body.packing-page .packing-history-filters,
  body.packing-page .packing-edit-form {
    padding: 14px !important;
  }

  body.packing-page .packing-tabs a,
  body.packing-page .packing-guide-tab,
  body.packing-page .packing-update-button,
  body.packing-page .packing-submit {
    min-height: 46px !important;
  }

  body.packing-page .packing-shipping-sale-options,
  body.packing-page .packing-recipient-options,
  body.packing-page .packing-shipping-menu {
    max-height: min(280px, 56dvh) !important;
  }
}

/* Packing ongkir dropdown fix: never let an empty combobox canvas cover the next controls. */
body.packing-page .shipping-fee-payment-field > *,
body.packing-page .packing-shipping-sale-field,
body.packing-page .packing-shipping-sale-picker,
body.packing-page .packing-shipping-sale-override,
body.packing-page .packing-shipping-sale-override-reason,
body.packing-page .packing-shipping-sale-override span {
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.packing-page .packing-shipping-sale-override {
  align-items: start !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
}

body.packing-page .packing-shipping-sale-override input {
  width: auto !important;
}

body.packing-page .packing-shipping-sale-override span {
  display: grid !important;
  gap: 3px !important;
}

body.packing-page .packing-shipping-sale-options:empty,
body.packing-page .packing-shipping-sale-options[hidden] {
  display: none !important;
}

/* Pesanan Custom theme contract refresh */
body.invoice-page:has(.custom-orders-page),
body.invoice-page:has(.custom-orders-page) > .shell {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(.invoice-builder-head, .cashier-panel, .cashier-form-grid, .custom-order-form-section, .custom-order-payment-section, .custom-order-file-panel, .custom-order-product-panel, .custom-order-product-card, .custom-order-summary-card, .custom-order-history-card, .custom-order-history-summary, .custom-order-history-section, .custom-order-design-card, .custom-order-design-detail, .custom-order-prepare-card, .custom-order-return-card, .custom-order-stock-return-card, .custom-order-history-filter-modal, .custom-order-history-card-modal-panel, .custom-order-design-card-modal-panel, .custom-order-cancel-modal, .custom-order-delete-modal, .custom-order-image-modal-panel, .custom-order-quick-sablon-dialog, .custom-order-sablon-confirm-modal) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-product-price-preview, .custom-order-product-total-preview, .custom-order-history-detail-grid > span, .custom-order-history-payment > div > span, .custom-order-history-item-list > div, .custom-order-design-timeline > div > span, .custom-order-prepare-metric, .custom-order-return-meta, .custom-order-stock-return-note, .custom-order-empty-state, .cashier-empty-state) {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(h1, h2, h3, h4, strong, b, summary, .custom-order-section-title, .custom-order-page-title, .custom-order-history-code, .custom-order-history-customer, .custom-order-design-title) {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.invoice-page .custom-orders-page :where(p, small, label, legend, dt, em, .hint, .custom-order-helper, .custom-order-product-price-note, .custom-order-history-dates, .custom-order-history-section small, .custom-order-history-section p, .custom-order-history-item-list small, .cashier-empty-state p) {
  color: var(--ui-text-muted) !important;
  text-shadow: none !important;
}

body.invoice-page .custom-orders-page :where(input, select, textarea, .custom-order-combo-host input, .custom-order-searchable-trigger, .custom-order-product-multiselect-button, .custom-order-filter input, .custom-order-filter select) {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  caret-color: var(--ui-primary) !important;
}

body.invoice-page .custom-orders-page :where(input, textarea)::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.invoice-page .custom-orders-page :where(select option) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(input, select, textarea, button:not(.ksrf-back-button):not(.custom-order-back-to-hub), a:not(.ksrf-back-button):not(.custom-order-back-to-hub), summary, [role=button], [tabindex]):focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

body.invoice-page .custom-orders-page :where(input, select, textarea, button:not(.ksrf-back-button):not(.custom-order-back-to-hub)):disabled,
body.invoice-page .custom-orders-page :where(input, textarea)[readonly],
body.invoice-page .custom-orders-page :where(.is-disabled, [aria-disabled=true]) {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-tabs a, .custom-order-tab, .custom-order-prepare-tabs a, .custom-order-design-tabs a, .custom-order-design-tabs button, .packing-tabs a, .custom-order-sablon-subtabs a, .custom-order-filter-tab, .custom-order-status-pill, .custom-order-product-chip, .custom-order-pill, .custom-order-badge, .custom-order-history-sewing, .custom-order-history-stock, .custom-order-history-sablon-trigger) {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-tabs a.active, .custom-order-tab.active, .custom-order-tab.is-active, .custom-order-prepare-tabs a.active, .custom-order-design-tabs a.active, .custom-order-design-tabs button.active, .packing-tabs a.active, .custom-order-sablon-subtabs a.active, .custom-order-filter-tab.is-active, .custom-order-status-pill.is-active, .custom-order-product-chip.is-selected) {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page :where(button:not(.ksrf-back-button):not(.custom-order-back-to-hub), .cashier-action-button, .custom-order-submit, .custom-order-history-actions a, .custom-order-history-actions button, .custom-order-product-actions button, .custom-order-filter button, .custom-order-history-pager a, .custom-order-history-filter-fab) {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page .custom-orders-page :where(button[type=submit]:not(.ksrf-back-button):not(.custom-order-back-to-hub), .custom-order-submit, .custom-order-product-actions [data-save-product], .custom-order-history-filter-fab, .cashier-action-button:not(.cashier-action-ghost)) {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary) 22%, transparent) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page :where(button:not(.ksrf-back-button):not(.custom-order-back-to-hub), a:not(.ksrf-back-button):not(.custom-order-back-to-hub), summary, .custom-order-combo-option, .custom-order-product-filter-results button, .custom-order-product-multiselect-menu button):hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page :where(button[type=submit]:not(.ksrf-back-button):not(.custom-order-back-to-hub), .custom-order-submit):hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page .custom-orders-page :where(.is-success, .custom-order-history-stock.is-ready, .custom-order-history-sewing.is-complete, .custom-order-payment-badge.is-paid, .custom-order-status-success) {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page .custom-orders-page :where(.is-error, .custom-order-history-stock.is-short, .custom-order-history-stock.is-empty, .custom-order-payment-badge.is-unpaid, .custom-order-status-error, .custom-order-history-icon-danger) {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .custom-orders-page :where(.is-warning, .custom-order-history-sewing.is-pending, .custom-order-status-warning) {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-combo-menu, .custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-history-list, .custom-order-product-modal-body, .custom-order-history-card-modal-body, .custom-order-design-card-modal-body) {
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-combo-menu, .custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-history-list, .custom-order-product-modal-body, .custom-order-history-card-modal-body, .custom-order-design-card-modal-body)::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-combo-menu, .custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-history-list, .custom-order-product-modal-body, .custom-order-history-card-modal-body, .custom-order-design-card-modal-body)::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-combo-menu, .custom-order-product-filter-results, .custom-order-product-multiselect-menu, .custom-order-dropdown-menu, .custom-order-history-list, .custom-order-product-modal-body, .custom-order-history-card-modal-body, .custom-order-design-card-modal-body)::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] {
  align-items: start !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  bottom: auto !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  left: 50% !important;
  max-height: min(86dvh, 420px) !important;
  max-width: min(420px, calc(100vw - 28px)) !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 18px !important;
  position: fixed !important;
  right: auto !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  z-index: 4600 !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result]::before {
  background: var(--ui-overlay) !important;
  content: "" !important;
  inset: -100vmax !important;
  position: absolute !important;
  z-index: -1 !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] > span {
  align-items: center !important;
  background: var(--ui-success-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  border-radius: 50% !important;
  color: var(--ui-success-strong) !important;
  display: inline-flex !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  height: 44px !important;
  justify-content: center !important;
  line-height: 1 !important;
  width: 44px !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal.is-error[data-custom-order-input-result] > span {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] > div {
  align-self: center !important;
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] strong {
  color: var(--ui-text) !important;
  font-size: clamp(1.05rem, 4vw, 1.25rem) !important;
  line-height: 1.2 !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] p {
  color: var(--ui-text-muted) !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] button {
  align-items: center !important;
  align-self: start !important;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: inline-flex !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  height: 42px !important;
  justify-content: center !important;
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  width: 42px !important;
}

body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] button:hover,
body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] button:focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page .custom-orders-page :where(.custom-order-history-card-modal, .custom-order-design-card-modal, .custom-order-cancel-modal, .custom-order-delete-modal, .custom-order-history-filter-modal)::backdrop {
  background: var(--ui-overlay) !important;
}

/* Pesanan Custom / Riwayat: desktop data list must not collapse into the table header. */
body.invoice-page.custom-orders-route[data-custom-order-view="history"],
body.invoice-page.custom-orders-route[data-custom-order-view="history"] .shell,
body.invoice-page .custom-orders-page[data-active-custom-order-view="history"],
body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] > .cashier-workspace,
body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] #custom-order-history {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.invoice-page.custom-orders-route[data-custom-order-view="history"] {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] > .cashier-workspace {
  transform: none !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] #custom-order-history {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto) auto !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] .custom-order-history-list {
  align-content: start !important;
  display: grid !important;
  gap: 8px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 14px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: thin !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] .custom-order-history-card {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  display: block !important;
  min-height: 72px !important;
}

body.invoice-page .custom-orders-page[data-active-custom-order-view="history"] .custom-order-history-summary {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  min-height: 72px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.invoice-page:has(.custom-orders-page) > .home-bottom-nav {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page:has(.custom-orders-page) > .home-bottom-nav :where(a, button) {
  color: var(--ui-text-muted) !important;
}

body.invoice-page:has(.custom-orders-page) > .home-bottom-nav :where(a.active, button.active, a:hover, button:hover) {
  color: var(--ui-primary) !important;
}

@media (max-width: 720px) {
  body.invoice-page .custom-orders-page {
    padding-inline: 10px !important;
  }

  body.invoice-page .custom-orders-page :where(.invoice-builder-head, .custom-order-form-section, .cashier-panel) {
    border-radius: var(--ui-radius-md) !important;
  }

  body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] {
    gap: 12px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 16px !important;
  }

  body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] > span {
    height: 40px !important;
    width: 40px !important;
  }

  body.invoice-page .custom-orders-page .custom-order-toast.is-modal[data-custom-order-input-result] button {
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
  }
}

/* Cashier product database: final responsive theme contract. */
body.invoice-page.cashier-products-route,
body.invoice-page.cashier-products-route .shell,
body.invoice-page.cashier-products-route .cashier-products-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page {
  padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page canvas,
body.invoice-page.cashier-products-route .cashier-products-page :where(.packing-panel, .cashier-product-form, .cashier-table-tools, .cashier-product-table, .cashier-product-edit, .cashier-product-edit-body, .cashier-product-edit-section, .cashier-product-edit-action-bar, .cashier-product-danger-zone, .cashier-empty-state, .cashier-product-result-status) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.cashier-product-view-tabs, .cashier-product-row-head, .cashier-product-edit-section, .cashier-product-edit-action-bar, .cashier-product-danger-zone, .cashier-empty-state, .cashier-product-result-status) {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(input, select, textarea, .cashier-select-combo-input, .cashier-product-combo-menu, .custom-order-combo-menu) {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  caret-color: var(--ui-primary) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(input, textarea)::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.invoice-page.cashier-products-route .cashier-products-page select option {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(input, select, textarea, button:not(.ksrf-back-button), a:not(.ksrf-back-button), summary, [role="button"], [tabindex]):focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(input, select, textarea, button:not(.ksrf-back-button)):disabled,
body.invoice-page.cashier-products-route .cashier-products-page :where(input, textarea)[readonly],
body.invoice-page.cashier-products-route .cashier-products-page :where([aria-disabled="true"], .is-disabled) {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.invoice-print-button, .cashier-action-button, button[type="submit"]:not(.ksrf-back-button)) {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.invoice-print-button, .cashier-action-button, button[type="submit"]:not(.ksrf-back-button)):hover,
body.invoice-page.cashier-products-route .cashier-products-page :where(.invoice-print-button, .cashier-action-button, button[type="submit"]:not(.ksrf-back-button)):focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.cashier-action-secondary, .cashier-action-ghost, .cashier-secondary-link, .cashier-page-link, .cashier-page-gap) {
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.cashier-action-secondary, .cashier-action-ghost, .cashier-secondary-link, .cashier-page-link):hover,
body.invoice-page.cashier-products-route .cashier-products-page :where(.cashier-action-secondary, .cashier-action-ghost, .cashier-secondary-link, .cashier-page-link):focus-visible {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page .cashier-page-link.is-active,
body.invoice-page.cashier-products-route .cashier-products-page .cashier-product-view-tabs a.active,
body.invoice-page.cashier-products-route .cashier-products-page .cashier-product-view-tabs a.is-active {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page .cashier-product-result-status {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text-muted) !important;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.45;
  margin: 0;
  padding: 10px 14px;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-table {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  clip-path: none !important;
  max-height: none !important;
  overflow: auto !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-table::-webkit-scrollbar,
body.invoice-page.cashier-products-route .cashier-products-page :where(.cashier-product-combo-menu, .custom-order-combo-menu, .cashier-product-edit-body)::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-table::-webkit-scrollbar-track,
body.invoice-page.cashier-products-route .cashier-products-page :where(.cashier-product-combo-menu, .custom-order-combo-menu, .cashier-product-edit-body)::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-table::-webkit-scrollbar-thumb,
body.invoice-page.cashier-products-route .cashier-products-page :where(.cashier-product-combo-menu, .custom-order-combo-menu, .cashier-product-edit-body)::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row {
  align-items: center !important;
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(220px, 1.25fr) minmax(260px, 1.45fr) minmax(104px, 0.55fr) minmax(112px, 0.6fr) minmax(132px, 0.72fr) !important;
  min-width: 920px;
  padding: 13px 16px !important;
  word-break: normal !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row-head {
  background: var(--ui-surface-soft) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  position: sticky !important;
  text-shadow: none !important;
  top: 0;
  z-index: 3;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-edit {
  background: var(--ui-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
  clip-path: none !important;
  margin: 0 !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row {
  cursor: pointer;
  list-style: none;
  min-height: 76px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row:hover,
body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-edit[open] summary.cashier-product-row {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  box-shadow: inset 4px 0 0 var(--ui-primary) !important;
  transform: none !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row :where(strong, span) {
  color: var(--ui-text) !important;
  line-height: 1.35 !important;
  overflow-wrap: break-word !important;
  text-shadow: none !important;
  word-break: normal !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row :where(.cashier-product-summary-action, small) {
  color: var(--ui-text-muted) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-edit-body {
  background: var(--ui-surface-soft) !important;
  border-top: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.is-success, .cashier-product-edit-status[data-state="saved"]) {
  background: var(--ui-success-soft) !important;
  border-color: color-mix(in srgb, var(--ui-success) 34%, var(--ui-border)) !important;
  color: var(--ui-success-strong) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.is-error, .cashier-product-edit-status[data-state="error"], [aria-invalid="true"]) {
  background: var(--ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border)) !important;
  color: var(--ui-danger-strong) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.is-warning, .cashier-product-edit-status[data-state="dirty"]) {
  background: var(--ui-warning-soft) !important;
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page :where(.is-loading, .cashier-product-edit-status[data-state="loading"]) {
  background: var(--ui-info-soft) !important;
  border-color: color-mix(in srgb, var(--ui-info) 34%, var(--ui-border)) !important;
  color: var(--ui-info-strong) !important;
}

body.invoice-page.cashier-products-route .cashier-products-page .cashier-empty-state {
  border: 1px dashed var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  display: grid !important;
  gap: 6px !important;
  padding: 24px !important;
}

body.invoice-page.cashier-products-route .cashier-products-page .cashier-empty-state :where(strong, p) {
  color: var(--ui-text) !important;
  margin: 0 !important;
}

body.invoice-page.cashier-products-route .cashier-products-page .cashier-empty-state p {
  color: var(--ui-text-muted) !important;
}

body.invoice-page.cashier-products-route > .home-bottom-nav {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text-muted) !important;
}

body.invoice-page.cashier-products-route > .home-bottom-nav :where(a, button) {
  color: var(--ui-text-muted) !important;
}

body.invoice-page.cashier-products-route > .home-bottom-nav :where(a.active, button.active, a:hover, button:hover, a:focus-visible, button:focus-visible) {
  color: var(--ui-primary) !important;
}

@media (max-width: 720px) {
  body.invoice-page.cashier-products-route .shell {
    padding-inline: 10px !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page {
    padding-bottom: calc(148px + env(safe-area-inset-bottom)) !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page > .invoice-builder-head {
    align-items: start !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page > .invoice-builder-head .ksrf-back-button {
    justify-self: start !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page .cashier-table-tools {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page .cashier-table-tools :where(button, a) {
    width: 100% !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-table {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row-head {
    display: none !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-edit {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow) !important;
    overflow: hidden !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-edit summary.cashier-product-row {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) minmax(86px, 0.42fr) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row > div {
    background: var(--ui-surface-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row > div::before {
    color: var(--ui-text-muted) !important;
    content: attr(data-label);
    display: block;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row > .cashier-product-identity,
  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row > [data-label="Nama produk"] {
    grid-column: 1 / -1;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row > .cashier-product-identity {
    align-items: center !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row > .cashier-product-identity::before {
    grid-column: 1 / -1;
  }

  body.invoice-page.cashier-products-route .cashier-products-page #cashier-product-database .cashier-product-row :where(strong, span) {
    font-size: 0.86rem !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* Custom order empty-stock modal: responsive, accessible, and fully theme-token bound. */
body.custom-order-empty-stock-open {
  overflow: hidden !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal],
.game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) {
  background: var(--ui-overlay) !important;
  backdrop-filter: blur(8px) !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] {
  align-items: center !important;
  display: grid !important;
  justify-items: center !important;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(124px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal][hidden] {
  display: none !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-dialog {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  max-height: calc(100dvh - 156px - env(safe-area-inset-bottom)) !important;
  max-width: min(94vw, 720px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  text-align: left !important;
  width: min(94vw, 720px) !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-dialog::before {
  background: var(--ui-warning) !important;
  height: 4px !important;
}

.custom-order-empty-stock-header {
  align-items: start !important;
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  padding: 18px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.custom-order-empty-stock-header h2,
.custom-order-empty-stock-header p {
  margin: 0 !important;
  max-width: none !important;
  text-align: left !important;
  text-shadow: none !important;
}

.custom-order-empty-stock-header h2 {
  color: var(--ui-text) !important;
  font-size: clamp(1.24rem, 3.8vw, 1.85rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}

.custom-order-empty-stock-header p:not(.game-modal-eyebrow) {
  color: var(--ui-text-muted) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  margin-top: 6px !important;
}

.custom-order-empty-stock-header p strong {
  color: var(--ui-text) !important;
}

.custom-order-empty-stock-close {
  align-items: center !important;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  height: 42px !important;
  justify-content: center !important;
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  width: 42px !important;
}

.custom-order-empty-stock-close svg {
  fill: none !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2.4 !important;
  width: 20px !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options,
.game-modal-backdrop[data-flash-modal] .flash-stock-options[data-custom-order-empty-stock-prompt] {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 14px !important;
  text-align: left !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: auto !important;
  padding: 16px 18px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options::-webkit-scrollbar,
.game-modal-backdrop[data-flash-modal] .flash-stock-options::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options::-webkit-scrollbar-track,
.game-modal-backdrop[data-flash-modal] .flash-stock-options::-webkit-scrollbar-track {
  background: var(--ui-surface-soft) !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options::-webkit-scrollbar-thumb,
.game-modal-backdrop[data-flash-modal] .flash-stock-options::-webkit-scrollbar-thumb {
  background: var(--ui-primary) !important;
  border: 2px solid var(--ui-surface-soft) !important;
  border-radius: var(--ui-radius-sm) !important;
}

.flash-stock-options[data-custom-order-empty-stock-prompt] > strong {
  color: var(--ui-primary-hover) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
}

.flash-stock-options[data-custom-order-empty-stock-prompt] > p {
  color: var(--ui-text-muted) !important;
  font-size: .94rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: none !important;
  text-align: left !important;
}

.custom-order-empty-stock-list {
  display: grid !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom-order-empty-stock-item {
  align-items: start !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  line-height: 1.35 !important;
  padding: 11px !important;
}

.custom-order-empty-stock-item > div {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.custom-order-empty-stock-item strong {
  color: var(--ui-text) !important;
  font-size: .92rem !important;
  font-weight: 820 !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}

.custom-order-empty-stock-qty,
.custom-order-empty-stock-status {
  align-items: center !important;
  border-radius: var(--ui-radius-sm) !important;
  display: inline-flex !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
  white-space: nowrap !important;
}

.custom-order-empty-stock-qty {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

.custom-order-empty-stock-status {
  background: var(--ui-warning-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 34%, var(--ui-border)) !important;
  color: var(--ui-warning-strong) !important;
}

.custom-order-empty-stock-item dl {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

.custom-order-empty-stock-item dl div {
  align-items: center !important;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text-muted) !important;
  display: inline-flex !important;
  gap: 5px !important;
  padding: 4px 7px !important;
}

.custom-order-empty-stock-item dt,
.custom-order-empty-stock-item dd {
  margin: 0 !important;
}

.custom-order-empty-stock-item dt {
  color: var(--ui-text-muted) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
}

.custom-order-empty-stock-item dd {
  color: var(--ui-text) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
}

.custom-order-empty-stock-options {
  border: 0 !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom-order-empty-stock-options legend {
  color: var(--ui-text) !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.custom-order-empty-stock-options label {
  align-items: center !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 9px !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  min-height: 44px !important;
  padding: 9px 10px !important;
}

.custom-order-empty-stock-options input {
  accent-color: var(--ui-primary) !important;
  cursor: pointer !important;
  height: 18px !important;
  width: 18px !important;
}

.custom-order-empty-stock-options label span {
  align-items: center !important;
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-primary-hover) !important;
  display: inline-flex !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  height: 28px !important;
  justify-content: center !important;
  width: 28px !important;
}

.custom-order-empty-stock-options label strong {
  color: var(--ui-text) !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  line-height: 1.24 !important;
  overflow-wrap: anywhere !important;
}

.custom-order-empty-stock-options label:hover,
.custom-order-empty-stock-options label:focus-within,
.custom-order-empty-stock-item:hover {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 18%, transparent) !important;
}

.custom-order-empty-stock-options label:has(input:checked) {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
}

.custom-order-empty-stock-form {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}

.custom-order-empty-stock-feedback {
  background: var(--ui-info-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-info) 34%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-info-strong) !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  padding: 9px 10px !important;
}

.custom-order-empty-stock-footer {
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) !important;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}

.custom-order-empty-stock-delivery label span {
  min-width: 38px !important;
  padding-inline: 8px !important;
  width: auto !important;
}

.custom-order-empty-stock-primary,
.custom-order-empty-stock-secondary,
.game-modal-backdrop[data-flash-modal] .custom-order-empty-stock-primary {
  align-items: center !important;
  border-radius: var(--ui-radius-sm) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  font-size: .94rem !important;
  font-weight: 850 !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  text-align: center !important;
}

.custom-order-empty-stock-primary,
.game-modal-backdrop[data-flash-modal] .custom-order-empty-stock-primary {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

.custom-order-empty-stock-secondary {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.custom-order-empty-stock-primary:hover,
.custom-order-empty-stock-primary:focus-visible,
.game-modal-backdrop[data-flash-modal] .custom-order-empty-stock-primary:hover,
.game-modal-backdrop[data-flash-modal] .custom-order-empty-stock-primary:focus-visible {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 26%, transparent) !important;
  outline-offset: 2px !important;
}

.custom-order-empty-stock-secondary:hover,
.custom-order-empty-stock-secondary:focus-visible,
.custom-order-empty-stock-close:hover,
.custom-order-empty-stock-close:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  outline: 0 !important;
}

.custom-order-empty-stock-primary:disabled,
.custom-order-empty-stock-secondary:disabled,
.custom-order-empty-stock-form.is-submitting .custom-order-empty-stock-primary,
.custom-order-empty-stock-form.is-submitting .custom-order-empty-stock-secondary {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
}

@media (max-width: 640px) {
  .game-modal-backdrop[data-custom-order-empty-stock-modal] {
    align-items: stretch !important;
    padding: max(10px, env(safe-area-inset-top)) 10px calc(112px + env(safe-area-inset-bottom)) !important;
  }

  .game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-dialog {
    max-height: calc(100dvh - 132px - env(safe-area-inset-bottom)) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .custom-order-empty-stock-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 14px !important;
  }

  .custom-order-empty-stock-header .game-modal-rank {
    display: none !important;
  }

  .game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options {
    padding: 12px 14px !important;
  }

  .custom-order-empty-stock-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .custom-order-empty-stock-qty {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
  }

  .custom-order-empty-stock-item > div {
    grid-column: 1 / -1 !important;
  }

  .custom-order-empty-stock-status {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  .custom-order-empty-stock-footer {
    grid-template-columns: 1fr !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* Compact empty-stock modal flow: summary first, scrollable items, then decisions. */
.custom-order-empty-stock-summary {
  align-items: center !important;
  background: var(--ui-info-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ui-info) 30%, var(--ui-border)) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-info-strong) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  justify-content: space-between !important;
  padding: 9px 10px !important;
}

.custom-order-empty-stock-summary span,
.custom-order-empty-stock-summary strong {
  font-size: .82rem !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.custom-order-empty-stock-summary span {
  color: var(--ui-text-muted) !important;
  font-weight: 800 !important;
}

.custom-order-empty-stock-summary strong {
  color: var(--ui-info-strong) !important;
  font-weight: 900 !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options {
  overflow: hidden auto !important;
  padding: 14px 18px !important;
}

.custom-order-empty-stock-list {
  gap: 7px !important;
  max-height: min(38dvh, 270px) !important;
  overflow: auto !important;
  padding: 0 3px 0 0 !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
}

.custom-order-empty-stock-item {
  gap: 8px 10px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  line-height: 1.3 !important;
  padding: 9px 10px !important;
}

.custom-order-empty-stock-item strong {
  font-size: .88rem !important;
  line-height: 1.24 !important;
}

.custom-order-empty-stock-qty,
.custom-order-empty-stock-status {
  min-height: 28px !important;
  padding: 4px 8px !important;
}

.custom-order-empty-stock-status {
  grid-column: 2 / 3 !important;
  justify-self: start !important;
}

.custom-order-empty-stock-options {
  gap: 7px !important;
}

.custom-order-empty-stock-options label {
  gap: 8px !important;
  min-height: 40px !important;
  padding: 8px 9px !important;
}

.custom-order-empty-stock-options input {
  height: 17px !important;
  width: 17px !important;
}

.custom-order-empty-stock-options label span {
  height: 26px !important;
  width: 26px !important;
}

.custom-order-empty-stock-options label strong {
  font-size: .84rem !important;
  line-height: 1.22 !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-options:not(.custom-order-empty-stock-delivery) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-delivery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-options legend {
  grid-column: 1 / -1 !important;
}

.custom-order-empty-stock-delivery label span {
  min-width: 38px !important;
  padding-inline: 8px !important;
  width: auto !important;
}

.custom-order-empty-stock-footer {
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
}

.custom-order-empty-stock-primary,
.custom-order-empty-stock-secondary,
.game-modal-backdrop[data-flash-modal] .custom-order-empty-stock-primary {
  min-height: 42px !important;
  padding: 9px 14px !important;
}

@media (max-width: 640px) {
  .game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options {
    padding: 11px 14px !important;
  }

  .custom-order-empty-stock-list {
    max-height: min(35dvh, 230px) !important;
  }

  .game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-options:not(.custom-order-empty-stock-delivery),
  .game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-delivery {
    grid-template-columns: 1fr !important;
  }

  .custom-order-empty-stock-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .custom-order-empty-stock-qty,
  .custom-order-empty-stock-status,
  .custom-order-empty-stock-item > div {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  .custom-order-empty-stock-status {
    grid-row: auto !important;
  }

  .custom-order-empty-stock-footer {
    grid-template-columns: 1fr !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* Empty-stock modal placement above bottom navbar. */
.game-modal-backdrop[data-custom-order-empty-stock-modal] {
  --custom-order-empty-stock-navbar-safe: calc(96px + env(safe-area-inset-bottom)) !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-height: 100dvh !important;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) var(--custom-order-empty-stock-navbar-safe) max(12px, env(safe-area-inset-left)) !important;
  place-items: center !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-dialog {
  max-height: calc(100dvh - var(--custom-order-empty-stock-navbar-safe) - max(28px, env(safe-area-inset-top))) !important;
  transform: translateY(-4px) !important;
}

.game-modal-backdrop[data-custom-order-empty-stock-modal] .flash-stock-options {
  overscroll-behavior: contain !important;
}

@media (max-width: 640px) {
  .game-modal-backdrop[data-custom-order-empty-stock-modal] {
    --custom-order-empty-stock-navbar-safe: calc(104px + env(safe-area-inset-bottom)) !important;
    align-items: center !important;
    justify-items: center !important;
    padding: max(10px, env(safe-area-inset-top)) 10px var(--custom-order-empty-stock-navbar-safe) !important;
    place-items: center !important;
  }

  .game-modal-backdrop[data-custom-order-empty-stock-modal] .custom-order-empty-stock-dialog {
    border-radius: var(--ui-radius-lg) !important;
    max-height: calc(100dvh - var(--custom-order-empty-stock-navbar-safe) - max(20px, env(safe-area-inset-top))) !important;
    max-width: min(100%, 430px) !important;
    transform: translateY(-2px) !important;
    width: min(100%, 430px) !important;
  }
}

/* Empty-stock flash modal scrolls above bottom navbar. */
.game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) {
  --custom-order-empty-stock-navbar-safe: calc(104px + env(safe-area-inset-bottom)) !important;
  align-items: center !important;
  box-sizing: border-box !important;
  display: grid !important;
  justify-items: center !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) var(--custom-order-empty-stock-navbar-safe) max(12px, env(safe-area-inset-left)) !important;
  place-items: center !important;
}

.game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) .game-modal {
  box-sizing: border-box !important;
  max-height: calc(100dvh - var(--custom-order-empty-stock-navbar-safe) - max(28px, env(safe-area-inset-top))) !important;
  overflow: hidden auto !important;
  overscroll-behavior: contain !important;
  transform: translateY(-4px) !important;
  width: min(94vw, 430px) !important;
}

.game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) .flash-stock-options[data-custom-order-empty-stock-prompt] {
  max-height: none !important;
  overflow: visible !important;
}

.game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) .custom-order-empty-stock-list {
  max-height: min(28dvh, 190px) !important;
}

.game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) > .game-modal > button[data-flash-close] {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
}

@media (max-width: 640px) {
  .game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) {
    --custom-order-empty-stock-navbar-safe: calc(112px + env(safe-area-inset-bottom)) !important;
    padding: max(10px, env(safe-area-inset-top)) 10px var(--custom-order-empty-stock-navbar-safe) !important;
  }

  .game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) .game-modal {
    border-radius: var(--ui-radius-lg) !important;
    max-height: calc(100dvh - var(--custom-order-empty-stock-navbar-safe) - max(20px, env(safe-area-inset-top))) !important;
    transform: translateY(-2px) !important;
    width: min(100%, 430px) !important;
  }

  .game-modal-backdrop[data-flash-modal]:has([data-custom-order-empty-stock-prompt]) .custom-order-empty-stock-list {
    max-height: min(24dvh, 160px) !important;
  }
}


/* Chat customer note modal: accessible mobile-first note composer. */
body.chat-page .chat-note-modal-backdrop,
body.chat-panel-embed .chat-note-modal-backdrop {
  align-items: center !important;
  background: var(--ui-overlay) !important;
  box-sizing: border-box !important;
  display: grid !important;
  justify-items: center !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(96px, calc(88px + env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left)) !important;
  place-items: center !important;
}

body.chat-page .chat-note-modal-backdrop[hidden],
body.chat-panel-embed .chat-note-modal-backdrop[hidden] {
  display: none !important;
}

body.chat-page .chat-note-modal,
body.chat-panel-embed .chat-note-modal {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  box-sizing: border-box !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 14px !important;
  max-height: calc(100dvh - 118px - env(safe-area-inset-bottom)) !important;
  max-width: min(100%, 500px) !important;
  overflow: hidden auto !important;
  overscroll-behavior: contain !important;
  padding: 18px !important;
  scrollbar-color: var(--ui-primary) var(--ui-surface-soft) !important;
  scrollbar-width: thin !important;
  width: min(100%, 500px) !important;
}

body.chat-page .chat-note-modal-head,
body.chat-panel-embed .chat-note-modal-head {
  align-items: start !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.chat-page .chat-note-modal-head span,
body.chat-panel-embed .chat-note-modal-head span {
  color: var(--ui-primary) !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body.chat-page .chat-note-modal-head h2,
body.chat-panel-embed .chat-note-modal-head h2 {
  color: var(--ui-text) !important;
  font-size: clamp(1.08rem, 4.7vw, 1.38rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.14 !important;
  margin: 6px 0 0 !important;
  overflow-wrap: anywhere !important;
}

body.chat-page .chat-note-modal-close,
body.chat-panel-embed .chat-note-modal-close {
  align-items: center !important;
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 50% !important;
  color: var(--ui-primary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  height: 44px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 44px !important;
  padding: 0 !important;
  width: 44px !important;
}

body.chat-page .chat-note-field,
body.chat-panel-embed .chat-note-field {
  border: 0 !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

body.chat-page .chat-note-field > span,
body.chat-page .chat-note-field legend,
body.chat-panel-embed .chat-note-field > span,
body.chat-panel-embed .chat-note-field legend {
  color: var(--ui-text) !important;
  font-size: .9rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.chat-page .chat-note-field textarea,
body.chat-panel-embed .chat-note-field textarea {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
  font: inherit !important;
  line-height: 1.45 !important;
  min-height: 126px !important;
  padding: 13px 14px !important;
  resize: vertical !important;
  width: 100% !important;
}

body.chat-page .chat-note-field textarea::placeholder,
body.chat-panel-embed .chat-note-field textarea::placeholder,
body.chat-page .chat-note-helper,
body.chat-panel-embed .chat-note-helper {
  color: var(--ui-text-muted) !important;
  opacity: 1 !important;
}

body.chat-page .chat-note-field textarea:focus,
body.chat-panel-embed .chat-note-field textarea:focus,
body.chat-page .chat-note-visibility-option:focus-within > span,
body.chat-panel-embed .chat-note-visibility-option:focus-within > span,
body.chat-page .chat-note-cancel:focus-visible,
body.chat-page .chat-note-save:focus-visible,
body.chat-page .chat-note-modal-close:focus-visible,
body.chat-panel-embed .chat-note-cancel:focus-visible,
body.chat-panel-embed .chat-note-save:focus-visible,
body.chat-panel-embed .chat-note-modal-close:focus-visible {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 22%, var(--ui-surface)) !important;
  outline: 0 !important;
}

body.chat-page .chat-note-helper,
body.chat-panel-embed .chat-note-helper {
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

body.chat-page .chat-note-visibility-options,
body.chat-panel-embed .chat-note-visibility-options {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.chat-page .chat-note-visibility-option,
body.chat-panel-embed .chat-note-visibility-option {
  color: var(--ui-text) !important;
  cursor: pointer !important;
  display: grid !important;
  min-width: 0 !important;
  position: relative !important;
}

body.chat-page .chat-note-visibility-option input,
body.chat-panel-embed .chat-note-visibility-option input {
  appearance: none !important;
  border: 0 !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

body.chat-page .chat-note-visibility-option > span,
body.chat-panel-embed .chat-note-visibility-option > span {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text-muted) !important;
  display: grid !important;
  gap: 4px !important;
  min-height: 64px !important;
  padding: 11px 12px !important;
}

body.chat-page .chat-note-visibility-option strong,
body.chat-panel-embed .chat-note-visibility-option strong {
  color: var(--ui-text) !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
}

body.chat-page .chat-note-visibility-option small,
body.chat-panel-embed .chat-note-visibility-option small {
  color: var(--ui-text-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body.chat-page .chat-note-visibility-option:has(input:checked) > span,
body.chat-panel-embed .chat-note-visibility-option:has(input:checked) > span {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary-border) !important;
  color: var(--ui-primary-hover) !important;
}

body.chat-page .chat-note-visibility-option:has(input:checked) strong,
body.chat-panel-embed .chat-note-visibility-option:has(input:checked) strong {
  color: var(--ui-primary-hover) !important;
}

body.chat-page .chat-note-source-card,
body.chat-panel-embed .chat-note-source-card {
  align-items: center !important;
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-text) !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
}

body.chat-page .chat-note-source-card svg,
body.chat-panel-embed .chat-note-source-card svg {
  background: var(--ui-primary-soft) !important;
  border: 1px solid var(--ui-primary-border) !important;
  border-radius: 50% !important;
  color: var(--ui-primary) !important;
  fill: none !important;
  height: 38px !important;
  padding: 8px !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.9 !important;
  width: 38px !important;
}

body.chat-page .chat-note-source-card div,
body.chat-panel-embed .chat-note-source-card div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.chat-page .chat-note-source-card strong,
body.chat-panel-embed .chat-note-source-card strong {
  color: var(--ui-text) !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body.chat-page .chat-note-source-card span,
body.chat-panel-embed .chat-note-source-card span {
  color: var(--ui-text-muted) !important;
  display: block !important;
  font-size: .84rem !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  max-height: 3.8em !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}

body.chat-page .chat-note-actions,
body.chat-panel-embed .chat-note-actions {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1fr) !important;
}

body.chat-page .chat-note-actions button,
body.chat-panel-embed .chat-note-actions button {
  align-items: center !important;
  border-radius: var(--ui-radius-md) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  font-size: .96rem !important;
  font-weight: 900 !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 11px 14px !important;
  text-align: center !important;
}

body.chat-page .chat-note-cancel,
body.chat-panel-embed .chat-note-cancel {
  background: var(--ui-field) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body.chat-page .chat-note-save,
body.chat-panel-embed .chat-note-save {
  background: var(--ui-primary) !important;
  border: 1px solid var(--ui-primary) !important;
  color: var(--ui-on-primary) !important;
}

body.chat-page .chat-note-save:hover,
body.chat-panel-embed .chat-note-save:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
}

@media (max-width: 520px) {
  body.chat-page .chat-note-modal-backdrop,
  body.chat-panel-embed .chat-note-modal-backdrop {
    padding: max(10px, env(safe-area-inset-top)) 10px max(96px, calc(88px + env(safe-area-inset-bottom))) 10px !important;
  }
  body.chat-page .chat-note-modal,
  body.chat-panel-embed .chat-note-modal {
    gap: 12px !important;
    max-height: calc(100dvh - 112px - env(safe-area-inset-bottom)) !important;
    padding: 16px !important;
    width: min(100%, 428px) !important;
  }
  body.chat-page .chat-note-field textarea,
  body.chat-panel-embed .chat-note-field textarea {
    min-height: 118px !important;
  }
  body.chat-page .chat-note-visibility-options,
  body.chat-panel-embed .chat-note-visibility-options,
  body.chat-page .chat-note-actions,
  body.chat-panel-embed .chat-note-actions {
    grid-template-columns: 1fr !important;
  }
}


/* Chat bubble compact text width: prevent tiny messages from vertical wrapping. */
body.chat-page .message-row .bubble,
body.chat-panel-embed .message-row .bubble {
  min-width: min(136px, 48vw) !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body.chat-page .bubble p,
body.chat-panel-embed .bubble p {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body.chat-page .bubble small,
body.chat-panel-embed .bubble small {
  white-space: nowrap !important;
}

body.chat-page .bubble:has(> p:only-of-type),
body.chat-panel-embed .bubble:has(> p:only-of-type) {
  min-width: min(156px, 54vw) !important;
}

@media (max-width: 520px) {
  body.chat-page .message-row .bubble,
  body.chat-panel-embed .message-row .bubble {
    min-width: min(128px, 48vw) !important;
  }

  body.chat-page .bubble:has(> p:only-of-type),
  body.chat-panel-embed .bubble:has(> p:only-of-type) {
    min-width: min(148px, 56vw) !important;
  }
}
/* Financial journal debit/credit color contract. */
body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row-head .financial-journal-debit-head,
body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row-head .financial-journal-credit-head {
  background: transparent !important;
  border: 0 !important;
  color: var(--ui-text) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row:not(.financial-journal-row-head) .financial-journal-amount-debit,
body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row:not(.financial-journal-row-head) .financial-journal-amount-debit .financial-journal-amount-value {
  color: var(--ui-info-strong) !important;
}

body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row:not(.financial-journal-row-head) .financial-journal-amount-credit,
body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row:not(.financial-journal-row-head) .financial-journal-amount-credit .financial-journal-amount-value {
  color: var(--ui-danger-strong) !important;
}


/* Financial journal compact mobile polish. */
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-table{gap:8px !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head){grid-template-columns:minmax(0,1fr) auto !important;;gap:8px 10px !important;;padding:10px 10px 10px 14px !important;;border-radius:var(--ui-radius-sm) !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label]{border-bottom:0 !important;;gap:2px !important;;min-height:0 !important;;padding:0 !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label]::before{font-size:.62rem !important;;letter-spacing:0 !important;;line-height:1.1 !important;}}
body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row-head .financial-journal-debit-head,body.invoice-page .financial-journal-page .financial-journal-ledger-table .financial-journal-row-head .financial-journal-credit-head{color:var(--ui-text) !important;}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label=Tanggal]{grid-column:1/2 !important;;grid-row:1 !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label=Akun]{grid-column:1/2 !important;;grid-row:2 !important;;font-size:.92rem !important;;font-weight:850 !important;;line-height:1.18 !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label=Debit],body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label=Kredit]{align-items:center !important;;display:flex !important;;gap:6px !important;;grid-column:1/-1 !important;;line-height:1.16 !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label=Debit]::before,body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label=Kredit]::before{flex:0 0 44px !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label^=Data]{background:var(--ui-surface-soft) !important;;border:1px solid var(--ui-border) !important;;border-radius:var(--ui-radius-sm) !important;;grid-column:1/-1 !important;;padding:7px 8px !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label^=Status]{align-self:start !important;;grid-column:2/3 !important;;grid-row:1/3 !important;;justify-self:end !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) [data-label=Aksi]{grid-column:1/-1 !important;;justify-self:start !important;}.financial-journal-page .financial-journal-actions{display:flex !important;;gap:8px !important;}}
@media (max-width: 640px){body.invoice-page .financial-journal-page .financial-journal-row .is-amount{font-size:.84rem !important;}.financial-journal-page .financial-journal-check{gap:5px !important;;min-height:32px !important;}.financial-journal-page .financial-journal-check input{height:18px !important;;width:18px !important;}.financial-journal-page .financial-journal-check-state{font-size:.62rem !important;;padding:4px 6px !important;;white-space:nowrap !important;}.financial-journal-page .financial-journal-icon-button{height:40px !important;;min-height:40px !important;;min-width:40px !important;;width:40px !important;}}

/* Financial journal mobile summary rows. */
body.invoice-page .financial-journal-page .financial-journal-row-summary,
body.invoice-page .financial-journal-page .financial-journal-row-detail {
  display: contents;
}

body.invoice-page .financial-journal-page .financial-journal-row-summary {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  list-style: none;
  margin: 0;
  text-align: inherit;
  width: 100%;
}

@media (max-width: 640px) {
  body.invoice-page .financial-journal-page .financial-journal-table {
    gap: 8px !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head) {
    border-radius: var(--ui-radius-sm) !important;
    display: block !important;
    overflow: hidden;
    padding: 0 !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-row:not(.financial-journal-row-head)::before {
    border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm);
    inset: 0 auto 0 0;
    width: 4px;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-summary {
    align-items: stretch;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(64px, 0.74fr) minmax(92px, 1.1fr) minmax(78px, 0.9fr) minmax(78px, 0.9fr);
    padding: 9px 8px 9px 14px;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-summary > [data-label],
  body.invoice-page .financial-journal-page .financial-journal-row-detail > [data-label] {
    border-bottom: 0 !important;
    display: grid !important;
    gap: 2px !important;
    justify-items: start;
    min-height: 0 !important;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0 5px !important;
    text-align: left;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-summary > [data-label]::before,
  body.invoice-page .financial-journal-page .financial-journal-row-detail > [data-label]::before {
    color: var(--ui-text-muted) !important;
    content: attr(data-label);
    font-size: 0.58rem !important;
    font-weight: 850;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-summary > [data-label="Akun"] {
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-summary > [data-label="Tanggal"],
  body.invoice-page .financial-journal-page .financial-journal-row-summary > [data-label="Debit"],
  body.invoice-page .financial-journal-page .financial-journal-row-summary > [data-label="Kredit"] {
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-summary .financial-journal-amount-value {
    white-space: normal !important;
    word-break: break-word;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-summary small {
    font-size: 0.58rem !important;
    margin-top: 1px;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-detail {
    background: var(--ui-surface-soft);
    border-top: 1px solid var(--ui-border);
    display: none;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    padding: 9px 10px 10px 14px;
  }

  body.invoice-page .financial-journal-page .financial-journal-row.is-detail-open .financial-journal-row-detail {
    display: grid;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-detail > [data-label="Data sumber"] {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    padding: 8px !important;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-detail > [data-label="Status cek"],
  body.invoice-page .financial-journal-page .financial-journal-row-detail > [data-label="Aksi"] {
    align-items: center;
    display: flex !important;
    gap: 8px !important;
    justify-content: space-between;
  }

  body.invoice-page .financial-journal-page .financial-journal-row-detail > [data-label="Status cek"]::before,
  body.invoice-page .financial-journal-page .financial-journal-row-detail > [data-label="Aksi"]::before {
    flex: 0 0 auto;
  }

  body.invoice-page .financial-journal-page .financial-journal-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end;
  }
}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-ledger-table{background:transparent!important;border:0!important;display:grid!important;gap:8px!important;max-height:none!important;overflow:visible!important}body.invoice-page .financial-journal-page .financial-journal-row-head{display:none!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-ledger-table>.financial-journal-row:not(.financial-journal-row-head){background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-sm)!important;box-shadow:var(--ui-shadow)!important;display:block!important;min-height:0!important;overflow:hidden!important;padding:0!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-ledger-table>.financial-journal-row.is-checked:not(.financial-journal-row-head){background:var(--ui-surface)!important;border-color:color-mix(in srgb,var(--ui-success) 36%,var(--ui-border))!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-summary{background:var(--ui-surface)!important;border:0!important;box-shadow:none!important;color:var(--ui-text)!important;display:grid!important;grid-template-columns:minmax(58px,.72fr) minmax(82px,1.08fr) minmax(72px,.9fr) minmax(72px,.9fr)!important;min-height:0!important;padding:9px 8px 9px 14px!important;width:100%!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-summary>[data-label]{align-items:start!important;border:0!important;color:var(--ui-text)!important;display:grid!important;gap:2px!important;grid-column:auto!important;grid-row:auto!important;justify-items:start!important;line-height:1.12!important;min-height:0!important;min-width:0!important;overflow-wrap:anywhere!important;padding:0 4px!important;text-align:left!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-summary>[data-label]::before{color:var(--ui-text-muted)!important;content:attr(data-label)!important;display:block!important;font-size:.56rem!important;font-weight:850!important;letter-spacing:0!important;line-height:1!important;text-transform:uppercase!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-summary small{color:var(--ui-text-muted)!important;font-size:.55rem!important;margin-top:1px!important}body.invoice-page .financial-journal-page .financial-journal-row-summary .financial-journal-amount-value{display:block!important;font-size:.66rem!important;line-height:1.12!important;max-width:100%!important;min-width:0!important;overflow-wrap:anywhere!important;white-space:normal!important;word-break:break-word!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-summary .financial-journal-amount-debit,body.invoice-page .financial-journal-page .financial-journal-row-summary .financial-journal-amount-debit .financial-journal-amount-value{color:var(--ui-info-strong)!important}body.invoice-page .financial-journal-page .financial-journal-row-summary .financial-journal-amount-credit,body.invoice-page .financial-journal-page .financial-journal-row-summary .financial-journal-amount-credit .financial-journal-amount-value{color:var(--ui-danger-strong)!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-summary>[data-label=Akun]{font-size:.76rem!important;font-weight:900!important}body.invoice-page .financial-journal-page .financial-journal-row-summary>[data-label=Tanggal],body.invoice-page .financial-journal-page .financial-journal-row-summary>[data-label=Debit],body.invoice-page .financial-journal-page .financial-journal-row-summary>[data-label=Kredit]{font-size:.66rem!important;font-weight:800!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-detail{background:var(--ui-surface-soft)!important;border-top:1px solid var(--ui-border)!important;display:none!important;gap:8px!important;grid-template-columns:minmax(0,1fr)!important;padding:9px 10px 10px 14px!important}body.invoice-page .financial-journal-page .financial-journal-row.is-detail-open .financial-journal-row-detail{display:grid!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-row-detail>[data-label]{border:0!important;color:var(--ui-text)!important;display:grid!important;gap:3px!important;grid-column:1/-1!important;min-height:0!important;padding:0!important}}
/* Financial journal mobile four-column v3. */
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-ledger-table>article.financial-journal-row:not(.financial-journal-row-head){background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;display:block!important;min-height:0!important;padding:0!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary{background:var(--ui-surface)!important;color:var(--ui-text)!important;display:grid!important;grid-template-columns:58px minmax(74px,1fr) minmax(64px,.86fr) minmax(64px,.86fr)!important;gap:0!important;padding:8px 7px 8px 14px!important;width:100%!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>*{align-self:start!important;border:0!important;display:block!important;grid-column:auto!important;grid-row:auto!important;line-height:1.08!important;min-height:0!important;min-width:0!important;overflow-wrap:anywhere!important;padding:0 3px!important;text-align:left!important;white-space:normal!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>*::before{color:var(--ui-text-muted)!important;content:attr(data-label)!important;display:block!important;font-size:.52rem!important;font-weight:850!important;letter-spacing:0!important;line-height:1!important;text-transform:uppercase!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Akun]{font-size:.72rem!important;font-weight:900!important}body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Tanggal],body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Debit],body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Kredit]{font-size:.62rem!important;font-weight:800!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary .financial-journal-amount-value{display:block!important;font-size:.62rem!important;line-height:1.08!important;max-width:100%!important;overflow-wrap:anywhere!important;white-space:normal!important;word-break:break-word!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary .financial-journal-amount-debit,body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary .financial-journal-amount-debit .financial-journal-amount-value{color:var(--ui-info-strong)!important}body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary .financial-journal-amount-credit,body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary .financial-journal-amount-credit .financial-journal-amount-value{color:var(--ui-danger-strong)!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>.financial-journal-row-detail{background:var(--ui-surface-soft)!important;border-top:1px solid var(--ui-border)!important;display:none!important;gap:8px!important;grid-template-columns:minmax(0,1fr)!important;padding:9px 10px 10px 14px!important}body.invoice-page .financial-journal-page article.financial-journal-row.is-detail-open>.financial-journal-row-detail{display:grid!important}}
/* Financial journal mobile column placement v4. */
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Tanggal]{grid-column:1!important;grid-row:1!important}body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Akun]{grid-column:2!important;grid-row:1!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Debit]{display:grid!important;grid-column:3!important;grid-row:1!important}body.invoice-page .financial-journal-page article.financial-journal-row>button.financial-journal-row-summary>[data-label=Kredit]{display:grid!important;grid-column:4!important;grid-row:1!important}}
/* Financial journal checked mobile readable green v5. */
@media (max-width:640px){body.invoice-page .financial-journal-page .financial-journal-ledger-table>article.financial-journal-row.is-checked:not(.financial-journal-row-head){background:var(--ui-success-soft)!important;border-color:color-mix(in srgb,var(--ui-success) 42%,var(--ui-border))!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary{background:var(--ui-success-soft)!important;color:var(--ui-text)!important}body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>.financial-journal-row-detail{background:var(--ui-success-soft)!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary>[data-label=Tanggal],body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary>[data-label=Akun]{color:var(--ui-text)!important}body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary>[data-label]::before{color:var(--ui-success-strong)!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary .financial-journal-amount-debit,body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary .financial-journal-amount-debit .financial-journal-amount-value{color:var(--ui-info-strong)!important}body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary .financial-journal-amount-credit,body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>button.financial-journal-row-summary .financial-journal-amount-credit .financial-journal-amount-value{color:var(--ui-danger-strong)!important}}
@media (max-width:640px){body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>.financial-journal-row-detail>[data-label],body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>.financial-journal-row-detail b{color:var(--ui-text)!important}body.invoice-page .financial-journal-page article.financial-journal-row.is-checked>.financial-journal-row-detail>[data-label]::before{color:var(--ui-success-strong)!important}}


/* Cashier sales native selects: keep dropdown colors on the global UI contract. */
body.invoice-page .cashier-sales-page :is(.cashier-sale-form, .cashier-sales-edit-form, .cashier-sales-settlement-form) select {
  accent-color: var(--ui-primary);
  background: var(--ui-field) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  color-scheme: light;
}

body.invoice-page .cashier-sales-page :is(.cashier-sale-form, .cashier-sales-edit-form, .cashier-sales-settlement-form) select:focus,
body.invoice-page .cashier-sales-page :is(.cashier-sale-form, .cashier-sales-edit-form, .cashier-sales-settlement-form) select:focus-visible {
  background: var(--ui-surface) !important;
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
  outline: 0 !important;
}

body.invoice-page .cashier-sales-page :is(.cashier-sale-form, .cashier-sales-edit-form, .cashier-sales-settlement-form) select option {
  background: var(--ui-surface);
  color: var(--ui-text);
}

body.invoice-page .cashier-sales-page :is(.cashier-sale-form, .cashier-sales-edit-form, .cashier-sales-settlement-form) select option:checked {
  background: var(--ui-primary-soft);
  color: var(--ui-primary-hover);
}