/* ============================================================================
   ShopKing Admin — "Operations Console"  v2
   ----------------------------------------------------------------------------
   Scoped so it ONLY affects the admin dashboard:
     .db-main      → backend wrapper (DefaultComponent.vue, theme==='backend')
     body > .modal → admin modals that <Teleport to="body"> out of .db-main
   The storefront (.kotn-store) also uses some db-* classes on customer account
   pages — which is why this file never styles a bare .db-* selector.

   Pure CSS. No Laravel Mix recompile. Survives vendor updates (upstream
   overwrites resources/css/app.css, not this file).
   Load AFTER app.css and custom.css.
   ========================================================================== */

/* Fonts MUST be first. The admin declared --admin-font: 'Public Sans' but never
   loaded it anywhere, so every admin screen silently fell back to the browser
   default sans. That is the actual reason the type looked unconsidered. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Redefining the app's own token is the cleanest hook — every `font-admin`
     utility in 244 components picks this up with no markup change. */
  --admin-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.db-main,
body > .modal {
  /* ── surfaces ── */
  --ops-ground:      #F1F3F5;
  --ops-surface:     #FFFFFF;
  --ops-thead:       #F7F9FB;
  --ops-raised:      #FBFCFD;

  /* ── ink ── */
  --ops-ink:         #0F172A;
  --ops-dim:         #64748B;
  --ops-faint:       #94A3B8;

  /* ── lines ── */
  --ops-line:        #DCE3EA;
  --ops-line-soft:   #EDF1F5;

  /* ── accent: neutral slate. Colour is reserved for STATE so anything
        red or green genuinely means something. --primary stays the brand. ── */
  --ops-accent:      #334155;
  --ops-accent-wash: #EDF1F6;

  /* ── semantic state ── */
  --ops-ok:          #047857;  --ops-ok-wash:     #E7F6EF;
  --ops-warn:        #B45309;  --ops-warn-wash:   #FDF6EC;
  --ops-danger:      #B91C1C;  --ops-danger-wash: #FDF0EF;

  /* ── geometry ── */
  --ops-r:           6px;
  --ops-r-sm:        4px;

  /* ── typography ── */
  --ops-ui:   'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --ops-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── motion ──
     Durations follow the 150–300ms micro-interaction window; ease-out for
     entering, ease-in for exiting. Everything animates transform/opacity only,
     so it stays on the compositor thread. */
  --ops-dur-fast: 130ms;
  --ops-dur:      200ms;
  --ops-dur-slow: 300ms;
  --ops-ease:     cubic-bezier(.22, .61, .36, 1);     /* ease-out */
  --ops-ease-in:  cubic-bezier(.55, .06, .68, .19);
  --ops-spring:   cubic-bezier(.34, 1.56, .64, 1);    /* slight overshoot */

  /* ── elevation ── */
  --ops-sh-1: 0 1px 2px rgb(15 23 42 / .06);
  --ops-sh-2: 0 2px 4px rgb(15 23 42 / .07), 0 4px 12px -4px rgb(15 23 42 / .10);
  --ops-sh-3: 0 8px 20px -6px rgb(15 23 42 / .16), 0 2px 6px rgb(15 23 42 / .06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main,
body > .modal {
  font-family: var(--ops-ui);
  color: var(--ops-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
}

.db-main { background: var(--ops-ground); }

.db-main h1, .db-main h2, .db-main h3, .db-main h4,
body > .modal h1, body > .modal h2, body > .modal h3 {
  font-family: var(--ops-ui);
  letter-spacing: -.018em;
  font-weight: 700;
  text-wrap: balance;
}

/* Digits must line up in columns — this is the single highest-value
   typographic change on an inventory screen. */
.db-main .db-table-body-td,
.db-main .db-table-head-th,
.db-main .db-pagination-menu,
body > .modal .db-table-body-td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* SKUs, barcodes, reference numbers and money read as data, not prose. */
.db-main .db-table-body-td .mono,
.db-main .sku,
.db-main .reference {
  font-family: var(--ops-mono);
  font-size: .92em;
  letter-spacing: -.02em;
}

/* Numeric columns. CSS cannot select a cell by its contents, and the numeric
   column sits at a different index in each of the 63 admin tables — so the
   column is marked in the markup with .db-num and styled here once.
   Add `db-num` to any <th>/<td> that holds a quantity, price or count. */
.db-main .db-table-head-th.db-num,
.db-main .db-table-body-td.db-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.db-main .db-table-body-td.db-num {
  font-family: var(--ops-mono);
  font-weight: 500;
  letter-spacing: -.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .db-sidebar {
  background: var(--ops-surface);
  border-right: 1px solid var(--ops-line);
  box-shadow: none;
}

.db-main .db-sidebar-nav-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ops-faint);
  text-transform: uppercase;
}

.db-main .db-sidebar-nav-menu {
  position: relative;
  border-radius: var(--ops-r);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ops-dim);
  padding: .5rem .6rem;
  cursor: pointer;
  transition: background var(--ops-dur-fast) var(--ops-ease),
              color var(--ops-dur-fast) var(--ops-ease),
              transform var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-sidebar-nav-menu:hover {
  background: var(--ops-accent-wash);
  color: var(--ops-ink);
  transform: translateX(2px);
}
.db-main .db-sidebar-nav-menu:active { transform: translateX(1px) scale(.99); }

/* Active item gets a growing rail rather than a hard jump. */
.db-main .db-sidebar-nav-item.active > .db-sidebar-nav-menu,
.db-main .db-sidebar-nav-item.router-link-active > .db-sidebar-nav-menu,
.db-main .db-sidebar-nav-menu.router-link-active {
  background: var(--ops-accent-wash);
  color: rgb(var(--primary));
  font-weight: 700;
}
.db-main .db-sidebar-nav-menu.router-link-active::before,
.db-main .db-sidebar-nav-item.active > .db-sidebar-nav-menu::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: rgb(var(--primary));
  transform: translateY(-50%);
  animation: ops-rail var(--ops-dur) var(--ops-ease) forwards;
}
@keyframes ops-rail { to { height: 60%; } }

.db-main .db-header {
  background: color-mix(in srgb, var(--ops-surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ops-line);
  box-shadow: none;
}

.db-main .db-breadcrumb-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ops-ink);
}
.db-main .db-breadcrumb-link,
.db-main .db-breadcrumb-item { color: var(--ops-dim); font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS  — entrance motion, one gentle reveal per view
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .db-card,
body > .modal .db-card {
  background: var(--ops-surface);
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  box-shadow: var(--ops-sh-1);
  animation: ops-rise var(--ops-dur-slow) var(--ops-ease) both;
}
@keyframes ops-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.db-main .db-card-header {
  border-bottom: 1px solid var(--ops-line);
  padding: .85rem 1.1rem;
  align-items: center;
}
.db-main .db-card-header.border-none { border-bottom: 1px solid var(--ops-line); }

.db-main .db-card-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ops-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS  — the main complaint. Real affordance: fill, lift, press, ring.
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .db-btn,
.db-main .db-btn-full,
.db-main .db-btn-fill,
.db-main .db-btn-outline,
body > .modal .db-btn,
body > .modal .db-btn-outline,
body > .modal .modal-btn-fill,
body > .modal .modal-btn-outline {
  position: relative;
  isolation: isolate;
  border-radius: var(--ops-r);
  font-family: var(--ops-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.005em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--ops-dur-fast) var(--ops-ease),
              box-shadow var(--ops-dur) var(--ops-ease),
              background-color var(--ops-dur-fast) var(--ops-ease),
              border-color var(--ops-dur-fast) var(--ops-ease),
              color var(--ops-dur-fast) var(--ops-ease),
              filter var(--ops-dur-fast) var(--ops-ease);
}

/* Solid buttons: the app writes them as `db-btn ... bg-primary text-white`,
   plus bg-gray-600 / bg-green-* etc. Give every filled variant real depth. */
.db-main .db-btn,
.db-main .db-btn-full,
body > .modal .db-btn {
  padding: .55rem 1rem;
  box-shadow: var(--ops-sh-1);
}

.db-main .db-btn[class*="bg-"],
.db-main .db-btn-full[class*="bg-"],
body > .modal .db-btn[class*="bg-"] {
  box-shadow: var(--ops-sh-2);
}

/* hover: lift + deepen. transform only — never animate width/height. */
.db-main .db-btn:hover,
.db-main .db-btn-full:hover,
.db-main .db-btn-fill:hover,
body > .modal .db-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ops-sh-3);
  filter: brightness(1.06) saturate(1.04);
}

/* press: immediate, unmistakable feedback */
.db-main .db-btn:active,
.db-main .db-btn-full:active,
.db-main .db-btn-fill:active,
.db-main .db-btn-outline:active,
body > .modal .db-btn:active {
  transform: translateY(0) scale(.975);
  box-shadow: var(--ops-sh-1);
  filter: brightness(.96);
  transition-duration: 60ms;
}

/* a light sheen on press, so a click registers even on a flat fill */
.db-main .db-btn::after,
.db-main .db-btn-full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgb(255 255 255 / .35), transparent 60%);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--ops-dur) var(--ops-ease), transform var(--ops-dur) var(--ops-ease);
}
.db-main .db-btn:active::after,
.db-main .db-btn-full:active::after { opacity: 1; transform: scale(1); transition-duration: 90ms; }

/* Outline / secondary — visible by default, not a ghost */
.db-main .db-btn-outline,
body > .modal .db-btn-outline {
  padding: .42rem .8rem;
  background: var(--ops-surface);
  border: 1px solid var(--ops-line);
  color: var(--ops-dim);
  box-shadow: var(--ops-sh-1);
}
.db-main .db-btn-outline:hover {
  background: var(--ops-accent-wash);
  border-color: var(--ops-accent);
  color: var(--ops-ink);
  transform: translateY(-1px);
  box-shadow: var(--ops-sh-2);
}
/* Semantic outline variants carry their meaning AT REST, not only on hover —
   a destructive action should read as destructive before you touch it. */
.db-main .db-btn-outline.primary { color: rgb(var(--primary)); border-color: rgb(var(--primary) / .35); }
.db-main .db-btn-outline.danger  { color: var(--ops-danger);   border-color: color-mix(in srgb, var(--ops-danger) 35%, var(--ops-line)); }
.db-main .db-btn-outline.success { color: var(--ops-ok);       border-color: color-mix(in srgb, var(--ops-ok) 35%, var(--ops-line)); }
.db-main .db-btn-outline.warning { color: var(--ops-warn);     border-color: color-mix(in srgb, var(--ops-warn) 35%, var(--ops-line)); }
.db-main .db-btn-outline.info    { color: #0E7490;             border-color: color-mix(in srgb, #0E7490 35%, var(--ops-line)); }

.db-main .db-btn-outline.primary:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); background: rgb(var(--primary) / .09); }
.db-main .db-btn-outline.danger:hover  { border-color: var(--ops-danger); color: var(--ops-danger); background: var(--ops-danger-wash); }
.db-main .db-btn-outline.success:hover { border-color: var(--ops-ok);     color: var(--ops-ok);     background: var(--ops-ok-wash); }
.db-main .db-btn-outline.warning:hover { border-color: var(--ops-warn);   color: var(--ops-warn);   background: var(--ops-warn-wash); }
.db-main .db-btn-outline.info:hover    { border-color: #0E7490;           color: #0E7490;           background: #ECFEFF; }

/* disabled must look unavailable and stop responding */
.db-main .db-btn:disabled,
.db-main .db-btn[disabled],
.db-main .db-btn-outline:disabled,
body > .modal .db-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Table row action icons — give them a real hit area and a hover target */
.db-main .db-table-action > * {
  border-radius: var(--ops-r-sm);
  transition: background var(--ops-dur-fast) var(--ops-ease),
              transform var(--ops-dur-fast) var(--ops-ease),
              color var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-table-action > *:hover { background: var(--ops-accent-wash); transform: translateY(-1px); }
.db-main .db-table-action > *:active { transform: scale(.92); }

/* Anything clickable says so. */
.db-main button,
.db-main [role="button"],
.db-main .cursor-pointer,
.db-main a { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES  — row-level affordance
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .db-table-head-th {
  background: var(--ops-thead);
  color: var(--ops-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--ops-line);
  white-space: nowrap;
}

.db-main .db-table-body-td {
  padding: .58rem 1.1rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--ops-ink);
  border-bottom: 1px solid var(--ops-line-soft);
  vertical-align: middle;
}
.db-main .db-table-body-tr:last-child .db-table-body-td { border-bottom: 0; }

.db-main .db-table-body-tr {
  transition: background var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-table-body-tr:hover .db-table-body-td {
  background: var(--ops-accent-wash);
}
/* a quiet accent rail on the hovered row anchors the eye across wide tables */
.db-main .db-table-body-tr:hover .db-table-body-td:first-child {
  box-shadow: inset 3px 0 0 rgb(var(--primary));
}

/* Striping fights row-hover and adds noise at this density. */
.db-main .db-table.stripe .db-table-body-tr:nth-child(even) .db-table-body-td { background: transparent; }
.db-main .db-table.stripe .db-table-body-tr:nth-child(even):hover .db-table-body-td { background: var(--ops-accent-wash); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM FIELDS + FOCUS  (accessibility fix)
   app.css sets focus-within:outline-0 on every input and replaces it with only
   focus-within:border-primary/20 — a ~20%-opacity border shift that is
   effectively invisible. Keyboard users got no focus indication anywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .db-field-control,
body > .modal .db-field-control {
  border-radius: var(--ops-r);
  border: 1px solid var(--ops-line);
  background: var(--ops-surface);
  font-family: var(--ops-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ops-ink);
  transition: border-color var(--ops-dur-fast) var(--ops-ease),
              box-shadow var(--ops-dur-fast) var(--ops-ease),
              background-color var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-field-control:hover { border-color: var(--ops-faint); }

.db-main .db-field-control:focus,
.db-main .db-field-control:focus-within,
body > .modal .db-field-control:focus,
body > .modal .db-field-control:focus-within {
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgb(var(--primary) / .15);
  outline: none;
}

.db-main .db-field-title,
.db-main .db-field-label,
body > .modal .db-field-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ops-dim);
  letter-spacing: -.005em;
}
.db-main .db-field-alert { font-size: 11.5px; font-weight: 500; color: var(--ops-danger); }

/* Real, visible keyboard focus on every interactive element. :focus-visible
   means pointer users never see it, so nothing gets noisier for them. */
.db-main :is(input, select, textarea, button, a, [tabindex]):focus-visible,
body > .modal :is(input, select, textarea, button, a, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
  border-radius: var(--ops-r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS PILLS
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .db-table-badge,
.db-main .db-badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: .15rem .6rem;
  transition: transform var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-table-body-tr:hover .db-table-badge { transform: scale(1.04); }

.db-main .db-table-badge.text-success, .db-main .db-badge.text-success { color: var(--ops-ok);     background: var(--ops-ok-wash); }
.db-main .db-table-badge.text-danger,  .db-main .db-badge.text-danger  { color: var(--ops-danger); background: var(--ops-danger-wash); }
.db-main .db-table-badge.text-warning, .db-main .db-badge.text-warning { color: var(--ops-warn);   background: var(--ops-warn-wash); }

/* ═══════════════════════════════════════════════════════════════════════════
   TABS / PAGINATION / DROPDOWNS
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .db-tab-btn,
.db-main .db-tabBtn {
  border-radius: var(--ops-r);
  font-size: 13px;
  font-weight: 600;
  color: var(--ops-dim);
  cursor: pointer;
  transition: color var(--ops-dur-fast) var(--ops-ease),
              background var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-tab-btn:hover, .db-main .db-tabBtn:hover { color: var(--ops-ink); background: var(--ops-accent-wash); }

.db-main .db-pagination-menu,
.db-main .db-pagination-nav,
.db-main .db-pagination-navigate {
  border-radius: var(--ops-r-sm);
  border-color: var(--ops-line);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ops-dur-fast) var(--ops-ease),
              color var(--ops-dur-fast) var(--ops-ease),
              transform var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-pagination-menu:hover,
.db-main .db-pagination-nav:hover { background: var(--ops-accent-wash); color: var(--ops-ink); transform: translateY(-1px); }

/* Visual styling only — never touch `transform` here.
   The app hides every dropdown with `.dropdown-list { scale-y-0 }` and reveals
   it with `.dropdown-list.active { scale-y-100 }`. An animation that ends on
   `transform: none` wins over those declarations (animated values outrank
   normal ones in the cascade), which pinned every dropdown — including the
   header profile menu — permanently open on all pages. */
.db-main .dropdown-list,
.db-main .db-card-filter-dropdown-list {
  border-radius: var(--ops-r);
  border: 1px solid var(--ops-line);
  box-shadow: var(--ops-sh-3);
}

/* Fade only the opened state, and only opacity, so the app's scale-y toggle
   keeps full control of visibility. No fill-mode, so nothing persists. */
.db-main .dropdown-list.active,
.db-main .db-card-filter-dropdown-list.active {
  animation: ops-fade var(--ops-dur) var(--ops-ease);
}
@keyframes ops-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS + FILTER DRAWER
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .modal-dialog,
body > .modal .modal-dialog {
  border-radius: 10px;
  box-shadow: var(--ops-sh-3);
}
.db-main .modal.modal-active .modal-dialog,
body > .modal.modal-active .modal-dialog {
  animation: ops-modal var(--ops-dur-slow) var(--ops-spring) both;
}
@keyframes ops-modal {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.db-main .modal-header, body > .modal .modal-header { border-bottom: 1px solid var(--ops-line); }
.db-main .modal-footer, body > .modal .modal-footer { border-top: 1px solid var(--ops-line); }
.db-main .modal-title,  body > .modal .modal-title  { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }

.db-main .modal-close {
  border-radius: var(--ops-r-sm);
  cursor: pointer;
  transition: background var(--ops-dur-fast) var(--ops-ease), transform var(--ops-dur-fast) var(--ops-ease);
}
.db-main .modal-close:hover { background: var(--ops-danger-wash); color: var(--ops-danger); transform: rotate(90deg); }

.db-main .table-filter-div { border-bottom: 1px solid var(--ops-line); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING — feedback during async work
   ═══════════════════════════════════════════════════════════════════════════ */

.db-main .ops-skeleton {
  background: linear-gradient(90deg, var(--ops-line-soft) 25%, var(--ops-raised) 37%, var(--ops-line-soft) 63%);
  background-size: 400% 100%;
  animation: ops-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--ops-r-sm);
}
@keyframes ops-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   POS
   ---------------------------------------------------------------------------
   With the colour reclamation above, POS now shares the admin's neutrals and
   state colours. What remains component-side is layout geometry (radii and
   spacing written as raw utilities) — cosmetic, and not worth a recompile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Border only — the app owns the POS cart's background colour. */
.db-main .db-pos-cartDiv {
  border-inline-start: 1px solid var(--ops-line);
}
.db-main .db-pos-cartBtn {
  box-shadow: var(--ops-sh-3);
  transition: transform var(--ops-dur-fast) var(--ops-ease);
}
.db-main .db-pos-cartBtn:active { transform: scale(.985); }

/* POS product tiles are `[data-modal="#modal"]` cards — make them feel tappable */
.db-main [data-modal="#modal"] {
  border-radius: var(--ops-r);
  cursor: pointer;
  transition: transform var(--ops-dur-fast) var(--ops-ease),
              box-shadow var(--ops-dur) var(--ops-ease),
              border-color var(--ops-dur-fast) var(--ops-ease);
}
.db-main [data-modal="#modal"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--ops-sh-2);
  border-color: rgb(var(--primary) / .4);
}
.db-main [data-modal="#modal"]:active { transform: translateY(0) scale(.985); }

/* the POS numeric keypad */
.db-main #orderPayment .num {
  border-radius: var(--ops-r);
  font-family: var(--ops-mono);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ops-dur-fast) var(--ops-ease),
              transform var(--ops-dur-fast) var(--ops-ease);
}
.db-main #orderPayment .num:hover  { background: var(--ops-accent-wash); }
.db-main #orderPayment .num:active { transform: scale(.94); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION PREFERENCES  — never optional
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .db-main *, .db-main *::before, .db-main *::after,
  body > .modal *, body > .modal *::before, body > .modal *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .db-main .db-btn:hover,
  .db-main .db-btn-outline:hover,
  .db-main .db-sidebar-nav-menu:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .db-main .db-card { border: 0; box-shadow: none; animation: none; }
  .db-main .db-table-head-th { background: transparent; color: #000; border-bottom: 1px solid #000; }
  .db-main .db-table-body-td { border-bottom: 1px solid #DDD; }
  .db-main .db-btn, .db-main .db-btn-outline { display: none; }
}