/*
 * CYBERXG — Full Panel Redesign
 * New layout from zero, system colors preserved.
 * Loaded after app.css — overrides all component classes.
 */

/* ════════════════════════════════════════════════════════════════════
   0. GLOBAL TOKENS (extend)
   ════════════════════════════════════════════════════════════════════ */
:root {
  --panel-bg:   linear-gradient(155deg, rgba(255,255,255,.062) 0%, rgba(255,255,255,.018) 55%, rgba(153,23,20,.036) 100%);
  --panel-bg2:  linear-gradient(155deg, rgba(255,255,255,.044) 0%, rgba(255,255,255,.012) 60%, rgba(153,23,20,.022) 100%);
  --glass-edge: 0 0 0 1px rgba(255,255,255,.07);
  --brand-line: linear-gradient(90deg, #E1221D, #991714 55%, #E1221D);
  --card-sh:    0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.2);
  --card-sh-lg: 0 16px 48px rgba(0,0,0,.36), 0 4px 16px rgba(0,0,0,.24);
}

/* ════════════════════════════════════════════════════════════════════
   1. XP PANEL  — Main content container
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .xp {
  position: relative;
  border-radius: 20px;
  background: var(--panel-bg);
  box-shadow: var(--card-sh), var(--glass-edge);
  overflow: hidden;
  border: none;
  margin-bottom: 1.5rem;
}

/* Brand top-line */
.admin-backend .xp::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; height: 2px;
  background: var(--brand-line);
  opacity: .55;
  z-index: 1;
}

/* Panel header */
.admin-backend .xp-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(225,34,29,.055), transparent 65%);
}

.admin-backend .xp-ph-left {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.admin-backend .xp-icon {
  width: 2.4rem; height: 2.4rem;
  flex-shrink: 0;
  border-radius: var(--rmd);
  background: linear-gradient(135deg, rgba(225,34,29,.22), rgba(153,23,20,.14));
  box-shadow: 0 4px 14px rgba(153,23,20,.2), inset 0 1px 0 rgba(255,255,255,.1);
  display: grid; place-items: center;
  color: #E1221D;
}

.admin-backend .xp-kicker {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--pri);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}

.admin-backend .xp-title {
  font-size: .92rem;
  font-weight: 950;
  color: var(--txt);
  margin-top: .1rem;
  line-height: 1.2;
}

.admin-backend .xp-link {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 900;
  color: var(--txt2);
  text-decoration: none;
  padding: .3rem .65rem;
  border-radius: var(--r);
  background: var(--s2);
  transition: background .14s, color .14s;
}
.admin-backend .xp-link:hover { background: var(--hover); color: var(--txt); }

/* Panel body */
.admin-backend .panel-body {
  padding: 1.1rem 1.35rem;
}

/* ════════════════════════════════════════════════════════════════════
   2. PANEL-STRONG  — Filter bars, search containers
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .panel-strong {
  position: relative;
  border-radius: 18px;
  background: var(--panel-bg2);
  box-shadow: var(--card-sh), var(--glass-edge);
  overflow: hidden;
  border: none;
  margin-bottom: 1.5rem;
}

.admin-backend .panel-strong .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ════════════════════════════════════════════════════════════════════
   3. METRIC CARDS
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .metric-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 1.1rem 1.25rem 1.15rem;
  background: var(--panel-bg);
  box-shadow: var(--card-sh), var(--glass-edge);
  border: none;
  display: flex;
  flex-direction: column;
  gap: .28rem;
}
.admin-backend .metric-card::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; height: 2px;
  background: var(--brand-line);
  opacity: .45;
}

.admin-backend .metric-label {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--pri);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}

.admin-backend .metric-value {
  display: block;
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1;
  background: var(--tgrad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: anywhere;
}

.admin-backend .metric-note {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  color: var(--txt3);
  margin-top: .08rem;
}

/* Page stat (same treatment) */
.admin-backend .page-stat {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--panel-bg);
  box-shadow: var(--card-sh), var(--glass-edge);
  border: none;
}
.admin-backend .page-stat::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; height: 2px;
  background: var(--brand-line);
  opacity: .42;
}

/* ════════════════════════════════════════════════════════════════════
   4. TABLE-PREMIUM  — All data tables
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .table-premium {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-backend .table-premium thead th {
  padding: .6rem 1rem;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt3);
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.12);
  white-space: nowrap;
}
.admin-backend .table-premium thead th:first-child { padding-left: 1.35rem; }
.admin-backend .table-premium thead th:last-child  { padding-right: 1.35rem; }

.admin-backend .table-premium tbody td {
  padding: .72rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--txt2);
  border-bottom: 1px solid rgba(255,255,255,.045);
  vertical-align: middle;
}
.admin-backend .table-premium tbody td:first-child { padding-left: 1.35rem; }
.admin-backend .table-premium tbody td:last-child  { padding-right: 1.35rem; }

.admin-backend .table-premium tbody tr:last-child td { border-bottom: none; }

.admin-backend .table-premium tbody tr {
  transition: background .13s;
}
.admin-backend .table-premium tbody tr:hover {
  background: rgba(225,34,29,.05);
}

/* Row status accents — left border via box-shadow */
.admin-backend .table-premium tbody tr.row-active  { background: rgba(52,211,153,.04); }
.admin-backend .table-premium tbody tr.row-paused  { background: rgba(251,191,36,.04); }
.admin-backend .table-premium tbody tr.row-stopped { background: rgba(225,34,29,.04); }
.admin-backend .table-premium tbody tr.row-paid    { background: rgba(52,211,153,.03); }
.admin-backend .table-premium tbody tr.row-low     { background: rgba(239,68,68,.05); }

/* ════════════════════════════════════════════════════════════════════
   5. DRAWER  — Side floating panel (completely new layout)
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .drawer {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 55;
  width: calc(100% - 2rem);
  max-width: 34rem;
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  display: none;
  flex-direction: column;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(19,19,19,.99), rgba(13,13,13,.98));
  box-shadow:
    0 0 0 1px rgba(225,34,29,.14),
    0 32px 80px rgba(0,0,0,.7),
    0 0 60px rgba(153,23,20,.08);
  /* Brand top border */
  border-top: 2px solid transparent;
  background-clip: padding-box;
}

.admin-backend .drawer.open {
  display: flex;
}

/* Drawer inner — scrollable body */
.admin-backend .drawer > *:not(.drawer-footer) {
  overflow-y: auto;
  padding: 1.5rem 1.5rem 0;
  flex: 1;
  min-height: 0;
}

/* Pseudo brand line since border-top with gradient needs a workaround */
.admin-backend .drawer::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; height: 2px;
  background: var(--brand-line);
  opacity: .65;
  border-radius: 22px 22px 0 0;
  z-index: 1;
}

/* Drawer scroll area padding fix */
.admin-backend .drawer .space-y-4,
.admin-backend .drawer .space-y-3,
.admin-backend .drawer .space-y-5 {
  padding-bottom: 1.5rem;
}

/* ════════════════════════════════════════════════════════════════════
   6. FLOAT-MODAL / FLOAT-MODAL-PANEL
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .float-modal {
  position: fixed;
  inset: 0; z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8,8,8,.64);
  backdrop-filter: blur(8px) saturate(1.2);
}
.admin-backend .float-modal.open { display: flex; }

.admin-backend .float-modal-panel {
  position: relative;
  width: 100%; max-width: 28rem;
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(19,19,19,.99), rgba(13,13,13,.98));
  box-shadow:
    0 0 0 1px rgba(225,34,29,.14),
    0 32px 80px rgba(0,0,0,.68),
    0 8px 32px rgba(0,0,0,.4);
  padding: 1.5rem;
  overflow: hidden;
}
.admin-backend .float-modal-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; height: 2px;
  background: var(--brand-line);
  opacity: .6;
  border-radius: 22px 22px 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   7. FILTER BAR
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .filter-bar {
  border-radius: 18px;
  background: var(--panel-bg2);
  box-shadow: var(--card-sh), var(--glass-edge);
  margin-bottom: 1.5rem;
  overflow: hidden;
  border: none;
}
.admin-backend .filter-bar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .65rem;
  padding: 1rem 1.25rem;
}
.admin-backend .filter-bar-advanced {
  border-top: 1px solid rgba(255,255,255,.055);
  padding: .9rem 1.25rem;
  display: grid;
  gap: .65rem;
}

/* ════════════════════════════════════════════════════════════════════
   8. RESOURCE CARDS (games/menu/inventory cards)
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .resource-card,
.admin-backend .menu-card {
  border-radius: 18px;
  background: var(--panel-bg);
  box-shadow: var(--card-sh), var(--glass-edge);
  overflow: hidden;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.admin-backend .resource-card:hover,
.admin-backend .menu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-sh-lg), var(--glass-edge);
}

/* ════════════════════════════════════════════════════════════════════
   9. INVOICE / TRANSACTION CARDS
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .invoice-card {
  border-radius: 16px;
  background: var(--panel-bg2);
  box-shadow: var(--card-sh), var(--glass-edge);
  border: none;
  transition: transform .16s, box-shadow .16s;
  overflow: hidden;
}
.admin-backend .invoice-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-sh-lg), var(--glass-edge);
}

/* ════════════════════════════════════════════════════════════════════
   10. QFILTER PILLS
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .qfilter {
  border-radius: var(--pill);
  padding: .3rem .85rem;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.07);
  color: var(--txt3);
  background: var(--s3);
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}
.admin-backend .qfilter:hover {
  background: var(--s);
  color: var(--txt2);
  border-color: rgba(255,255,255,.12);
}
.admin-backend .qfilter.is-active {
  background: linear-gradient(135deg, rgba(225,34,29,.22), rgba(153,23,20,.12));
  color: #F1C2BE;
  border-color: rgba(225,34,29,.32);
  box-shadow: 0 2px 10px rgba(153,23,20,.14);
}

/* ════════════════════════════════════════════════════════════════════
   11. STATUS PILLS
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: var(--pill);
  padding: .22rem .65rem;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
}

/* ════════════════════════════════════════════════════════════════════
   12. EMPTY STATE
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .empty-state {
  border-radius: 14px;
  border: 1.5px dashed rgba(225,34,29,.2);
  background: rgba(225,34,29,.03);
  padding: 3rem 1.5rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 800;
  color: var(--txt3);
}

/* ════════════════════════════════════════════════════════════════════
   13. PAGE HEADER  — Refresh to match panel style
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .page-hdr {
  border-radius: 20px;
  background: var(--panel-bg);
  box-shadow: var(--card-sh), var(--glass-edge);
  padding: 1.35rem 1.5rem 1.25rem;
  border: none;
  margin-bottom: 1.75rem;
  overflow: hidden;
  position: relative;
}
.admin-backend .page-hdr::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; height: 2px;
  background: var(--brand-line);
  opacity: .55;
}
.admin-backend .page-hdr::after {
  content: "";
  position: absolute;
  right: -5rem; top: -5rem;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(153,23,20,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   14. TOPBAR
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .topbar {
  background: rgba(23,23,23,.96);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 24px rgba(0,0,0,.2);
  padding: .75rem 1.5rem;
}
.admin-backend .topbar-notification-menu { position: relative; flex-shrink: 0; }
.admin-backend .topbar-notif { position: relative; overflow: visible; transition: color .16s ease, background .16s ease, transform .16s ease; }
.admin-backend .topbar-notif__badge {
  position: absolute;
  top: -.38rem;
  right: -.42rem;
  display: grid;
  place-items: center;
  min-width: 1.08rem;
  height: 1.08rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 0 0 2px rgba(25,25,25,.96), 0 5px 14px rgba(225,29,72,.38);
  color: #fff;
  font-size: .55rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}
.admin-backend .topbar-notif__badge[hidden] { display: none; }
.admin-backend .topbar-notif:hover,
.admin-backend .topbar-notif[aria-expanded="true"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(225,34,29,.24), rgba(153,23,20,.2));
  transform: translateY(-1px);
}
.admin-backend .topbar-notif:focus-visible { outline: 2px solid rgba(225,34,29,.82); outline-offset: 2px; }
.admin-backend .topbar-notification-panel {
  position: absolute;
  z-index: 80;
  top: calc(100% + .8rem);
  right: 0;
  width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(39rem, calc(100dvh - 5.5rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(225,34,29,.14), transparent 38%),
    linear-gradient(155deg, rgba(31,31,31,.985), rgba(18,18,18,.995) 64%, rgba(11,11,11,.998));
  box-shadow: 0 30px 80px rgba(0,0,0,.58), 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(235,231,224,.065);
  transform-origin: top right;
  animation: topbarNotificationPanelIn .2s cubic-bezier(.2,.8,.2,1) both;
}
.admin-backend .topbar-notification-panel[hidden] { display: none; }
@keyframes topbarNotificationPanelIn {
  from { opacity: 0; transform: translateY(-7px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.admin-backend .topbar-notification-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 1rem 1rem .75rem;
}
.admin-backend .topbar-notification-panel__identity { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.admin-backend .topbar-notification-panel__identity > div { display: grid; gap: .08rem; min-width: 0; }
.admin-backend .topbar-notification-panel__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #ebe7e0;
  background: linear-gradient(145deg, #ef3b35, #b81713);
  box-shadow: 0 8px 22px rgba(225,34,29,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.admin-backend .topbar-notification-panel__head span,
.admin-backend .topbar-notification-item__meta,
.admin-backend .topbar-notification-item time {
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(235,231,224,.48);
}
.admin-backend .topbar-notification-panel__head strong { color: #ebe7e0; font-size: 1rem; font-weight: 950; line-height: 1.15; }
.admin-backend .topbar-notification-panel__actions { display: flex; align-items: center; gap: .48rem; }
.admin-backend .topbar-notification-panel__live {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.75rem;
  padding: 0 .62rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(225,34,29,.13), rgba(225,34,29,.04));
  color: rgba(235,231,224,.64) !important;
  white-space: nowrap;
}
.admin-backend .topbar-notification-panel__live i,
.admin-backend .topbar-notification-panel__foot i {
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: #e1221d;
  box-shadow: 0 0 0 4px rgba(225,34,29,.1);
}
.admin-backend .topbar-notification-panel__close {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(235,231,224,.09), rgba(235,231,224,.025));
  color: rgba(235,231,224,.62);
  font-size: 1.18rem;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.admin-backend .topbar-notification-panel__close:hover { color: #ebe7e0; background: linear-gradient(145deg, rgba(225,34,29,.28), rgba(225,34,29,.08)); transform: scale(1.04); }
.admin-backend .topbar-notification-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin: 0 .72rem .42rem;
  padding: .62rem .7rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(235,231,224,.055), rgba(235,231,224,.012));
}
.admin-backend .topbar-notification-panel__summary strong { color: rgba(235,231,224,.9); font-size: .7rem; font-weight: 850; }
.admin-backend .topbar-notification-panel__summary span { color: rgba(235,231,224,.38); font-size: .6rem; font-weight: 800; white-space: nowrap; }
.admin-backend .topbar-notification-panel__list {
  min-height: 7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .18rem .52rem .45rem;
}
.admin-backend .topbar-notification-item {
  display: grid;
  grid-template-columns: 2.1rem minmax(0,1fr) .8rem;
  align-items: center;
  gap: .68rem;
  position: relative;
  padding: .78rem .72rem;
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(235,231,224,.035), rgba(235,231,224,.009));
  transition: background .18s ease, transform .18s ease;
}
.admin-backend .topbar-notification-item + .topbar-notification-item { margin-top: .3rem; }
.admin-backend .topbar-notification-item:hover { background: linear-gradient(135deg, rgba(225,34,29,.11), rgba(235,231,224,.025)); transform: scale(.995); }
.admin-backend .topbar-notification-item:focus-visible { outline: 2px solid rgba(225,34,29,.72); outline-offset: -2px; }
.admin-backend .topbar-notification-item.is-unread::after { content: ""; position: absolute; top: .72rem; right: .72rem; width: .34rem; height: .34rem; border-radius: 50%; background: #e1221d; box-shadow: 0 0 0 4px rgba(225,34,29,.09); }
.admin-backend .topbar-notification-item__icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(123,123,125,.3), rgba(25,25,25,.46));
}
.admin-backend .topbar-notification-item__icon i { width: .58rem; height: .58rem; border-radius: 3px; background: linear-gradient(145deg, #ebe7e0, #7b7b7d); }
.admin-backend .topbar-notification-item.tone-warning .topbar-notification-item__icon,
.admin-backend .topbar-notification-item.tone-danger .topbar-notification-item__icon { background: linear-gradient(145deg, rgba(225,34,29,.3), rgba(100,13,10,.18)); }
.admin-backend .topbar-notification-item.tone-warning .topbar-notification-item__icon i,
.admin-backend .topbar-notification-item.tone-danger .topbar-notification-item__icon i { background: linear-gradient(145deg, #ef3b35, #b81713); }
.admin-backend .topbar-notification-item__content { display: grid; gap: .18rem; min-width: 0; }
.admin-backend .topbar-notification-item__topline { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; }
.admin-backend .topbar-notification-item__topline time { flex: 0 0 auto; letter-spacing: .04em; text-transform: none; }
.admin-backend .topbar-notification-item__content strong { color: rgba(235,231,224,.96); font-size: .79rem; font-weight: 900; line-height: 1.25; }
.admin-backend .topbar-notification-item__content > span:not(.topbar-notification-item__topline) { color: rgba(235,231,224,.56); font-size: .68rem; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.admin-backend .topbar-notification-item__arrow { color: rgba(235,231,224,.25); font-size: 1.25rem; font-weight: 500; transition: color .16s ease, transform .16s ease; }
.admin-backend .topbar-notification-item:hover .topbar-notification-item__arrow { color: #e1221d; transform: translateX(2px); }
.admin-backend .topbar-notification-empty { display: grid; justify-items: center; gap: .28rem; padding: 2rem 1.3rem 2.2rem; text-align: center; color: rgba(235,231,224,.5); }
.admin-backend .topbar-notification-empty__icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin-bottom: .32rem; border-radius: 14px; color: rgba(235,231,224,.72); background: linear-gradient(145deg, rgba(225,34,29,.2), rgba(225,34,29,.045)); }
.admin-backend .topbar-notification-empty strong { color: rgba(235,231,224,.9); font-size: .82rem; }
.admin-backend .topbar-notification-empty > span:not(.topbar-notification-empty__icon) { max-width: 27ch; font-size: .67rem; line-height: 1.5; }
.admin-backend .topbar-notification-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .68rem 1rem .78rem; color: rgba(235,231,224,.34); font-size: .57rem; font-weight: 800; }
.admin-backend .topbar-notification-panel__foot span { display: inline-flex; align-items: center; gap: .4rem; }
.admin-backend .topbar-notification-panel__foot i { width: .3rem; height: .3rem; box-shadow: 0 0 0 3px rgba(225,34,29,.08); }
@media (max-width: 520px) {
  .admin-backend .topbar-notification-panel { position: fixed; top: 4.2rem; right: .65rem; width: calc(100vw - 1.3rem); max-height: calc(100dvh - 5rem); border-radius: 20px; }
  .admin-backend .topbar-notification-panel__head { padding: .85rem .85rem .7rem; }
  .admin-backend .topbar-notification-panel__summary { margin-inline: .6rem; }
  .admin-backend .topbar-notification-panel__live { display: none; }
  .admin-backend .topbar-notification-item { grid-template-columns: 2rem minmax(0,1fr) .65rem; padding: .72rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-backend .topbar-notification-panel { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   15. SIDEBAR  — Already matches but polish it
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .sidebar {
  background: rgba(19,19,19,.985);
  box-shadow: 1px 0 0 rgba(255,255,255,.055), 16px 0 48px rgba(0,0,0,.32);
}

.admin-backend .brand-box {
  border-radius: var(--rmd);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.026) 62%, rgba(153,23,20,.06));
  box-shadow: var(--card-sh), inset 0 1px 0 rgba(255,255,255,.06);
  padding: .85rem .9rem;
  border: none;
  position: relative;
  overflow: hidden;
}
.admin-backend .brand-box::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(225,34,29,.6), transparent);
}

/* ════════════════════════════════════════════════════════════════════
   16. BUTTONS  — Polish existing
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .btn-primary {
  background: linear-gradient(135deg, #E1221D 0%, #991714 60%, #E1221D 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(153,23,20,.38);
  transition: box-shadow .18s, transform .18s;
}
.admin-backend .btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(153,23,20,.56);
  transform: translateY(-1px);
}

.admin-backend .btn-secondary {
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.028));
  color: var(--txt2);
  box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .14s, color .14s;
}
.admin-backend .btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  color: var(--txt);
}

.admin-backend .btn-ghost {
  background: transparent;
  color: var(--txt3);
  transition: background .14s, color .14s;
}
.admin-backend .btn-ghost:hover:not(:disabled) {
  background: var(--s);
  color: var(--txt2);
}

.admin-backend .btn-danger {
  background: linear-gradient(135deg, #f87171, #b91c1c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(185,28,28,.32);
  transition: box-shadow .18s, transform .18s;
}
.admin-backend .btn-danger:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(185,28,28,.5);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════
   17. FORM FIELDS  — Subtle refinement
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .field {
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.022));
  border: none;
  border-radius: var(--r);
  color: var(--txt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.12);
  transition: box-shadow .14s;
}
.admin-backend .field:focus {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 2px rgba(225,34,29,.35), 0 2px 12px rgba(153,23,20,.12);
}

/* ════════════════════════════════════════════════════════════════════
   18. KITCHEN ORDER CARDS
   ════════════════════════════════════════════════════════════════════ */
.admin-backend [data-kitchen-column] > article {
  border-radius: 16px !important;
  background: var(--panel-bg2) !important;
  border: none !important;
  box-shadow: var(--card-sh), var(--glass-edge) !important;
  transition: transform .16s, box-shadow .16s !important;
}
.admin-backend [data-kitchen-column] > article:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--card-sh-lg), var(--glass-edge) !important;
}

/* ════════════════════════════════════════════════════════════════════
   19. ANALYTICS CARDS  (rt-card, mc-card)
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .rt-card,
.admin-backend .mc-card {
  border-radius: 18px !important;
  background: var(--panel-bg) !important;
  border: none !important;
  box-shadow: var(--card-sh), var(--glass-edge) !important;
  overflow: hidden !important;
  transition: transform .16s, box-shadow .16s !important;
}
.admin-backend .rt-card:hover,
.admin-backend .mc-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--card-sh-lg), var(--glass-edge) !important;
}

/* ════════════════════════════════════════════════════════════════════
   20. MODAL BACKDROP
   ════════════════════════════════════════════════════════════════════ */
.admin-backend .modal-backdrop {
  background: rgba(8,8,8,.65);
  backdrop-filter: blur(6px) saturate(1.2);
}

/* ════════════════════════════════════════════════════════════════════
   21. RESPONSIVE ADJUSTMENTS
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .admin-backend .xp,
  .admin-backend .panel-strong,
  .admin-backend .filter-bar,
  .admin-backend .metric-card,
  .admin-backend .page-stat,
  .admin-backend .page-hdr { border-radius: 16px; }

  .admin-backend .drawer { border-radius: 18px; max-width: calc(100% - 1rem); }
  .admin-backend .float-modal-panel { border-radius: 18px; }

  .admin-backend .xp-ph { padding: .9rem 1.1rem; }
  .admin-backend .panel-body { padding: .9rem 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════════
   22. DRAWER STRUCTURE — Header / Body / Footer
   ════════════════════════════════════════════════════════════════════ */

/* Override the blanket > * rule for header/body/footer elements */
.admin-backend .drawer > .drawer-header {
  flex: none !important;
  overflow: visible !important;
  padding: 0 !important;
  min-height: auto !important;
}
.admin-backend .drawer > .drawer-body {
  overflow-y: auto !important;
  padding: 1.2rem 1.3rem !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.admin-backend .drawer > .drawer-footer {
  flex: none !important;
  overflow: hidden !important;
  padding: .85rem 1.2rem !important;
  min-height: auto !important;
}

/* Drawer header */
.admin-backend .drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(90deg, rgba(225,34,29,.06), transparent 65%);
}
.admin-backend .drawer-header-icon {
  width: 2.25rem; height: 2.25rem;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(225,34,29,.22), rgba(153,23,20,.14));
  box-shadow: 0 4px 14px rgba(153,23,20,.18), inset 0 1px 0 rgba(255,255,255,.1);
  display: grid; place-items: center;
  color: #E1221D;
}
.admin-backend .drawer-header-text { flex: 1; min-width: 0; }
.admin-backend .drawer-header-eyebrow {
  display: block;
  font-size: .54rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  background: var(--pri); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.admin-backend .drawer-header-title {
  font-size: .92rem; font-weight: 950; color: var(--txt);
  margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-backend .drawer-close {
  flex-shrink: 0;
  width: 1.9rem; height: 1.9rem;
  border-radius: 8px;
  border: 0; background: rgba(255,255,255,.06);
  color: var(--txt3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .14s, color .14s;
  padding: 0; font-size: .8rem; line-height: 1;
}
.admin-backend .drawer-close:hover { background: rgba(255,255,255,.12); color: var(--txt); }

/* Drawer footer */
.admin-backend .drawer-footer {
  flex-shrink: 0;
  padding: .85rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, transparent, rgba(153,23,20,.04));
  display: flex;
  gap: .6rem;
}

/* ════════════════════════════════════════════════════════════════════
   23. FORM SECTIONS — New panel design system for all drawer forms
   ════════════════════════════════════════════════════════════════════ */

.frm-section {
  border-radius: 14px;
  background: rgba(255,255,255,.033);
  border: 1px solid rgba(255,255,255,.054);
  overflow: hidden;
}
.frm-section-head {
  display: flex; align-items: center; gap: .58rem;
  padding: .56rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(0,0,0,.13);
}
.frm-section-icon {
  width: 1.58rem; height: 1.58rem;
  border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.frm-section-label {
  font-size: .53rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase;
  background: var(--pri); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.frm-section-heading { display: flex; flex-direction: column; gap: .12rem; }
.frm-section-required {
  font-size: .56rem; font-weight: 700; letter-spacing: .02em;
  color: rgba(211,207,201,.65);
}
.frm-section-body {
  padding: .85rem .9rem;
  display: flex; flex-direction: column; gap: .65rem;
}

/* Grid layouts */
.frm-row   { display: grid; gap: .58rem; }
.frm-row-2 { grid-template-columns: 1fr 1fr; }
.frm-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Field wrapper */
.frm-field { display: flex; flex-direction: column; gap: .24rem; }
.frm-label {
  font-size: .59rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt3);
}
.frm-label-note {
  font-size: .57rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--txt3); opacity: .68; margin-left: .22rem;
}
.frm-hint {
  font-size: .61rem; color: var(--txt3); font-weight: 500; margin-top: .05rem; line-height: 1.4;
}

/* Toggle switch */
.frm-toggle {
  display: flex; align-items: center; gap: .8rem;
  padding: .68rem .9rem;
  border-radius: 12px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .14s, border-color .14s;
  user-select: none;
}
.frm-toggle:hover { background: rgba(255,255,255,.046); border-color: rgba(255,255,255,.1); }
/* The native box, hidden so the track-and-thumb below can stand in for it.
   Written as a descendant rather than a bare class on purpose: the global
   `input[type="checkbox"]` rule in input.css carries a type attribute and so
   outweighs a single class, and its `display: inline-grid` was winning -- which
   is why a stray square sat beside every toggle in the panel. */
.frm-toggle > .frm-toggle-cb { display: none; }
.frm-toggle-track {
  flex-shrink: 0;
  width: 2.48rem; height: 1.36rem;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
  position: relative;
  transition: background .2s, border-color .2s;
}
.frm-toggle-thumb {
  position: absolute; top: 50%; left: .16rem;
  transform: translateY(-50%);
  width: .96rem; height: .96rem;
  border-radius: 999px;
  background: rgba(255,255,255,.3);
  transition: left .18s, background .18s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.frm-toggle-cb:checked + .frm-toggle-track {
  background: linear-gradient(135deg, rgba(225,34,29,.48), rgba(153,23,20,.36));
  border-color: rgba(225,34,29,.38);
}
.frm-toggle-cb:checked + .frm-toggle-track .frm-toggle-thumb {
  left: calc(100% - 1.14rem);
  background: #fff;
}
.frm-toggle-text { flex: 1; min-width: 0; }
.frm-toggle-title { font-size: .8rem; font-weight: 900; color: var(--txt); }
.frm-toggle-desc  { font-size: .61rem; color: var(--txt3); font-weight: 500; margin-top: .07rem; }

/* Multi-select fields */
select[multiple].field { padding: .3rem !important; }
select[multiple].field option { padding: .26rem .46rem; border-radius: 5px; }
select[multiple].field option:checked {
  background: linear-gradient(135deg, rgba(225,34,29,.32), rgba(153,23,20,.2)) !important;
  color: #F1C2BE;
}

/* Recipe / consumption rows */
.frm-recipe-row {
  display: grid;
  grid-template-columns: 1fr 6.2rem 1.9rem;
  gap: .42rem;
  align-items: center;
}
.frm-recipe-add {
  width: 100%;
  padding: .4rem;
  border-radius: 8px;
  border: 1px dashed rgba(225,34,29,.2);
  background: rgba(225,34,29,.04);
  color: var(--txt3);
  font-size: .67rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  margin-top: .32rem;
}
.frm-recipe-add:hover {
  background: rgba(225,34,29,.1);
  border-color: rgba(225,34,29,.35);
  color: #F1C2BE;
}
.frm-rm-btn {
  display: flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 7px; border: 0;
  background: rgba(239,68,68,.08);
  color: rgba(239,68,68,.52);
  cursor: pointer;
  transition: background .14s, color .14s;
  font-size: .8rem;
}
.frm-rm-btn:hover { background: rgba(239,68,68,.18); color: #f87171; }

/* Danger zone inside drawer body */
.frm-danger-zone {
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,.16);
  background: rgba(239,68,68,.04);
  padding: .85rem .9rem;
}
.frm-danger-label {
  font-size: .53rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(239,68,68,.55); margin-bottom: .55rem; display: block;
}

/* ==========================================================================
   24. ACTION PANELS V2 - create / edit / detail surfaces
   ========================================================================== */
.admin-backend .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(153,23,20,.2), transparent 30rem),
    rgba(8,8,8,.72);
  backdrop-filter: blur(6px);
}
.admin-backend .modal-backdrop.open { display: block; }

.admin-backend .drawer {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(100vw, 38rem) !important;
  max-width: min(100vw, 38rem) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  border-radius: 24px 0 0 24px !important;
  display: flex !important;
  opacity: 0;
  pointer-events: none;
  transform: translateX(102%) !important;
  transition: transform .34s cubic-bezier(.2,.75,.2,1), opacity .22s ease;
  background:
    linear-gradient(150deg, rgba(25,25,25,.98), rgba(19,19,19,.99) 58%, rgba(10,10,10,.99)),
    var(--panel-bg) !important;
  border: 1px solid rgba(225,34,29,.16) !important;
  border-right: 0 !important;
  box-shadow:
    -28px 0 90px rgba(0,0,0,.62),
    inset 1px 0 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.03) !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}
.admin-backend .drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) !important;
}
.admin-backend .drawer::before {
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  height: auto !important;
  background: linear-gradient(180deg, #E1221D, #991714 48%, #E1221D) !important;
  opacity: .95 !important;
  border-radius: 24px 0 0 24px !important;
  pointer-events: none !important;
}
.admin-backend .drawer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(225,34,29,.085), transparent 18rem),
    radial-gradient(circle at 84% 4%, rgba(225,34,29,.11), transparent 16rem);
}

.admin-backend .drawer > .drawer-header,
.admin-backend .drawer > .drawer-header-auto {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  padding: 1.2rem 1.35rem 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  background:
    linear-gradient(90deg, rgba(225,34,29,.13), rgba(153,23,20,.045) 58%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  gap: .9rem !important;
}
.admin-backend .drawer-header-icon {
  width: 2.7rem !important;
  height: 2.7rem !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(225,34,29,.28), rgba(153,23,20,.16)),
    rgba(255,255,255,.035) !important;
  color: #F1C2BE !important;
  box-shadow:
    0 10px 26px rgba(153,23,20,.22),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.admin-backend .drawer-header-eyebrow {
  font-size: .58rem !important;
  letter-spacing: .22em !important;
}
.admin-backend .drawer-header-title {
  margin-top: .16rem !important;
  font-size: 1.15rem !important;
  line-height: 1.12 !important;
}
.admin-backend .drawer-close {
  width: 2.25rem !important;
  height: 2.25rem !important;
  margin-left: auto !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(235,231,224,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.admin-backend .drawer-close:hover {
  background: rgba(225,34,29,.16) !important;
  color: #fff !important;
}

.admin-backend .drawer > .drawer-body,
.admin-backend .drawer > .drawer-body-auto {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 1.1rem 1.25rem 1.35rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;
}
.admin-backend .drawer.open :is(input, select, textarea, button, a, label, form) {
  pointer-events: auto;
}
/* The drawer body is a scrolling flex column, so the form inside it is a flex
   item -- and a flex item shrinks before its container scrolls. A long form was
   therefore squashed to fit instead of scrolling: every section compressed, and
   because .frm-section hides its overflow, each one clipped its own contents.
   On the user form that buried the required Gender field, which then blocked
   Save with a validation error pointing at a field nobody could see.
   Refusing to shrink is what lets the body scroll as intended. */
.admin-backend .drawer > .drawer-body > form.mt-6,
.admin-backend .drawer > .drawer-body-auto > form.mt-6 {
  margin-top: 0 !important;
}

.admin-backend .drawer > .drawer-body > form,
.admin-backend .drawer > .drawer-body-auto > form,
.admin-backend .drawer > .drawer-body > .resource-add-panel form,
.admin-backend .drawer > .drawer-body-auto > .resource-add-panel form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex: 0 0 auto;
}

/* Same reason, one level down: the sections are flex items of the form. */
.admin-backend .drawer :is(.frm-section, .ef-section, .frm-toggle),
.admin-backend .float-modal-panel :is(.frm-section, .ef-section, .frm-toggle) {
  flex: 0 0 auto;
}
.admin-backend .drawer .btn-primary.w-full,
.admin-backend .drawer .btn-danger.w-full,
.admin-backend .drawer .btn-secondary.w-full {
  min-height: 2.65rem;
  border-radius: 12px;
}

.admin-backend .drawer .frm-section,
.admin-backend .drawer .ef-section,
.admin-backend .drawer .settings-drawer-box,
.admin-backend .drawer .resource-add-panel,
.admin-backend .float-modal-panel .frm-section,
.admin-backend .float-modal-panel [class*="rounded"][class*="border"] {
  border-radius: 16px !important;
  border: 1px solid rgba(225,34,29,.105) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.058), rgba(255,255,255,.018) 70%, rgba(153,23,20,.045)) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  overflow: hidden;
}
.admin-backend .drawer .frm-section-head,
.admin-backend .drawer .ef-section-head {
  padding: .7rem .95rem !important;
  background:
    linear-gradient(90deg, rgba(225,34,29,.1), rgba(255,255,255,.018) 68%) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.admin-backend .drawer .frm-section-icon,
.admin-backend .drawer .ef-section-icon {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 9px !important;
}
.admin-backend .drawer .frm-section-body,
.admin-backend .drawer .ef-section-body {
  padding: .95rem !important;
  gap: .75rem !important;
}

.admin-backend .drawer .field,
.admin-backend .float-modal-panel .field {
  min-height: 2.55rem;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 1px rgba(255,255,255,.035),
    0 8px 18px rgba(0,0,0,.13) !important;
}
.admin-backend .drawer textarea.field,
.admin-backend .float-modal-panel textarea.field {
  min-height: 5.5rem;
}
.admin-backend .drawer .field:focus,
.admin-backend .float-modal-panel .field:focus {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 2px rgba(225,34,29,.38),
    0 12px 24px rgba(153,23,20,.16) !important;
}
.admin-backend .drawer .label,
.admin-backend .drawer .frm-label,
.admin-backend .float-modal-panel .label {
  color: rgba(235,231,224,.62) !important;
}

.admin-backend .drawer .resource-add-tabs {
  position: sticky;
  top: -1.1rem;
  z-index: 3;
  margin: -1.1rem -1.25rem .9rem;
  padding: .85rem 1.25rem;
  background: rgba(19,19,19,.92);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.admin-backend .drawer .resource-add-tab {
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
}
.admin-backend .drawer .resource-add-tab.active {
  background: linear-gradient(135deg, rgba(225,34,29,.28), rgba(153,23,20,.16)) !important;
  color: #fff !important;
}

.admin-backend .float-modal {
  background:
    radial-gradient(circle at 50% 0, rgba(225,34,29,.15), transparent 32rem),
    rgba(8,8,8,.72) !important;
  backdrop-filter: blur(6px) !important;
}
.admin-backend .float-modal-panel {
  border-radius: 24px !important;
  background:
    linear-gradient(150deg, rgba(25,25,25,.985), rgba(19,19,19,.99) 60%, rgba(10,10,10,.99)) !important;
  border: 1px solid rgba(225,34,29,.16) !important;
  box-shadow:
    0 34px 96px rgba(0,0,0,.68),
    0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.admin-backend .float-modal-panel::before {
  height: 3px !important;
  opacity: .9 !important;
}
.admin-backend #session-detail-modal .float-modal-panel,
.admin-backend #bill-modal .float-modal-panel,
.admin-backend #invoice-modal .float-modal-panel,
.admin-backend #move-session-modal .float-modal-panel,
.admin-backend #start-modal .float-modal-panel,
.admin-backend #stock-action-modal .float-modal-panel,
.admin-backend #import-json-modal .float-modal-panel {
  max-width: min(96vw, 46rem) !important;
}
.admin-backend #order-modal .float-modal-panel {
  max-width: min(98vw, 64rem) !important;
}

.admin-backend.page-cashier #bill-modal .float-modal-panel,
.admin-backend.page-cashier #invoice-modal .float-modal-panel,
.admin-backend.page-bills #bill-modal .float-modal-panel,
.admin-backend.page-bills #invoice-modal .float-modal-panel {
  width: min(94vw, 42rem) !important;
  max-width: min(94vw, 42rem) !important;
  max-height: min(88vh, 58rem) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(150deg, rgba(25,25,25,.985), rgba(19,19,19,.99) 60%, rgba(10,10,10,.99)) !important;
  border: 1px solid rgba(225,34,29,.18) !important;
  box-shadow:
    0 34px 96px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 70px rgba(153,23,20,.14) !important;
}
.admin-backend.page-cashier #bill-modal .float-modal-panel > div:first-child,
.admin-backend.page-cashier #invoice-modal .float-modal-panel > div:first-child,
.admin-backend.page-bills #bill-modal .float-modal-panel > div:first-child,
.admin-backend.page-bills #invoice-modal .float-modal-panel > div:first-child {
  border-radius: 24px 24px 0 0;
}

@media (max-width: 760px) {
  .admin-backend .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .admin-backend .drawer::before { border-radius: 0 !important; }
  .admin-backend .drawer > .drawer-header,
  .admin-backend .drawer > .drawer-header-auto {
    padding: 1rem !important;
  }
  .admin-backend .drawer > .drawer-body,
  .admin-backend .drawer > .drawer-body-auto {
    padding: 1rem !important;
  }
  .frm-row-2,
  .frm-row-3,
  .admin-backend .drawer .ef-actions-grid,
  .admin-backend .drawer .grid.grid-cols-2,
  .admin-backend .drawer .grid.grid-cols-5 {
    grid-template-columns: 1fr !important;
  }
}

/* All admin drawers use the inventory-style centered floating panel. */
.admin-backend .drawer,
.admin-backend.page-menu .drawer,
.admin-backend.page-inventory .drawer {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(94vw, 42rem) !important;
  max-width: min(94vw, 42rem) !important;
  height: auto !important;
  max-height: min(88vh, 58rem) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(225,34,29,.18) !important;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(.96) !important;
  transition: transform .26s cubic-bezier(.2,.75,.2,1), opacity .18s ease;
  box-shadow:
    0 34px 96px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 70px rgba(153,23,20,.14) !important;
}
.admin-backend .drawer.open,
.admin-backend.page-menu .drawer.open,
.admin-backend.page-inventory .drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1) !important;
}
.admin-backend .drawer::before,
.admin-backend.page-menu .drawer::before,
.admin-backend.page-inventory .drawer::before {
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(90deg, #E1221D, #991714 52%, #E1221D) !important;
}
.admin-backend .drawer > .drawer-header,
.admin-backend .drawer > .drawer-header-auto,
.admin-backend.page-menu .drawer > .drawer-header,
.admin-backend.page-menu .drawer > .drawer-header-auto,
.admin-backend.page-inventory .drawer > .drawer-header,
.admin-backend.page-inventory .drawer > .drawer-header-auto {
  border-radius: 24px 24px 0 0 !important;
}

@media (max-width: 760px) {
  .admin-backend .drawer,
  .admin-backend.page-menu .drawer,
  .admin-backend.page-inventory .drawer {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 18px !important;
  }
  .admin-backend .drawer::before,
  .admin-backend.page-menu .drawer::before,
  .admin-backend.page-inventory .drawer::before,
  .admin-backend .drawer > .drawer-header,
  .admin-backend .drawer > .drawer-header-auto,
  .admin-backend.page-menu .drawer > .drawer-header,
  .admin-backend.page-menu .drawer > .drawer-header-auto,
  .admin-backend.page-inventory .drawer > .drawer-header,
  .admin-backend.page-inventory .drawer > .drawer-header-auto {
    border-radius: 18px 18px 0 0 !important;
  }
}

/* Final lock: every admin create/edit/detail panel shares one centered design. */
.admin-backend .drawer,
.admin-backend .float-modal-panel {
  width: min(94vw, 42rem) !important;
  max-width: min(94vw, 42rem) !important;
  max-height: min(88vh, 58rem) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(150deg, rgba(25,25,25,.985), rgba(19,19,19,.99) 60%, rgba(10,10,10,.99)) !important;
  border: 1px solid rgba(225,34,29,.18) !important;
  box-shadow:
    0 34px 96px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 70px rgba(153,23,20,.14) !important;
}
.admin-backend .drawer::before,
.admin-backend .float-modal-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(90deg, #E1221D, #991714 52%, #E1221D) !important;
  opacity: .95 !important;
}
.admin-backend .float-modal-panel {
  overflow-y: auto !important;
}
.admin-backend #order-modal .float-modal-panel,
.admin-backend #session-detail-modal .float-modal-panel,
.admin-backend #bill-modal .float-modal-panel,
.admin-backend #invoice-modal .float-modal-panel,
.admin-backend #move-session-modal .float-modal-panel,
.admin-backend #start-modal .float-modal-panel,
.admin-backend #stock-action-modal .float-modal-panel,
.admin-backend #import-json-modal .float-modal-panel {
  width: min(94vw, 42rem) !important;
  max-width: min(94vw, 42rem) !important;
  max-height: min(88vh, 58rem) !important;
}
/* Keep Stock Action controls comfortably inside the panel on every edge. */
.admin-backend #stock-action-modal .float-modal-panel.stock-action-panel {
  padding: 1.45rem 1.5rem 1.65rem !important;
}
.admin-backend .float-modal-panel > :first-child,
.admin-backend .drawer > .drawer-header,
.admin-backend .drawer > .drawer-header-auto {
  border-radius: 24px 24px 0 0 !important;
}

@media (max-width: 760px) {
  .admin-backend .drawer,
  .admin-backend .float-modal-panel,
  .admin-backend #order-modal .float-modal-panel,
  .admin-backend #session-detail-modal .float-modal-panel,
  .admin-backend #bill-modal .float-modal-panel,
  .admin-backend #invoice-modal .float-modal-panel,
  .admin-backend #move-session-modal .float-modal-panel,
  .admin-backend #start-modal .float-modal-panel,
  .admin-backend #stock-action-modal .float-modal-panel,
  .admin-backend #import-json-modal .float-modal-panel {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 18px !important;
  }
  .admin-backend .drawer::before,
  .admin-backend .float-modal-panel::before,
  .admin-backend .float-modal-panel > :first-child,
  .admin-backend .drawer > .drawer-header,
  .admin-backend .drawer > .drawer-header-auto {
    border-radius: 18px 18px 0 0 !important;
  }
  .admin-backend #stock-action-modal .float-modal-panel.stock-action-panel {
    padding: 1.2rem 1.1rem 1.35rem !important;
  }
}

/* Inventory look-alike pass: one exact visual language for every admin panel. */
.admin-backend .inventory-style-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(94vw, 42rem) !important;
  max-width: min(94vw, 42rem) !important;
  height: auto !important;
  max-height: min(88vh, 58rem) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(225,34,29,.18) !important;
  background:
    linear-gradient(155deg, rgba(19,19,19,.995), rgba(19,19,19,.985) 58%, rgba(10,10,10,.99)) !important;
  box-shadow:
    0 34px 96px rgba(0,0,0,.74),
    0 0 0 1px rgba(255,255,255,.045),
    0 0 72px rgba(153,23,20,.16),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translate(-50%, -46%) scale(.96) !important;
  opacity: 0;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.2,.75,.2,1), opacity .18s ease !important;
}
.admin-backend .drawer.inventory-style-panel.open,
.admin-backend .float-modal.open .inventory-style-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}
.admin-backend .inventory-style-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(90deg, #E1221D, #991714 52%, #E1221D) !important;
  opacity: .98 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.admin-backend .inventory-style-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(225,34,29,.11), transparent 18rem),
    radial-gradient(circle at 86% 0%, rgba(225,34,29,.13), transparent 17rem) !important;
  z-index: 0 !important;
}

.admin-backend .inventory-style-panel > *,
.admin-backend .inventory-style-panel .drawer-header,
.admin-backend .inventory-style-panel .drawer-body,
.admin-backend .inventory-style-panel .drawer-body-auto {
  position: relative !important;
  z-index: 1 !important;
}
.admin-backend .inventory-style-panel .drawer-header,
.admin-backend .inventory-style-panel .drawer-header-auto,
.admin-backend .inventory-style-panel .inventory-style-panel-head {
  flex: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1.05rem 1.2rem .95rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 24px 24px 0 0 !important;
  background:
    linear-gradient(90deg, rgba(225,34,29,.105), rgba(153,23,20,.045) 62%, transparent) !important;
}
.admin-backend .inventory-style-panel .drawer-header-icon {
  display: none !important;
}
.admin-backend .inventory-style-panel .drawer-header-title,
.admin-backend .inventory-style-panel h2,
.admin-backend .inventory-style-panel .om-title {
  margin-top: .15rem !important;
  font-size: 1.45rem !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
}
.admin-backend .inventory-style-panel .drawer-header-eyebrow,
.admin-backend .inventory-style-panel .page-eyebrow,
.admin-backend .inventory-style-panel .xp-kicker,
.admin-backend .inventory-style-panel .inventory-style-kicker {
  display: block !important;
  font-size: .6rem !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  background: var(--pri) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.admin-backend .inventory-style-panel .drawer-close,
.admin-backend .inventory-style-panel [id$="-close"],
.admin-backend .inventory-style-panel .btn-ghost.shrink-0 {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(235,231,224,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.admin-backend .inventory-style-panel .drawer-body,
.admin-backend .inventory-style-panel .drawer-body-auto,
.admin-backend .inventory-style-panel > form,
.admin-backend .inventory-style-panel > .om-body,
.admin-backend .inventory-style-panel > div:not(.drawer-header):not(.drawer-header-auto):not(.inventory-style-panel-head) {
  min-height: 0 !important;
}
.admin-backend .inventory-style-panel .drawer-body,
.admin-backend .inventory-style-panel .drawer-body-auto {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 1rem 1.15rem 1.2rem !important;
}
.admin-backend .inventory-style-panel > form,
.admin-backend .inventory-style-panel .drawer-body > form,
.admin-backend .inventory-style-panel .drawer-body-auto > form {
  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;
}

.admin-backend .inventory-style-panel .frm-section,
.admin-backend .inventory-style-panel .ef-section,
.admin-backend .inventory-style-panel .settings-drawer-box,
.admin-backend .inventory-style-panel .resource-add-panel,
.admin-backend .inventory-style-panel .rounded-lg,
.admin-backend .inventory-style-panel .rounded {
  border-radius: 16px !important;
  border: 1px solid rgba(225,34,29,.105) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.058), rgba(255,255,255,.018) 70%, rgba(153,23,20,.045)) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.admin-backend .inventory-style-panel .frm-section-head,
.admin-backend .inventory-style-panel .ef-section-head {
  padding: .68rem .95rem !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background:
    linear-gradient(90deg, rgba(225,34,29,.1), rgba(255,255,255,.018) 68%) !important;
}
.admin-backend .inventory-style-panel .field {
  min-height: 2.55rem !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 1px rgba(255,255,255,.035),
    0 8px 18px rgba(0,0,0,.13) !important;
}
.admin-backend .inventory-style-panel .frm-field-help {
  display: block;
  margin-top: .4rem;
  color: rgba(235,231,224,.48);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.45;
}
.admin-backend .inventory-style-panel .btn-primary {
  background: linear-gradient(135deg, #E1221D 0%, #991714 60%, #E1221D 100%) !important;
  box-shadow: 0 8px 26px rgba(153,23,20,.38) !important;
}

@media (max-width: 760px) {
  .admin-backend .inventory-style-panel {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 18px !important;
  }
  .admin-backend .inventory-style-panel::before,
  .admin-backend .inventory-style-panel .drawer-header,
  .admin-backend .inventory-style-panel .drawer-header-auto,
  .admin-backend .inventory-style-panel .inventory-style-panel-head {
    border-radius: 18px 18px 0 0 !important;
  }
}
.admin-flash {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  color: #e5e7eb;
  font-size: .85rem;
  font-weight: 800;
}
.admin-flash-error {
  border-color: rgba(248,113,113,.34);
  background: rgba(127,29,29,.22);
  color: #fecaca;
}
.admin-flash-success {
  border-color: rgba(52,211,153,.3);
  background: rgba(6,78,59,.2);
  color: #bbf7d0;
}

/* Final drawer click safety: keep active drawer controls above backdrop/glass layers. */
.admin-backend .drawer.inventory-style-panel {
  z-index: 1000 !important;
}
.admin-backend .drawer.inventory-style-panel:not(.open),
.admin-backend .drawer.inventory-style-panel:not(.open) * {
  pointer-events: none !important;
}
.admin-backend .drawer.inventory-style-panel:not(.open) {
  visibility: hidden !important;
}
.admin-backend .drawer.inventory-style-panel.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.admin-backend .drawer.inventory-style-panel > .drawer-header,
.admin-backend .drawer.inventory-style-panel > .drawer-header-auto,
.admin-backend .drawer.inventory-style-panel > .drawer-body,
.admin-backend .drawer.inventory-style-panel > .drawer-body-auto {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}
.admin-backend .drawer.inventory-style-panel.open :is(input, select, textarea, button, a, label, form) {
  pointer-events: auto !important;
}
.admin-backend .drawer.inventory-style-panel.open :is(.drawer-header, .drawer-header-auto, .drawer-body, .drawer-body-auto, div, section) {
  pointer-events: auto !important;
}
.admin-backend .drawer.inventory-style-panel.open :is(button, a, select, label) {
  cursor: pointer !important;
}

/* Invoice footer uses a labelled action, not an icon-only close control. */
.admin-backend #invoice-modal #invoice-modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 2.65rem !important;
  height: auto !important;
  padding: .65rem 1.35rem !important;
  border-radius: 12px !important;
}

/* Bill Details needs a larger visual gutter than icon-only dialogs. */
.admin-backend #bill-modal .float-modal-panel.inventory-style-panel {
  width: min(90vw, 42rem) !important;
  max-width: min(90vw, 42rem) !important;
  max-height: min(84dvh, 56rem) !important;
}
.admin-backend #bill-modal #bill-modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-height: 2.65rem !important;
  height: auto !important;
  padding: .65rem 1.2rem !important;
  border-radius: 12px !important;
}
@media (max-width: 760px) {
  .admin-backend #bill-modal .float-modal-panel.inventory-style-panel {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
  }
}

/* ================================================================
   ADMIN LAYOUT NORMALIZATION & VISIBLE SCROLL AFFORDANCE
   Scoped to the admin shell so kiosk/profile geometry is untouched.
   ================================================================ */
.admin-document {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(225, 34, 29, .78) rgba(255, 255, 255, .035);
}

.admin-document::-webkit-scrollbar,
.admin-backend::-webkit-scrollbar {
  display: block;
  width: 10px;
  height: 10px;
}
.admin-document::-webkit-scrollbar-track,
.admin-backend::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(25, 25, 25, .96), rgba(25, 25, 25, .82));
}
.admin-document::-webkit-scrollbar-thumb,
.admin-backend::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(225, 34, 29, .94), rgba(123, 123, 125, .72));
  background-clip: padding-box;
}
.admin-document::-webkit-scrollbar-thumb:hover,
.admin-backend::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #E1221D, rgba(235, 231, 224, .76));
  background-clip: padding-box;
}
.admin-document::-webkit-scrollbar-button,
.admin-backend::-webkit-scrollbar-button {
  display: none;
}

.admin-backend {
  --admin-gutter: clamp(1rem, 1.8vw, 1.75rem);
  --admin-block-gap: clamp(1rem, 1.45vw, 1.5rem);
  overflow-x: hidden;
}
.admin-backend .app-shell,
.admin-backend .main-stage,
.admin-backend .content {
  min-width: 0;
  width: 100%;
}
.admin-backend .topbar {
  width: 100%;
  padding-inline: var(--admin-gutter);
}
.admin-backend .content {
  box-sizing: border-box;
  max-width: 1800px;
  margin-inline: auto;
  padding: clamp(1rem, 1.7vw, 1.75rem) var(--admin-gutter) clamp(2.75rem, 4vw, 4rem);
}
.admin-backend .content > *,
.admin-backend .page-hdr-left,
.admin-backend .page-hdr-left > div,
.admin-backend .panel-header > *,
.admin-backend .xp-ph > *,
.admin-backend .filter-bar-main > *,
.admin-backend .filter-bar-advanced > * {
  min-width: 0;
}
.admin-backend .page-hdr {
  width: 100%;
  margin: 0 0 var(--admin-block-gap);
  padding: clamp(1rem, 1.45vw, 1.4rem) clamp(1rem, 1.6vw, 1.5rem);
  align-items: center;
}
.admin-backend .page-hdr-left {
  align-items: center;
}
.admin-backend .page-hdr-actions {
  margin-left: auto;
  padding-top: 0;
  justify-content: flex-end;
}
.admin-backend :is(.panel, .panel-strong, .xp, .filter-bar, .page-stats) {
  width: 100%;
  max-width: 100%;
}
.admin-backend :is(.panel-header, .xp-ph, .filter-bar-main) {
  align-items: center;
}
.admin-backend :is(.grid, [class*="grid-cols-"]) > * {
  min-width: 0;
}
.admin-backend :is(input, select, textarea, button) {
  max-width: 100%;
}

/* Restore scroll visibility only on known admin scrolling surfaces. */
.admin-backend :is(
  .sidebar-nav,
  .drawer-body,
  .drawer-body-auto,
  .float-modal-panel,
  .topbar-notification-panel__list,
  .overflow-y-auto,
  .overflow-x-auto
) {
  scrollbar-width: thin;
  scrollbar-color: rgba(225, 34, 29, .68) rgba(255, 255, 255, .035);
}
.admin-backend :is(
  .sidebar-nav,
  .drawer-body,
  .drawer-body-auto,
  .float-modal-panel,
  .topbar-notification-panel__list,
  .overflow-y-auto,
  .overflow-x-auto
)::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}
.admin-backend :is(
  .sidebar-nav,
  .drawer-body,
  .drawer-body-auto,
  .float-modal-panel,
  .topbar-notification-panel__list,
  .overflow-y-auto,
  .overflow-x-auto
)::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}
.admin-backend :is(
  .sidebar-nav,
  .drawer-body,
  .drawer-body-auto,
  .float-modal-panel,
  .topbar-notification-panel__list,
  .overflow-y-auto,
  .overflow-x-auto
)::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(225, 34, 29, .88), rgba(123, 123, 125, .62));
  background-clip: padding-box;
}
.admin-backend :is(
  .sidebar-nav,
  .drawer-body,
  .drawer-body-auto,
  .float-modal-panel,
  .topbar-notification-panel__list,
  .overflow-y-auto,
  .overflow-x-auto
)::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #E1221D, rgba(235, 231, 224, .72));
  background-clip: padding-box;
}
.admin-backend :is(
  .sidebar-nav,
  .drawer-body,
  .drawer-body-auto,
  .float-modal-panel,
  .topbar-notification-panel__list,
  .overflow-y-auto,
  .overflow-x-auto
)::-webkit-scrollbar-button {
  display: none;
}
.admin-backend .overflow-x-auto {
  max-width: 100%;
  overscroll-behavior-inline: contain;
}

@media (max-width: 760px) {
  .admin-backend {
    --admin-gutter: .875rem;
    --admin-block-gap: 1rem;
  }
  .admin-backend .content {
    padding-top: 1rem;
    padding-bottom: 2.75rem;
  }
  .admin-backend .page-hdr {
    align-items: stretch;
    gap: .9rem;
    padding: 1rem;
  }
  .admin-backend .page-hdr-left {
    width: 100%;
    align-items: center;
  }
  .admin-backend .page-hdr-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .admin-backend :is(.panel-header, .xp-ph, .filter-bar-main) {
    gap: .75rem;
  }
  .admin-backend :is(.panel-body, .filter-bar-main, .filter-bar-advanced) {
    padding-inline: 1rem;
  }
}

@media (max-width: 520px) {
  .admin-backend .page-hdr-actions > :is(a, button) {
    flex: 1 1 auto;
    justify-content: center;
  }
  .admin-backend .page-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  }
}

/* ── Signed-in kiosk account on staff screens (System note A6) ────────────── */
/* Staff could see the name typed at session start but not who was actually
   signed in on the machine. These chips name the linked account everywhere a
   device or bill is listed. */
.dp-account-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-inline-start: .4rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(225, 34, 29, .16);
  color: #F1C2BE;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .02em;
  vertical-align: middle;
}
.dp-account-chip i { font-size: .62rem; }
.dp-account-meta {
  margin-top: .2rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--txt3);
}
.dp-account-meta--guest { opacity: .6; }
.d2-tile-account {
  font-size: .66rem;
  font-weight: 800;
  color: #F1C2BE;
  opacity: .9;
}

/* ══ Arabic / RTL for the admin panel (Cashier note B9) ═════════════════════ */
/* The panel was built left-to-right with physical offsets. Switching <html dir>
   flips text and logical properties, but these rules correct the places that
   were pinned with left/right, or that must stay LTR to stay readable. */
.topbar-lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 2rem;
  padding: 0 .6rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--txt2);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.topbar-lang:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

html[dir="rtl"] body.admin-backend {
  /* Arabic glyphs need more vertical room than the Latin stack. */
  line-height: 1.65;
}
html[dir="rtl"] body.admin-backend .sidebar { left: auto; right: 0; }
html[dir="rtl"] body.admin-backend .main-stage { margin-left: 0; }
html[dir="rtl"] body.admin-backend .topbar form svg { left: auto; right: .75rem; }
html[dir="rtl"] body.admin-backend .topbar form .field { padding-left: .75rem; padding-right: 2.25rem; }

/* Tables read right-to-left, but never the numbers inside them: an amount or a
   duration must keep its Latin digit order or it becomes unreadable. */
html[dir="rtl"] body.admin-backend .table-premium th,
html[dir="rtl"] body.admin-backend .table-premium td { text-align: right; }
html[dir="rtl"] body.admin-backend :is(
  [data-total-for], [data-cost-for], [data-timer], [data-game-play-time],
  .shift-stat strong, .wr-amount, .bm-stat-val, .metric-value, .d2-tx-amount
) {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Drawers and modals slide from the correct edge. */
html[dir="rtl"] body.admin-backend .drawer { left: auto; right: 0; }
html[dir="rtl"] body.admin-backend .sidebar-overlay { left: 0; right: 0; }

/* Chevrons and arrows point the other way; icons that carry no direction
   (cart, user, clock) must not be mirrored. */
html[dir="rtl"] body.admin-backend :is(.nav-chevron, .chevron, [data-chevron]) { transform: scaleX(-1); }

/* Flash messages and empty states keep their padding on the reading side. */
html[dir="rtl"] body.admin-backend .admin-flash { text-align: right; }


/* ══ Rendering performance ═════════════════════════════════════════════════ */
/* The admin renders long lists (devices, bills, menu, inventory) that the
   browser was laying out and painting in full on every frame. These rules only
   tell the engine what it may skip; nothing here changes how anything looks. */

/* Each card/row is an independent box: a change inside one can no longer force
   the whole page to re-layout. */
.admin-backend :is(
  .xp, .mc-card, .rt-card, .menu-card, .invoice-card, .dp-card,
  .wr-row, .player-row, .shift-bar, .group-bill-bar
) {
  contain: layout style;
}

/* Rows far outside the viewport are skipped entirely until they scroll near it.
   contain-intrinsic-size keeps the scrollbar honest while they are skipped. */
/* Card grids only: content-visibility on a <tr> makes column widths jump,
   because a row cannot be measured independently of its table. */
.admin-backend #tx-grid > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
}
.admin-backend :is(.menu-card, .invoice-card) {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

/* Scrollers get their own layer and stop the scroll chain from leaking to the
   page, which is what made nested lists feel sticky. */
.admin-backend :is(.content, .sidebar-nav, .bm-left, .players-list, .om-grid-outer, .om-cart-orders) {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Hover transitions name the properties they animate. "all" would make the
   browser watch every property, including layout ones. */
.admin-backend :is(.btn, .nav-link, .mc-card, .menu-card, .invoice-card, .player-action) {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2, 0, .2, 1);
}

/* Anything that lifts on hover is promoted once, not on every hover. */
.admin-backend :is(.menu-card, .invoice-card, .mc-card):hover {
  will-change: transform;
}


/* Respect the OS setting: no motion means no motion. */
@media (prefers-reduced-motion: reduce) {
  .admin-backend *,
  .admin-backend *::before,
  .admin-backend *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══ Navigation feel ═══════════════════════════════════════════════════════ */
/* Between two documents the browser paints the root background. With no colour
   set that is white, which is the flash between every admin page. */
html {
  background: #0d0d0d;
  color-scheme: dark;
}

/* Cross-document view transitions where the browser supports them: the old page
   cross-fades into the new one instead of blinking. Browsers without it simply
   ignore the rule and navigate as before. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .16s;
  animation-timing-function: cubic-bezier(.2, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* A hairline at the top of the screen, shown only once a navigation has been
   slow enough to be worth reporting. */
.admin-backend.is-navigating::before {
  content: "";
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 9999;
  height: 2px;
  background: linear-gradient(90deg, #E1221D, #F1C2BE);
  transform-origin: 0 50%;
  animation: admin-nav-progress 1.4s cubic-bezier(.2, .8, .3, 1) forwards;
  pointer-events: none;
}
@keyframes admin-nav-progress {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(.75); }
  100% { transform: scaleX(.96); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-backend.is-navigating::before { animation: none; transform: scaleX(1); }
}

/* ══ Devices page: live actions (no reload) ═════════════════════════════════ */
/* A subtle busy state while an action is in flight. Deliberately not a blocking
   overlay: the cashier can keep reading the map while a stop or start lands. */
.admin-backend.devices-busy .device-map-shell { cursor: progress; }
.admin-backend.devices-busy .devices-statsbar { opacity: .72; transition: opacity .12s; }

/* Values that just changed get a brief highlight, so an action that only moves
   a number is still visibly an action. */
@keyframes devices-value-flash {
  from { background: rgba(225, 34, 29, .22); }
  to   { background: transparent; }
}
.admin-backend .dp-statuschip,
.admin-backend .mc-status-dot {
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.devices-toast {
  position: fixed;
  z-index: 10000;
  inset-inline: 0;
  bottom: 1.5rem;
  margin-inline: auto;
  width: max-content;
  max-width: min(90vw, 28rem);
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: rgba(24, 24, 24, .97);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
  color: var(--txt);
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.devices-toast.is-visible { opacity: 1; transform: translateY(0); }
.devices-toast[data-tone="error"] { background: rgba(120, 18, 15, .97); color: #fff; }

/* ══ Move a player onto this device (start dialog) ══════════════════════════ */
/* Staff stand at the free machine and pull whoever is coming here, so this sits
   inside the start dialog rather than being its own modal. The button stays
   small: naming the customer is the common path, moving someone is the rare one. */

.admin-backend .start-move-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  /* Matches the Users button beside it so the row has one top and one bottom
     edge; it stays the smaller of the two on width, not on height. */
  height: 2.35rem;
  padding: 0 .6rem;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: var(--txt2);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.admin-backend .start-move-btn:hover {
  border-color: rgba(225, 34, 29, .45);
  background: rgba(225, 34, 29, .13);
  color: #fff;
}
.admin-backend .start-move-btn[aria-expanded="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, #e1221d, #991714);
  color: #fff;
}
.admin-backend .start-move-btn svg { flex: 0 0 auto; opacity: .85; }

/* ── The panel ───────────────────────────────────────────────────────────── */
.admin-backend .start-move-picker {
  margin-top: .6rem;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(17, 17, 17, .98);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .075),
    0 18px 44px rgba(0, 0, 0, .42);
  animation: start-move-in .16s cubic-bezier(.2, 0, .2, 1);
}
@keyframes start-move-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-backend .start-move-picker { animation: none; }
}

.admin-backend .start-move-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .85rem;
  background: linear-gradient(90deg, rgba(225, 34, 29, .13), transparent 70%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.admin-backend .start-move-kicker {
  display: block;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.admin-backend .start-move-head-copy strong {
  display: block;
  margin-top: .12rem;
  font-size: .8rem;
  font-weight: 900;
  color: #fff;
}
.admin-backend .start-move-close {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: var(--txt2);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.admin-backend .start-move-close:hover { background: rgba(225, 34, 29, .55); color: #fff; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.admin-backend .start-move-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .3);
}
.admin-backend .start-move-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--txt);
  font-size: .78rem;
  font-weight: 600;
  outline: none;
}
.admin-backend .start-move-search input::placeholder { color: rgba(255, 255, 255, .28); }

/* ── Rows ────────────────────────────────────────────────────────────────── */
.admin-backend .start-move-list {
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.admin-backend .start-move-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .62rem .85rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  background: transparent;
  color: var(--txt);
  text-align: start;
  cursor: pointer;
  transition: background .13s ease;
}
.admin-backend .start-move-row:last-child { border-bottom: 0; }
.admin-backend .start-move-row:hover { background: rgba(225, 34, 29, .1); }
.admin-backend .start-move-row:hover .start-move-arrow { opacity: 1; transform: translateX(2px); }
.admin-backend .start-move-row[disabled] { opacity: .45; cursor: default; }
.admin-backend .start-move-row[hidden] { display: none; }

.admin-backend .start-move-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(225, 34, 29, .3), rgba(153, 23, 20, .18));
  color: #fff;
  font-size: .82rem;
  font-weight: 950;
}

.admin-backend .start-move-main { min-width: 0; }
.admin-backend .start-move-who {
  display: block;
  font-size: .84rem;
  font-weight: 850;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-backend .start-move-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .12rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--txt3);
  overflow: hidden;
  white-space: nowrap;
}
.admin-backend .start-move-handle { color: #F1C2BE; }

.admin-backend .start-move-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .18rem;
  flex: 0 0 auto;
}
.admin-backend .start-move-status {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .1rem .42rem;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .04em;
  background: rgba(52, 211, 153, .14);
  color: #6ee7b7;
}
.admin-backend .start-move-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.admin-backend .start-move-status.paused { background: rgba(250, 204, 21, .14); color: #fde047; }
/* Elapsed time stays Latin-ordered even in Arabic, or the digits read backwards. */
.admin-backend .start-move-time {
  direction: ltr;
  font-size: .66rem;
  font-weight: 800;
  color: var(--txt3);
}
.admin-backend .start-move-arrow {
  flex: 0 0 auto;
  color: #F1C2BE;
  opacity: .35;
  transition: opacity .13s ease, transform .13s ease;
}

/* ── Empty / footer ──────────────────────────────────────────────────────── */
.admin-backend .start-move-empty {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--txt3);
}
.admin-backend .start-move-empty svg { opacity: .4; margin-bottom: .15rem; }
.admin-backend .start-move-empty strong { font-size: .8rem; font-weight: 850; color: var(--txt2); }
.admin-backend .start-move-empty span { font-size: .7rem; }

/* Shown when a search matches nobody, so the panel never just goes blank. */
.admin-backend .start-move-none {
  margin: 0;
  padding: 1.1rem .85rem;
  text-align: center;
  font-size: .7rem;
  font-weight: 800;
  color: var(--txt3);
}
.admin-backend .start-move-none[hidden] { display: none; }

.admin-backend .start-move-note {
  margin: 0;
  padding: .5rem .85rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  background: rgba(255, 255, 255, .02);
  font-size: .66rem;
  font-weight: 700;
  color: var(--txt3);
}
.admin-backend .start-move-picker .start-create-user-message:empty { display: none; }
.admin-backend .start-move-picker .start-create-user-message {
  padding: .5rem .85rem;
  font-size: .7rem;
  font-weight: 700;
}
.admin-backend .start-move-picker .start-create-user-message[data-tone="error"] { color: #fca5a5; }

@media (max-width: 520px) {
  .admin-backend .start-move-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .admin-backend .start-move-arrow { display: none; }
}

/* ══ Cashier: percentage discount ═══════════════════════════════════════════ */
/* The unit sits inside the field so the number is never read as currency. */
.admin-backend .bm-disc-percent { position: relative; display: flex; align-items: center; }
.admin-backend .bm-disc-percent .field { padding-inline-end: 2.1rem; }
.admin-backend .bm-disc-unit {
  position: absolute;
  inset-inline-end: .75rem;
  font-size: .8rem;
  font-weight: 900;
  color: var(--txt3);
  pointer-events: none;
}
.admin-backend .bm-disc-quick { display: flex; flex-wrap: wrap; gap: .3rem; }
.admin-backend .bm-disc-chip {
  padding: .26rem .55rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--txt2);
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.admin-backend .bm-disc-chip:hover {
  border-color: rgba(225, 34, 29, .45);
  background: rgba(225, 34, 29, .14);
  color: #fff;
}
.admin-backend .bm-disc-chip.bm-disc-clear { margin-inline-start: auto; }

/* ══ Cashier: pick a customer by name ═══════════════════════════════════════ */
/* The plain filter matches any substring, so picking from a list of the names
   actually present is the only way to search one exact person. */
.admin-backend .search-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  max-width: 24rem;
  width: 100%;
}
.admin-backend .search-row .field { flex: 1; min-width: 0; }

.admin-backend .name-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 2.3rem;
  padding: 0 .65rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: var(--txt2);
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.admin-backend .name-pick-btn:hover {
  border-color: rgba(225, 34, 29, .45);
  background: rgba(225, 34, 29, .13);
  color: #fff;
}
.admin-backend .name-pick-btn[aria-expanded="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, #e1221d, #991714);
  color: #fff;
}
.admin-backend .name-pick-btn svg { opacity: .8; }

/* Floats over the table so opening it never pushes the rows around. */
.admin-backend .name-pick-panel[hidden] { display: none !important; }
.admin-backend .name-pick-panel {
  position: absolute;
  z-index: 60;
  inset-inline: 0;
  top: calc(100% + .35rem);
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(17, 17, 17, .99);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 18px 44px rgba(0, 0, 0, .5);
  animation: name-pick-in .14s cubic-bezier(.2, 0, .2, 1);
}
@keyframes name-pick-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-backend .name-pick-panel { animation: none; }
}

.admin-backend .name-pick-search {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .3);
}
.admin-backend .name-pick-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--txt);
  font-size: .8rem;
  font-weight: 600;
  outline: none;
}
.admin-backend .name-pick-search input::placeholder { color: rgba(255, 255, 255, .28); }
.admin-backend .name-pick-close {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  color: var(--txt3);
  cursor: pointer;
}
.admin-backend .name-pick-close:hover { background: rgba(225, 34, 29, .5); color: #fff; }

.admin-backend .name-pick-list { max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.admin-backend .name-pick-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .7rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  background: transparent;
  color: var(--txt);
  text-align: start;
  cursor: pointer;
  transition: background .12s ease;
}
.admin-backend .name-pick-row:last-child { border-bottom: 0; }
.admin-backend .name-pick-row:hover { background: rgba(225, 34, 29, .12); }
.admin-backend .name-pick-avatar {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(225, 34, 29, .3), rgba(153, 23, 20, .18));
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
}
.admin-backend .name-pick-name {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* How many open rows this person has, so a repeat customer is obvious. */
.admin-backend .name-pick-count {
  flex: 0 0 auto;
  min-width: 1.15rem;
  padding: .05rem .34rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--txt3);
  font-size: .64rem;
  font-weight: 900;
  text-align: center;
}
.admin-backend .name-pick-empty {
  margin: 0;
  padding: .9rem .7rem;
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
  color: var(--txt3);
}

/* ══ Choosing a picture for a menu item ═════════════════════════════════════ */
/* The field used to be a lone text box asking for a URL, so most items had no
   picture at all. The file picker leads and the link stays beside it. */

.admin-backend .frm-field-image { grid-column: 1 / -1; }

.admin-backend .img-pick {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
}

.admin-backend .img-pick-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
}
.admin-backend .img-pick-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-backend .img-pick-empty {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt3);
}

.admin-backend .img-pick-side {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}
.admin-backend .img-pick-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}
/* A label, not a button: it wraps the hidden file input so a click opens the
   picker without any script standing in between. */
.admin-backend .img-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  margin: 0;
}
.admin-backend .img-pick-clear[hidden] { display: none; }

.admin-backend .img-pick-note {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  color: var(--txt3);
}
.admin-backend .img-pick-note.is-error { color: #f87171; }

@media (max-width: 560px) {
  .admin-backend .img-pick { grid-template-columns: 1fr; }
  .admin-backend .img-pick-preview { aspect-ratio: 16 / 9; }
}

/* ── Keyboard focus ───────────────────────────────────────────────────────
   The admin panel was the only one of the three surfaces with no focus ring
   at all: profile.css and the kiosk overlays both have one, and here a person
   tabbing through a form -- or working the till without reaching for the
   mouse -- had nothing on screen telling them where they were.

   :where() holds this at one class of weight on purpose, so the three rings
   that already exist keep winning and nothing ends up wearing two:
     .topbar-notif:focus-visible
     .topbar-notification-item:focus-visible   (keeps its inset offset)
     .dg-card:focus-visible                    (the device cards)

   An outline rather than a box-shadow, because the devices page sets
   `box-shadow: none !important` on several of these and a shadow ring would
   simply vanish there. */
.admin-backend :where(.btn, button, [role="button"], a.nav-link, [tabindex]):focus-visible {
  outline: 2px solid #E1221D;
  outline-offset: 2px;
}

/* The three search inputs whose ring is drawn with a box-shadow that something
   later overrides. The other fields in the panel already ring correctly;
   giving them an outline too would put a second red halo on every form. */
#start-modal .start-session-panel .field:focus-visible,
.admin-backend .start-move-search input:focus-visible,
.admin-backend .name-pick-search input:focus-visible {
  outline: 2px solid #E1221D;
  outline-offset: 2px;
}

/* ── Keyboard shortcuts card ──────────────────────────────────────────────
   Opened with "?", built by app.js on first use. Small, centred, and gone
   again on Escape or a click outside -- it is a reminder, not a screen. */
#shortcuts-card {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(10, 10, 10, .62);
  backdrop-filter: blur(6px);
}
#shortcuts-card[hidden] { display: none; }

#shortcuts-card .sc-sheet {
  width: min(22rem, 100%);
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 16px;
  background: linear-gradient(160deg, #202020, #161616);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

#shortcuts-card .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}
#shortcuts-card .sc-head strong {
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #EBE7E0;
}
#shortcuts-card .sc-close {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: rgba(235, 231, 224, .55);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
#shortcuts-card .sc-close:hover { color: #fff; background: rgba(255, 255, 255, .1); }

#shortcuts-card .sc-list { margin: 0; display: grid; gap: .3rem; }
#shortcuts-card .sc-list > div {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .3rem .1rem;
}
#shortcuts-card dt { margin: 0; flex: 0 0 3.1rem; }
#shortcuts-card dd {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(235, 231, 224, .72);
}
#shortcuts-card kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.6rem;
  padding: 0 .45rem;
  border-radius: 7px;
  background: rgba(225, 34, 29, .14);
  color: #E1221D;
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
}

/* The window a figure covers, on the card that shows it. Four metric cards sat
   in one row covering three different periods -- all time, right now, and
   today -- with nothing to say so, which invited exactly the wrong comparison
   between a day's food takings and the hall's entire history. */
.admin-backend .metric-period {
  margin-top: .3rem;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E1221D;
}

/* ══ The page header, and the "?" that explains the page ═══════════════════
   Every screen in this panel opens with the same block, so it is the one
   place where a change is felt everywhere. Three things were wrong with it:
   the title and the eyebrow carried almost the same weight, so neither led;
   the actions sat level with the title and competed with it; and there was
   nothing anywhere in the product that said what a screen was for.

   Software a hall runs on gets learned by one person and passed on by word of
   mouth, which is how the second cashier never finds out that a bill can be
   postponed. The "?" answers that, in whichever language the page is in.
   ═══════════════════════════════════════════════════════════════════════ */

.admin-backend .page-hdr-left { gap: 1rem; }

/* The eyebrow is a label, not a second title: small, spaced, and quiet enough
   that the eye goes to the name of the screen first. */
.admin-backend .page-eyebrow {
  display: block;
  margin-bottom: .22rem;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #E1221D;
  opacity: .9;
}
.admin-backend .page-title {
  display: block;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: #EBE7E0;
}
.admin-backend .page-copy {
  margin-top: .45rem;
  max-width: 62ch;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(235, 231, 224, .56);
}

.admin-backend .page-hdr-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* The "?" is the same size as the buttons beside it, so the row stays level,
   but quiet enough that it never competes with the page's own action. */
.admin-backend .page-help-btn {
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: rgba(235, 231, 224, .62);
  font-size: .9rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.admin-backend .page-help-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #E1221D, #991714);
  transform: translateY(-1px);
}

/* ── The panel it opens ──────────────────────────────────────────────────── */
.page-help {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(10, 10, 10, .66);
  backdrop-filter: blur(8px);
  animation: page-help-in .16s ease both;
}
.page-help[hidden] { display: none; }
@keyframes page-help-in { from { opacity: 0 } to { opacity: 1 } }

.page-help-sheet {
  width: min(34rem, 100%);
  max-height: min(80vh, 44rem);
  overflow-y: auto;
  padding: 1.25rem 1.4rem 1.4rem;
  border-radius: 20px;
  background: linear-gradient(165deg, #222 0%, #191919 46%, #151515 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

.page-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.page-help-head h2 {
  margin: .2rem 0 0;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #EBE7E0;
}
.page-help-close {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: rgba(235, 231, 224, .5);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.page-help-close:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.page-help-kicker {
  margin: 1.15rem 0 .55rem;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #E1221D;
}
.page-help-head .page-help-kicker { margin: 0; }

.page-help-what {
  margin: 0;
  padding: .8rem .9rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.6;
  color: rgba(235, 231, 224, .86);
}

.page-help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .1rem;
}
.page-help-list li {
  position: relative;
  padding: .42rem 0 .42rem 1.3rem;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.5;
  color: rgba(235, 231, 224, .74);
}
/* A brick, not a bullet: the brand's own mark, at the size of a full stop. */
.page-help-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .82rem;
  width: .38rem;
  height: .38rem;
  border-radius: 1px;
  background: #E1221D;
}
html[dir="rtl"] .page-help-list li { padding-left: 0; padding-right: 1.3rem; }

.page-help-keys {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .2rem .9rem;
}
.page-help-keys > div { display: flex; align-items: center; gap: .6rem; padding: .22rem 0; }
.page-help-keys dt { margin: 0; flex: 0 0 2.9rem; }
.page-help-keys dd {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  color: rgba(235, 231, 224, .62);
}
.page-help-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.85rem;
  height: 1.55rem;
  padding: 0 .4rem;
  border-radius: 7px;
  background: rgba(225, 34, 29, .14);
  color: #E1221D;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
}

@media (max-width: 640px) {
  .page-help { padding: 0; place-items: end stretch; }
  .page-help-sheet {
    width: 100%;
    max-height: 86vh;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-help { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PANEL, REDRAWN
   ══════════════════════════════════════════════════════════════════════════

   Everything above this point builds the admin out of translucent white laid
   over a dark gradient: panels at 5% white, rows at 3%, cards at 6%, each with
   a soft shadow and a 20px corner. It is the look every dark dashboard has had
   for ten years, and it has three concrete problems in a room like this one.

   Translucency has no colour of its own, so every surface is a slightly
   different grey depending on what the page gradient happens to be doing
   behind it -- a panel at the top of a screen and the same panel lower down
   are not the same colour. Nothing has an edge, so where one surface ends and
   the next begins is carried entirely by a shadow, which at these opacities is
   barely there; a cashier reading a column of money is given no help at all
   finding the row they are on. And a 20px corner on something the size of a
   table makes it read as a card about a table rather than the table itself.

   What follows replaces that with a surface ladder of real colours out of the
   brand's own Obsidian Core, each one a definite step from the last, with a
   hairline that says where it stops. The brand mark on a panel stops being a
   wash of red across the top and becomes the brick the identity is actually
   built on. And the tables -- the thing this product mostly is -- stop being
   rows of floating cards and become a list you can read down.

   It is one file, loaded after everything else, and it changes no markup. Every
   id, class and data attribute every script reads is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

.admin-backend {
  /* The ladder. Each step is a real colour, so a surface is the same colour
     wherever it sits on the page. */
  --sf-0:  #121212;   /* the page beneath everything                        */
  --sf-1:  #1A1A1A;   /* a panel, a card, a row                             */
  --sf-2:  #212121;   /* something raised off a panel: a header, an input   */
  --sf-3:  #2A2A2A;   /* hover, and the row under the cursor                */
  --sf-4:  #333333;   /* pressed, and a selected row                        */

  /* One hairline, used everywhere a surface ends. Light enough to read as an
     edge rather than a border, which is what AGENTS.md means by avoiding
     visible borders: the edge should be felt, not counted. */
  --line:      rgba(235, 231, 224, .08);
  --line-soft: rgba(235, 231, 224, .05);

  /* Four radii, not eight. Anything bigger than a control gets the same
     corner, so a panel and the table inside it agree. */
  --rad-sm: 8px;
  --rad:    12px;
  --rad-lg: 14px;

  /* Elevation is distance, not decoration: a thing further from the page
     casts a longer shadow, and nothing casts one it has not earned. */
  --lift-1: 0 1px 2px rgba(0, 0, 0, .3);
  --lift-2: 0 4px 14px rgba(0, 0, 0, .32);
  --lift-3: 0 12px 36px rgba(0, 0, 0, .42);
}

/* ── Panels ───────────────────────────────────────────────────────────────
   Solid, edged, and square enough to hold a table without looking like a
   greetings card. */
.admin-backend .xp,
.admin-backend .panel,
.admin-backend .page-hdr {
  border-radius: var(--rad-lg) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}

/* No mark on a panel or a page title.
   A 2px line of red at half opacity used to run across the top of every one
   of them, saying nothing; it was replaced with a brick at the corner, and
   that read as something stuck on rather than part of the design. Both are
   gone. The surfaces carry the structure themselves now -- a real colour, a
   step above the page, and a hairline where they end -- which is what that
   line was trying and failing to do. Red is left to mean an action. */
.admin-backend .xp::before,
.admin-backend .page-hdr::before { display: none !important; }
/* The old decorative wash in the corner of a panel header. */
.admin-backend .page-hdr::after { display: none !important; }

/* Panel headers sit a step above the panel they title, which is what makes a
   panel read as having a head and a body rather than being one long box. */
.admin-backend .xp-ph {
  padding: .95rem 1.25rem !important;
  background: var(--sf-2) !important;
  border-bottom: 1px solid var(--line) !important;
}
.admin-backend .xp-title {
  font-size: .94rem !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
  color: #EBE7E0 !important;
}
.admin-backend .xp-kicker {
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: #E1221D !important;
}
.admin-backend .xp-icon {
  border-radius: var(--rad-sm) !important;
  background: rgba(225, 34, 29, .12) !important;
  color: #E1221D !important;
  box-shadow: none !important;
}

.admin-backend .panel-body { padding: 1.15rem 1.25rem !important; }

/* ── Tables ───────────────────────────────────────────────────────────────
   This product is mostly lists: devices, sessions, bills, customers, stock.
   They were drawn as rows of separate cards with a gap between each -- which
   costs a third of the vertical space on a screen, and makes a column of
   numbers hard to run an eye down because nothing lines up through the gaps.

   A list instead. Rows meet, separated by a hairline, and the one under the
   cursor lights. A fifteen-row table now fits where ten did. */
.admin-backend .table-premium {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  font-size: .82rem !important;
}

.admin-backend .table-premium thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .68rem 1rem !important;
  background: var(--sf-2) !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: .58rem !important;
  letter-spacing: .14em !important;
  color: #7B7B7D !important;
}

.admin-backend .table-premium tbody tr {
  background: transparent !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  transition: background .12s ease;
}
.admin-backend .table-premium tbody tr:last-child { border-bottom: 0 !important; }
.admin-backend .table-premium tbody tr:hover { background: var(--sf-2) !important; }

.admin-backend .table-premium td {
  padding: .72rem 1rem !important;
  border-radius: 0 !important;
  color: #B8B4AE !important;
}
/* A number read down a column has to line up, or the eye cannot compare two of
   them. Money, durations and counts are all figures. */
.admin-backend .table-premium td { font-variant-numeric: tabular-nums; }

/* ── Controls ─────────────────────────────────────────────────────────────
   One height for everything a finger or a cursor presses, so a row of buttons
   is a row rather than a staircase. The audit counted seven heights for the
   same field class and four corner radii for the same button. */
.admin-backend .btn {
  min-height: 2.3rem !important;
  border-radius: var(--rad-sm) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  transition: background .14s ease, box-shadow .14s ease, transform .1s ease;
}
.admin-backend .btn:active { transform: translateY(1px); }

/* The primary action is the only thing on a screen wearing the brand colour,
   which is what makes it findable without looking. */
.admin-backend .btn-primary {
  background: #E1221D !important;
  box-shadow: var(--lift-1) !important;
}
.admin-backend .btn-primary:hover {
  background: #F2453F !important;
  box-shadow: 0 4px 16px rgba(225, 34, 29, .35) !important;
}

.admin-backend .btn-secondary {
  background: var(--sf-3) !important;
  color: #EBE7E0 !important;
  box-shadow: none !important;
}
.admin-backend .btn-secondary:hover { background: var(--sf-4) !important; }

.admin-backend .btn-ghost {
  background: transparent !important;
  color: #B8B4AE !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.admin-backend .btn-ghost:hover {
  color: #EBE7E0 !important;
  background: var(--sf-2) !important;
}

/* Fields match the buttons beside them, which they did not: the same class
   rendered at seven different heights across the panel. */
.admin-backend .field {
  min-height: 2.3rem !important;
  border-radius: var(--rad-sm) !important;
  background: var(--sf-2) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
  font-size: .8rem !important;
}
.admin-backend .field:focus,
.admin-backend .field:focus-visible {
  background: var(--sf-3) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 34, 29, .55) !important;
  outline: none !important;
}
.admin-backend .field::placeholder { color: #7B7B7D !important; }

/* ── Figures ──────────────────────────────────────────────────────────────
   The numbers on a dashboard are what the screen is for. They were set at the
   same weight as the words around them and tinted with a gradient that made
   them harder to read, not easier. */
.admin-backend .metric-card {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
  padding: 1rem 1.1rem !important;
}
/* Same for a figure card: the number is the thing, and it does not need a
   flag beside it to be found. */
.admin-backend .metric-card::before { display: none !important; }
.admin-backend .metric-label {
  font-size: .58rem !important;
  letter-spacing: .16em !important;
  color: #7B7B7D !important;
}
.admin-backend .metric-value {
  margin-top: .32rem !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums;
  /* Flat Bone Dust. The gradient that was here washed the middle of every
     digit out, on the one element whose whole job is to be read at a glance. */
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #EBE7E0 !important;
  color: #EBE7E0 !important;
}

/* ── Sidebar and topbar ───────────────────────────────────────────────────
   The two things on screen on every page, all evening. */
.admin-backend .sidebar {
  background: #161616 !important;
  box-shadow: 1px 0 0 var(--line) !important;
}
.admin-backend .topbar {
  background: rgba(22, 22, 22, .88) !important;
  box-shadow: 0 1px 0 var(--line) !important;
}

.admin-backend .nav-link {
  border-radius: var(--rad-sm) !important;
  font-size: .8rem !important;
}
/* The current page, said plainly: a solid brick edge and a lit surface, rather
   than a gradient that competed with the brand colour used for actions. */
.admin-backend .nav-link.active {
  position: relative;
  background: rgba(225, 34, 29, .1) !important;
  color: #EBE7E0 !important;
  box-shadow: none !important;
}
.admin-backend .nav-link.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 3px;
  height: 1.1rem;
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
  background: #E1221D;
}

/* ── Drawers and modals ───────────────────────────────────────────────────
   Solid, so a form is read against a surface rather than against whatever
   happens to be behind it. */
.admin-backend .drawer,
.admin-backend .float-modal-panel {
  background: var(--sf-1) !important;
  box-shadow: var(--lift-3), 0 0 0 1px var(--line) !important;
}
.admin-backend .drawer .field,
.admin-backend .float-modal-panel .field {
  min-height: 2.3rem !important;
  border-radius: var(--rad-sm) !important;
  background: var(--sf-2) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}

/* ── State ────────────────────────────────────────────────────────────────
   A pill says what something is. Colour carries it; the pill itself stays out
   of the way. */
.admin-backend .status-pill {
  border-radius: 6px !important;
  padding: .2rem .5rem !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* ── Empty states ─────────────────────────────────────────────────────────
   A screen with nothing on it should look finished, not broken. */
.admin-backend .empty-state {
  padding: 2.4rem 1.25rem !important;
  border-radius: var(--rad) !important;
  background: var(--sf-0) !important;
  box-shadow: inset 0 0 0 1px var(--line-soft) !important;
  color: #7B7B7D !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

@media (prefers-reduced-motion: reduce) {
  .admin-backend .btn:active { transform: none; }
  .admin-backend .table-premium tbody tr { transition: none; }
}

/* ══ The shell: the two things on screen every minute of a shift ═══════════
   The sidebar carried twenty-two links, each as two lines -- a name, and
   under it a note set in 10px uppercase with .18em of tracking. Forty-four
   lines of text in a 248px column. The notes were unreadable at that size,
   the list ran past the bottom of a laptop screen, and the last group was
   permanently out of sight.

   The note is not deleted -- it is the one thing that tells somebody new what
   a screen is -- it is shown for the page you are on, where there is room for
   it and where it answers "what am I looking at". The other twenty-one rows
   are a name and an icon, which is all a person who works here needs.
   ═══════════════════════════════════════════════════════════════════════ */

.admin-backend .sidebar { width: 14.5rem; }

/* The hall's name, given the weight a masthead should have. */
.admin-backend .brand-box {
  padding: 1.1rem 1rem .95rem !important;
  border-bottom: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(225, 34, 29, .07), transparent) !important;
}
.admin-backend .brand-title {
  font-size: .95rem !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: #EBE7E0 !important;
  background: none !important;
  -webkit-text-fill-color: #EBE7E0 !important;
}

/* Four headings now, so each one can be quiet. */
.admin-backend .nav-section-label {
  margin: 1.15rem .8rem .35rem !important;
  font-size: .55rem !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: #5A5A5C !important;
}
.admin-backend .nav-section-label:first-of-type { margin-top: .6rem !important; }

/* One line per link. */
.admin-backend .nav-link {
  min-height: 2.3rem !important;
  margin: 1px .6rem !important;
  padding: .42rem .65rem !important;
  gap: .62rem !important;
  color: #9A9691 !important;
}
.admin-backend .nav-link .nav-label-wrap > span:first-child {
  font-size: .8rem !important;
  font-weight: 750 !important;
  letter-spacing: -.005em !important;
}
/* The note, kept for the page you are on. Everywhere else it was forty-two
   words of 10px uppercase that nobody has ever read. */
.admin-backend .nav-link .nav-label-wrap > span:last-child { display: none !important; }
.admin-backend .nav-link.active .nav-label-wrap > span:last-child {
  display: block !important;
  margin-top: .05rem !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: rgba(225, 34, 29, .78) !important;
}
.admin-backend .nav-link.active { min-height: 2.75rem !important; }
.admin-backend .nav-icon { width: .95rem !important; height: .95rem !important; }
.admin-backend .nav-dot { display: none !important; }

/* ── The topbar ───────────────────────────────────────────────────────────
   Search, language, the clock, notifications and the cashier shortcut, all at
   different heights. They are a row; they should look like one. */
.admin-backend .topbar {
  padding: .7rem 1.35rem !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}
.admin-backend .topbar :is(.btn, .field, .topbar-lang, .topbar-notif, .topbar-clock) {
  min-height: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: var(--rad-sm) !important;
}
.admin-backend .topbar .field {
  background: var(--sf-1) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.admin-backend .topbar-clock,
.admin-backend .topbar-lang {
  background: var(--sf-1) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
  color: #9A9691 !important;
}

/* ── Page header ──────────────────────────────────────────────────────────
   It opened every screen as a tall translucent slab. It is a title; it should
   take the room a title takes. */
.admin-backend .page-hdr {
  padding: 1.1rem 1.3rem !important;
  margin-bottom: 1.25rem !important;
}
.admin-backend .page-hdr-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: var(--rad-sm) !important;
  background: rgba(225, 34, 29, .12) !important;
  color: #E1221D !important;
  box-shadow: none !important;
}

/* ── The content column ───────────────────────────────────────────────────
   A hall runs this on a wide screen. Letting a table stretch to 2,500px makes
   a row impossible to follow across; capping it makes the panel a document. */
.admin-backend .content {
  max-width: 108rem;
  padding-inline: 1.35rem !important;
}

@media (max-width: 1023px) {
  .admin-backend .content { padding-inline: .9rem !important; }
  .admin-backend .page-hdr { padding: .95rem 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PAGES' OWN COMPONENTS
   ══════════════════════════════════════════════════════════════════════════

   Four thousand three hundred lines of CSS live inside the page templates --
   more than the shared stylesheets hold between them -- and because a <style>
   block in the body loads after everything in the head, those four pages have
   always decided their own appearance. Each grew its own family of components:

     dashboard   d2-*   kpi-*  ts-*
     cashier     bm-*   gb-*   wr-*   ed-*   shift-*
     devices     map-*  dp-*   dg-*   floor-*  device-*
     settings    settings-*

   They answer to nothing in common, so the same idea -- a panel, a figure, a
   row, a pill -- is drawn four different ways, and moving between the screens
   feels like moving between four products. That is the thing that reads as
   untidy, and no amount of work on the shared layer could reach it.

   What follows puts all four families on the one surface ladder, the one
   corner family and the one elevation scale defined above. The class names,
   the markup and every hook a script reads are untouched; only what they look
   like changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard ────────────────────────────────────────────────────────────
   The hero was a tall slab with two blurred orbs drifting behind it. It is
   the first thing seen every shift, and what it said was "there is a
   gradient here", with the figures underneath competing against it. */
.admin-backend .d2-hero {
  border-radius: var(--rad-lg) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
  padding: 1.3rem 1.4rem !important;
}
.admin-backend .d2-hero::before,
.admin-backend .d2-hero::after,
.admin-backend .d2-hero-orb2 { display: none !important; }

/* No brick on the dashboard hero.
   One was added here and it landed on top of the greeting: .d2-hero-left is
   positioned and has no inline padding, so an absolutely placed bar at its
   start edge sits over the first line of text rather than beside it. The
   bricks elsewhere work because they sit inside a panel's own padding -- on
   .xp, .page-hdr and .metric-card there is over a rem of it to clear. There
   is none here, and the hero does not need the mark: it is the only panel on
   the page with the hall's name already in it. */

.admin-backend :is(.d2-card, .d2-panel, .d2-box, .d2-tile, .kpi-card, .ts-card) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend :is(.d2-card, .kpi-card, .ts-card):hover {
  background: var(--sf-2) !important;
  box-shadow: var(--lift-2), 0 0 0 1px var(--line) !important;
}

/* Every figure on this page, in one weight and one colour, aligned so a
   column of them can be compared. */
.admin-backend :is(.d2-stat-value, .d2-kpi-value, .kpi-value, .d2-metric-value, .d2-big) {
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #EBE7E0 !important;
  color: #EBE7E0 !important;
}
.admin-backend :is(.d2-stat-label, .d2-kpi-label, .kpi-label, .d2-metric-label) {
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #7B7B7D !important;
}

/* ── Cashier ──────────────────────────────────────────────────────────────
   The screen money passes through. Its panels, its bill modal and its shift
   bar were each drawn separately. */
.admin-backend :is(.bm-card, .bm-panel, .bm-section, .gb-bar, .wr-card, .ed-card, .shift-card, .shift-bar) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend .bm-section-label,
.admin-backend .wr-label,
.admin-backend .shift-label {
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #7B7B7D !important;
}

/* The totals in the bill modal are a ledger: a column of figures a cashier
   reads down before taking money. They have to line up. */
.admin-backend .bm-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  padding: .45rem 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  font-variant-numeric: tabular-nums !important;
}
.admin-backend .bm-total-row:last-child { border-bottom: 0 !important; }
/* The figure that is actually collected, told apart from the ones above it. */
.admin-backend :is(.bm-total-row.is-final, .bm-grand, .bm-total-final) {
  margin-top: .3rem !important;
  padding-top: .6rem !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #EBE7E0 !important;
}

/* ── Devices ──────────────────────────────────────────────────────────────
   The largest page in the product, at 4,620 lines, and the one a shift spends
   most of its time on. Three generations of its design are still present. */
.admin-backend :is(.dp-panel, .dp-card, .dp-body, .device-panel, .map-device, .floor-card) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend :is(.dp-label, .dp-kicker, .device-kicker, .map-device-label) {
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #7B7B7D !important;
}
.admin-backend :is(.dp-value, .dp-figure, .device-figure) {
  font-variant-numeric: tabular-nums !important;
  font-weight: 900 !important;
  color: #EBE7E0 !important;
}

/* The grid of device cards, on the same ladder as everything else. */
.admin-backend .dg-card {
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend .dg-card:hover {
  background: var(--sf-2) !important;
  box-shadow: var(--lift-2), 0 0 0 1px rgba(235, 231, 224, .12) !important;
}
.admin-backend .dg-toolbar { background: rgba(18, 18, 18, .9) !important; }
.admin-backend :is(.dg-search, .dg-filter, .dg-view-toggle) {
  height: 2.3rem !important;
  border-radius: var(--rad-sm) !important;
  background: var(--sf-1) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.admin-backend .dg-filter.is-active,
.admin-backend .dg-view-toggle[aria-pressed="true"] {
  background: #E1221D !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── Settings ─────────────────────────────────────────────────────────────
   Nine sections and sixty-seven controls. They are a form; they should read
   as one form rather than nine boxes. */
.admin-backend :is(.settings-section, .settings-side, .settings-hero, .settings-card) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend .settings-section-head {
  padding: .9rem 1.15rem !important;
  background: var(--sf-2) !important;
  border-bottom: 1px solid var(--line) !important;
}
.admin-backend .settings-section-head h2 {
  font-size: .9rem !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
  color: #EBE7E0 !important;
}
.admin-backend .settings-kicker {
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: #E1221D !important;
}
.admin-backend .settings-title {
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  background: none !important;
  -webkit-text-fill-color: #EBE7E0 !important;
  color: #EBE7E0 !important;
}

/* ── Everything, everywhere ───────────────────────────────────────────────
   Four rules that reach whatever the families above have missed, on every
   page, now and in the future. They are deliberately last. */

/* Any figure, anywhere, is set in a face whose digits are all one width.
   Without it a column of money cannot be compared by eye, which is most of
   what the people using this software do with a screen. */
.admin-backend :is(td, .metric-value, [data-total-for], [data-cost-for], [data-timer], .money, .figure) {
  font-variant-numeric: tabular-nums;
}

/* A gradient across the middle of a number makes it harder to read, not
   easier, and it was applied to the figures on four different screens. */
.admin-backend [style*="background-clip: text"],
.admin-backend [style*="background-clip:text"] {
  background: none !important;
  -webkit-text-fill-color: #EBE7E0 !important;
  color: #EBE7E0 !important;
}

/* Whatever a page calls its own panel, it gets the one corner. A screen where
   a 9px box sits beside a 20px one is the thing that reads as unfinished. */
.admin-backend :is(.card, .box, .tile, .surface, .pane) {
  border-radius: var(--rad) !important;
}

/* Hairline instead of a visible white border, wherever one was drawn. */
.admin-backend [class*="border-white"] { border-color: var(--line) !important; }

/* ══ The real component families ══════════════════════════════════════════
   Written against the selectors these pages actually use, read out of their
   own <style> blocks rather than guessed: .d2-kpi and .d2-ss on the
   dashboard, .bm-left and .bm-totals in the bill modal, .devices-statsbar and
   .dp-* on the devices page.

   Each one is put on the surface ladder defined above, so a card on the
   dashboard, a panel on the cashier screen and a device tile are finally the
   same grey, the same corner and the same edge.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.admin-backend :is(.d2-kpi, .d2-ss, .d2-rev-card, .d2-alert, .d2-all-clear, .d2-floor-stats, .d2-sess-row) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend :is(.d2-kpi, .d2-sess-row):hover {
  background: var(--sf-2) !important;
  box-shadow: var(--lift-2), 0 0 0 1px var(--line) !important;
}
/* The one that is not a surface: a progress bar needs its own track. */
.admin-backend .d2-pm-track {
  border-radius: 999px !important;
  background: var(--sf-3) !important;
  box-shadow: none !important;
}
.admin-backend .d2-pm-fill {
  border-radius: 999px !important;
  background: #E1221D !important;
}
.admin-backend :is(.d2-ph-icon, .d2-floor-link, .d2-ph-link) {
  border-radius: var(--rad-sm) !important;
  background: var(--sf-2) !important;
  box-shadow: none !important;
}
/* An alert is the one thing on this page that should carry colour. */
.admin-backend .d2-alert {
  background: rgba(225, 34, 29, .1) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 34, 29, .28) !important;
}
.admin-backend .d2-all-clear {
  background: rgba(52, 211, 153, .08) !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .22) !important;
}

/* ── Cashier ─────────────────────────────────────────────────────────────── */
.admin-backend :is(.bm-left, .bm-right, .bm-totals, .bm-note, .bm-order-row, .bm-game-row,
                   .wr-row, .bill-split-panel, .group-bill-bar) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend :is(.bm-order-row, .bm-game-row, .wr-row):hover {
  background: var(--sf-2) !important;
}
/* A selected order line has to be unmistakable: it is the one about to be
   removed or moved. */
.admin-backend .bm-order-row.is-selected {
  background: rgba(225, 34, 29, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 34, 29, .45) !important;
}
.admin-backend :is(.bm-order-img, .bm-game-cover) {
  border-radius: var(--rad-sm) !important;
  background: var(--sf-0) !important;
}
.admin-backend .bm-close {
  border-radius: var(--rad-sm) !important;
  background: var(--sf-2) !important;
  box-shadow: none !important;
}
.admin-backend .bm-close:hover { background: var(--sf-3) !important; }
.admin-backend .bm-discount-badge {
  border-radius: 6px !important;
  background: rgba(225, 34, 29, .14) !important;
  color: #E1221D !important;
  box-shadow: none !important;
}
.admin-backend .gb-count {
  border-radius: 999px !important;
  background: #E1221D !important;
  color: #fff !important;
}
/* The bar that appears when bills are ticked for settling together: it sits
   over the page, so it earns a real shadow. */
.admin-backend .group-bill-bar {
  box-shadow: var(--lift-3), 0 0 0 1px var(--line) !important;
}

/* ── Devices ─────────────────────────────────────────────────────────────── */
.admin-backend :is(.devices-statsbar, .devices-add, .bulk-resource-row,
                   .floor-area-head, .floor-layout-item) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}
.admin-backend :is(.devices-add-icon, .floor-area-action, .floor-area-resize) {
  border-radius: var(--rad-sm) !important;
  background: var(--sf-2) !important;
  box-shadow: none !important;
}
.admin-backend :is(.floor-area-action, .floor-area-resize):hover { background: var(--sf-3) !important; }

/* ── Anything else that is a surface ─────────────────────────────────────
   These four pages hold a hundred and fifty more declarations than the rules
   above name. Rather than chase each one, anything that sets itself up as a
   panel -- a background and a corner -- is pulled onto the ladder, and the
   handful of things that are deliberately coloured are exempted by name
   because their colour is what they are for. */
.admin-backend :is(.panel-strong, .panel-soft, .glass, .surface-card,
                   .stat-card, .list-card, .info-card, .form-card) {
  border-radius: var(--rad) !important;
  background: var(--sf-1) !important;
  box-shadow: var(--lift-1), 0 0 0 1px var(--line) !important;
}

/* Status colour is deliberately not touched anywhere above. A pill that says
   a device is free, a session is paused or stock has run out is carrying
   meaning, and the surface ladder has no business flattening it -- which is
   why none of the rules in this file name .status-pill, .state-chip, a tone-*
   class, .dg-dot or .d2-hero-live as a surface. */

/* ── Scrollbars ──────────────────────────────────────────────────────────
   Every scrollable area in the panel, drawn the same way: thin, out of the
   way, and visible enough to grab. The default on Windows is a wide pale
   strip that cuts into every list. */
.admin-backend * {
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 231, 224, .14) transparent;
}
.admin-backend ::-webkit-scrollbar { width: 10px; height: 10px; }
.admin-backend ::-webkit-scrollbar-track { background: transparent; }
.admin-backend ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(235, 231, 224, .14) padding-box;
}
.admin-backend ::-webkit-scrollbar-thumb:hover { background: rgba(235, 231, 224, .26) padding-box; }