/*
 * REDLINE UI
 * A deliberately crisp red/white interface shared by the dashboard, auth,
 * onboarding, error and public-menu surfaces. No glass, blur or gradients.
 */
:root {
  --redline-red: #dc0a18;
  --redline-red-dark: #a90813;
  --redline-red-soft: #fff0f1;
  --redline-ink: #171717;
  --redline-muted: #686868;
  --redline-canvas: #f4f4f1;
  --redline-surface: #ffffff;
  --redline-line: #d8d8d3;
  --redline-line-strong: #171717;
  --redline-radius: 5px;
  --redline-shadow: 4px 4px 0 #171717;
}

html {
  background: var(--redline-canvas) !important;
  color: var(--redline-ink) !important;
}

body {
  background-color: var(--redline-canvas) !important;
  background-image: none !important;
  color: var(--redline-ink) !important;
}

body ::selection {
  color: #fff;
  background: var(--redline-red);
}

body [class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body [class*="bg-gradient"],
body [class*="from-"],
body [class*="via-"],
body [class*="to-"] {
  background-image: none !important;
}

.bg-gradient-to-r.from-amber-600,
.bg-gradient-to-r.from-rose-600 {
  background: var(--redline-red) !important;
}

body .rounded-3xl,
body .rounded-2xl,
body .rounded-xl {
  border-radius: var(--redline-radius) !important;
}

body .rounded-lg {
  border-radius: 3px !important;
}

body .shadow-2xl,
body .shadow-xl,
body .shadow-lg,
body .shadow-md,
body .shadow-sm,
body .shadow-xs,
body .shadow-2xs,
body [class*="shadow-violet"],
body [class*="shadow-emerald"],
body [class*="shadow-slate"] {
  box-shadow: none !important;
}

button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  border-radius: 3px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(220, 10, 24, 0.22) !important;
  outline-offset: 2px;
}

.bg-emerald-600,
.bg-emerald-700,
.bg-violet-600,
.bg-violet-700,
.bg-purple-600,
.bg-purple-700 {
  background-color: var(--redline-red) !important;
}

.bg-emerald-50,
.bg-emerald-100,
.bg-violet-50,
.bg-violet-100,
.bg-purple-50,
.bg-purple-100 {
  background-color: var(--redline-red-soft) !important;
}

.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-violet-600,
.text-violet-700,
.text-violet-800,
.text-purple-600,
.text-purple-700,
.text-purple-800 {
  color: var(--redline-red) !important;
}

.border-emerald-100,
.border-emerald-200,
.border-emerald-300,
.border-violet-100,
.border-violet-200,
.border-violet-300,
.border-purple-100,
.border-purple-200,
.border-purple-300 {
  border-color: #f2aab0 !important;
}

.hover\:bg-emerald-700:hover,
.hover\:bg-violet-700:hover,
.hover\:bg-purple-700:hover {
  background-color: var(--redline-red-dark) !important;
}

.hover\:bg-emerald-50:hover,
.hover\:bg-emerald-100:hover,
.hover\:bg-violet-50:hover,
.hover\:bg-violet-100:hover {
  background-color: #ffe1e4 !important;
}

.hover\:text-emerald-600:hover,
.hover\:text-emerald-700:hover,
.hover\:text-violet-600:hover,
.hover\:text-violet-700:hover {
  color: var(--redline-red-dark) !important;
}

#nprogress .bar {
  height: 3px !important;
  background: var(--redline-red) !important;
  box-shadow: none !important;
}

#nprogress .peg,
#nprogress .spinner {
  display: none !important;
  box-shadow: none !important;
}

.swal2-popup {
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: var(--redline-shadow) !important;
}

.swal2-confirm {
  border-radius: 3px !important;
  background: var(--redline-red) !important;
  color: #fff !important;
  border: 2px solid var(--redline-line-strong) !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong) !important;
}

.swal2-cancel {
  border-radius: 3px !important;
  background: #303030 !important;
  color: #fff !important;
  border: 2px solid var(--redline-line-strong) !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong) !important;
}

.swal2-actions {
  align-items: stretch !important;
  gap: 0.75rem !important;
  margin-top: 1.1rem !important;
}

.swal2-actions .swal2-styled {
  min-width: 7.5rem;
  min-height: 2.75rem;
  margin: 0 !important;
  padding: 0.65rem 1rem !important;
  line-height: 1.2 !important;
}

/* Dashboard shell ------------------------------------------------------- */
#appMainShell,
#spaMainContainer {
  background: var(--redline-canvas) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#appMainShell {
  height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
}

#appSidebar {
  width: 17rem !important;
  height: 100dvh !important;
  margin: 0 !important;
  background: var(--redline-surface) !important;
  border-inline-start: 0 !important;
  border-inline-end: 2px solid var(--redline-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#appSidebar .sidebar-header-box {
  height: 4rem !important;
  padding-inline: 0.75rem !important;
}

#appSidebar .sidebar-collapse-btn {
  color: var(--redline-red) !important;
  background: #fff !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong) !important;
}

#appSidebar .sidebar-collapse-btn:hover {
  color: #fff !important;
  background: var(--redline-red) !important;
}

#appSidebar .sidebar-collapse-btn svg {
  transition: transform 160ms ease;
}

#appSidebar.is-collapsed {
  width: 4.5rem !important;
}

#appSidebar.is-collapsed .sidebar-header-box {
  justify-content: center !important;
  padding-inline: 0.5rem !important;
}

#appSidebar.is-collapsed #sidebarLogoBtn {
  display: none !important;
}

#appSidebar.is-collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

[dir="ltr"] #appSidebar {
  border-inline-start: 0 !important;
  border-inline-end: 2px solid var(--redline-line-strong) !important;
}

#appSidebar > div:first-child,
#appSidebar > div:last-child,
#appSidebar .sidebar-header-box {
  background: #fff !important;
  border-color: var(--redline-line-strong) !important;
}

#appSidebar .brand-mark,
#appSidebar #sidebarLogoBtn > div:first-child {
  color: #fff !important;
  background: var(--redline-red) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 var(--redline-line-strong) !important;
}

#appSidebar .brand-title {
  color: var(--redline-ink) !important;
  letter-spacing: -0.02em;
}

#appSidebar .brand-subtitle {
  color: var(--redline-red) !important;
}

#appSidebar #sidebarNav {
  padding: 0.7rem !important;
}

#appSidebar .nav-item-link {
  min-height: 2.7rem;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  color: #3f3f3f !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#dashHtmlRoot #appSidebar .nav-item-link:not(.active):hover {
  color: var(--redline-ink) !important;
  background: #eeeeea !important;
  border-color: #bdbdb7 !important;
  transform: none !important;
}

#dashHtmlRoot #appSidebar .nav-item-link:not(.active):hover .sidebar-label-text,
#dashHtmlRoot #appSidebar .nav-item-link:not(.active):hover svg,
#dashHtmlRoot #appSidebar .nav-item-link:not(.active):hover i {
  color: var(--redline-ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke: currentColor !important;
}

#dashHtmlRoot #appSidebar .nav-item-link.active,
#dashHtmlRoot #appSidebar .nav-item-link.active:hover {
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border-color: var(--redline-line-strong) !important;
  box-shadow: 3px 3px 0 var(--redline-line-strong) !important;
  transform: none !important;
}

#dashHtmlRoot #appSidebar .nav-item-link.active .sidebar-label-text,
#dashHtmlRoot #appSidebar .nav-item-link.active:hover .sidebar-label-text,
#dashHtmlRoot #appSidebar .nav-item-link.active svg,
#dashHtmlRoot #appSidebar .nav-item-link.active:hover svg,
#dashHtmlRoot #appSidebar .nav-item-link.active i,
#dashHtmlRoot #appSidebar .nav-item-link.active:hover i {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke: currentColor !important;
}

#appSidebar .user-profile-box {
  color: var(--redline-ink) !important;
  background: #f1f1ee !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
}

#appSidebar .user-profile-box > div > div:first-child {
  color: #fff !important;
  background: var(--redline-red) !important;
  border-radius: 2px !important;
}

#appSidebar .user-profile-box .text-slate-800 {
  color: var(--redline-ink) !important;
}

#appSidebar .user-profile-box .text-slate-500 {
  color: var(--redline-muted) !important;
}

#appTopbar {
  height: 4rem !important;
  min-height: 4rem !important;
  background: #fff !important;
  border-bottom: 2px solid var(--redline-line-strong) !important;
  border-top: 0 !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#spaMainContainer {
  margin-top: 0 !important;
  padding: 0.875rem 1.125rem 1.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
  scroll-padding-top: 0.875rem;
}

#spaMainContainer > #dashRealContent {
  margin-top: 0 !important;
}

#appTopbar h1 {
  color: var(--redline-ink) !important;
  font-weight: 800 !important;
}

#appTopbar button,
#appTopbar a {
  color: var(--redline-ink) !important;
  background: #fff !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  transform: none !important;
}

#appTopbar button:hover,
#appTopbar a:hover {
  color: #fff !important;
  background: var(--redline-red) !important;
}

#appTopbar svg,
#appTopbar i {
  color: var(--redline-red) !important;
}

#appTopbar button:hover svg,
#appTopbar a:hover svg,
#appTopbar button:hover i,
#appTopbar a:hover i {
  color: #fff !important;
}

#mobileSidebarBackdrop {
  background: rgba(23, 23, 23, 0.72) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Redline floating notifications dropdown */
#notificationsDrawerModal.notif-dropdown-panel {
  background: #ffffff !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: 4px 4px 0 var(--redline-line-strong) !important;
  color: var(--redline-ink) !important;
}

#notificationsDrawerModal.notif-dropdown-panel button,
#notificationsDrawerModal.notif-dropdown-panel a {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#notificationsDrawerModal .notif-item-card {
  border: 1px solid var(--redline-line) !important;
  border-radius: 4px !important;
  background: #fff !important;
  transition: all 0.15s ease !important;
}

#notificationsDrawerModal .notif-item-card:hover {
  border-color: var(--redline-line-strong) !important;
}

#notificationsDrawerModal .notif-item-card.is-unread {
  border-color: #f2aab0 !important;
  background: var(--redline-red-soft) !important;
}

#notificationsDrawerModal .notif-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 3px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--redline-red) !important;
  border: 1px solid var(--redline-line-strong) !important;
  box-shadow: 1px 1px 0 var(--redline-line-strong) !important;
}

#notificationsDrawerModal .notif-action-btn:hover {
  background: var(--redline-red-dark) !important;
  color: #fff !important;
}

#notificationsDrawerModal .notif-mark-read-btn {
  color: var(--redline-red) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
}

#notificationsDrawerModal .notif-mark-read-btn:hover {
  text-decoration: underline !important;
}

#notificationsDrawerModal .notif-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem !important;
  color: var(--redline-muted) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

#notificationsDrawerModal .notif-icon-btn:hover {
  color: var(--redline-ink) !important;
  background: #f4f4f1 !important;
}

#dashRealContent {
  color: var(--redline-ink);
}

#appSidebar .nav-item-link:focus-visible {
  outline: 2px solid var(--redline-line-strong) !important;
  outline-offset: 2px;
}

#appSidebar .nav-item-link > svg,
#appSidebar .nav-item-link > i {
  display: block;
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  overflow: visible;
  stroke-width: 2.15;
}

/* Local currency flags: independent from remote flag stylesheets. */
.currency-flag {
  display: inline-flex;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #b8b8b2;
  border-radius: 2px;
  background: #fff;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
}

#currencyPickerContainer {
  min-width: 0;
}

#currencyPickerContainer:has(#currencyDropdownMenu:not(.hidden)) {
  z-index: 80;
}

#currencyDropdownMenu,
#wizCurrencyDropdownMenu {
  inset-inline: 0 !important;
  z-index: 80 !important;
  max-height: min(20rem, 52vh) !important;
  overflow-x: hidden !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: 4px 4px 0 var(--redline-line-strong) !important;
}

#currencyDropdownMenu > div,
#currencyDropdownMenu > button,
#wizCurrencyDropdownMenu > div,
#wizCurrencyDropdownMenu > button,
.currency-option {
  min-height: 2.75rem;
  border: 0 !important;
  border-bottom: 1px solid var(--redline-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

#currencyDropdownMenu > :last-child,
#wizCurrencyDropdownMenu > :last-child {
  border-bottom: 0 !important;
}

#currencyDropdownMenu > div:hover,
#currencyDropdownMenu > button:hover,
#wizCurrencyDropdownMenu > div:hover,
#wizCurrencyDropdownMenu > button:hover,
.currency-option:hover {
  color: var(--redline-ink) !important;
  background: var(--redline-red-soft) !important;
}

.currency-symbol {
  flex: 0 0 auto;
  color: var(--redline-red) !important;
  border: 1px solid #f2aab0;
  border-radius: 2px;
  background: var(--redline-red-soft);
  padding: 0.2rem 0.45rem;
}

/* Dashboard-specific responsive repairs. */
.orders-metric-card {
  min-width: 0;
  gap: 0.75rem;
  overflow: hidden;
}

.orders-metric-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.orders-sales-line {
  min-width: 0;
  flex-wrap: wrap;
  column-gap: 0.35rem;
  row-gap: 0;
}

.orders-sales-value {
  max-width: 100%;
  font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
  line-height: 1.15;
}

.orders-sales-currency {
  flex: 0 0 auto;
  white-space: nowrap;
}

.qr-studio-layout {
  grid-template-columns: minmax(0, 1fr);
}

.qr-studio-layout > *,
.qr-studio-controls,
.qr-studio-preview-panel {
  min-width: 0;
}

.qr-studio-preview-panel {
  width: min(100%, 28rem);
  margin-inline: auto;
}

#studioQrPreviewBox {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

#studioQrPreviewBox svg {
  display: block;
  width: min(100%, 20rem);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

#studioCornerStyle {
  min-width: 0;
  text-overflow: ellipsis;
}

.studio-logo-mode[aria-pressed="true"] {
  box-shadow: 0 0 0 1px rgb(16 185 129 / 0.08), 0 4px 12px rgb(15 23 42 / 0.04);
}

@media (min-width: 1100px) {
  .qr-studio-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.75fr);
  }

  .qr-studio-preview-panel {
    width: 100%;
    margin-inline: 0;
    position: sticky;
    top: 5.5rem;
  }
}

/* Replace the old emerald/violet accent utilities at the dashboard root.
   Token selectors avoid turning hover-only utility classes on permanently. */
#dashHtmlRoot [class~="text-emerald-400"],
#dashHtmlRoot [class~="text-emerald-500"],
#dashHtmlRoot [class~="text-emerald-600"],
#dashHtmlRoot [class~="text-emerald-700"],
#dashHtmlRoot [class~="text-emerald-800"],
#dashHtmlRoot [class~="text-emerald-900"],
#dashHtmlRoot [class~="text-violet-500"],
#dashHtmlRoot [class~="text-violet-600"],
#dashHtmlRoot [class~="text-violet-700"],
#dashHtmlRoot [class~="text-purple-500"],
#dashHtmlRoot [class~="text-purple-600"],
#dashHtmlRoot [class~="text-purple-700"] {
  color: var(--redline-red) !important;
}

#dashHtmlRoot [class~="text-indigo-500"],
#dashHtmlRoot [class~="text-indigo-600"],
#dashHtmlRoot [class~="text-indigo-700"] {
  color: var(--redline-red) !important;
}

#dashHtmlRoot [class~="text-green-500"],
#dashHtmlRoot [class~="text-green-600"],
#dashHtmlRoot [class~="text-green-700"],
#dashHtmlRoot [class~="text-green-800"] {
  color: #087a3c !important;
}

#dashHtmlRoot [class~="bg-emerald-500"],
#dashHtmlRoot [class~="bg-emerald-600"],
#dashHtmlRoot [class~="bg-emerald-700"],
#dashHtmlRoot [class~="bg-violet-500"],
#dashHtmlRoot [class~="bg-violet-600"],
#dashHtmlRoot [class~="bg-purple-500"],
#dashHtmlRoot [class~="bg-purple-600"],
#dashHtmlRoot [class~="bg-rose-600"],
#dashHtmlRoot [class~="bg-rose-700"] {
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
}

#dashHtmlRoot [class~="text-white"],
#dashHtmlRoot [class~="text-white"] *,
#dashHtmlRoot button.text-white,
#dashHtmlRoot button.text-white *,
.text-white,
.text-white * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

#dashHtmlRoot [class~="bg-emerald-50"],
#dashHtmlRoot [class~="bg-emerald-100"],
#dashHtmlRoot [class~="bg-violet-50"],
#dashHtmlRoot [class~="bg-violet-100"],
#dashHtmlRoot [class~="bg-purple-50"],
#dashHtmlRoot [class~="bg-purple-100"] {
  background: var(--redline-red-soft) !important;
}

#dashHtmlRoot [class~="bg-indigo-50"],
#dashHtmlRoot [class~="bg-indigo-100"] {
  background: var(--redline-red-soft) !important;
}

#dashHtmlRoot #dashRealContent button.bg-emerald-600,
#dashHtmlRoot #dashRealContent button.bg-emerald-500,
#dashHtmlRoot #dashRealContent a.bg-emerald-600,
#dashHtmlRoot #dashRealContent a.bg-emerald-500,
#dashHtmlRoot #dashRealContent button.bg-violet-600,
#dashHtmlRoot #dashRealContent a.bg-violet-600,
#dashHtmlRoot #dashRealContent [class~="bg-blue-600"],
#dashHtmlRoot #dashRealContent [class~="bg-sky-500"],
#dashHtmlRoot #dashRealContent button.bg-rose-600,
#dashHtmlRoot #dashRealContent a.bg-rose-600,
#dashHtmlRoot #dashRealContent [class~="bg-rose-600"],
#dashHtmlRoot #dashRealContent button.bg-rose-700,
#dashHtmlRoot #dashRealContent [class~="bg-rose-700"] {
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border: 2px solid var(--redline-line-strong) !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong) !important;
}

#dashHtmlRoot [class~="border-emerald-100"],
#dashHtmlRoot [class~="border-emerald-200"],
#dashHtmlRoot [class~="border-emerald-300"],
#dashHtmlRoot [class~="border-violet-100"],
#dashHtmlRoot [class~="border-violet-200"],
#dashHtmlRoot [class~="border-violet-300"],
#dashHtmlRoot [class~="border-purple-100"],
#dashHtmlRoot [class~="border-purple-200"],
#dashHtmlRoot [class~="border-purple-300"] {
  border-color: #f2aab0 !important;
}

#dashHtmlRoot #appTopbar button,
#dashHtmlRoot #appTopbar a {
  color: var(--redline-ink) !important;
  background: #fff !important;
  border-color: var(--redline-line-strong) !important;
}

#dashHtmlRoot #appTopbar button:hover,
#dashHtmlRoot #appTopbar a:hover {
  color: #fff !important;
  background: var(--redline-red) !important;
}

#dashHtmlRoot #appTopbar button:hover svg,
#dashHtmlRoot #appTopbar a:hover svg {
  color: #fff !important;
}

#dashHtmlRoot #appSidebar > div:last-child > a {
  color: var(--redline-red) !important;
  background: var(--redline-red-soft) !important;
  border-color: #f2aab0 !important;
}

#dashRealContent > * {
  animation: none !important;
}

#dashRealContent .bg-white,
#dashRealContent .bg-white\/80,
#dashRealContent .bg-white\/90,
#dashRealContent .bg-white\/95 {
  background-color: #fff !important;
}

#dashRealContent .bg-slate-50,
#dashRealContent .bg-slate-50\/50,
#dashRealContent .bg-slate-50\/80,
#dashRealContent .bg-gray-50 {
  background-color: #f1f1ee !important;
}

#dashRealContent .border,
#dashRealContent .border-b,
#dashRealContent .border-t,
#dashRealContent .border-l,
#dashRealContent .border-r {
  border-color: var(--redline-line) !important;
}

#dashRealContent .rounded-3xl,
#dashRealContent .rounded-2xl,
#dashRealContent .rounded-xl,
#dashRealContent .rounded-lg {
  border-radius: var(--redline-radius) !important;
}

#dashRealContent button,
#dashRealContent a[class*="px-"],
#dashRealContent [role="button"] {
  border-radius: 3px !important;
  transform: none !important;
}

#dashRealContent input,
#dashRealContent select,
#dashRealContent textarea {
  color: var(--redline-ink) !important;
  background: #fff !important;
  border: 1px solid #a9a9a3 !important;
  box-shadow: none !important;
}

#dashHtmlRoot #dashRealContent input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
#dashHtmlRoot #dashRealContent select,
#dashHtmlRoot #dashRealContent textarea {
  min-height: 2.7rem;
  color: var(--redline-ink) !important;
  background: #fff !important;
  border: 1px solid #a9a9a3 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

#dashHtmlRoot input[type="checkbox"],
#dashHtmlRoot input[type="radio"] {
  accent-color: var(--redline-red) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  color: #fff !important;
  background: var(--redline-red) !important;
  border-color: var(--redline-red) !important;
}

.flatpickr-calendar.static {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1000005 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
.overview-date-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

#dashRealContent input:focus,
#dashRealContent select:focus,
#dashRealContent textarea:focus {
  border-color: var(--redline-red) !important;
  outline: 3px solid rgba(220, 10, 24, 0.13) !important;
}

#dashRealContent table {
  border-collapse: collapse;
}

#dashRealContent thead {
  color: var(--redline-ink) !important;
  background: #e8e8e4 !important;
  border-bottom: 2px solid var(--redline-line-strong) !important;
}

#dashRealContent tbody tr:hover {
  background: #fff4f5 !important;
}

#dashRealContent .group:hover {
  transform: none !important;
}

/* Authentication ------------------------------------------------------- */
#authHtmlRoot,
#authHtmlRoot body {
  background: #fff !important;
}

#authHtmlRoot body > header {
  max-width: none !important;
  margin: -1rem -1rem 0 !important;
  width: calc(100% + 2rem) !important;
  padding: 0.85rem clamp(1rem, 4vw, 3rem) !important;
  border-bottom: 2px solid var(--redline-line-strong) !important;
  background: #fff !important;
}

#authHtmlRoot body > header > a > div:first-child {
  color: #fff !important;
  background: var(--redline-red) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 var(--redline-line-strong) !important;
  transform: none !important;
}

.auth-shell {
  display: grid !important;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(23rem, 1.05fr) !important;
  overflow: hidden !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 8px 8px 0 var(--redline-line-strong) !important;
}

.auth-story {
  min-height: 34rem !important;
  padding: clamp(1.75rem, 4vw, 3rem) !important;
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border-radius: 0 !important;
  border-inline-end: 2px solid var(--redline-line-strong) !important;
}

.auth-story::before,
.auth-story::after {
  display: none !important;
}

.auth-story h2 {
  max-width: 32rem;
  color: #fff !important;
  font-size: clamp(2rem, 4.2vw, 3.6rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.045em !important;
}

.auth-story p,
.auth-story span {
  color: rgba(255, 255, 255, 0.88) !important;
}

.auth-story-chip {
  color: #fff !important;
  background: transparent !important;
  border: 1px solid #fff !important;
  border-radius: 2px !important;
}

.auth-story-proof > div {
  background: #fff !important;
  color: var(--redline-ink) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
}

.auth-story-proof > div span,
.auth-story-proof > div strong,
.auth-story-proof > div svg,
.auth-story-proof > div i {
  color: var(--redline-ink) !important;
}

.auth-form-panel {
  padding: clamp(1.75rem, 4vw, 3.25rem) !important;
  background: #fff !important;
}

.auth-form-panel h1 {
  color: var(--redline-ink) !important;
}

.auth-form-panel > div:first-child > span {
  color: var(--redline-red) !important;
  background: var(--redline-red-soft) !important;
  border: 1px solid var(--redline-red) !important;
  border-radius: 2px !important;
}

#authHtmlRoot .auth-input,
#authHtmlRoot input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 2.8rem;
  color: var(--redline-ink) !important;
  background: #fff !important;
  border: 1px solid #8c8c87 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

#authHtmlRoot .auth-input:focus,
#authHtmlRoot input:focus {
  border-color: var(--redline-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 10, 24, 0.12) !important;
}

#authHtmlRoot .auth-form-panel button[type="submit"],
#authHtmlRoot button[type="submit"] {
  min-height: 2.9rem;
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 var(--redline-line-strong) !important;
  transform: none !important;
}

#authHtmlRoot .auth-form-panel button[type="submit"]:hover,
#authHtmlRoot button[type="submit"]:hover {
  background: var(--redline-red-dark) !important;
  box-shadow: 1px 1px 0 var(--redline-line-strong) !important;
}

#authHtmlRoot [class*="text-emerald-"],
#authHtmlRoot [class*="text-violet-"],
#authHtmlRoot [class*="text-purple-"] {
  color: var(--redline-red) !important;
}

#authHtmlRoot [class*="bg-emerald-50"],
#authHtmlRoot [class*="bg-emerald-100"],
#authHtmlRoot [class*="bg-violet-50"],
#authHtmlRoot [class*="bg-violet-100"] {
  background: var(--redline-red-soft) !important;
}

#authHtmlRoot [class*="border-emerald-"],
#authHtmlRoot [class*="border-violet-"] {
  border-color: #f2aab0 !important;
}

/* Onboarding ----------------------------------------------------------- */
#onboardRoot,
#onboardRoot body {
  background: var(--redline-canvas) !important;
}

#onboardRoot body > header {
  border-bottom: 2px solid var(--redline-line-strong);
}

#onboardRoot body > header > div > div:first-child {
  color: #fff !important;
  background: var(--redline-red) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 var(--redline-line-strong) !important;
}

.onboarding-workspace {
  gap: 1rem !important;
}

.onboarding-intro {
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--redline-line-strong) !important;
}

.onboarding-intro::after {
  display: none !important;
}

.onboarding-intro [class*="bg-white"] {
  background: #fff !important;
  color: var(--redline-ink) !important;
  border-radius: 2px !important;
}

.onboarding-flow > div,
.onboarding-flow > main > div {
  background: #fff !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#onboardRoot main > div {
  border-radius: var(--redline-radius) !important;
}

.step-badge.active {
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border-color: var(--redline-line-strong) !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong) !important;
}

#onboardRoot input,
#onboardRoot select,
#onboardRoot textarea,
#onboardRoot button {
  border-radius: 3px !important;
}

#onboardRoot [class*="bg-emerald-600"],
#onboardRoot #finishBtn,
#onboardRoot .step-badge.active {
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border-color: var(--redline-line-strong) !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong) !important;
}

#onboardRoot [class*="text-emerald-"] {
  color: var(--redline-red) !important;
}

#onboardRoot input:not([type="radio"]),
#onboardRoot select,
#onboardRoot textarea,
#onboardRoot #wizCurrencyPickerBtn {
  color: var(--redline-ink) !important;
  background: #fff !important;
  border: 1px solid #8c8c87 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Public menu ---------------------------------------------------------- */
#htmlRoot {
  /* Keep the redline structure while allowing each public-menu preset to
     provide its own color tokens. */
  --primary: var(--menu-theme-primary) !important;
  --bg-color: var(--menu-theme-bg) !important;
  --card-bg: var(--menu-theme-card) !important;
  --text-color: var(--menu-theme-text) !important;
  --muted-color: var(--menu-theme-muted) !important;
  --border-color: var(--menu-theme-border) !important;
  --pill-bg: color-mix(in srgb, var(--menu-theme-primary) 12%, var(--menu-theme-bg)) !important;
  --redline-red: var(--menu-theme-primary) !important;
  --redline-red-dark: color-mix(in srgb, var(--menu-theme-primary) 78%, #000) !important;
  --redline-red-soft: color-mix(in srgb, var(--menu-theme-primary) 12%, var(--menu-theme-bg)) !important;
  --redline-ink: var(--menu-theme-text) !important;
  --redline-muted: var(--menu-theme-muted) !important;
  --redline-canvas: var(--menu-theme-bg) !important;
  --redline-surface: var(--menu-theme-card) !important;
  --redline-line: var(--menu-theme-border) !important;
  --redline-line-strong: color-mix(in srgb, var(--menu-theme-text) 72%, var(--menu-theme-border)) !important;
  --redline-shadow: 4px 4px 0 color-mix(in srgb, var(--menu-theme-text) 85%, transparent) !important;
}

#htmlRoot body {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.menu-header {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  background-image: none !important;
  border-bottom: 2px solid var(--redline-line-strong) !important;
  box-shadow: none !important;
}

.menu-header > .max-w-3xl {
  width: 100% !important;
}

.menu-header > .max-w-3xl > div {
  background: var(--card-bg) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: 6px 6px 0 var(--redline-red) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.menu-header img,
.menu-header .w-20.h-20,
.menu-header .sm\:w-24.sm\:h-24 {
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.menu-header button,
.menu-header #branchStatusBadge {
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.menu-header #branchStatusBadge {
  color: #fff !important;
  background: var(--redline-red) !important;
}

.menu-header #branchStatusBadge > span:first-child {
  background: #fff !important;
}

.menu-header button:nth-of-type(2) {
  color: #fff !important;
  background: var(--redline-red) !important;
}

.menu-header [class*="backdrop-blur"],
.menu-header [class*="bg-white/"] {
  background: var(--card-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#categoryNav {
  background: var(--card-bg) !important;
  border-block: 1px solid var(--redline-line-strong) !important;
  box-shadow: none !important;
}

.menu-header + #tableWelcomeBanner + .sticky,
#tableWelcomeBanner + .sticky {
  top: 0 !important;
  width: min(72rem, calc(100% - 2rem)) !important;
  background: var(--redline-canvas) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: 4px 4px 0 var(--redline-red) !important;
  overflow: hidden;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.menu-header + #tableWelcomeBanner + .sticky > .max-w-3xl,
#tableWelcomeBanner + .sticky > .max-w-3xl {
  width: 100% !important;
  max-width: none !important;
}

.menu-header + #tableWelcomeBanner + .sticky #itemSearchInput,
#tableWelcomeBanner + .sticky #itemSearchInput {
  min-height: 3rem !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

#categoryNav .cat-tab,
#searchFilterChips .dietary-chip {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  opacity: 1 !important;
  border-radius: 2px !important;
  border: 1px solid var(--redline-line) !important;
}

#categoryNav .cat-tab.active,
#searchFilterChips .dietary-chip.active {
  color: #fff !important;
  background: var(--redline-red) !important;
  border-color: var(--redline-line-strong) !important;
}

#categoryNav .cat-tab:not(.active):hover,
#searchFilterChips .dietary-chip:not(.active):hover {
  color: var(--redline-red) !important;
  background: var(--redline-red-soft) !important;
  border-color: var(--redline-red) !important;
}

.menu-item-card {
  min-height: 13rem;
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  background-image: none !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: none !important;
  transform: none !important;
}

#publicMenuMain {
  width: 100% !important;
  max-width: 72rem !important;
}

@media (min-width: 720px) {
  .menu-items-grid,
  #searchResultsGrid,
  #favoritesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.category-section > div:first-child > div > div:first-child {
  color: #fff !important;
  background: var(--redline-red) !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.menu-item-card::before {
  width: 4px !important;
  border-radius: 0 !important;
  background: var(--redline-red) !important;
}

.menu-item-card .fav-btn,
.menu-item-card .fav-btn + button {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
}

.menu-item-card:hover {
  border-color: var(--redline-red) !important;
  box-shadow: 4px 4px 0 var(--redline-red) !important;
  transform: translate(-2px, -2px) !important;
}

[dir="rtl"] .menu-item-card:hover {
  transform: translate(2px, -2px) !important;
}

.menu-item-card img,
.menu-item-card .w-20.h-20 {
  border-radius: 3px !important;
  border: 1px solid var(--redline-line-strong) !important;
}

#cartBar,
#mobileCartBar,
#floatingCartBar {
  background: var(--redline-red) !important;
  background-image: none !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
  box-shadow: 4px 4px 0 var(--redline-line-strong) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#itemDetailsModal > div,
#cartModal > div,
#checkoutModal > div,
#orderTrackingModal > div {
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: var(--redline-shadow) !important;
}

/* Public menu item modal ----------------------------------------------- */
.swal2-popup.menu-item-modal .menu-modal-option-group {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
}

.swal2-popup.menu-item-modal .menu-modal-variant-option,
.swal2-popup.menu-item-modal .menu-modal-modifier-option {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--redline-line) !important;
  border-radius: 3px !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.swal2-popup.menu-item-modal .menu-modal-variant-option:hover,
.swal2-popup.menu-item-modal .menu-modal-modifier-option:hover {
  background: var(--redline-red-soft) !important;
  border-color: var(--redline-red) !important;
}

.swal2-popup.menu-item-modal .menu-modal-variant-option.is-selected,
.swal2-popup.menu-item-modal .menu-modal-modifier-option:has(input:checked) {
  color: #fff !important;
  background: var(--redline-red) !important;
  border-color: var(--redline-line-strong) !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong);
}

.swal2-popup.menu-item-modal .menu-modal-choice-input {
  accent-color: var(--redline-red);
}

.swal2-popup.menu-item-modal .menu-modal-variant-option.is-selected .menu-modal-choice-input,
.swal2-popup.menu-item-modal .menu-modal-modifier-option:has(input:checked) .menu-modal-choice-input {
  accent-color: #fff;
}

.swal2-popup.menu-item-modal .menu-modal-option-price {
  color: var(--redline-red) !important;
}

.swal2-popup.menu-item-modal .menu-modal-variant-option.is-selected .menu-modal-option-price,
.swal2-popup.menu-item-modal .menu-modal-modifier-option:has(input:checked) .menu-modal-option-price {
  color: #fff !important;
}

.swal2-popup.menu-item-modal .menu-modal-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--redline-line);
  border-radius: 2px !important;
  line-height: 1.2;
}

.swal2-popup.menu-item-modal .menu-modal-badge--required {
  color: #fff !important;
  background: var(--redline-red) !important;
  border-color: var(--redline-line-strong) !important;
}

.swal2-popup.menu-item-modal .menu-modal-badge--optional {
  color: var(--redline-muted) !important;
  background: var(--redline-canvas) !important;
}

/* Customer review modal ------------------------------------------------ */
#customerReviewModal > .theme-dialog-surface {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: var(--redline-shadow) !important;
}

#customerReviewModal .review-modal-icon {
  color: var(--redline-red) !important;
  background: var(--redline-red-soft) !important;
  border: 1px solid var(--redline-red) !important;
  border-radius: 2px !important;
}

#customerReviewModal .review-modal-icon svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

#customerReviewModal .review-star {
  color: var(--redline-line) !important;
  border-radius: 2px !important;
}

#customerReviewModal .review-star.is-selected {
  color: var(--redline-red) !important;
}

#customerReviewModal .review-star:hover,
#customerReviewModal .review-star.is-selected:hover {
  color: var(--redline-red-dark) !important;
}

#customerReviewModal .review-star-icon {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

#customerReviewModal .review-rating-label {
  color: var(--redline-red) !important;
}

#customerReviewModal .review-rating-banner {
  color: var(--redline-ink) !important;
  background: var(--redline-red-soft) !important;
  border: 1px solid var(--redline-red) !important;
  border-radius: var(--redline-radius) !important;
}

#customerReviewModal .review-rating-banner > svg {
  color: var(--redline-red) !important;
  stroke: currentColor !important;
}

#customerReviewModal .feedback-tag-chip {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--redline-line) !important;
  border-radius: 3px !important;
}

#customerReviewModal .feedback-tag-chip:hover {
  color: var(--redline-red) !important;
  background: var(--redline-red-soft) !important;
  border-color: var(--redline-red) !important;
}

#customerReviewModal .feedback-tag-chip.is-selected {
  color: #fff !important;
  background: var(--redline-red) !important;
  border-color: var(--redline-line-strong) !important;
  box-shadow: 2px 2px 0 var(--redline-line-strong);
}

#customerReviewModal .feedback-tag-chip svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

#customerReviewModal #customerReviewComment {
  color: var(--text-color) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
}

#customerReviewModal #customerReviewComment:focus {
  border-color: var(--redline-red) !important;
  outline: 2px solid var(--redline-red-soft) !important;
}

#customerReviewModal .review-submit-btn {
  color: #fff !important;
  background: var(--redline-red) !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: 3px 3px 0 var(--redline-line-strong) !important;
}

#customerReviewModal .review-submit-btn:hover {
  background: var(--redline-red-dark) !important;
}

@media (max-width: 640px) {
  .menu-header > .max-w-3xl > div,
  .menu-header + #tableWelcomeBanner + .sticky,
  #tableWelcomeBanner + .sticky,
  .menu-item-card {
    border-radius: 2px !important;
  }

  .menu-header + #tableWelcomeBanner + .sticky,
  #tableWelcomeBanner + .sticky {
    width: calc(100% - 0.75rem) !important;
  }
}

@media (max-width: 520px) {
  #authHtmlRoot body > header {
    width: calc(100% + 1.6rem) !important;
    margin-inline: -0.8rem !important;
  }
}

/* Kitchen display ------------------------------------------------------ */
html.dark,
html.dark body.bg-slate-950 {
  color: var(--redline-ink) !important;
  background: var(--redline-canvas) !important;
}

html.dark body > header {
  color: var(--redline-ink) !important;
  background: #fff !important;
  border-bottom: 2px solid var(--redline-line-strong) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.dark body > header h1,
html.dark body > header .text-white,
html.dark body > header .text-slate-100,
html.dark body > header .text-slate-300,
html.dark body > header .text-slate-400 {
  color: var(--redline-ink) !important;
}

html.dark body > header > div > div:first-child > div:first-child {
  color: #fff !important;
  background: var(--redline-red) !important;
  border: 2px solid var(--redline-line-strong) !important;
}

html.dark body > header .bg-amber-500,
html.dark body > header .bg-amber-500\/10,
html.dark body > header .bg-sky-500\/10,
html.dark body > header .bg-emerald-500\/10 {
  color: var(--redline-red) !important;
  background: #fff !important;
  border-color: var(--redline-line-strong) !important;
}

html.dark body > header .text-amber-400,
html.dark body > header .text-sky-400,
html.dark body > header .text-emerald-400 {
  color: var(--redline-red) !important;
}

html.dark body > header .rounded-2xl,
html.dark body > header .rounded-xl,
html.dark body > header .rounded-lg {
  border-radius: 2px !important;
}

html.dark body > header .bg-slate-950,
html.dark body > header .bg-slate-950\/80,
html.dark body > header .bg-slate-950\/90 {
  background: #f1f1ee !important;
  border-color: var(--redline-line-strong) !important;
}

html.dark .kds-filter-btn {
  color: var(--redline-ink) !important;
  border-radius: 2px !important;
}

html.dark .kds-filter-btn.bg-amber-500 {
  color: #fff !important;
  background: var(--redline-red) !important;
}

html.dark #ticketsGrid > div {
  color: var(--redline-ink) !important;
  background: #fff !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: 4px 4px 0 var(--redline-line-strong) !important;
}

html.dark #ticketsGrid .bg-slate-950\/60,
html.dark #ticketsGrid .bg-slate-900,
html.dark #ticketsGrid .bg-slate-800 {
  background: #f1f1ee !important;
  border-color: #c8c8c2 !important;
}

html.dark #ticketsGrid .bg-amber-500\/10,
html.dark #ticketsGrid .bg-amber-500\/15,
html.dark #ticketsGrid .bg-amber-500\/20,
html.dark #ticketsGrid .bg-sky-500\/15,
html.dark #ticketsGrid .bg-purple-500\/15 {
  color: var(--redline-red) !important;
  background: var(--redline-red-soft) !important;
  border-color: #ef9aa2 !important;
}

html.dark #ticketsGrid .text-amber-300,
html.dark #ticketsGrid .text-amber-400,
html.dark #ticketsGrid .text-sky-400,
html.dark #ticketsGrid .text-purple-400,
html.dark #ticketsGrid .text-emerald-400,
html.dark #ticketsGrid .text-red-400 {
  color: var(--redline-red) !important;
}

html.dark #ticketsGrid [data-kds-elapsed-time],
html.dark #ticketsGrid .rounded-xl,
html.dark #ticketsGrid .rounded-lg,
html.dark #ticketsGrid .rounded-full {
  border-radius: 2px !important;
}

html.dark #ticketsGrid > div > div:last-child button {
  color: #fff !important;
  background: var(--redline-red) !important;
  background-image: none !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 var(--redline-line-strong) !important;
}

html.dark #ticketsGrid .text-white,
html.dark #ticketsGrid .text-slate-100,
html.dark #ticketsGrid .text-slate-200,
html.dark #ticketsGrid .text-slate-300,
html.dark #ticketsGrid .text-slate-400 {
  color: var(--redline-ink) !important;
}

#kdsPinModal {
  background: rgba(23, 23, 23, 0.82) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#kdsPinModal > div {
  color: var(--redline-ink) !important;
  background: #fff !important;
  border: 2px solid var(--redline-line-strong) !important;
  border-radius: var(--redline-radius) !important;
  box-shadow: var(--redline-shadow) !important;
}

#kdsPinModal h2,
#kdsPinModal .text-white,
#kdsPinModal .text-slate-400,
#kdsPinModal .text-slate-500 {
  color: var(--redline-ink) !important;
}

#kdsPinModal input,
#kdsPinModal button {
  border: 1px solid var(--redline-line-strong) !important;
  border-radius: 3px !important;
}

#kdsPinModal input {
  color: var(--redline-red) !important;
  background: #fff !important;
}

@media (max-width: 820px) {
  .auth-shell {
    grid-template-columns: 1fr !important;
    box-shadow: 5px 5px 0 var(--redline-line-strong) !important;
  }

  .auth-story {
    min-height: auto !important;
    padding: 1.5rem !important;
    border-inline-end: 0 !important;
    border-bottom: 2px solid var(--redline-line-strong) !important;
  }

  .auth-story-proof {
    display: none !important;
  }

  .auth-story h2 {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 768px) {
  #dashHtmlRoot #appSidebar {
    width: min(19rem, calc(100vw - 1rem)) !important;
    border: 2px solid var(--redline-line-strong) !important;
    border-radius: 0 !important;
    box-shadow: 6px 0 0 rgba(23, 23, 23, 0.22) !important;
  }

  #spaMainContainer {
    padding: 0.75rem !important;
  }

  #appTopbar {
    min-height: 4rem;
  }
}

/* High-Density Live Orders Kanban & Collapsible Columns */
#ordersKanbanContainer.is-compact-mode .order-card-item:not(.is-expanded) .order-card-details {
  display: none !important;
}

#ordersKanbanContainer.is-compact-mode .order-card-item:not(.is-expanded) {
  padding: 0.625rem 0.75rem !important;
}

.order-card-item.is-expanded .order-expand-chevron i,
.order-card-item.is-expanded .order-expand-chevron svg {
  transform: rotate(180deg);
}

.kanban-column.kanban-col-collapsed {
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
  width: 3.5rem !important;
  flex: 0 0 3.5rem !important;
  padding: 0 !important;
}

.kanban-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.order-sla-warning {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) !important;
}

.order-sla-danger {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.45) !important;
  animation: redlineSlaPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes redlineSlaPulse {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
  }
}

.order-status-select {
  cursor: pointer;
  outline: none;
  background-image: none !important;
  line-height: 1.25;
}

.order-status-select:hover {
  filter: brightness(0.97);
}

.order-status-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}