/* =========================================================
   CAFEKIOSK UNIFORM THEME
   Shared visual language for Admin, POS, Kiosk and Auth.
   Reference: warm cream canvas + white sidebar + brown text
   + green active states + compact rounded profile card.
========================================================= */

:root {
  --cku-bg: #f5ead8;
  --cku-bg-soft: #faf3e7;
  --cku-panel: #fffaf1;
  --cku-panel-strong: #fffdfa;
  --cku-panel-muted: #f8efdf;
  --cku-brown: #4b2f18;
  --cku-brown-2: #6f4e37;
  --cku-text: #59483b;
  --cku-muted: #8d7964;
  --cku-line: rgba(92, 65, 42, 0.24);
  --cku-line-soft: rgba(92, 65, 42, 0.13);
  --cku-green: #4c956f;
  --cku-green-dark: #3e7d5c;
  --cku-green-soft: rgba(76, 149, 111, 0.13);
  --cku-danger: #c9665f;
  --cku-sidebar-width: 195px;
  --cku-profile-width: 296px;
  --cku-radius: 10px;
  --cku-radius-lg: 14px;
  --cku-shadow: 0 8px 22px rgba(74, 45, 20, 0.07);
}

html,
body {
  font-family: "Segoe UI", Arial, sans-serif;
}

body.uniform-admin,
body.uniform-pos,
body.uniform-kiosk,
body.uniform-auth {
  background: var(--cku-bg) !important;
  color: var(--cku-text);
}

body.uniform-admin,
body.uniform-pos {
  --sidebar-width: var(--cku-sidebar-width);
}

body.uniform-kiosk {
  --primary: var(--cku-bg);
  --secondary: var(--cku-brown-2);
  --accent: var(--cku-green);
}

/* ---------------------------------------------------------
   SHARED SIDEBAR SYSTEM
--------------------------------------------------------- */
body.uniform-admin .staff-sidebar,
body.uniform-admin .sidebar.admin-sidebar,
body.uniform-admin .ck-sidebar,
body.uniform-pos .sidebar {
  width: var(--cku-sidebar-width) !important;
  min-width: var(--cku-sidebar-width) !important;
  height: 100dvh !important;
  padding: 18px 12px 16px !important;
  background: var(--cku-panel-strong) !important;
  border: 0 !important;
  border-right: 1px solid var(--cku-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.uniform-admin .brand,
body.uniform-admin .logo,
body.uniform-admin .ck-brand,
body.uniform-pos .logo {
  width: 100% !important;
  height: 110px !important;
  margin: 0 0 2px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

body.uniform-admin .brand img,
body.uniform-admin .logo img,
body.uniform-admin .ck-brand img,
body.uniform-pos .logo img {
  width: 82px !important;
  height: 82px !important;
  max-width: 82px !important;
  object-fit: contain !important;
  margin: 0 !important;
  filter: none !important;
}

body.uniform-admin .staff-label,
body.uniform-admin .ck-side-label,
body.uniform-pos .staff-label {
  margin: 4px 7px 10px !important;
  color: var(--cku-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
}

body.uniform-admin .staff-nav,
body.uniform-admin .staff-navigation,
body.uniform-admin .ck-nav,
body.uniform-pos .staff-navigation {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 0 0 10px !important;
  margin: 0 !important;
}

body.uniform-admin .staff-nav-link,
body.uniform-admin .staff-nav-button,
body.uniform-admin .ck-nav > a,
body.uniform-pos .staff-nav-button {
  width: 100% !important;
  min-height: 41px !important;
  padding: 7px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--cku-brown) !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

body.uniform-admin .staff-nav-link:hover,
body.uniform-admin .staff-nav-button:hover,
body.uniform-admin .ck-nav > a:hover,
body.uniform-pos .staff-nav-button:hover {
  background: #f7efe3 !important;
  border-color: transparent !important;
  color: var(--cku-brown) !important;
}

body.uniform-admin .staff-nav-link.active,
body.uniform-admin .staff-nav-button.active,
body.uniform-admin .ck-nav > a.active,
body.uniform-pos .staff-nav-button.active {
  background: var(--cku-green) !important;
  border-color: var(--cku-green) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(63, 128, 95, .18) !important;
}

body.uniform-admin .staff-nav-icon,
body.uniform-admin .ck-nav .ico,
body.uniform-pos .staff-nav-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: 0 0 22px !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  font-size: 0 !important;
}

body.uniform-admin .staff-nav-icon svg,
body.uniform-admin .ck-nav .ico svg,
body.uniform-pos .staff-nav-icon svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.uniform-admin .ck-nav .label,
body.uniform-admin .staff-nav-link > span:last-child,
body.uniform-admin .staff-nav-button > span:last-child,
body.uniform-pos .staff-nav-button > span:last-child {
  min-width: 0 !important;
  line-height: 1.15 !important;
}

body.uniform-admin .staff-sidebar::-webkit-scrollbar,
body.uniform-admin .sidebar.admin-sidebar::-webkit-scrollbar,
body.uniform-admin .ck-sidebar::-webkit-scrollbar,
body.uniform-pos .sidebar::-webkit-scrollbar {
  width: 4px;
}

body.uniform-admin .staff-sidebar::-webkit-scrollbar-thumb,
body.uniform-admin .sidebar.admin-sidebar::-webkit-scrollbar-thumb,
body.uniform-admin .ck-sidebar::-webkit-scrollbar-thumb,
body.uniform-pos .sidebar::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .14);
  border-radius: 999px;
}

/* ---------------------------------------------------------
   PROFILE CARD — same UI across Admin and Staff pages
--------------------------------------------------------- */
body.uniform-admin .admin-profile-card,
body.uniform-admin .admin-profile,
body.uniform-admin .ck-profile,
body.uniform-admin .staff-profile,
body.uniform-pos .staff-profile,
body.uniform-pos .uniform-pos-profile {
  width: var(--cku-profile-width) !important;
  max-width: 100% !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 0 13px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset !important;
  color: var(--cku-brown) !important;
  text-align: left !important;
  overflow: visible !important;
}

body.uniform-admin .admin-avatar,
body.uniform-admin .profile-avatar,
body.uniform-admin .profile-icon,
body.uniform-admin .uniform-profile-avatar,
body.uniform-pos .profile-icon,
body.uniform-pos .uniform-profile-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #f7ecd8 !important;
  border: 1px solid rgba(111,78,55,.11) !important;
  color: var(--cku-brown-2) !important;
  position: relative !important;
}

body.uniform-admin .admin-avatar svg,
body.uniform-admin .profile-avatar svg,
body.uniform-admin .uniform-profile-avatar svg,
body.uniform-pos .uniform-profile-avatar svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.uniform-admin .admin-copy,
body.uniform-admin .profile-copy,
body.uniform-admin .uniform-profile-copy,
body.uniform-pos .uniform-profile-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}

body.uniform-admin .admin-copy strong,
body.uniform-admin .profile-copy strong,
body.uniform-admin .uniform-profile-copy strong,
body.uniform-pos .uniform-profile-copy strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #3b2413 !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
}

body.uniform-admin .admin-copy small,
body.uniform-admin .profile-copy span,
body.uniform-admin .profile-copy small,
body.uniform-admin .uniform-profile-copy small,
body.uniform-pos .uniform-profile-copy small {
  display: block !important;
  color: var(--cku-muted) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

body.uniform-admin .admin-caret,
body.uniform-admin .uniform-profile-caret,
body.uniform-pos .uniform-profile-caret {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cku-brown-2) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.uniform-admin .admin-caret span {
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) translateY(-2px) !important;
}

/* old pseudo avatar in queue/order monitor should not double-render */
body.uniform-admin .profile-icon::before,
body.uniform-admin .profile-icon::after,
body.uniform-pos .profile-icon::before,
body.uniform-pos .profile-icon::after,
body.uniform-admin .staff-profile::after,
body.uniform-pos .staff-profile::after {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   SHARED ADMIN SURFACES
--------------------------------------------------------- */
body.uniform-admin .page-heading-card,
body.uniform-admin .monitor-header,
body.uniform-admin .ck-topbar,
body.uniform-admin .page-title-box,
body.uniform-admin .category-panel,
body.uniform-admin .product-panel,
body.uniform-admin .inventory-panel,
body.uniform-admin .panel-card,
body.uniform-admin .ck-card,
body.uniform-admin .live-order-card,
body.uniform-admin .order-detail,
body.uniform-pos .page-title-box,
body.uniform-pos .live-order-card,
body.uniform-pos .order-detail,
body.uniform-pos .cart-panel,
body.uniform-pos .menu-search,
body.uniform-pos .category-header {
  border-color: var(--cku-line) !important;
}

body.uniform-admin .page-heading-card,
body.uniform-admin .monitor-header,
body.uniform-admin .ck-topbar,
body.uniform-admin .page-title-box,
body.uniform-admin .category-panel,
body.uniform-admin .product-panel,
body.uniform-admin .inventory-panel,
body.uniform-admin .panel-card,
body.uniform-admin .ck-card,
body.uniform-admin .live-order-card,
body.uniform-admin .order-detail,
body.uniform-pos .page-title-box,
body.uniform-pos .live-order-card,
body.uniform-pos .order-detail {
  background: rgba(255, 250, 241, .94) !important;
  border-radius: var(--cku-radius) !important;
  box-shadow: none !important;
}

body.uniform-admin h1,
body.uniform-admin h2,
body.uniform-pos h1,
body.uniform-pos h2,
body.uniform-kiosk h1,
body.uniform-kiosk h2,
body.uniform-auth h1 {
  color: var(--cku-brown) !important;
}

body.uniform-admin .page-kicker,
body.uniform-admin .section-kicker,
body.uniform-admin .eyebrow,
body.uniform-admin .card-kicker,
body.uniform-admin .ck-side-label,
body.uniform-pos .section-caption {
  color: #957553 !important;
}

/* Admin extension pages get the same header proportions as the other pages */
body.uniform-admin .ck-shell {
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: var(--cku-sidebar-width) minmax(0, 1fr) !important;
  background: var(--cku-bg) !important;
}

body.uniform-admin .ck-main {
  min-width: 0 !important;
  padding: 28px 24px 24px !important;
  background: transparent !important;
}

body.uniform-admin .ck-topbar {
  min-height: 74px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) var(--cku-profile-width) !important;
  align-items: center !important;
  gap: 24px !important;
  background: transparent !important;
  border: 0 !important;
}

body.uniform-admin .ck-title {
  height: 74px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: var(--cku-radius) !important;
}

body.uniform-admin .ck-title h1 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 760 !important;
}

body.uniform-admin .ck-profile {
  justify-self: end !important;
}

body.uniform-admin .ck-btn.primary,
body.uniform-admin .primary-action,
body.uniform-pos .view-btn,
body.uniform-pos .checkout-btn,
body.uniform-pos .place-order-btn,
body.uniform-kiosk .start-btn,
body.uniform-kiosk .confirm-btn,
body.uniform-auth .login-button,
body.uniform-auth .role-button {
  background: var(--cku-green) !important;
  border-color: var(--cku-green) !important;
  color: #fff !important;
}

body.uniform-admin .ck-btn.primary:hover,
body.uniform-admin .primary-action:hover,
body.uniform-pos .view-btn:hover,
body.uniform-pos .checkout-btn:hover,
body.uniform-pos .place-order-btn:hover,
body.uniform-kiosk .start-btn:hover,
body.uniform-kiosk .confirm-btn:hover,
body.uniform-auth .login-button:hover,
body.uniform-auth .role-button:hover {
  background: var(--cku-green-dark) !important;
  border-color: var(--cku-green-dark) !important;
}

/* ---------------------------------------------------------
   POS
--------------------------------------------------------- */
body.uniform-pos .pos-container,
body.uniform-pos .queue-app {
  grid-template-columns: var(--cku-sidebar-width) minmax(0,1fr) var(--summary-width, 320px) !important;
  background: var(--cku-bg) !important;
}

body.uniform-pos .cart-panel,
body.uniform-pos .queue-right {
  background: var(--cku-bg) !important;
}

body.uniform-pos .uniform-pos-profile {
  margin: 0 0 14px !important;
}

body.uniform-pos .staff-profile {
  justify-self: stretch !important;
}

body.uniform-pos .menu-area,
body.uniform-pos .queue-main,
body.uniform-pos .queue-right {
  background: transparent !important;
}

body.uniform-pos .category-button.active,
body.uniform-pos .status-tab.completed,
body.uniform-pos .page-btn.active {
  background: var(--cku-green) !important;
  border-color: var(--cku-green) !important;
}

body.uniform-pos .menu-card,
body.uniform-pos .product-card,
body.uniform-pos .cart-item,
body.uniform-pos .order-card {
  border-color: var(--cku-line-soft) !important;
  border-radius: 12px !important;
}

/* ---------------------------------------------------------
   KIOSK — same palette, card radius, borders and buttons
--------------------------------------------------------- */
body.uniform-kiosk .container,
body.uniform-kiosk .receipt-page {
  background: transparent !important;
}

body.uniform-kiosk.kiosk-home .container {
  max-width: 620px !important;
  padding: 34px 38px 38px !important;
  background: rgba(255,250,241,.78) !important;
  border: 1px solid var(--cku-line-soft) !important;
  border-radius: 22px !important;
  box-shadow: var(--cku-shadow) !important;
}

body.uniform-kiosk.kiosk-home .logo {
  width: 155px !important;
  max-width: 44vw !important;
  margin-bottom: 10px !important;
}

body.uniform-kiosk.kiosk-home .title {
  color: var(--cku-brown) !important;
  font-weight: 800 !important;
}

body.uniform-kiosk.kiosk-home .subtitle {
  color: var(--cku-muted) !important;
}

body.uniform-kiosk .start-btn,
body.uniform-kiosk .confirm-btn {
  border-radius: 13px !important;
  box-shadow: 0 7px 17px rgba(63,128,95,.14) !important;
}

body.uniform-kiosk.kiosk-order-type .option-card {
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body.uniform-kiosk.kiosk-order-type .option-card.selected {
  border: 2px solid var(--cku-green) !important;
  box-shadow: 0 0 0 4px rgba(76,149,111,.11) !important;
}

body.uniform-kiosk.kiosk-menu {
  --sidebar-width: var(--cku-sidebar-width);
  --accent: var(--cku-green);
}

body.uniform-kiosk.kiosk-menu .container {
  grid-template-columns: var(--cku-sidebar-width) minmax(0, 1fr) var(--summary-width, 360px) !important;
  background: var(--cku-bg) !important;
}

body.uniform-kiosk.kiosk-menu .sidebar {
  width: var(--cku-sidebar-width) !important;
  height: 100dvh !important;
  padding: 18px 12px 16px !important;
  background: var(--cku-panel-strong) !important;
  border: 0 !important;
  border-right: 1px solid var(--cku-line-soft) !important;
  border-radius: 0 !important;
  gap: 5px !important;
}

body.uniform-kiosk.kiosk-menu .logo {
  height: 110px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

body.uniform-kiosk.kiosk-menu .logo img {
  width: 82px !important;
  height: 82px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

body.uniform-kiosk.kiosk-menu .nav-btn {
  min-height: 41px !important;
  padding: 7px 12px !important;
  gap: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--cku-brown) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

body.uniform-kiosk.kiosk-menu .nav-btn:hover {
  background: #f7efe3 !important;
}

body.uniform-kiosk.kiosk-menu .nav-btn.active {
  background: var(--cku-green) !important;
  border-color: var(--cku-green) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(63,128,95,.18) !important;
}

body.uniform-kiosk.kiosk-menu .nav-btn img {
  width: 20px !important;
  height: 20px !important;
}

body.uniform-kiosk.kiosk-menu .menu-search,
body.uniform-kiosk.kiosk-menu .product-card,
body.uniform-kiosk.kiosk-menu .menu-card,
body.uniform-kiosk.kiosk-menu .order-summary,
body.uniform-kiosk.kiosk-menu .summary-panel,
body.uniform-kiosk.kiosk-menu .cart-panel {
  background: var(--cku-panel) !important;
  border-color: var(--cku-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.uniform-kiosk.kiosk-receipt .info-box,
body.uniform-kiosk.kiosk-receipt .receipt-card,
body.uniform-kiosk.kiosk-receipt .payment-card,
body.uniform-kiosk.kiosk-receipt .payment-message {
  background: var(--cku-panel) !important;
  border-color: var(--cku-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.uniform-kiosk.kiosk-receipt .logo-circle {
  background: var(--cku-green) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   AUTH
--------------------------------------------------------- */
body.uniform-auth .login-card,
body.uniform-auth .role-card {
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--cku-shadow) !important;
}

body.uniform-auth .line-input-wrap,
body.uniform-auth input {
  border-color: var(--cku-line) !important;
}

/* ---------------------------------------------------------
   RESPONSIVE TUNING
--------------------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --cku-profile-width: 260px;
  }
}

@media (max-width: 1080px) {
  :root {
    --cku-sidebar-width: 172px;
    --cku-profile-width: 230px;
  }

  body.uniform-admin .staff-nav-link,
  body.uniform-admin .staff-nav-button,
  body.uniform-admin .ck-nav > a,
  body.uniform-pos .staff-nav-button,
  body.uniform-kiosk.kiosk-menu .nav-btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 9px !important;
    font-size: 11.5px !important;
  }

  body.uniform-admin .brand img,
  body.uniform-admin .logo img,
  body.uniform-admin .ck-brand img,
  body.uniform-pos .logo img,
  body.uniform-kiosk.kiosk-menu .logo img {
    width: 72px !important;
    height: 72px !important;
  }
}

@media (max-width: 820px) {
  body.uniform-kiosk.kiosk-menu .container {
    grid-template-columns: 150px minmax(0,1fr) !important;
  }

  body.uniform-kiosk.kiosk-menu .sidebar {
    width: 150px !important;
    min-width: 150px !important;
  }
}

/* POS cart has one extra profile row in the unified layout. */
body.uniform-pos .pos-container .cart-panel {
  grid-template-rows: 62px auto minmax(70px, 1fr) auto !important;
  row-gap: 10px !important;
  background: var(--cku-panel-strong) !important;
  border-left: 1px solid var(--cku-line-soft) !important;
}

body.uniform-pos .pos-container .uniform-pos-profile {
  width: 100% !important;
  margin: 0 !important;
}

body.uniform-pos .queue-right,
body.uniform-admin .queue-right {
  grid-template-rows: 62px 40px minmax(0,1fr) !important;
}

/* =========================================================
   CAFEKIOSK UNIFORM THEME V2 — LOCKED APP SHELL
   This section intentionally overrides page-specific layout
   so Admin, POS and Kiosk Menu keep the exact same sidebar,
   top header position, typography and spacing.
========================================================= */

:root {
  --cku-font: "Segoe UI", Arial, Helvetica, sans-serif;
  --cku-sidebar-width: 195px;
  --cku-right-width: 320px;
  --cku-topbar-height: 94px;
  --cku-page-gap: 12px;
  --cku-content-pad-x: 20px;
  --cku-panel: #fffaf1;
  --cku-panel-strong: #fffdfa;
  --cku-bg: #f5ead8;
  --cku-brown: #4b2f18;
  --cku-brown-2: #6f4e37;
  --cku-text: #59483b;
  --cku-muted: #8d7964;
  --cku-line: rgba(92, 65, 42, 0.24);
  --cku-line-soft: rgba(92, 65, 42, 0.13);
  --cku-green: #4c956f;
  --cku-green-dark: #3e7d5c;
  --cku-green-soft: rgba(76, 149, 111, 0.13);
}

/* One font family everywhere. */
body.uniform-admin,
body.uniform-admin *,
body.uniform-pos,
body.uniform-pos *,
body.uniform-kiosk,
body.uniform-kiosk *,
body.uniform-auth,
body.uniform-auth * {
  font-family: var(--cku-font) !important;
  box-sizing: border-box;
}

body.uniform-admin,
body.uniform-pos,
body.uniform-kiosk.kiosk-menu {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--cku-bg) !important;
}

/* ---------- locked shell: header and sidebar never shift ---------- */
body.cku-v2 .cku-shell {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: var(--cku-sidebar-width) minmax(0, 1fr) !important;
  grid-template-rows: var(--cku-topbar-height) minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--cku-bg) !important;
}

body.cku-v2 .cku-shell.cku-has-right {
  grid-template-columns: var(--cku-sidebar-width) minmax(0, 1fr) var(--cku-right-width) !important;
}

body.uniform-kiosk.cku-v2 .cku-shell.cku-has-right {
  --cku-right-width: 360px;
}

body.cku-v2 .cku-sidebar {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  width: var(--cku-sidebar-width) !important;
  min-width: var(--cku-sidebar-width) !important;
  max-width: var(--cku-sidebar-width) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--cku-panel-strong) !important;
  border: 0 !important;
  border-right: 1px solid var(--cku-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 30 !important;
}

body.cku-v2 .cku-topbar {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  height: var(--cku-topbar-height) !important;
  padding: 12px var(--cku-content-pad-x) 10px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  background: var(--cku-bg) !important;
  border: 0 !important;
  position: relative !important;
  top: auto !important;
  z-index: 25 !important;
}

body.cku-v2 .cku-title-card {
  min-width: 0 !important;
  min-height: 72px !important;
  flex: 1 1 auto !important;
  padding: 11px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.cku-v2 .cku-title-kicker {
  margin: 0 0 3px !important;
  color: #957553 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

body.cku-v2 .cku-title-card h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cku-brown) !important;
  font-size: 23px !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
  letter-spacing: -.01em !important;
}

body.cku-v2 .cku-title-card p {
  margin: 4px 0 0 !important;
  max-width: 780px !important;
  color: var(--cku-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.cku-v2 .cku-header-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.cku-v2 .cku-header-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.cku-v2 .cku-header-tools:empty {
  display: none !important;
}

body.cku-v2 .cku-header-tools > * {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body.cku-v2 .cku-header-tools .connection-pill,
body.cku-v2 .cku-header-tools .catalog-state,
body.cku-v2 .cku-header-tools .live-indicator {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 10px !important;
  color: var(--cku-brown-2) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

body.cku-v2 .cku-header-tools button,
body.cku-v2 .cku-header-tools .refresh-btn {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ---------- one profile card size and typography ---------- */
body.cku-v2 .cku-profile-card {
  width: 296px !important;
  min-width: 296px !important;
  max-width: 296px !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 13px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 10px !important;
  color: var(--cku-brown) !important;
  box-shadow: none !important;
}

body.cku-v2 .cku-profile-avatar {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(111,78,55,.13) !important;
  border-radius: 50% !important;
  background: #f8edd9 !important;
  color: var(--cku-brown-2) !important;
}

body.cku-v2 .cku-profile-avatar svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.cku-v2 .cku-profile-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.cku-v2 .cku-profile-copy strong {
  margin: 0 !important;
  color: #3b2413 !important;
  font-size: 12.5px !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.cku-v2 .cku-profile-copy small {
  color: var(--cku-muted) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

body.cku-v2 .cku-profile-caret {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--cku-brown-2) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* ---------- content starts at the same Y position on every page ---------- */
body.cku-v2 .cku-content {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 var(--cku-content-pad-x) 20px !important;
  background: transparent !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative !important;
  inset: auto !important;
}

body.cku-v2 .cku-shell.cku-has-right > .cku-content {
  grid-column: 2 !important;
  padding-right: 10px !important;
}

body.cku-v2 .cku-right {
  grid-column: 3 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 var(--cku-content-pad-x) 20px 10px !important;
  background: transparent !important;
  border: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative !important;
  inset: auto !important;
}

/* Old page-specific headers/profiles are replaced by the shared locked header. */
body.cku-v2 .cku-original-header,
body.cku-v2 .cku-right > .staff-profile,
body.cku-v2 .cku-right > .uniform-pos-profile {
  display: none !important;
}

/* Queue right panels no longer reserve a row for the old profile. */
body.cku-v2 .queue-right.cku-right {
  display: grid !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 12px !important;
}

body.cku-v2 .cart-panel.cku-right {
  display: grid !important;
  grid-template-rows: auto minmax(70px, 1fr) auto !important;
  row-gap: 10px !important;
}

body.uniform-kiosk.cku-v2 .order-summary.cku-right {
  display: flex !important;
  flex-direction: column !important;
}

/* ---------- exact same sidebar visual rules in Admin, POS, Kiosk ---------- */
body.cku-v2 .cku-sidebar .brand,
body.cku-v2 .cku-sidebar .logo,
body.cku-v2 .cku-sidebar .ck-brand {
  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

body.cku-v2 .cku-sidebar .brand img,
body.cku-v2 .cku-sidebar .logo img,
body.cku-v2 .cku-sidebar .ck-brand img {
  width: 82px !important;
  height: 82px !important;
  max-width: 82px !important;
  max-height: 82px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

body.cku-v2 .cku-sidebar .staff-label,
body.cku-v2 .cku-sidebar .ck-side-label,
body.cku-v2 .cku-sidebar .cku-kiosk-label {
  margin: 0 7px 10px !important;
  padding: 0 !important;
  color: #8c6c4d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

body.cku-v2 .cku-sidebar .staff-nav,
body.cku-v2 .cku-sidebar .staff-navigation,
body.cku-v2 .cku-sidebar .ck-nav {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

body.cku-v2 .cku-sidebar .staff-nav-link,
body.cku-v2 .cku-sidebar .staff-nav-button,
body.cku-v2 .cku-sidebar .ck-nav > a,
body.uniform-kiosk.cku-v2 .cku-sidebar .nav-btn {
  width: 100% !important;
  min-height: 41px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--cku-brown) !important;
  text-decoration: none !important;
  text-align: left !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.cku-v2 .cku-sidebar .staff-nav-link:hover,
body.cku-v2 .cku-sidebar .staff-nav-button:hover,
body.cku-v2 .cku-sidebar .ck-nav > a:hover,
body.uniform-kiosk.cku-v2 .cku-sidebar .nav-btn:hover {
  background: #f7efe3 !important;
  border-color: transparent !important;
}

body.cku-v2 .cku-sidebar .staff-nav-link.active,
body.cku-v2 .cku-sidebar .staff-nav-button.active,
body.cku-v2 .cku-sidebar .ck-nav > a.active,
body.uniform-kiosk.cku-v2 .cku-sidebar .nav-btn.active {
  background: var(--cku-green) !important;
  border-color: var(--cku-green) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(63,128,95,.18) !important;
}

body.uniform-kiosk.cku-v2 .cku-sidebar .nav-btn img,
body.cku-v2 .cku-sidebar .staff-nav-icon,
body.cku-v2 .cku-sidebar .ico {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: 0 0 22px !important;
  object-fit: contain !important;
}

/* ---------- common typography ---------- */
body.cku-v2 h1,
body.cku-v2 h2,
body.cku-v2 h3,
body.cku-v2 h4,
body.uniform-kiosk h1,
body.uniform-kiosk h2,
body.uniform-kiosk h3 {
  font-family: var(--cku-font) !important;
  color: var(--cku-brown) !important;
}

body.cku-v2 h2 { font-size: 17px !important; font-weight: 730 !important; line-height: 1.2 !important; }
body.cku-v2 h3 { font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; }
body.cku-v2 p,
body.cku-v2 td,
body.cku-v2 th,
body.cku-v2 label,
body.cku-v2 input,
body.cku-v2 select,
body.cku-v2 textarea,
body.cku-v2 button { font-family: var(--cku-font) !important; }

/* ---------- shared controls/cards ---------- */
body.cku-v2 input,
body.cku-v2 select,
body.cku-v2 textarea {
  border-color: var(--cku-line) !important;
  border-radius: 9px !important;
  color: var(--cku-text) !important;
  background: #fffdf8 !important;
}

body.cku-v2 button,
body.cku-v2 .ck-btn,
body.cku-v2 .primary-action,
body.cku-v2 .outline-action {
  border-radius: 9px !important;
}

body.cku-v2 .ck-card,
body.cku-v2 .dashboard-card,
body.cku-v2 .status-card,
body.cku-v2 .category-panel,
body.cku-v2 .product-panel,
body.cku-v2 .inventory-panel,
body.cku-v2 .panel-card,
body.cku-v2 .live-order-card,
body.cku-v2 .order-detail,
body.cku-v2 .menu-search,
body.cku-v2 .menu-card,
body.cku-v2 .product-card,
body.cku-v2 .order-summary,
body.cku-v2 .cart-panel {
  border-color: var(--cku-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Extension pages previously had different content padding. */
body.uniform-admin.cku-v2 .ck-main,
body.uniform-admin.cku-v2 .page-main,
body.uniform-admin.cku-v2 .monitor-main,
body.uniform-admin.cku-v2 .menu-main,
body.uniform-admin.cku-v2 .inventory-main,
body.uniform-admin.cku-v2 .queue-main,
body.uniform-pos.cku-v2 .menu-area,
body.uniform-pos.cku-v2 .queue-main,
body.uniform-kiosk.cku-v2.kiosk-menu .menu-area {
  margin: 0 !important;
  padding-top: 0 !important;
}

/* POS and Kiosk internal category headers now use the same scale. */
body.uniform-pos.cku-v2 .category-header,
body.uniform-kiosk.cku-v2.kiosk-menu .category-header {
  min-height: 54px !important;
  margin: 0 0 12px !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.uniform-pos.cku-v2 .category-header img,
body.uniform-kiosk.cku-v2.kiosk-menu .category-header img {
  width: 34px !important;
  height: 34px !important;
}

body.uniform-pos.cku-v2 .category-header h1,
body.uniform-kiosk.cku-v2.kiosk-menu .category-header h1 {
  margin: 0 !important;
  font-size: 21px !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
}

/* Kiosk non-menu pages still share the exact font, colors and card language. */
body.uniform-kiosk:not(.kiosk-menu) {
  font-family: var(--cku-font) !important;
  background: var(--cku-bg) !important;
  color: var(--cku-text) !important;
}

body.uniform-kiosk:not(.kiosk-menu) button,
body.uniform-kiosk:not(.kiosk-menu) input,
body.uniform-kiosk:not(.kiosk-menu) select,
body.uniform-kiosk:not(.kiosk-menu) textarea {
  font-family: var(--cku-font) !important;
}

/* Desktop layout stays fixed so navigating pages does not make the shell jump. */
@media (min-width: 1001px) {
  body.cku-v2 {
    --cku-sidebar-width: 195px;
  }
}

@media (max-width: 1180px) {
  body.cku-v2 .cku-profile-card {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
  }
  body.cku-v2 .cku-title-card p { display: none !important; }
}

@media (max-width: 1000px) {
  body.cku-v2 { --cku-sidebar-width: 168px; --cku-content-pad-x: 14px; }
  body.cku-v2 .cku-profile-card { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
  body.cku-v2 .cku-header-tools { display: none !important; }
}

/* =========================================================
   CAFEKIOSK UNIFORM THEME V3 — LAYOUT REPAIR
   - Compact header with no clipped description line
   - Restored order queue/inventory grid rows
   - Scrollable summaries and tables
   - Better POS/Kiosk checkout spacing
========================================================= */

body.cku-v2 {
  --cku-topbar-height: 82px;
}

body.cku-v2 .cku-topbar {
  height: var(--cku-topbar-height) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body.cku-v2 .cku-title-card {
  min-height: 62px !important;
  height: 62px !important;
  padding: 9px 18px !important;
}

body.cku-v2 .cku-title-card p {
  display: none !important;
}

body.cku-v2 .cku-title-kicker {
  margin-bottom: 4px !important;
}

body.cku-v2 .cku-title-card h1 {
  font-size: 22px !important;
  line-height: 1.05 !important;
}

body.cku-v2 .cku-profile-card {
  min-height: 62px !important;
  height: 62px !important;
}

/* ---------------------------------------------------------
   DASHBOARD GRAPH: use the full height of the sales card
--------------------------------------------------------- */
body.uniform-admin.cku-v2 .dashboard-content-grid {
  align-items: stretch !important;
}

body.uniform-admin.cku-v2 .sales-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 360px !important;
}

body.uniform-admin.cku-v2 .sales-card .card-header,
body.uniform-admin.cku-v2 .sales-card .chart-legend {
  flex: 0 0 auto !important;
}

body.uniform-admin.cku-v2 .sales-card .chart-area {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 285px !important;
  padding: 14px 14px 4px !important;
  position: relative !important;
}

body.uniform-admin.cku-v2 .sales-card #salesChart {
  width: 100% !important;
  height: 100% !important;
}

/* ---------------------------------------------------------
   ORDER QUEUE / ORDER MONITOR: restore the table row
--------------------------------------------------------- */
body.cku-v2 .queue-main.cku-content {
  display: grid !important;
  grid-template-rows: auto auto minmax(220px, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
}

body.cku-v2 .queue-main.cku-content > .filters-row,
body.cku-v2 .queue-main.cku-content > .status-tabs,
body.cku-v2 .queue-main.cku-content > .pagination {
  min-height: 0 !important;
}

body.cku-v2 .queue-main.cku-content > .live-order-card {
  min-height: 220px !important;
  height: auto !important;
  overflow: hidden !important;
}

body.cku-v2 .live-order-card .table-wrap,
body.cku-v2 .order-table-wrap {
  min-height: 0 !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges;
}

body.cku-v2 .live-order-card .order-table {
  min-width: 720px !important;
}

body.cku-v2 .live-order-card .table-wrap::-webkit-scrollbar,
body.cku-v2 .order-table-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.cku-v2 .live-order-card .table-wrap::-webkit-scrollbar-thumb,
body.cku-v2 .order-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .25);
  border-radius: 999px;
}

/* ---------------------------------------------------------
   POS ORDER SUMMARY: breathing room + independent scrolling
--------------------------------------------------------- */
body.uniform-pos.cku-v2 .cart-panel.cku-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 18px 20px 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--cku-panel-strong) !important;
  border-left: 1px solid var(--cku-line-soft) !important;
  scrollbar-gutter: stable;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .order-heading {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 7px 3px 5px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .order-title {
  margin: 0 !important;
  line-height: 1.15 !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .cart-list {
  flex: 1 1 190px !important;
  min-height: 150px !important;
  padding: 4px 5px 12px 1px !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .order-bottom {
  flex: 0 0 auto !important;
  margin-top: 2px !important;
  padding-top: 10px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right::-webkit-scrollbar,
body.uniform-pos.cku-v2 .cart-list::-webkit-scrollbar {
  width: 7px;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right::-webkit-scrollbar-thumb,
body.uniform-pos.cku-v2 .cart-list::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .25);
  border-radius: 999px;
}

/* Discount selection belongs with the checkout fields, directly
   before Payment Type instead of at the top of the summary. */
body.cku-v2 .bottom-fields .ck-promo-client,
body.uniform-kiosk.kiosk-menu .bottom-fields .ck-promo-client {
  width: 100% !important;
  margin: 4px 0 3px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  background: #fff8ec !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 9px !important;
  font-size: 11px !important;
}

body.cku-v2 .bottom-fields .ck-promo-client label,
body.uniform-kiosk.kiosk-menu .bottom-fields .ck-promo-client label {
  margin: 0 !important;
  color: var(--cku-brown-2) !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
}

body.cku-v2 .bottom-fields .ck-promo-client select,
body.uniform-kiosk.kiosk-menu .bottom-fields .ck-promo-client select {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
}

body.cku-v2 .bottom-fields .ck-promo-note,
body.uniform-kiosk.kiosk-menu .bottom-fields .ck-promo-note {
  margin: 0 !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}

/* ---------------------------------------------------------
   KIOSK MENU PAYMENT + CASH RECEIVED
--------------------------------------------------------- */
body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right {
  padding-top: 12px !important;
  padding-bottom: 18px !important;
  overflow: hidden !important;
  background: var(--cku-panel-strong) !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-list {
  min-height: 120px !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-bottom {
  transform: none !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: visible !important;
}

body.uniform-kiosk.kiosk-menu .cash-payment-fields {
  width: 100%;
  display: grid;
  gap: 6px;
}

body.uniform-kiosk.kiosk-menu .cash-payment-fields[hidden] {
  display: none !important;
}

body.uniform-kiosk.kiosk-menu .kiosk-change-row {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--cku-green-soft);
  border: 1px solid rgba(76, 149, 111, .20);
  border-radius: 9px;
  color: var(--cku-green-dark);
  font-size: 11px;
  font-weight: 700;
}

body.uniform-kiosk.kiosk-menu .ck-kiosk-discount-row[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------
   INVENTORY: hidden legacy header must not consume a grid row
   and all dense panels get usable scrollbars.
--------------------------------------------------------- */
body.uniform-admin.cku-v2 .inventory-main.cku-content {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .inventory-dashboard {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 150px !important;
  gap: 12px !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .inventory-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .inventory-content-grid {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .inventory-list-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .inventory-panel .table-wrap {
  min-height: 0 !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges;
}

body.uniform-admin.cku-v2 .inventory-table {
  min-width: 760px !important;
}

body.uniform-admin.cku-v2 .adjust-panel {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

body.uniform-admin.cku-v2 .activity-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .activity-list {
  min-height: 0 !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges;
}

body.uniform-admin.cku-v2 .inventory-panel .table-wrap::-webkit-scrollbar,
body.uniform-admin.cku-v2 .adjust-panel::-webkit-scrollbar,
body.uniform-admin.cku-v2 .activity-list::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.uniform-admin.cku-v2 .inventory-panel .table-wrap::-webkit-scrollbar-thumb,
body.uniform-admin.cku-v2 .adjust-panel::-webkit-scrollbar-thumb,
body.uniform-admin.cku-v2 .activity-list::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .25);
  border-radius: 999px;
}

@media (max-height: 720px) and (min-width: 901px) {
  body.uniform-admin.cku-v2 .inventory-dashboard {
    grid-template-rows: minmax(0, 1fr) 125px !important;
  }

  body.uniform-pos.cku-v2 .cart-panel.cku-right .cart-list,
  body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-list {
    min-height: 110px !important;
  }
}

/* =========================================================
   CAFEKIOSK UNIFORM THEME V4 — KIOSK + MENU MANAGEMENT REPAIR
   - Kiosk summary checkout block anchored lower
   - Kiosk order list has a permanent scroll area
   - Cancel Order moved to Kiosk sidebar
   - Menu Management repaired inside the locked uniform shell
========================================================= */

/* ---------------------------------------------------------
   KIOSK SIDEBAR CANCEL ACTION
--------------------------------------------------------- */
body.uniform-kiosk.cku-v2.kiosk-menu .cku-sidebar .kiosk-sidebar-cancel {
  width: 100% !important;
  min-height: 42px !important;
  margin: auto 0 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  border: 1px solid rgba(206, 82, 82, .30) !important;
  border-radius: 9px !important;
  background: #fff4f1 !important;
  color: #b34e4e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .cku-sidebar .kiosk-sidebar-cancel:hover {
  background: #fde8e4 !important;
  border-color: rgba(206, 82, 82, .42) !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .kiosk-sidebar-cancel-icon {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 22px !important;
  border-radius: 50% !important;
  background: rgba(206, 82, 82, .10) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* ---------------------------------------------------------
   KIOSK ORDER SUMMARY
   The item list owns the flexible space, so subtotal/payment
   controls naturally sit lower and use the previously empty
   space at the bottom of the panel.
--------------------------------------------------------- */
body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  padding: 12px 16px 16px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right > h2 {
  flex: 0 0 auto !important;
  margin: 4px 4px 7px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-list {
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 110px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2px 6px 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 65, 42, .30) transparent;
  scrollbar-gutter: stable;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-list::-webkit-scrollbar {
  width: 8px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-list::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .05) !important;
  border-radius: 999px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-list::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .30) !important;
  border-radius: 999px !important;
}

/* Compact, evenly spaced order lines matching the Admin detail rhythm. */
body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-item {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  display: grid !important;
  gap: 7px !important;
  border: 1px solid var(--cku-line-soft) !important;
  border-radius: 9px !important;
  background: #fffaf1 !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-name {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cku-brown) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-addons {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cku-muted) !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-addons span {
  margin: 0 !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-addons ul {
  margin: 2px 0 0 13px !important;
  padding: 0 !important;
  list-style-position: outside !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-addons li {
  margin: 0 0 2px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-line {
  margin: 1px 0 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .qty-controls {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  min-height: 30px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .qty-controls button {
  min-width: 36px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-bottom {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: auto 0 0 !important;
  padding: 10px 0 0 !important;
  gap: 7px !important;
  border-top: 1px solid var(--cku-line-soft) !important;
  border-radius: 0 !important;
  background: var(--cku-panel-strong) !important;
  overflow: visible !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .summary-row {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .bottom-fields {
  gap: 6px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .field-label {
  margin: 1px 0 2px !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .payment-select,
body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .cash-input {
  min-height: 35px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-actions {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

body.uniform-kiosk.cku-v2.kiosk-menu .order-summary .order-actions .confirm-btn {
  min-height: 40px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

/* ---------------------------------------------------------
   ORDER TYPE
   No separate confirm button: tapping either service card is
   the action, so center the cards cleanly in the freed space.
--------------------------------------------------------- */
body.uniform-kiosk.kiosk-order-type .container {
  padding-bottom: 42px !important;
}

body.uniform-kiosk.kiosk-order-type .options {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   ADMIN MENU MANAGEMENT — FULL LAYOUT REPAIR
   The page originally had its own header row. In the locked
   shell that old row is hidden, so the content must occupy the
   entire shared content area instead of reserving a ghost row.
--------------------------------------------------------- */
body.uniform-admin.cku-v2 .menu-main.cku-content {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  padding: 0 var(--cku-content-pad-x) 20px !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .menu-main.cku-content > .menu-topbar.cku-original-header {
  display: none !important;
}

body.uniform-admin.cku-v2 .menu-main.cku-content > #menuView.menu-dashboard:not(.hidden) {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 .menu-main.cku-content > #menuView.hidden,
body.uniform-admin.cku-v2 .menu-main.cku-content > #formView.hidden {
  display: none !important;
}

body.uniform-admin.cku-v2 #menuView .category-panel {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 158px !important;
  max-height: 158px !important;
  padding: 12px 16px 10px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 9px !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 #menuView .section-heading {
  min-width: 0 !important;
  gap: 12px !important;
}

body.uniform-admin.cku-v2 #menuView .category-scroll-area {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 #menuView .category-tabs {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable;
}

body.uniform-admin.cku-v2 #menuView .category-tab {
  flex: 0 0 132px !important;
  min-width: 132px !important;
}

body.uniform-admin.cku-v2 #menuView .product-panel {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 12px 16px 14px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

body.uniform-admin.cku-v2 #menuView .product-panel-head {
  min-width: 0 !important;
  gap: 12px !important;
}

body.uniform-admin.cku-v2 #menuView .product-toolbar {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

body.uniform-admin.cku-v2 #menuView .search-box {
  width: clamp(190px, 24vw, 300px) !important;
  min-width: 170px !important;
}

body.uniform-admin.cku-v2 #menuView .product-grid {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 2px 7px 10px 1px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

body.uniform-admin.cku-v2 #menuView .product-grid::-webkit-scrollbar {
  width: 8px !important;
}

body.uniform-admin.cku-v2 #menuView .product-grid::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .05) !important;
  border-radius: 999px !important;
}

body.uniform-admin.cku-v2 #menuView .product-grid::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .27) !important;
  border-radius: 999px !important;
}

body.uniform-admin.cku-v2 #menuView .product-card {
  min-width: 0 !important;
  min-height: 214px !important;
}

/* Create/Edit view gets its own scrollbar instead of breaking the shell. */
body.uniform-admin.cku-v2 .menu-main.cku-content > #formView.view:not(.hidden) {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 4px 20px 0 !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

body.uniform-admin.cku-v2 .menu-main.cku-content > #formView::-webkit-scrollbar {
  width: 8px !important;
}

body.uniform-admin.cku-v2 .menu-main.cku-content > #formView::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .27) !important;
  border-radius: 999px !important;
}

@media (max-width: 1120px) and (min-width: 761px) {
  body.uniform-admin.cku-v2 #menuView .section-heading,
  body.uniform-admin.cku-v2 #menuView .product-panel-head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.uniform-admin.cku-v2 #menuView .product-toolbar {
    width: 100% !important;
  }

  body.uniform-admin.cku-v2 #menuView .search-box {
    flex: 1 1 220px !important;
    width: auto !important;
  }
}

@media (max-height: 720px) and (min-width: 901px) {
  body.uniform-admin.cku-v2 #menuView .category-panel {
    max-height: 132px !important;
    padding-top: 9px !important;
    padding-bottom: 8px !important;
  }

  body.uniform-kiosk.cku-v2.kiosk-menu .order-summary.cku-right .order-list {
    min-height: 80px !important;
  }
}

/* V4 final sizing guard: use flex for Menu Management's shared content row
   so the hidden legacy header can never leave an empty grid track. */
body.uniform-admin.cku-v2 .menu-main.cku-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body.uniform-admin.cku-v2 .menu-main.cku-content > #menuView.menu-dashboard:not(.hidden),
body.uniform-admin.cku-v2 .menu-main.cku-content > #formView.view:not(.hidden) {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* =========================================================
   CAFEKIOSK UNIFORM UI V5
   - Combines flexible serving sizes with inventory recipe rows
   - Keeps the ingredient selector + stock details in one panel
   - Fixes kiosk sidebar cancel styling and order-summary space
========================================================= */

/* ---------------------------------------------------------
   ADMIN MENU MANAGEMENT: one combined flexible recipe panel
--------------------------------------------------------- */
body.uniform-admin .flexible-recipe-builder {
  width: 100% !important;
  min-width: 0 !important;
  padding: 16px !important;
  display: block !important;
  background: var(--cku-panel) !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 10px !important;
}

body.uniform-admin .flexible-builder-head {
  margin-bottom: 14px !important;
}

body.uniform-admin .flexible-builder-head h3 {
  margin: 2px 0 4px !important;
  font-size: 16px !important;
}

body.uniform-admin .flexible-builder-head p {
  max-width: 860px !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body.uniform-admin .flex-size-panel {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 16px !important;
  padding: 14px !important;
  background: #fffdf8 !important;
  border: 1px solid var(--cku-line-soft) !important;
  border-radius: 9px !important;
}

body.uniform-admin .flex-config-title-row,
body.uniform-admin .ingredient-usage-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

body.uniform-admin .flex-config-title-row {
  margin-bottom: 10px !important;
}

body.uniform-admin .ingredient-usage-heading {
  margin: 2px 0 10px !important;
}

body.uniform-admin .flex-config-title-row > div,
body.uniform-admin .ingredient-usage-heading > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body.uniform-admin .flex-config-title-row strong,
body.uniform-admin .ingredient-usage-heading strong {
  color: var(--cku-brown) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.uniform-admin .flex-config-title-row small,
body.uniform-admin .ingredient-usage-heading small {
  color: var(--cku-muted) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

body.uniform-admin .flex-size-table-wrap,
body.uniform-admin .recipe-table-wrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 65, 42, .28) transparent;
}

body.uniform-admin .flex-size-table-wrap::-webkit-scrollbar,
body.uniform-admin .recipe-table-wrap::-webkit-scrollbar {
  height: 7px !important;
}

body.uniform-admin .flex-size-table-wrap::-webkit-scrollbar-thumb,
body.uniform-admin .recipe-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .28) !important;
  border-radius: 999px !important;
}

body.uniform-admin .flex-size-table-head,
body.uniform-admin .ck-size-row {
  min-width: 620px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1.5fr) minmax(130px, .9fr) minmax(140px, .9fr) 82px !important;
  gap: 8px !important;
  align-items: center !important;
}

body.uniform-admin .flex-size-table-head {
  padding: 0 6px 6px !important;
  color: var(--cku-muted) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.uniform-admin .flex-size-rows {
  display: grid !important;
  gap: 8px !important;
}

body.uniform-admin .ck-size-row {
  margin: 0 !important;
  padding: 8px !important;
  background: #fbf1e2 !important;
  border: 1px solid var(--cku-line-soft) !important;
  border-radius: 8px !important;
}

body.uniform-admin .ck-size-row input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
  color: var(--cku-brown) !important;
  background: #fffdfa !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 6px !important;
  outline: none !important;
  font-size: 10.8px !important;
}

body.uniform-admin .ck-size-row input:focus {
  border-color: var(--cku-green) !important;
  box-shadow: 0 0 0 2px rgba(76, 149, 111, .08) !important;
}

body.uniform-admin .ck-size-row .ck-remove,
body.uniform-admin .recipe-remove-btn {
  min-height: 36px !important;
  color: #b74444 !important;
  background: #fff4f3 !important;
  border: 1px solid #e5aaa5 !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
}

body.uniform-admin .ck-size-row .ck-remove:hover,
body.uniform-admin .recipe-remove-btn:hover {
  background: #ffe6e3 !important;
}

body.uniform-admin .ck-size-empty {
  min-width: 620px !important;
  padding: 16px !important;
  color: var(--cku-muted) !important;
  text-align: center !important;
  background: #fbf1e2 !important;
  border: 1px dashed var(--cku-line) !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
}

body.uniform-admin .flex-category-default {
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--cku-brown-2) !important;
  font-size: 10.5px !important;
  cursor: pointer !important;
}

body.uniform-admin .flex-category-default input {
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--cku-green) !important;
}

/* The ingredient field is now a real dropdown populated from Inventory Monitor. */
body.uniform-admin .recipe-name-input {
  cursor: pointer !important;
}

body.uniform-admin .recipe-stock-input,
body.uniform-admin .recipe-low-input {
  background: #fffaf3 !important;
}

body.uniform-admin .recipe-table-head,
body.uniform-admin .recipe-row {
  min-width: 1040px !important;
  grid-template-columns:
    minmax(185px, 1.45fr)
    90px
    82px
    110px
    110px
    130px
    minmax(145px, 1fr)
    42px !important;
}

body.uniform-admin .recipe-help-box {
  margin-top: 12px !important;
}

/* The old fixed 1x/2x/3x preset guide is intentionally removed. */
body.uniform-admin .size-multiplier-guide,
body.uniform-admin #ckFlexConfig {
  display: none !important;
}

/* ---------------------------------------------------------
   KIOSK MENU: use the full summary column and keep checkout
   controls at the true bottom. This also neutralizes the old
   tablet transform that pulled the subtotal/payment block up.
--------------------------------------------------------- */
body.uniform-kiosk.kiosk-menu .order-summary {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 14px 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
  border-radius: 12px 0 0 12px !important;
}

body.uniform-kiosk.kiosk-menu .order-summary > h2 {
  flex: 0 0 auto !important;
  margin: 3px 4px 6px !important;
  padding: 0 !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-list {
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 175px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2px 7px 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 65, 42, .30) transparent;
  scrollbar-gutter: stable;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-list::-webkit-scrollbar {
  width: 8px !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-list::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .05) !important;
  border-radius: 999px !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-list::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .30) !important;
  border-radius: 999px !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-bottom {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: auto 0 0 !important;
  padding: 8px 0 0 !important;
  gap: 6px !important;
  transform: none !important;
  border-top: 1px solid var(--cku-line-soft) !important;
  border-radius: 0 !important;
  background: var(--cku-panel-strong) !important;
  overflow: visible !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .summary-row {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .bottom-fields {
  gap: 6px !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .field-label {
  margin: 1px 0 2px !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .payment-select,
body.uniform-kiosk.kiosk-menu .order-summary .cash-input {
  min-height: 35px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-item {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  display: grid !important;
  gap: 7px !important;
  border: 1px solid var(--cku-line-soft) !important;
  border-radius: 9px !important;
  background: #fffaf1 !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-name {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cku-brown) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .order-actions {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

body.uniform-kiosk.kiosk-menu .order-summary .confirm-btn {
  min-height: 40px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

/* Styled cancel action at the bottom of the kiosk sidebar. */
body.uniform-kiosk.kiosk-menu .sidebar .kiosk-sidebar-cancel {
  width: 100% !important;
  min-height: 42px !important;
  margin: auto 0 0 !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  color: #a54242 !important;
  background: #fff4f1 !important;
  border: 1px solid #e2aaa4 !important;
  border-radius: 11px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

body.uniform-kiosk.kiosk-menu .sidebar .kiosk-sidebar-cancel:hover {
  background: #ffe8e4 !important;
  border-color: #d98c84 !important;
  transform: translateY(-1px) !important;
}

body.uniform-kiosk.kiosk-menu .sidebar .kiosk-sidebar-cancel-icon {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: #bf5750 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

@media (max-height: 720px) and (min-width: 700px) {
  body.uniform-kiosk.kiosk-menu .order-summary .order-list {
    min-height: 130px !important;
  }

  body.uniform-kiosk.kiosk-menu .order-summary {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }
}

/* =====================================================================
   UNIFORM UI V6 — STATIC MENU TOOLBARS + POS ORDER DETAIL REDESIGN
   ===================================================================== */

/* ---------------------------------------------------------
   POS MENU
   Keep category heading, category buttons and search controls fixed
   while only the product grid scrolls.
--------------------------------------------------------- */
body.uniform-pos .pos-container > .menu-area {
  min-height: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 14px !important;
}

body.uniform-pos .pos-container > .menu-area > .category-header,
body.uniform-pos .pos-container > .menu-area > .category-navigation,
body.uniform-pos .pos-container > .menu-area > .menu-search {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 8 !important;
}

body.uniform-pos .pos-container > .menu-area > .menu-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
  padding: 2px 8px 28px 1px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(92, 65, 42, .32) transparent !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
}

body.uniform-pos .pos-container > .menu-area > .menu-grid::-webkit-scrollbar {
  width: 8px !important;
}
body.uniform-pos .pos-container > .menu-area > .menu-grid::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .05) !important;
  border-radius: 999px !important;
}
body.uniform-pos .pos-container > .menu-area > .menu-grid::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .30) !important;
  border-radius: 999px !important;
}
body.uniform-pos .pos-container > .menu-area > .menu-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 65, 42, .45) !important;
}

/* ---------------------------------------------------------
   KIOSK MENU
   Header and search stay on top. Only menu cards scroll.
--------------------------------------------------------- */
body.uniform-kiosk.kiosk-menu .container > .menu-area {
  min-height: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 14px !important;
}

body.uniform-kiosk.kiosk-menu .container > .menu-area > .category-header,
body.uniform-kiosk.kiosk-menu .container > .menu-area > .menu-search {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 8 !important;
}

body.uniform-kiosk.kiosk-menu .container > .menu-area > .menu-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
  padding: 2px 8px 28px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(92, 65, 42, .32) transparent !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
}

body.uniform-kiosk.kiosk-menu .container > .menu-area > .menu-grid::-webkit-scrollbar {
  width: 8px !important;
}
body.uniform-kiosk.kiosk-menu .container > .menu-area > .menu-grid::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .05) !important;
  border-radius: 999px !important;
}
body.uniform-kiosk.kiosk-menu .container > .menu-area > .menu-grid::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .30) !important;
  border-radius: 999px !important;
}
body.uniform-kiosk.kiosk-menu .container > .menu-area > .menu-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 65, 42, .45) !important;
}

/* ---------------------------------------------------------
   POS ORDER QUEUE — ORDER DETAIL / SUMMARY
   Fixed customer/status/header/footer; only the item list scrolls.
--------------------------------------------------------- */
body.uniform-pos .queue-right .order-detail {
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fffaf1 !important;
  border: 1px solid var(--cku-line) !important;
  border-radius: 12px !important;
}

body.uniform-pos .queue-right .order-detail-content {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fffaf1 !important;
}

body.uniform-pos .queue-right .detail-title {
  min-height: 50px !important;
  flex: 0 0 auto !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--cku-brown) !important;
  background: #fffaf1 !important;
  border-bottom: 1px solid var(--cku-line-soft) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body.uniform-pos .queue-right .detail-info {
  flex: 0 0 auto !important;
  padding: 14px 16px !important;
  display: grid !important;
  gap: 8px !important;
  background: rgba(255,255,255,.28) !important;
  border-bottom: 1px solid var(--cku-line-soft) !important;
}

body.uniform-pos .queue-right .detail-row {
  grid-template-columns: 92px minmax(0,1fr) !important;
  gap: 12px !important;
  min-height: 24px !important;
  align-items: center !important;
  color: var(--cku-brown-2) !important;
  font-size: 11.5px !important;
}

body.uniform-pos .queue-right .detail-row strong {
  color: var(--cku-brown) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
}

body.uniform-pos .queue-right .detail-status {
  width: min(145px,100%) !important;
  min-height: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

body.uniform-pos .queue-right .detail-items {
  flex: 1 1 auto !important;
  min-height: 110px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 13px 9px 14px 16px !important;
  border-bottom: 1px solid var(--cku-line-soft) !important;
  background: #fffdf8 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(92, 65, 42, .36) transparent !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
}

body.uniform-pos .queue-right .detail-items::-webkit-scrollbar {
  width: 8px !important;
}
body.uniform-pos .queue-right .detail-items::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .06) !important;
  border-radius: 999px !important;
}
body.uniform-pos .queue-right .detail-items::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .34) !important;
  border-radius: 999px !important;
}
body.uniform-pos .queue-right .detail-items::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 65, 42, .50) !important;
}

body.uniform-pos .queue-right .items-label {
  position: sticky !important;
  top: -13px !important;
  z-index: 2 !important;
  display: block !important;
  margin: 0 0 8px -2px !important;
  padding: 10px 2px 7px !important;
  color: var(--cku-brown) !important;
  background: #fffdf8 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

body.uniform-pos .queue-right #detailItems {
  display: grid !important;
  gap: 8px !important;
}

body.uniform-pos .queue-right .detail-item {
  margin: 0 !important;
  padding: 9px 10px !important;
  background: #fff8ee !important;
  border: 1px solid var(--cku-line-soft) !important;
  border-radius: 9px !important;
}

body.uniform-pos .queue-right .detail-item-title {
  color: var(--cku-brown) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}
body.uniform-pos .queue-right .detail-item-title::before {
  content: none !important;
}

body.uniform-pos .queue-right .detail-customizations {
  margin: 5px 0 0 8px !important;
  color: var(--cku-muted) !important;
  font-size: 10px !important;
  line-height: 1.42 !important;
}

body.uniform-pos .queue-right .detail-total {
  min-height: 48px !important;
  flex: 0 0 auto !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  color: var(--cku-brown) !important;
  background: #fffaf1 !important;
  border-bottom: 1px solid var(--cku-line-soft) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.uniform-pos .queue-right .detail-total > #detailDiscountSummary {
  display: none !important;
}

body.uniform-pos .queue-right .detail-actions {
  flex: 0 0 auto !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  background: #fffaf1 !important;
}

body.uniform-pos .queue-right .detail-btn {
  min-height: 39px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

/* Desktop is the locked three-column interface. Existing responsive
   rules remain responsible for phones/tablets below this breakpoint. */
@media (max-width: 850px) {
  body.uniform-pos .pos-container > .menu-area,
  body.uniform-kiosk.kiosk-menu .container > .menu-area {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.uniform-pos .pos-container > .menu-area > .menu-grid,
  body.uniform-kiosk.kiosk-menu .container > .menu-area > .menu-grid {
    flex: none !important;
    overflow: visible !important;
  }
}

body.uniform-pos .queue-right .order-detail-content[hidden] {
  display: none !important;
}

/* POS selling screen: make the Order Summary item scrollbar clearly visible too. */
body.uniform-pos .cart-panel .cart-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 7px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(92, 65, 42, .36) transparent !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
}
body.uniform-pos .cart-panel .cart-list::-webkit-scrollbar {
  width: 8px !important;
}
body.uniform-pos .cart-panel .cart-list::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .06) !important;
  border-radius: 999px !important;
}
body.uniform-pos .cart-panel .cart-list::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .34) !important;
  border-radius: 999px !important;
}
body.uniform-pos .cart-panel .cart-list::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 65, 42, .50) !important;
}


/* =========================================================
   CAFEKIOSK UNIFORM THEME V9 — INVENTORY PAGE SCROLL REPAIR
   The locked Admin header/sidebar remain fixed. The complete
   Inventory Monitor content column scrolls as one page so the
   Stock Movements section can grow naturally instead of being
   squeezed into a short fixed row.
========================================================= */
body.uniform-admin.cku-v2 .inventory-main.cku-content {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
  padding-bottom: 28px !important;
}

body.uniform-admin.cku-v2 .inventory-dashboard {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
}

body.uniform-admin.cku-v2 .inventory-panel {
  flex: 0 0 auto !important;
  min-height: 520px !important;
  height: auto !important;
  overflow: visible !important;
}

body.uniform-admin.cku-v2 .inventory-content-grid {
  min-height: 430px !important;
  height: auto !important;
  overflow: visible !important;
}

body.uniform-admin.cku-v2 .inventory-list-panel {
  min-height: 430px !important;
  height: auto !important;
  overflow: visible !important;
}

body.uniform-admin.cku-v2 .inventory-panel .table-wrap {
  min-height: 260px !important;
  max-height: 360px !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

body.uniform-admin.cku-v2 .adjust-panel {
  min-height: 430px !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.uniform-admin.cku-v2 .activity-panel {
  flex: 0 0 auto !important;
  min-height: 260px !important;
  height: auto !important;
  overflow: visible !important;
  grid-template-rows: auto auto !important;
}

body.uniform-admin.cku-v2 .activity-list {
  min-height: 170px !important;
  height: auto !important;
  max-height: none !important;
  grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

body.uniform-admin.cku-v2 .activity-item {
  min-height: 92px !important;
  height: auto !important;
  align-content: start !important;
}

body.uniform-admin.cku-v2 .activity-item strong,
body.uniform-admin.cku-v2 .activity-item span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

body.uniform-admin.cku-v2 .inventory-main.cku-content::-webkit-scrollbar,
body.uniform-admin.cku-v2 .inventory-panel .table-wrap::-webkit-scrollbar,
body.uniform-admin.cku-v2 .adjust-panel::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}
body.uniform-admin.cku-v2 .inventory-main.cku-content::-webkit-scrollbar-track,
body.uniform-admin.cku-v2 .inventory-panel .table-wrap::-webkit-scrollbar-track,
body.uniform-admin.cku-v2 .adjust-panel::-webkit-scrollbar-track {
  background: rgba(92, 65, 42, .055) !important;
  border-radius: 999px !important;
}
body.uniform-admin.cku-v2 .inventory-main.cku-content::-webkit-scrollbar-thumb,
body.uniform-admin.cku-v2 .inventory-panel .table-wrap::-webkit-scrollbar-thumb,
body.uniform-admin.cku-v2 .adjust-panel::-webkit-scrollbar-thumb {
  background: rgba(92, 65, 42, .34) !important;
  border-radius: 999px !important;
}

@media (max-width: 1050px) {
  body.uniform-admin.cku-v2 .activity-list {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }
}

/* =========================================================
   CAFEKIOSK UNIFORM THEME V10 — MANAGER + MOBILE ADMIN
   - Treat Manager as a first-class app shell
   - Remove the empty third column from Manager Dashboard
   - Keep Manager POS / Queue aligned with the shared layout
   - Add a phone-friendly Admin drawer with hamburger navigation
========================================================= */

body.uniform-manager.cku-v2 .manager-dashboard-shell.cku-shell:not(.cku-has-right) {
  grid-template-columns: var(--cku-sidebar-width) minmax(0, 1fr) !important;
}

body.uniform-manager.cku-v2 .manager-dashboard-main.cku-content {
  width: 100% !important;
  max-width: none !important;
  padding-left: var(--cku-content-pad-x) !important;
  padding-right: var(--cku-content-pad-x) !important;
}

body.uniform-manager.cku-v2 .manager-access-note {
  margin-top: auto !important;
  margin-bottom: 4px !important;
  background: #f7efe3 !important;
  border: 1px solid var(--cku-line-soft) !important;
  color: var(--cku-brown) !important;
}

body.uniform-manager.cku-v2 .manager-access-note span {
  color: var(--cku-muted) !important;
  opacity: 1 !important;
}

body.uniform-manager.cku-v2 .manager-role-strip {
  width: 100% !important;
}

/* Hidden on desktop; shown only for the phone Admin layout. */
.cku-mobile-menu-toggle,
.cku-mobile-nav-backdrop {
  display: none;
}

@media (max-width: 760px) {
  body.uniform-admin.cku-v2 {
    --cku-topbar-height: 72px;
    --cku-content-pad-x: 12px;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--cku-bg) !important;
  }

  body.uniform-admin.cku-v2 .cku-shell,
  body.uniform-admin.cku-v2 .cku-shell.cku-has-right {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    overflow: visible !important;
  }

  body.uniform-admin.cku-v2 .cku-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 5000 !important;
    width: min(84vw, 286px) !important;
    min-width: 0 !important;
    max-width: 286px !important;
    height: 100dvh !important;
    padding: 18px 14px 22px !important;
    transform: translateX(-105%) !important;
    transition: transform .2s ease !important;
    box-shadow: 16px 0 38px rgba(54, 35, 22, .18) !important;
    border-right: 1px solid var(--cku-line) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.uniform-admin.cku-v2.cku-mobile-nav-open .cku-sidebar {
    transform: translateX(0) !important;
  }

  .cku-mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4900 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(45, 31, 21, .38) !important;
    backdrop-filter: blur(1px) !important;
    cursor: default !important;
  }

  body.uniform-admin.cku-v2.cku-mobile-nav-open .cku-mobile-nav-backdrop {
    display: block !important;
  }

  body.uniform-admin.cku-v2 .cku-topbar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    width: 100% !important;
    height: var(--cku-topbar-height) !important;
    min-height: var(--cku-topbar-height) !important;
    padding: 9px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(245, 234, 216, .97) !important;
    border-bottom: 1px solid var(--cku-line-soft) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.uniform-admin.cku-v2 .cku-mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-content: center !important;
    gap: 4px !important;
    border: 1px solid var(--cku-line) !important;
    border-radius: 11px !important;
    background: var(--cku-panel) !important;
    color: var(--cku-brown) !important;
    box-shadow: none !important;
  }

  body.uniform-admin.cku-v2 .cku-mobile-menu-toggle span {
    width: 19px !important;
    height: 2px !important;
    display: block !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  body.uniform-admin.cku-v2.cku-mobile-nav-open .cku-mobile-menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.uniform-admin.cku-v2.cku-mobile-nav-open .cku-mobile-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.uniform-admin.cku-v2.cku-mobile-nav-open .cku-mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  body.uniform-admin.cku-v2 .cku-title-card {
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    flex: 1 1 auto !important;
    padding: 8px 11px !important;
    border-radius: 10px !important;
  }

  body.uniform-admin.cku-v2 .cku-title-kicker {
    margin-bottom: 3px !important;
    font-size: 8px !important;
    letter-spacing: .1em !important;
  }

  body.uniform-admin.cku-v2 .cku-title-card h1 {
    max-width: 100% !important;
    font-size: clamp(15px, 4.5vw, 19px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.uniform-admin.cku-v2 .cku-header-right {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  body.uniform-admin.cku-v2 .cku-header-tools {
    display: none !important;
  }

  body.uniform-admin.cku-v2 .ckp-profile-shell {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
  }

  body.uniform-admin.cku-v2 .ckp-profile-shell .cku-profile-card.ckp-trigger,
  body.uniform-admin.cku-v2 .cku-profile-card {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 3px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    border-radius: 12px !important;
  }

  body.uniform-admin.cku-v2 .cku-profile-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  body.uniform-admin.cku-v2 .cku-profile-copy,
  body.uniform-admin.cku-v2 .cku-profile-caret {
    display: none !important;
  }

  body.uniform-admin.cku-v2 .ckp-menu {
    position: fixed !important;
    top: 66px !important;
    right: 10px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 78px) !important;
    overflow-y: auto !important;
  }

  body.uniform-admin.cku-v2 .cku-content,
  body.uniform-admin.cku-v2 .cku-shell.cku-has-right > .cku-content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  body.uniform-admin.cku-v2 .cku-right {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 12px 18px !important;
    overflow: visible !important;
  }

  body.uniform-admin.cku-v2 .queue-right.cku-right {
    display: block !important;
  }

  body.uniform-admin.cku-v2 .queue-right .order-search {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  body.uniform-admin.cku-v2 .queue-right .order-detail {
    width: 100% !important;
    min-height: 300px !important;
    height: auto !important;
  }

  body.uniform-admin.cku-v2 .dashboard-stat-grid,
  body.uniform-admin.cku-v2 .status-grid,
  body.uniform-admin.cku-v2 .metrics-grid,
  body.uniform-admin.cku-v2 .summary-grid,
  body.uniform-admin.cku-v2 .ck-grid,
  body.uniform-admin.cku-v2 .inventory-content-grid,
  body.uniform-admin.cku-v2 .dashboard-content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.uniform-admin.cku-v2 .ck-grid.two {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.uniform-admin.cku-v2 .filters-row,
  body.uniform-admin.cku-v2 .filter-row,
  body.uniform-admin.cku-v2 .toolbar,
  body.uniform-admin.cku-v2 .ck-toolbar {
    flex-wrap: wrap !important;
  }

  body.uniform-admin.cku-v2 .filters-row > *,
  body.uniform-admin.cku-v2 .filter-row > * {
    min-width: min(100%, 145px) !important;
    flex: 1 1 145px !important;
  }

  body.uniform-admin.cku-v2 .status-tabs {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.uniform-admin.cku-v2 .table-wrap,
  body.uniform-admin.cku-v2 .ck-table-wrap,
  body.uniform-admin.cku-v2 .activity-list,
  body.uniform-admin.cku-v2 .inventory-panel,
  body.uniform-admin.cku-v2 .live-order-card {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body.uniform-admin.cku-v2 table {
    min-width: 680px;
  }

  body.uniform-admin.cku-v2 .ck-dialog,
  body.uniform-admin.cku-v2 .modal-content,
  body.uniform-admin.cku-v2 .void-modal {
    width: min(94vw, 620px) !important;
    max-width: 94vw !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 480px) {
  body.uniform-admin.cku-v2 .cku-title-kicker {
    display: none !important;
  }

  body.uniform-admin.cku-v2 .cku-title-card {
    justify-content: center !important;
  }

  body.uniform-admin.cku-v2 .cku-title-card h1 {
    font-size: 16px !important;
  }
}
\n\n/* =========================================================\n   CAFEKIOSK V11 — MOBILE DRAWER PROPORTION REFINEMENT\n   Keeps the hamburger drawer compact and aligned with the\n   icon/text scale used by the desktop sidebar.\n========================================================= */\n@media (max-width: 760px) {\n  body.uniform-admin.cku-v2 .cku-sidebar {\n    width: min(78vw, 250px) !important;\n    max-width: 250px !important;\n    padding: 12px 10px 16px !important;\n  }\n\n  body.uniform-admin.cku-v2 .cku-sidebar .brand,\n  body.uniform-admin.cku-v2 .cku-sidebar .logo,\n  body.uniform-admin.cku-v2 .cku-sidebar .ck-brand {\n    height: 86px !important;\n    min-height: 86px !important;\n    align-items: flex-start !important;\n  }\n\n  body.uniform-admin.cku-v2 .cku-sidebar .brand img,\n  body.uniform-admin.cku-v2 .cku-sidebar .logo img,\n  body.uniform-admin.cku-v2 .cku-sidebar .ck-brand img {\n    width: 66px !important;\n    height: 66px !important;\n    max-width: 66px !important;\n    max-height: 66px !important;\n  }\n\n  body.uniform-admin.cku-v2 .cku-sidebar .staff-label,\n  body.uniform-admin.cku-v2 .cku-sidebar .ck-side-label,\n  body.uniform-admin.cku-v2 .cku-sidebar .cku-kiosk-label {\n    margin: 0 7px 7px !important;\n    font-size: 9.5px !important;\n    letter-spacing: .13em !important;\n  }\n\n  body.uniform-admin.cku-v2 .cku-sidebar .staff-nav,\n  body.uniform-admin.cku-v2 .cku-sidebar .staff-navigation,\n  body.uniform-admin.cku-v2 .cku-sidebar .ck-nav {\n    gap: 3px !important;\n  }\n\n  body.uniform-admin.cku-v2 .cku-sidebar .staff-nav-link,\n  body.uniform-admin.cku-v2 .cku-sidebar .staff-nav-button,\n  body.uniform-admin.cku-v2 .cku-sidebar .ck-nav > a {\n    min-height: 38px !important;\n    padding: 6px 8px !important;\n    gap: 9px !important;\n    border-radius: 10px !important;\n    font-size: 12px !important;\n    line-height: 1.1 !important;\n  }\n\n  body.uniform-admin.cku-v2 .cku-sidebar .staff-nav-icon,\n  body.uniform-admin.cku-v2 .cku-sidebar .ico {\n    width: 18px !important;\n    height: 18px !important;\n    min-width: 18px !important;\n    flex-basis: 18px !important;\n  }\n}\n

/* =========================================================
   POS CHECKOUT COMPACT LAYOUT V3
   Keep the discount selector compact and reserve vertical
   space for the Order Summary item list.
========================================================= */
body.uniform-pos.cku-v2 .cart-panel.cku-right {
  gap: 6px !important;
  overflow: hidden !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .cart-list {
  flex: 1 1 auto !important;
  min-height: 180px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .order-bottom {
  margin-top: 0 !important;
  padding-top: 5px !important;
  gap: 4px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .bottom-fields.pos-checkout-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
  align-items: start !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .checkout-control {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .checkout-field {
  min-height: 36px !important;
  height: 36px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .change-row {
  min-height: 28px !important;
  margin-top: 1px !important;
  padding: 4px 7px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .summary-row {
  min-height: 28px !important;
  padding: 4px 7px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .total-row {
  min-height: 31px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .order-actions {
  margin-top: 1px !important;
  gap: 6px !important;
}

body.uniform-pos.cku-v2 .cart-panel.cku-right .confirm-btn,
body.uniform-pos.cku-v2 .cart-panel.cku-right .cancel-btn {
  min-height: 40px !important;
  padding: 6px 8px !important;
}

body.uniform-pos.cku-v2 .bottom-fields .ck-promo-client {
  display: none !important;
}

@media (max-width: 760px) {
  body.uniform-pos.cku-v2 .cart-panel.cku-right .bottom-fields.pos-checkout-grid {
    grid-template-columns: 1fr !important;
  }
}