:root {
  /* System bar insets. env() alone isn't reliable inside the Android app:
     older Android WebViews report 0 even with viewport-fit=cover, so the
     bottom tab bar ended up under the phone's back/home buttons. Capacitor's
     SystemBars plugin injects the real values as --safe-area-inset-*
     (and 0 when it has already padded the WebView itself), so taking the
     max of both is correct on every WebView and on regular browsers. */
  --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --bg: #eef0f4;
  --surface: #ffffff;
  --card: #ffffff;
  --subtle: #f4f4f5;
  --subtle-2: #fafafa;
  --muted: #71717a;
  --muted-soft: #a1a1aa;
  --accent: #4f46e5;
  --accent-rgb: 79, 70, 229;
  --accent-dark: #4338ca;
  --accent-soft: #eef2ff;
  --accent-soft-text: #4338ca;
  --green: #16a34a;
  --green-dark: #15803d;
  --green-soft: #dcfce7;
  --green-soft-text: #15803d;
  --danger: #dc2626;
  --danger-dark: #b91c1c;
  --danger-soft: #fee2e2;
  --danger-soft-text: #b91c1c;
  --amber: #d97706;
  --amber-soft: #fef3c7;
  --amber-soft-text: #92400e;
  --blue: #2563eb;
  --blue-soft: #dbeafe;
  --blue-soft-text: #1d4ed8;
  --radius: 12px;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --gap: 1rem;
  --text: #18181b;

  --shadow-strong: 0 20px 44px rgba(24,24,27,0.10);
  --shadow-soft: 0 8px 24px rgba(24,24,27,0.06);
}

[data-theme="dark"] {
  /* Navy/sky-blue, matching the brand identity already used on the
     customer-facing site and the embedded bill/receipt view below
     (both built around #020617 + #0ea5e9) — previously this theme used
     an unrelated indigo accent, out of step with the rest of the platform. */
  --bg: #020617;
  --surface: #0b1120;
  --card: #0e1526;
  --subtle: #131c30;
  --subtle-2: #101828;
  --muted: #94a3b8;
  --muted-soft: #5f7290;
  --accent: #0284c7;
  --accent-rgb: 2, 132, 199;
  --accent-dark: #075985;
  --accent-soft: rgba(2,132,199,0.18);
  --accent-soft-text: #7dd3fc;
  --green: #4ade80;
  --green-dark: #86efac;
  --green-soft: rgba(74,222,128,0.16);
  --green-soft-text: #86efac;
  --danger: #f87171;
  --danger-dark: #fca5a5;
  --danger-soft: rgba(248,113,113,0.16);
  --danger-soft-text: #fca5a5;
  --amber: #fbbf24;
  --amber-soft: rgba(251,191,36,0.16);
  --amber-soft-text: #fde68a;
  --blue: #38bdf8;
  --blue-soft: rgba(56,189,248,0.16);
  --blue-soft-text: #bae6fd;
  --border: #1e293b;
  --border-strong: #2c3b52;
  --text: #eef2f7;

  --shadow-strong: 0 20px 44px rgba(0,0,0,0.6);
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.45);
}

/* ===== RESET / BASE ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===== TOPBAR ===== */

.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.logo-dot {
  width: 9px;
  height: 9px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text h1 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: var(--text);
}

.brand-text .tiny {
  display: block;
  color: var(--muted);
  font-size: .68rem;
}

.topbar .right {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--muted);
  position: relative;
}

/* Everything that used to sit inline in the topbar (role, email, theme
   toggle, sign out) now lives behind one compact trigger — the inline
   version overflowed/wrapped badly on phone-width screens. */
.account-trigger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--subtle);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-strong);
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  z-index: 60;
  animation: menuPop .12s ease-out;
}

.account-menu[hidden] {
  display: none;
}

@keyframes menuPop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.account-menu-header {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .3rem .6rem .6rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}

.account-menu-header #topUserEmail {
  word-break: break-all;
}

.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: .55rem .6rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease;
}

.account-menu-item:hover {
  background: var(--subtle);
}

.account-menu-item.danger {
  color: var(--danger);
}

/* ===== LAYOUT ===== */

.container {
  max-width: 1280px;
  width: 100%;
  margin: 1.5rem auto 4rem;
  padding: 0 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.app-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stack-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

/* ===== APP NAV (داخل پنل) ===== */

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .9rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-strong);
  gap: .75rem;
}

.app-nav-left {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.app-nav-right {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.app-nav-btn {
  border-radius: 999px;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  padding: .34rem .95rem;
  font-size: .78rem;
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  /* Skips the browser's wait-for-a-possible-double-tap delay before it
     dispatches click, so a tab opens on the first tap instead of ~300ms later. */
  touch-action: manipulation;
}

.app-nav-btn .nav-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.app-nav-btn {
  position: relative;
}

.booking-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Gated to real pointers with hover support only — on a touch screen an
   un-gated :hover rule makes some mobile browsers treat the first tap as
   "enter hover" (showing this style) and require a second tap to actually
   click, instead of navigating right away. */
@media (hover: hover) and (pointer: fine) {
  .app-nav-btn:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-color: var(--accent-soft);
  }
}

.app-nav-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.28);
}

/* صفحات داخلی (Dashboard / Settings / Menu / Tables) */

.app-page {
  animation: fadeInPage .18s ease-out;
}

.app-page.is-active {
  opacity: 1;
}

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== TYPOGRAPHY ===== */

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: .01em;
}

h2 {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}

h3 {
  margin: 0 0 .25rem;
  font-size: .9rem;
}

label {
  font-size: .75rem;
  color: var(--muted);
  display: block;
}

.small {
  font-size: .75rem;
}

.tiny {
  font-size: .7rem;
}

.x-tiny {
  font-size: .65rem;
}

/* ===== CARDS & SECTIONS ===== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-strong);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: none;
}

.card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card > * {
  position: relative;
  z-index: 1;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

/* auth card a bit narrower */
.auth-card {
  max-width: 520px;
  margin: 0 auto 1rem;
}

/* ===== GRID / FLEX HELPERS ===== */

.row {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* 4-column grid برای Quick Actions */
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.gap {
  gap: 1.25rem;
}

/* ===== QUICK LINKS (Dashboard tiles) ===== */

.quick-links-grid {
  margin-top: .6rem;
}

.quick-link-tile {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  padding: .9rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease;
}

.quick-link-tile .title {
  font-size: .86rem;
  font-weight: 600;
}

.quick-link-tile .muted {
  font-size: .72rem;
}

.quick-link-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--card);
  box-shadow: var(--shadow-strong);
}

/* ===== INPUTS ===== */

input,
textarea,
select {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: .6rem;
  padding: .55rem .7rem;
  color: var(--text);
  font-size: .9rem;
  outline: none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
  width: 100%;
  min-width: 0;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-soft);
}

textarea {
  resize: vertical;
  min-height: 60px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--card);
}

/* ===== BUTTONS ===== */

.btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: .6rem;
  padding: .5rem 1.2rem;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, transform .1s ease, box-shadow .14s ease;
}

.btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.32);
}

.btn:active {
  transform: translateY(1px);
}

.btn.ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.btn.ghost:hover {
  background: var(--subtle);
  border-color: var(--muted);
}

.btn.small {
  padding: .35rem .85rem;
  font-size: .72rem;
}

.btn.tiny {
  padding: .2rem .6rem;
  font-size: .68rem;
}

.btn.wide {
  width: 100%;
}

/* active toggle style for status buttons */
.btn.ghost.small.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-soft-text);
}

/* danger ghost (for delete buttons) */
.btn.ghost.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.btn.ghost.danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* ===== TABS (AUTH) ===== */

.tabs {
  display: inline-flex;
  padding: .25rem;
  border-radius: 999px;
  background: var(--subtle);
  border: 1px solid var(--border);
  margin: .9rem 0 1.1rem;
}

.tabs .btn.small {
  border-radius: 999px;
  box-shadow: none;
  background: transparent;
  border: none;
  color: var(--muted);
}

.tabs .btn.small:hover {
  background: var(--card);
}

.tabs .btn.small.active {
  background: var(--accent);
  color: #ffffff;
}

/* ===== TEXT HELPERS ===== */

.muted {
  color: var(--muted);
  font-size: .85rem;
}

.hint {
  margin-top: .45rem;
  color: var(--muted);
}

/* key-value line for ids */
.kv {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: .75rem;
}

.info-box {
  margin-top: .7rem;
  padding: .6rem .7rem;
  border-radius: .75rem;
  background: var(--subtle);
  border: 1px dashed var(--border-strong);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

/* badges / pills */

.pill {
  border-radius: 9999px;
  padding: .25rem .6rem;
  font-size: .7rem;
}

.pill.tiny {
  font-size: .65rem;
  padding: .18rem .6rem;
}

/* category pills with thumbnail (for menu categories) */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .7rem .22rem .35rem;
  border-radius: 9999px;
  background: var(--subtle);
  border: 1px solid var(--border);
  font-size: .7rem;
  color: var(--text);
}

.category-pill-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.category-pill-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== LINKS & CHECKBOX ===== */

a.link {
  color: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  padding: .2rem .7rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
}

a.link:hover {
  background: var(--card);
  box-shadow: 0 0 0 1px var(--accent);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.checkbox input {
  width: 14px;
  height: 14px;
}

/* ===== AUTH FORMS ===== */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.auth-form + .auth-form {
  margin-top: 1rem;
}

.error {
  color: var(--danger);
}

/* ===== TABLES SECTION – ۶ ستون ===== */

.tables {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: stretch;
  margin-top: 1rem;
}

.table-card {
  background: var(--card);
  border-radius: 11px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  padding: 0.7rem 0.75rem 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 120px;
  box-shadow: var(--shadow-soft);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background .12s ease;
}

.table-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow-strong);
}

.table-card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}

.table-card .tbl-title {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.table-card .status {
  font-size: 0.65rem;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  text-transform: lowercase;
}

/* متن sessionId / openedAt */
.table-card .meta {
  font-size: 0.64rem;
  line-height: 1.35;
  color: var(--muted);
}

/* اکشن‌ها */
.table-card .actions {
  display: flex;
  gap: 0.25rem;
  margin-top: auto;
}

.table-card .actions .btn {
  flex: 1;
  padding: 0.3rem 0.35rem;
  font-size: 0.7rem;
}

/* دکمه reset (ریست) مخفی شود */
.table-card .actions .btn.refresh,
.table-card .actions .btn.reset {
  display: none !important;
}

/* وقتی میز باز است */
.table-card.is-open {
  border-left-color: var(--green);
  box-shadow: var(--shadow-soft);
}

/* status pills */
.status-open {
  background: var(--green-soft);
  color: var(--green-soft-text);
  font-weight: 600;
}

.status-closed {
  background: var(--subtle);
  color: var(--muted);
  font-weight: 500;
}

/* ===== LISTS / MENU ITEMS ===== */

.list {
  list-style: none;
  padding: 0;
  margin: .7rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.list li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .7rem;
  padding: .6rem .75rem;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
}

.list.small li {
  font-size: .78rem;
}

/* menu thumb inside admin menu list */

.menu-row-admin {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
}

.menu-thumb-admin {
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.menu-thumb-admin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== ORDERS ===== */

.orders-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
}

.order-create {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.order-create h3 {
  font-size: .85rem;
  margin-bottom: .25rem;
}

.order-create label {
  font-size: .78rem;
  color: var(--muted);
}

/* فقط container اصلی ستون لیست، بدون اسکرول */
.orders-container {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* completed orders block (زیر لیست اصلی) */
.orders-completed {
  margin-top: .6rem;
  padding-top: .4rem;
  border-top: 1px dashed var(--border);
  opacity: .95;
}

.orders-completed .order-card {
  opacity: .9;
}

.order-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .7rem .8rem;
  box-shadow: var(--shadow-soft);
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.order-card small {
  color: var(--muted);
}

/* Orders – emphasis on table & type */
.order-headline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.order-table-strong {
  font-weight: 600;
  font-size: 0.95rem;
}

.order-header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.05rem;
}

.order-id-strong {
  font-weight: 500;
  margin-right: 0.35rem;
}

.order-meta-secondary {
  margin-top: 0.15rem;
}

/* نوع سفارش (pill رنگی) */
.order-type-pill {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* Dine-in */
.order-type-pill-dinein {
  background: var(--blue-soft);
  color: var(--blue-soft-text);
}

/* Takeaway */
.order-type-pill-takeaway {
  background: var(--amber-soft);
  color: var(--amber-soft-text);
}

/* Delivery */
.order-type-pill-delivery {
  background: var(--green-soft);
  color: var(--green-soft-text);
}

/* سایر انواع */
.order-type-pill-other {
  background: var(--subtle);
  color: var(--muted);
}

.order-items {
  margin-top: .4rem;
  font-size: .78rem;
}

.order-total {
  margin-top: .4rem;
}

.order-actions {
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* order status badges */

.badge {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  border-radius: 9999px;
  padding: .15rem .6rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.badge.new {
  background: var(--blue-soft);
  color: var(--blue-soft-text);
}

.badge.accepted {
  background: var(--green-soft);
  color: var(--green-soft-text);
}

.badge.in_progress {
  background: var(--amber-soft);
  color: var(--amber-soft-text);
}

.badge.completed {
  background: var(--subtle);
  color: var(--muted);
}

.badge.cancelled {
  background: var(--danger-soft);
  color: var(--danger-soft-text);
}

/* ===== STAFF TABLE ===== */

.table {
  width: 100%;
  border-collapse: collapse;
}

.table.small th,
.table.small td {
  padding: .45rem .55rem;
  font-size: .75rem;
  text-align: left;
}

.table.small thead tr {
  background: var(--subtle);
}

.table.small th {
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.table.small tbody tr:nth-child(even) {
  background: var(--subtle-2);
}

.table.small tbody tr:nth-child(odd) {
  background: var(--card);
}

.table.small td {
  border-bottom: 1px solid var(--border);
}

/* ===== Expenses table & month grouping ===== */

#page-expenses .card {
  background: var(--card);
}

/* wrapper برای جدول هزینه‌ها */
#page-expenses .table-wrapper {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* ردیف‌های هدر ماه (مثلاً January 2025) */
.expense-month-row {
  background: var(--accent-soft);
}

.expense-month-cell {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.9rem;
  color: var(--accent-soft-text);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

/* ردیف‌های خود هزینه‌ها */
#page-expenses tbody tr:not(.expense-month-row) {
  background: var(--card);
  transition:
    background 0.16s ease,
    transform 0.12s ease,
    box-shadow 0.16s ease;
}

#page-expenses tbody tr:not(.expense-month-row):nth-child(even) {
  background: var(--subtle-2);
}

#page-expenses tbody tr:not(.expense-month-row):hover {
  background: var(--subtle);
}

/* ستون مبلغ را راست‌چین و فونت مونو اسپیس کنیم تا شبیه اعداد مالی باشد */
#page-expenses td:nth-child(3),
#page-expenses th:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* دسته‌بندی‌ها به شکل pill کوچک (Salary / Rent / …) */
#page-expenses td:nth-child(2) {
  white-space: nowrap;
  font-size: 11px;
  text-transform: capitalize;
  padding-right: 0.5rem;
}

#page-expenses td:nth-child(2) span {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

/* دکمه‌های اکشن (Edit / Delete) جمع‌وجور و خطی */
#page-expenses td:last-child {
  white-space: nowrap;
  text-align: right;
}

#page-expenses td:last-child .btn.tiny,
#page-expenses td:last-child .btn.small,
#page-expenses td:last-child .btn.ghost {
  font-size: 10px;
  padding-inline: 0.45rem;
  height: 24px;
}

/* سرچ و فیلتر بالای جدول */
#page-expenses .expense-filters,
#page-expenses .row input#expenseSearch,
#page-expenses .row select#expenseMonthFilter {
  font-size: 13px;
}

#expenseSearch {
  background: var(--card);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  padding-inline: 0.9rem;
}

#expenseSearch:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#expenseMonthFilter {
  background: var(--card);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  padding-inline: 0.75rem;
  min-width: 150px;
}
/* ===== INVENTORY (STOCK MANAGEMENT) ===== */

#inventory-section .card-header h2 {
  display: flex;
  align-items: center;
  gap: .4rem;
}

#inventory-section .card-header h2::after {
  content: "• PRO";
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--green-soft-text);
  padding: .08rem .4rem;
  border-radius: 999px;
  background: var(--green-soft);
}

/* wrapper for items table (scroll if too tall) */
.inventory-items-wrapper {
  max-height: 260px;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: var(--card);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-soft);
}

.inventory-items-wrapper table {
  width: 100%;
}

/* sticky header for inventory items table */
.inventory-items-wrapper thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--subtle);
}

/* highlight low stock rows */
.inv-low-stock {
  position: relative;
}

.inv-low-stock::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--danger);
}

.inv-low-stock td {
  background: var(--danger-soft) !important;
  color: var(--danger-soft-text);
}

.inv-low-stock td:first-child {
  padding-left: .75rem;
}

/* filters row (search + low-only) */
#inventory-section #invFilterText {
  flex: 1;
  min-width: 0;
}

#inventory-section .row.small {
  align-items: center;
}

/* movements timeline container */
.inventory-movements {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 260px;
  padding-right: .2rem;
  overflow-y: auto;
}

/* scrollbar subtle – روی چند بخش مشترک */
.inventory-movements::-webkit-scrollbar,
.inventory-items-wrapper::-webkit-scrollbar,
.menu-list-container::-webkit-scrollbar,
.orders-container-shell::-webkit-scrollbar {
  width: 6px;
}

.inventory-movements::-webkit-scrollbar-thumb,
.inventory-items-wrapper::-webkit-scrollbar-thumb,
.menu-list-container::-webkit-scrollbar-thumb,
.orders-container-shell::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

/* single movement row */
.inventory-movement-row {
  position: relative;
  padding: .55rem .7rem .45rem .9rem;
  border-radius: .7rem;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.inventory-movement-row::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .75rem;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.mv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .25rem;
}

.mv-item {
  font-size: .78rem;
  font-weight: 500;
}

.mv-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: .2rem;
}

.mv-body span {
  color: var(--text);
}

.mv-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: space-between;
}

.mv-footer span {
  font-size: .65rem;
}

.mv-note {
  color: var(--text);
  max-width: 60%;
}

/* movement type pills */
.mv-type-in {
  background: var(--green-soft);
  color: var(--green-soft-text);
  border: 1px solid var(--green-soft);
}

.mv-type-out {
  background: var(--blue-soft);
  color: var(--blue-soft-text);
  border: 1px solid var(--blue-soft);
}

.mv-type-spoilage {
  background: var(--danger-soft);
  color: var(--danger-soft-text);
  border: 1px solid var(--danger-soft);
}

.mv-type-adjust {
  background: var(--amber-soft);
  color: var(--amber-soft-text);
  border: 1px solid var(--amber-soft);
}

.inventory-tag {
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

/* ===== MENU ADMIN – Compact categories & cards ===== */

.menu-list-container {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding-right: 4px;
}

/* هر کتگوری یک سکشن جمع‌وجور */
.menu-category-section {
  padding: 0.25rem 0.5rem 0.6rem;
  border-radius: 14px;
  background: var(--subtle-2);
  border: 1px solid var(--border);
}

/* هدر کتگوری (دکمه‌ی باز و بسته شدن) */
.menu-category-header {
  width: 100%;
  border: none;
  outline: none;
  background: var(--card);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.menu-category-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-category-pill {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  font-size: 0.78rem;
  font-weight: 500;
}

.menu-category-count-badge {
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--subtle);
  color: var(--muted);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-category-chevron {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.menu-category-header.is-open .menu-category-chevron {
  transform: rotate(180deg);
}

.menu-category-body {
  margin-top: 0.45rem;
  display: none;
  flex-direction: column;
  gap: 0.45rem;
}

.menu-category-body.is-open {
  display: flex;
}

/* کارت هر آیتم منو */
.menu-card-admin {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
}

.menu-card-main {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.menu-card-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--subtle);
}

.menu-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-card-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--muted);
}

.menu-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.menu-card-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.menu-card-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
}

.menu-card-price {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--amber-soft-text);
}

.menu-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.menu-card-chip {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  background: var(--subtle);
  color: var(--text);
}

.menu-card-chip--ghost {
  background: transparent;
  border: 1px dashed var(--border-strong);
}

.menu-card-desc {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.menu-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-left: 0.6rem;
}

.menu-card-actions .btn.tiny {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
}

.btn.soft.tiny {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-soft-text);
}

.btn.soft.tiny:hover {
  background: #e0e7ff;
}

/* ===== COMPACT ORDERS FILTER BAR ===== */

.order-filters {
  background: var(--subtle-2);
  border: 1px solid var(--border);
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: center;
}

.order-filters input,
.order-filters select {
  padding: 0.3rem 0.45rem !important;
  font-size: 0.75rem !important;
  height: 34px !important;
  border-radius: 6px !important;
}

.order-filters label {
  font-size: 0.65rem;
  margin-bottom: 0.1rem;
}

.order-filters .stack,
.order-filters .row {
  margin: 0;
}

#orderMinTotal,
#orderMaxTotal {
  max-width: 120px;
}

#orderDateFrom,
#orderDateTo {
  max-width: 130px;
}

#orderSearch {
  width: 180px !important;
  padding: 0.35rem 0.6rem !important;
  border-radius: 30px !important;
  font-size: 0.75rem !important;
}

/* ===== FOOTER & BANNER ===== */

.footer {
  text-align: center;
  color: var(--muted);
  font-size: .75rem;
  padding: 1rem 0 5rem;
}

.emu-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2a1a1a;
  border-top: 1px solid #402020;
  color: #ffb3b8;
  text-align: center;
  font-size: .75rem;
  padding: 4px 10px;
  z-index: 999;
}

/* ===== RESPONSIVE LAYOUTS (عمومی) ===== */

/* لپ‌تاپ کوچک / تبلت افقی */
@media (max-width: 1024px) {
  .container {
    max-width: 100%;
  }

  .grid2,
  .orders-layout {
    grid-template-columns: 1fr;
  }

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

  .menu-list-container {
    max-height: none;
  }
}

/* تبلت عمودی / موبایل بزرگ */
@media (max-width: 900px) {
  .topbar {
    padding: 0 .9rem;
  }

  /* App nav becomes a fixed bottom tab bar at this width — this is the
     size the Android app actually runs at, and a horizontal row of text
     pill-buttons (fine on desktop) either overflowed or wrapped badly
     there. Icon-over-label tabs, pinned to the bottom, read as a normal
     native app navigation bar instead.
     `.card.app-nav` (not just `.app-nav`): the nav also carries .card, and
     the phone-width `.card { padding }` rule further down used to win on
     source order, silently dropping the safe-area bottom padding — which
     is what put the tabs under the phone's back/home buttons. */
  .card.app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    flex-wrap: nowrap;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.16);
    padding: .3rem .25rem calc(.3rem + var(--sab));
  }

  /* Both wrapper divs disappear from layout (display:contents) so every
     tab — whether it started in .app-nav-left or .app-nav-right — becomes
     a direct flex child of .app-nav and shares the row equally. Fixed
     min-widths would have overflowed once a 6th item (a vertical with
     Reports + 5 tabs) was visible; equal flex-basis always fits. */
  .app-nav-left,
  .app-nav-right {
    display: contents;
  }

  .app-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: .15rem;
    border: none;
    background: none;
    border-radius: 10px;
    padding: .3rem .2rem;
    font-size: .6rem;
  }

  .app-nav-btn .nav-icon {
    width: 20px;
    height: 20px;
  }

  .app-nav-btn:hover {
    background: none;
    border-color: transparent;
  }

  /* pinned to the icon's corner instead of trailing the label inline */
  .booking-nav-badge {
    position: absolute;
    top: 0;
    right: 8px;
    margin-left: 0;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
  }

  .app-nav-btn.active {
    background: none;
    box-shadow: none;
    border-color: transparent;
    color: var(--accent);
  }

  .app-nav-label {
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* room for the fixed bottom nav so page content isn't hidden behind it */
  .app-layout {
    padding-bottom: calc(76px + var(--sab));
  }

  .inventory-items-wrapper,
  .inventory-movements {
    max-height: 220px;
  }

  .tables {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* موبایل متوسط */
@media (max-width: 700px) {
  .container {
    padding-inline: 1rem;
  }

  .grid4 {
    grid-template-columns: 1fr;
  }

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

  .card {
    padding: 1.1rem 1.1rem 1.3rem;
  }

  .topbar .right {
    font-size: .7rem;
  }
}

/* موبایل کوچک */
@media (max-width: 480px) {
  /* Topbar no longer needs to stack into a column here — .right now holds
     just the single account-menu button (was 5 crowded inline items),
     which fits fine on one row at any phone width. Stacking it also broke
     .account-menu's right:0 anchor once .right shrank to button-only
     width, pushing the dropdown off-screen to the left. */
  .topbar {
    padding: 0 .8rem;
  }

  .brand-text h1 {
    font-size: .96rem;
  }

  .tables {
    grid-template-columns: 1fr;
  }

  .order-filters {
    flex-direction: column;
    align-items: stretch;
  }

  #orderSearch {
    width: 100% !important;
  }

  .menu-list-container {
    max-height: none;
  }

  .inventory-items-wrapper,
  .inventory-movements {
    max-height: 200px;
  }
}
/* ===== Auth layout (admin login) ===== */

#auth-section {
  min-height: calc(100vh - 56px - 40px); /* قد تقریبی = صفحه - هدر - فوتر */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.auth-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.auth-logo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow-strong);
}

.auth-logo .brand {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* کارت لاگین */
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem 2.25rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-strong);
}

.auth-header h1 {
  margin: 0 0 0.25rem 0;
}

.auth-header .muted {
  font-size: 0.8rem;
}

.auth-card label {
  display: block;
  margin-top: 0.85rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font-size: 0.9rem;
}

.auth-card input::placeholder {
  color: var(--muted-soft);
}

.btn-auth {
  margin-top: 1.1rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: white;
  font-weight: 500;
  font-size: 0.95rem;
}

.btn-auth:hover {
  background: var(--accent-dark);
}

.btn-auth:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-error {
  margin-top: 0.5rem;
  min-height: 1rem;
  font-size: 0.8rem;
  color: var(--danger);
}

.auth-card .foot {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.auth-card .contact-link {
  color: var(--accent);
  text-decoration: none;
}
/* =========================
   Embedded Bill (scoped)
   فعال فقط وقتی body کلاس bill-view دارد
========================= */

body.bill-view {
  background: radial-gradient(circle at top, #1f2937 0%, #020617 60%, #020617 100%);
  color: #e5e7eb;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.bill-view .bill-shell {
  max-width: 900px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

body.bill-view .bill-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

body.bill-view .bill-topbar-left span {
  font-size: 0.85rem;
  opacity: 0.7;
}

body.bill-view .bill-topbar-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ✅ مهم: دکمه‌های Bill فقط داخل bill-view */
body.bill-view .btn {
  border-radius: 999px;
  border: none;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body.bill-view .btn-outline {
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: transparent;
  color: #e5e7eb;
}

body.bill-view .btn-primary {
  background: #22c55e;
  color: #021016;
}

body.bill-view .btn-danger {
  background: #ef4444;
  color: #f9fafb;
}

body.bill-view .btn:disabled {
  opacity: 0.6;
  cursor: default;
}

body.bill-view .bill-paper {
  background: #f9fafb;
  color: #020617;
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.7);
}

body.bill-view .bill-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

body.bill-view .bill-header-left h1 {
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
}

body.bill-view .bill-header-left span {
  font-size: 0.8rem;
  color: #4b5563;
}

body.bill-view .bill-header-right {
  text-align: right;
  font-size: 0.8rem;
  color: #4b5563;
}

body.bill-view .bill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #4b5563;
  margin-bottom: 0.75rem;
}

body.bill-view .pill-status {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  background: #e5e7eb;
  color: #111827;
}

body.bill-view .pill-status.paid {
  background: #bbf7d0;
  color: #064e3b;
}

body.bill-view .pill-status.unpaid {
  background: #fee2e2;
  color: #7f1d1d;
}

body.bill-view hr {
  border: none;
  border-top: 1px dashed #e5e7eb;
  margin: 0.75rem 0;
}

body.bill-view .bill-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

body.bill-view .bill-items thead th {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #e5e7eb;
}

body.bill-view .bill-items tbody td {
  padding: 0.25rem 0;
  border-bottom: 1px solid #f3f4f6;
}

body.bill-view .bill-items tfoot td {
  padding: 0.18rem 0;
}

body.bill-view .text-right {
  text-align: right;
}

body.bill-view .totals {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

body.bill-view .totals-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}

body.bill-view .totals-row.total {
  font-weight: 700;
  font-size: 1rem;
}

body.bill-view .totals-row.total span:last-child {
  font-size: 1.05rem;
}

body.bill-view .bill-payment {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: #4b5563;
}

body.bill-view .bill-payment h3 {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
}

body.bill-view .muted {
  opacity: 0.75;
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  body.bill-view .bill-paper {
    padding: 1.1rem 1rem;
  }

  body.bill-view .bill-header {
    flex-direction: column;
    align-items: flex-start;
  }

  body.bill-view .bill-header-right {
    text-align: left;
  }

  body.bill-view .bill-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  body.bill-view .bill-topbar-actions {
    justify-content: flex-start;
  }
}

/* ✅ Card machine mode (فقط وقتی bill-view فعال است) */
body.bill-view.card-mode {
  background: #020617;
  color: #f9fafb;
}

body.bill-view.card-mode .bill-shell,
body.bill-view.card-mode .bill-paper,
body.bill-view.card-mode .bill-topbar {
  display: none;
}

body.bill-view .card-screen {
  display: none;
}

body.bill-view.card-mode .card-screen {
  display: flex;
}

body.bill-view .card-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #0f172a 0%, #020617 65%);
  color: #e5e7eb;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem;
}

body.bill-view .card-amount {
  font-size: 3rem;
  font-weight: 700;
}

body.bill-view .card-currency {
  font-size: 1.1rem;
  opacity: 0.9;
}

body.bill-view .card-hint {
  font-size: 0.9rem;
  opacity: 0.75;
}

body.bill-view .card-exit {
  margin-top: 1.5rem;
}

body.bill-view .card-exit button {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: transparent;
  color: #e5e7eb;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}

@media print {
  body.bill-view {
    background: var(--card);
  }

  body.bill-view .bill-shell {
    margin: 0;
    max-width: 100%;
  }

  body.bill-view .bill-topbar {
    display: none;
  }

  body.bill-view .bill-paper {
    box-shadow: none;
    border-radius: 0;
  }
}
  body.receipt-mode {
    background: #fff !important;
    color: #000 !important;
  }

  body.receipt-mode .bill-shell {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.receipt-mode .bill-paper {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 6px !important;
  }

  body.receipt-mode .bill-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  body.receipt-mode .bill-header-right {
    text-align: left !important;
  }

  body.receipt-mode .bill-header-left h1 {
    font-size: 14px !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  body.receipt-mode .bill-header-left span,
  body.receipt-mode .bill-header-right,
  body.receipt-mode .bill-meta,
  body.receipt-mode .bill-payment,
  body.receipt-mode .muted {
    font-size: 11px !important;
  }

  body.receipt-mode hr {
    margin: 6px 0 !important;
    border-top: 1px dashed #cbd5e1 !important;
  }

  body.receipt-mode .bill-items {
    font-size: 11px !important;
  }

  body.receipt-mode .bill-items thead th {
    padding-bottom: 4px !important;
  }

  body.receipt-mode .bill-items tbody td {
    padding: 3px 0 !important;
  }

  body.receipt-mode .totals {
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  body.receipt-mode .totals-row.total {
    font-size: 13px !important;
  }

  /* ===== Print rules ===== */
  @media print {
    /* Hide whole admin chrome */
    header.topbar,
    nav.app-nav,
    footer.footer,
    .emu-banner {
      display: none !important;
    }

    /* Ensure bill page prints */
    #app-section,
    .container {
      padding: 0 !important;
      margin: 0 !important;
      max-width: none !important;
    }

    /* If you are not in bill page, still enforce showing bill when printing */
    #page-bill {
      display: block !important;
    }

    /* remove default spacing */
    body {
      margin: 0 !important;
      background: #fff !important;
    }

    /* Thermal widths */
    body.receipt-80 {
      width: 80mm !important;
    }
    body.receipt-58 {
      width: 58mm !important;
    }

    /* Remove margins and fit page height to ticket content (avoids feeding a full sheet on thermal printers) */
    @page {
      size: 80mm auto;
      margin: 0;
    }
    body.receipt-58 {
      page: receipt58;
    }
    @page receipt58 {
      size: 58mm auto;
      margin: 0;
    }

    /* The bill topbar inside bill page should not print */
    .bill-topbar {
      display: none !important;
    }

    /* Remove card-mode if any */
    body.card-mode .card-screen {
      display: none !important;
    }
  }
  body.card-mode {
  background-color: #020617;
  background-image:
    /* نور بالا */
    radial-gradient(
      1200px 600px at 20% -10%,
      rgba(56, 189, 248, 0.07),
      transparent 60%
    ),

    /* نور سبز کنترلی */
    radial-gradient(
      800px 500px at 90% 10%,
      rgba(34, 197, 94, 0.06),
      transparent 65%
    ),

    /* فلس‌ها – لایه روشن */
    repeating-linear-gradient(
      60deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1.5px,
      transparent 1.5px,
      transparent 14px
    ),

    /* فلس‌ها – لایه سایه */
    repeating-linear-gradient(
      -60deg,
      rgba(0,0,0,0.25) 0px,
      rgba(0,0,0,0.25) 1.5px,
      transparent 1.5px,
      transparent 14px
    );

  background-attachment: fixed;
  color: #e5e7eb;
}
/* ===== Inventory report layout fix (ledger overflow) ===== */

/* نذار صفحه از عرض بزنه بیرون */
body {
  overflow-x: hidden;
}

/* خود ریشه‌ی ریپورت */
#invReportRoot {
  max-width: 100%;
  overflow: hidden;
}

/* هر کارت داخل ریپورت */
#invReportRoot .card {
  max-width: 100%;
}

/* جدول ledger: اگر پهن شد، داخل خودش اسکرول افقی بخوره نه اینکه صفحه رو بکشه */
#invReportRoot table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* سلول‌ها: متن‌های خیلی بلند رو بشکن */
#invReportRoot th,
#invReportRoot td {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* ستون Note معمولاً آخره → اجازه بده چند خطی بشه و کل عرض رو خراب نکنه */
#invReportRoot td:last-child,
#invReportRoot th:last-child {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* اگر داخل ledger یک container اسکرول داری (div) این کمک می‌کنه */
#invReportRoot .table-wrap,
#invReportRoot .table-scroll,
#invReportRoot .ledger-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
/* ===== Bill payment method (segmented control) ===== */
.bill-payment-method {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.bill-payment-method .pm-group {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(10px);
}

.bill-payment-method .pm-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.bill-payment-method .pm-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bill-payment-method .pm-option span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: rgba(229, 231, 235, 0.92);
  font-size: 0.85rem;
  line-height: 1;
  user-select: none;
}

.bill-payment-method .pm-option span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.65);
  box-sizing: border-box;
}

.bill-payment-method .pm-option input:checked + span {
  border-color: rgba(34, 197, 94, 0.65);
  background: rgba(34, 197, 94, 0.12);
}

.bill-payment-method .pm-option input:checked + span::before {
  border-color: rgba(34, 197, 94, 0.95);
  background: rgba(34, 197, 94, 0.95);
}

.bill-payment-method .pm-option input:disabled + span {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ===== Print: hide UI cards/topbar (fix Discount tab appearing in print) ===== */
@media print {
  /* hide top UI controls */
  .bill-topbar,
  .bill-topbar-actions,
  #btnBackAdmin,
  #btnPrint,
  #btnReceipt80,
  #btnReceipt58,
  #btnCardMode,
  #btnExitCardMode,
  #btnMarkPaid,
  #btnOnlinePay,
  .bill-payment-method,
  #billDiscountCard,
  .card.is-collapsible#billDiscountCard,
  .card.requires-sub#billDiscountCard {
    display: none !important;
  }

  /* keep invoice clean */
  body {
    background: #fff !important;
  }
}
/* ===== Menu availability chips (admin menu cards) ===== */
/* Paste at the END of web/admin/style.css */

.menu-card-chip--danger {
  border-color: var(--danger-soft);
  background: var(--danger-soft);
  color: var(--danger-soft-text);
}

.menu-card-chip--warn {
  border-color: var(--amber-soft);
  background: var(--amber-soft);
  color: var(--amber-soft-text);
}

/* Optional: make "Unavailable" cards feel disabled (only visual, admin can still click buttons) */
.menu-card-admin .menu-card-price {
  font-variant-numeric: tabular-nums;
}

/* If you want the meta row to wrap nicely when there are many chips */
.menu-card-admin .menu-card-meta {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

/* Make chips slightly tighter on tiny screens */
@media (max-width: 420px) {
  .menu-card-chip {
    padding: 0.18rem 0.42rem;
    font-size: 0.72rem;
  }
}

/* ===== POINT OF SALE (supermarket) ===== */

.pos-search-results {
  border: 1px solid var(--subtle);
  border-radius: 10px;
  max-height: 220px;
  overflow: auto;
  background: var(--surface);
}

.pos-search-result-item {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--subtle);
}

.pos-search-result-item:last-child {
  border-bottom: none;
}

.pos-search-result-item:hover {
  background: var(--accent-soft);
}

.pos-qty-controls {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.pos-qty-controls button {
  width: 28px;
  height: 28px;
  line-height: 1;
}

.pos-qty-controls input {
  width: 56px;
  text-align: center;
}

.pos-totals {
  background: var(--subtle-2);
  border-radius: 12px;
  padding: 1rem;
}

.pos-totals-line {
  justify-content: space-between;
}

.pos-total-grand {
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--muted-soft);
  font-size: 1.6rem;
}

.pos-total-grand b {
  color: var(--accent-dark);
}

.pos-low-stock {
  color: var(--danger-dark);
  font-weight: 600;
}
/* ===== AI menu import (menu-import.js) ===== */

.mii-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mii-thumbs:empty {
  display: none;
}

.mii-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mii-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mii-thumb-pdf {
  padding: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  word-break: break-all;
}

.mii-thumb-remove {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.mii-status {
  margin-top: 10px;
  min-height: 1em;
}

.mii-status.is-error {
  color: var(--danger);
  font-weight: 600;
}

.mii-status.is-busy::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 8px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -2px;
  animation: mii-spin 0.8s linear infinite;
}

@keyframes mii-spin {
  to {
    transform: rotate(360deg);
  }
}

.mii-warnings {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: var(--amber-soft);
  color: var(--amber-soft-text);
  font-size: 13px;
}

/* .stack / .mii-done set display, which would otherwise beat the [hidden] attribute. */
#menuImportCard [hidden] {
  display: none !important;
}

.mii-warnings ul {
  margin: 6px 0 0;
  padding-inline-start: 18px;
}

.mii-toolbar {
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 6px;
}

.mii-toolbar input[type="checkbox"],
.mii-table input[type="checkbox"] {
  width: auto;
  padding: 0;
}

.mii-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mii-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.mii-table th {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--subtle);
  color: var(--muted);
  font-weight: 600;
  text-align: start;
}

.mii-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.mii-table tr:last-child td {
  border-bottom: 0;
}

.mii-table input[type="text"] {
  padding: 6px 8px;
  font-size: 13px;
}

.mii-col-check {
  width: 34px;
}

.mii-col-price {
  width: 96px;
}

.mii-col-actions {
  width: 44px;
}

.mii-row.is-off td:not(.mii-col-check) {
  opacity: 0.45;
}

.mii-row.is-invalid input {
  border-color: var(--danger);
}

.mii-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.mii-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.mii-badge.warn {
  background: var(--amber-soft);
  color: var(--amber-soft-text);
}

.mii-badge.info {
  background: var(--blue-soft);
  color: var(--blue-soft-text);
}

.mii-badge.bad {
  background: var(--danger-soft);
  color: var(--danger-soft-text);
}

.mii-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green-soft-text);
  font-size: 13px;
  font-weight: 600;
}

/* Phones: each draft row becomes a stacked card instead of a sideways-scrolling table. */
@media (max-width: 640px) {
  .mii-table-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .mii-table,
  .mii-table tbody {
    display: block;
    min-width: 0;
  }

  .mii-table thead {
    display: none;
  }

  .mii-row {
    display: grid;
    grid-template-columns: 28px 1fr 88px 32px;
    gap: 6px 8px;
    padding: 10px 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
  }

  .mii-row td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .mii-row td:nth-child(1) { grid-column: 1; grid-row: 1; padding-top: 8px; }
  .mii-row td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .mii-row td:nth-child(3) { grid-column: 3; grid-row: 1; }
  .mii-row td:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
  .mii-row td:nth-child(5) { grid-column: 2 / 5; grid-row: 3; }
  .mii-row td:nth-child(6) { grid-column: 4; grid-row: 1; }
}

/* AI menu import: shown instead of the controls on accounts that are not on the Gold plan. */
.mii-locked {
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: var(--amber-soft);
  color: var(--amber-soft-text);
  font-size: 13px;
}

.mii-locked p {
  margin: 4px 0 0;
  color: inherit;
}

/* ===== AI monthly insights (insights.js, Reports page) ===== */
/* .ins-* display rules would otherwise beat the [hidden] attribute. */
#insightsCard [hidden] {
  display: none !important;
}

.ins-locked {
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: var(--amber-soft);
  color: var(--amber-soft-text);
  font-size: 13px;
}

.ins-locked p {
  margin: 4px 0 0;
  color: inherit;
}

.ins-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ins-toolbar select {
  width: auto;
  min-width: 170px;
}

.ins-status {
  margin-top: 10px;
  min-height: 1em;
}

.ins-status.is-error {
  color: var(--danger);
  font-weight: 600;
}

.ins-status.is-busy::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 8px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -2px;
  animation: mii-spin 0.8s linear infinite;
}

.ins-empty {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  font-size: 14px;
}

.ins-empty p {
  margin: 0 0 4px;
}

.ins-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ins-kpi {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.ins-kpi-label {
  color: var(--muted);
  font-size: 12px;
}

.ins-kpi-value {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
}

.ins-kpi-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.ins-head {
  margin-top: 18px;
}

.ins-headline {
  margin: 0 0 2px;
  font-size: 18px;
}

.ins-summary {
  margin: 8px 0 0;
  line-height: 1.6;
}

.ins-section {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-inline-start-width: 4px;
  border-radius: 10px;
}

.ins-section.ins-good {
  border-inline-start-color: var(--green);
}

.ins-section.ins-warn {
  border-inline-start-color: var(--amber);
}

.ins-section.ins-action {
  border-inline-start-color: var(--accent);
  background: var(--accent-soft);
}

.ins-section.ins-info {
  border-inline-start-color: var(--blue);
}

.ins-section-title {
  margin: 0 0 6px;
  font-size: 14px;
}

.ins-note {
  margin: 0 0 8px;
}

.ins-item + .ins-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ins-item-title {
  font-weight: 600;
}

.ins-item-detail {
  margin-top: 2px;
  line-height: 1.55;
}

.ins-item-check {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.ins-quality {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: var(--amber-soft);
  color: var(--amber-soft-text);
  font-size: 13px;
}

.ins-quality ul {
  margin: 4px 0 0;
  padding-inline-start: 18px;
}

.ins-quality-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ins-disclaimer {
  margin: 16px 0 0;
}

/* ===== Gold-plan AI tools: menu translation, invoice reader, AI assistant ===== */
/* Menu item form: English/Arabic text + dietary tags */
.mi-i18n-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--subtle-2);
}
.mi-i18n-box > summary {
  cursor: pointer;
  font-weight: 600;
}
.mi-i18n-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 6px 8px;
  align-items: center;
  margin-top: 8px;
}
.mi-i18n-grid input,
.mi-i18n-grid textarea {
  width: 100%;
  min-width: 0;
}
.mi-diet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 13px;
}
.mi-diet-tags label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* Menu translation card */
#menuEnrichCard [hidden],
#aiAssistantCard [hidden],
.rcpt-box[hidden] {
  display: none !important;
}
.me-cats {
  margin-bottom: 10px;
}
.me-cats-title {
  font-weight: 600;
  margin-bottom: 6px;
}
.me-cats-grid {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr 1fr;
  gap: 6px 8px;
  align-items: center;
}
.me-cat-orig {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.me-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
}
.me-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--card);
}
.me-row.is-off {
  opacity: 0.5;
}
.me-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.me-row-title {
  font-size: 14px;
}
.me-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}
.me-row-grid input,
.me-row-grid textarea {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
}
.me-cats-grid input {
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
}

/* Expenses: invoice reader */
.rcpt-box {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.rcpt-pick {
  cursor: pointer;
}
.rcpt-pick.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.rcpt-filled {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

/* Reports: AI assistant */
.aia-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.aia-tab {
  border: 1px solid var(--border);
  background: var(--subtle);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.aia-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.aia-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px 8px;
}
.aia-msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aia-q {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}
.aia-a {
  align-self: flex-start;
  background: var(--subtle);
  color: var(--text);
  border: 1px solid var(--border);
}
.aia-a-meta {
  margin-top: 6px;
  white-space: normal;
}
.aia-thinking {
  color: var(--muted);
  font-style: italic;
}
.aia-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.aia-examples:empty {
  display: none;
}
.aia-example {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.aia-example:hover {
  border-color: var(--accent);
}
.aia-ask-row {
  display: flex;
  gap: 8px;
  margin: 6px 0;
}
.aia-ask-row input {
  flex: 1;
  min-width: 0;
}
.aia-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
}
.aia-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.aia-item > span:nth-child(2) {
  flex: 1;
  overflow-wrap: anywhere;
}
.aia-variants {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.aia-variant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--card);
}
.aia-variant-title {
  grid-column: 1 / -1;
  font-weight: 600;
}
.aia-variant-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0 6px;
}
.aia-variant-actions {
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .mi-i18n-grid,
  .me-cats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mi-i18n-grid > span:first-child {
    display: none;
  }
  .mi-i18n-grid > span.small,
  .me-cat-orig {
    grid-column: 1 / -1;
  }
  .me-row-grid,
  .aia-variant {
    grid-template-columns: 1fr;
  }
  .aia-msg {
    max-width: 100%;
  }
}
/* Global form styles make inputs full-width; keep the AI cards' checkboxes compact. */
.me-row input[type="checkbox"],
.mi-diet-tags input[type="checkbox"],
.aia-item input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: none;
}
.me-row-grid textarea,
.mi-i18n-grid textarea {
  font-family: inherit;
  resize: vertical;
}
#aiAssistantCard input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: none;
}
#aiAssistantCard textarea {
  font-family: inherit;
}

/* =====================================================================
   AI · GOLD visual language
   Shared look for every AI feature (menu import, menu translation, monthly
   insights, AI assistant, invoice reader): aurora gradient border + glow,
   sparkle icon tile, "AI · GOLD" badge, gradient action buttons, a shimmering
   "thinking" state and a premium lock panel for non-Gold accounts.
   ===================================================================== */
:root {
  --ai-1: #7c3aed; /* violet */
  --ai-2: #db2777; /* fuchsia */
  --ai-3: #f59e0b; /* amber / gold */
  --ai-grad: linear-gradient(120deg, var(--ai-1) 0%, var(--ai-2) 55%, var(--ai-3) 100%);
  --ai-grad-soft: linear-gradient(120deg, rgba(124, 58, 237, 0.10), rgba(219, 39, 119, 0.08) 55%, rgba(245, 158, 11, 0.10));
  --ai-glow: rgba(124, 58, 237, 0.28);
  --ai-text: #6d28d9;
  --gold-grad: linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #b45309 100%);
}
[data-theme="dark"] {
  --ai-1: #a78bfa;
  --ai-2: #f472b6;
  --ai-3: #fbbf24;
  --ai-grad-soft: linear-gradient(120deg, rgba(167, 139, 250, 0.14), rgba(244, 114, 182, 0.10) 55%, rgba(251, 191, 36, 0.12));
  --ai-glow: rgba(167, 139, 250, 0.30);
  --ai-text: #c4b5fd;
}

/* ---- the card: gradient hairline border + soft aurora glow ---- */
.card.ai-card {
  border: 1.5px solid transparent;
  border-top-width: 1.5px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--ai-grad) border-box;
  box-shadow: var(--shadow-strong), 0 10px 40px -12px var(--ai-glow);
  isolation: isolate;
}
.card.ai-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  height: 120%;
  background:
    radial-gradient(closest-side, rgba(124, 58, 237, 0.16), transparent 70%),
    radial-gradient(closest-side at 70% 60%, rgba(245, 158, 11, 0.12), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: ai-drift 14s ease-in-out infinite alternate;
}
[dir="rtl"] .card.ai-card::before {
  inset: -40% auto auto -20%;
}
@keyframes ai-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-6%, 8%, 0) scale(1.08); }
}

/* ---- header: sparkle tile + title + AI·GOLD badge ---- */
.ai-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.ai-head-text {
  min-width: 0;
}
.ai-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}
.ai-title-row h2 {
  margin: 0;
}
.ai-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  background: var(--ai-grad);
  background-size: 180% 180%;
  box-shadow: 0 6px 18px -4px var(--ai-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: ai-sheen 6s ease-in-out infinite;
}
.ai-icon svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  animation: ai-twinkle 3.2s ease-in-out infinite;
}
.ai-icon-sm {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.ai-icon-sm svg {
  width: 18px;
  height: 18px;
}
@keyframes ai-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ai-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(8deg); }
}

.ai-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: 0 2px 8px -2px var(--ai-glow);
  flex: none;
}
.ai-pill-ai,
.ai-pill-gold {
  padding: 4px 7px;
}
.ai-pill-ai {
  color: #fff;
  background: var(--ai-grad);
}
.ai-pill-gold {
  color: #451a03;
  background: var(--gold-grad);
}

/* ---- action buttons: gradient + sparkle + sweep of light on hover ---- */
.btn.ai-go {
  position: relative;
  overflow: hidden;
  border: none;
  color: #fff;
  background: var(--ai-grad);
  background-size: 160% 160%;
  box-shadow: 0 6px 18px -6px var(--ai-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background-position 0.5s ease, filter 0.2s ease;
}
.btn.ai-go::before {
  content: "✦";
  font-size: 1.05em;
  line-height: 1;
}
.btn.ai-go::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.btn.ai-go:hover {
  background: var(--ai-grad);
  background-size: 160% 160%;
  background-position: 100% 50%;
  box-shadow: 0 10px 26px -6px var(--ai-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.btn.ai-go:hover::after {
  transform: translateX(120%);
}
.btn.ai-go:disabled,
.btn.ai-go.is-disabled {
  filter: grayscale(0.6) opacity(0.6);
  transform: none;
  cursor: not-allowed;
}

/* The other primary buttons inside an AI card follow the same palette, calmer. */
.ai-card .btn:not(.ghost):not(.ai-go):not(.soft) {
  border-color: transparent;
  background: var(--ai-1);
  box-shadow: 0 4px 14px -6px var(--ai-glow);
}
.ai-card .btn:not(.ghost):not(.ai-go):not(.soft):hover {
  filter: brightness(1.08);
}

/* ---- "AI is thinking" status: shimmering gradient text + moving bar ---- */
.ai-card .mii-status.is-busy,
.ai-card .ins-status.is-busy,
.ai-strip .mii-status.is-busy {
  position: relative;
  padding-bottom: 8px;
  font-weight: 600;
  color: transparent;
  background: linear-gradient(90deg, var(--ai-1), var(--ai-2), var(--ai-3), var(--ai-1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ai-text-flow 2.4s linear infinite;
}
.ai-card .mii-status.is-busy::before,
.ai-card .ins-status.is-busy::before,
.ai-strip .mii-status.is-busy::before {
  content: "✦";
  display: inline-block;
  width: auto;
  height: auto;
  border: 0;
  margin-inline-end: 6px;
  color: var(--ai-1);
  -webkit-text-fill-color: var(--ai-1);
  animation: ai-spin-sparkle 1.6s ease-in-out infinite;
}
.ai-card .mii-status.is-busy::after,
.ai-card .ins-status.is-busy::after,
.ai-strip .mii-status.is-busy::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--ai-1), var(--ai-2), var(--ai-3), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: ai-bar 1.4s ease-in-out infinite;
}
@keyframes ai-text-flow {
  to { background-position: 300% 0; }
}
@keyframes ai-spin-sparkle {
  0% { transform: rotate(0deg) scale(0.9); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(0.9); }
}
@keyframes ai-bar {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

/* ---- lock panel for non-Gold accounts ---- */
.ai-card .mii-locked,
.ai-card .ins-locked {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 18px 74px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 14px;
  color: #fef3c7;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(245, 158, 11, 0.28), transparent 55%),
    linear-gradient(135deg, #1e1b4b 0%, #3b0764 55%, #4a044e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[dir="rtl"] .ai-card .mii-locked,
[dir="rtl"] .ai-card .ins-locked {
  padding: 18px 74px 18px 18px;
}
.ai-card .mii-locked::before,
.ai-card .ins-locked::before {
  content: "♛";
  position: absolute;
  top: 50%;
  inset-inline-start: 18px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  color: #451a03;
  background: var(--gold-grad);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18), 0 8px 20px -6px rgba(245, 158, 11, 0.7);
}
.ai-card .mii-locked strong,
.ai-card .ins-locked strong {
  font-size: 15px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-card .mii-locked p,
.ai-card .ins-locked p {
  color: rgba(254, 243, 199, 0.85) !important;
}

/* ---- inputs inside AI cards: soft violet focus ring ---- */
.ai-card input[type="text"]:focus,
.ai-card textarea:focus,
.ai-card select:focus {
  outline: none;
  border-color: var(--ai-1);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* ---- menu translation review ---- */
.ai-card .me-row {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ai-card .me-row:hover {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 6px 18px -10px var(--ai-glow);
}
.ai-card .mii-badge.warn {
  color: #fff;
  background: var(--ai-grad);
  border: none;
}
.ai-card .me-cats:not(:empty) {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ai-grad-soft);
}

/* ---- AI assistant ---- */
.ai-card .aia-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: var(--subtle);
  border: 1px solid var(--border);
}
.ai-card .aia-tab {
  border: none;
  background: transparent;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ai-card .aia-tab.is-active {
  color: #fff;
  background: var(--ai-grad);
  box-shadow: 0 4px 12px -4px var(--ai-glow);
}
.ai-card .aia-chat {
  padding: 12px;
  border-radius: 14px;
  background: var(--ai-grad-soft);
  margin-bottom: 8px;
}
.ai-card .aia-q {
  background: var(--ai-grad);
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 16px -8px var(--ai-glow);
}
[dir="rtl"] .ai-card .aia-q {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 4px;
}
.ai-card .aia-a {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  padding-inline-start: 40px;
  box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.25);
}
[dir="rtl"] .ai-card .aia-a {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 4px;
}
.ai-card .aia-a::before {
  content: "✦";
  position: absolute;
  top: 8px;
  inset-inline-start: 9px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 12px;
  font-style: normal;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: var(--ai-grad);
}
.ai-card .aia-thinking::before {
  animation: ai-spin-sparkle 1.6s ease-in-out infinite;
}
.ai-card .aia-thinking {
  font-style: normal;
  font-weight: 600;
  color: var(--ai-text);
  animation: ai-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.ai-card .aia-a-meta {
  color: var(--ai-text);
}
.ai-card .aia-example {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--ai-grad) border-box;
  color: var(--text);
  font-weight: 500;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.ai-card .aia-example::before {
  content: "✦ ";
  color: var(--ai-2);
}
.ai-card .aia-example:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px var(--ai-glow);
}
.ai-card .aia-ask-row input {
  border-radius: 999px;
  padding-inline: 16px;
}
.ai-card .aia-ask-row .btn {
  border-radius: 999px;
}
.ai-card .aia-variant {
  position: relative;
  overflow: hidden;
  border-color: var(--border);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.3);
}
.ai-card .aia-variant::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ai-grad);
}
.ai-card .aia-variant-title {
  color: var(--ai-text);
  letter-spacing: 0.02em;
}
.ai-card .aia-variant-text {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--subtle-2);
  border: 1px solid var(--border);
}

/* ---- monthly insights: gradient headline ---- */
.ai-card .ins-headline {
  background: var(--ai-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- invoice reader strip (Expenses page) ---- */
.rcpt-box.ai-strip {
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 10px 12px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--ai-grad) border-box;
  box-shadow: 0 8px 24px -14px var(--ai-glow);
}
.rcpt-filled {
  outline: 2px solid var(--ai-1);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.12);
  transition: box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card.ai-card::before,
  .ai-icon,
  .ai-icon svg,
  .ai-card .mii-status.is-busy,
  .ai-card .ins-status.is-busy,
  .ai-strip .mii-status.is-busy,
  .ai-card .aia-thinking,
  .btn.ai-go::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 640px) {
  .ai-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .ai-card .mii-locked,
  .ai-card .ins-locked,
  [dir="rtl"] .ai-card .mii-locked,
  [dir="rtl"] .ai-card .ins-locked {
    padding: 66px 16px 16px;
  }
  .ai-card .mii-locked::before,
  .ai-card .ins-locked::before {
    top: 14px;
    transform: none;
  }
}

/* Keep the badge reading "AI · GOLD" in Arabic too. */
.ai-pill {
  direction: ltr;
}

/* Buttons carry white text: use a deeper gradient than the decorative one (contrast). */
:root {
  --ai-btn-grad: linear-gradient(120deg, #6d28d9 0%, #be185d 60%, #c2410c 100%);
}
.btn.ai-go,
.btn.ai-go:hover,
.ai-card .aia-tab.is-active,
.ai-card .aia-q {
  background-image: var(--ai-btn-grad);
}

/* ---- AI · GOLD in dark mode: same identity, calmer. Muted lavender / dusty rose /
   soft gold, weaker glow and halo, so the cards don't glare on a navy background. ---- */
[data-theme="dark"] {
  --ai-1: #8b7fd9;
  --ai-2: #c07aa6;
  --ai-3: #d4a24c;
  --ai-grad: linear-gradient(120deg, #8b7fd9 0%, #c07aa6 55%, #d4a24c 100%);
  --ai-grad-soft: linear-gradient(120deg, rgba(139, 127, 217, 0.07), rgba(192, 122, 166, 0.05) 55%, rgba(212, 162, 76, 0.06));
  --ai-glow: rgba(139, 127, 217, 0.13);
  --ai-text: #b4aaec;
  --ai-btn-grad: linear-gradient(120deg, #5a4db0 0%, #8e3f72 60%, #9a6128 100%);
  --gold-grad: linear-gradient(135deg, #e9cf8a 0%, #c8973f 50%, #8f6424 100%);
}
[data-theme="dark"] .card.ai-card {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, rgba(139, 127, 217, 0.55), rgba(192, 122, 166, 0.40) 55%, rgba(212, 162, 76, 0.50)) border-box;
  box-shadow: var(--shadow-strong), 0 10px 36px -18px var(--ai-glow);
}
[data-theme="dark"] .card.ai-card::before {
  opacity: 0.45;
}
[data-theme="dark"] .ai-icon {
  background: var(--ai-btn-grad);
  background-size: 180% 180%;
  box-shadow: 0 4px 12px -6px var(--ai-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .ai-pill {
  box-shadow: none;
}
[data-theme="dark"] .ai-pill-ai {
  background: var(--ai-btn-grad);
}
[data-theme="dark"] .ai-pill-gold {
  color: #3a2507;
}
[data-theme="dark"] .btn.ai-go,
[data-theme="dark"] .btn.ai-go:hover {
  box-shadow: 0 6px 16px -10px var(--ai-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .btn.ai-go::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
}
[data-theme="dark"] .ai-card .btn:not(.ghost):not(.ai-go):not(.soft) {
  background: #5a4db0;
}
[data-theme="dark"] .ai-card .mii-locked,
[data-theme="dark"] .ai-card .ins-locked {
  border-color: rgba(212, 162, 76, 0.30);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(212, 162, 76, 0.12), transparent 55%),
    linear-gradient(135deg, #171a36 0%, #24173d 55%, #2a1631 100%);
}
[data-theme="dark"] .ai-card .mii-locked::before,
[data-theme="dark"] .ai-card .ins-locked::before {
  box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.12), 0 6px 14px -8px rgba(212, 162, 76, 0.5);
}
[data-theme="dark"] .ai-card .aia-q,
[data-theme="dark"] .ai-card .aia-tab.is-active {
  box-shadow: none;
}
[data-theme="dark"] .ai-card .aia-example:hover,
[data-theme="dark"] .ai-card .me-row:hover {
  box-shadow: 0 6px 14px -10px var(--ai-glow);
}
[data-theme="dark"] .rcpt-box.ai-strip {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, rgba(139, 127, 217, 0.55), rgba(192, 122, 166, 0.40) 55%, rgba(212, 162, 76, 0.50)) border-box;
  box-shadow: none;
}
[data-theme="dark"] .rcpt-filled {
  box-shadow: 0 0 0 4px rgba(139, 127, 217, 0.12);
}

/* ===== Solid danger button (void, destructive confirms) =====
   :not(.ghost) because the older ".btn.ghost.danger" outline style (e.g. "Wrong order")
   must keep its own look; mixing both gave red text on a red background. */
.btn.danger:not(.ghost) {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: none;
}
.btn.danger:not(.ghost):hover {
  background: var(--danger-dark);
  border-color: var(--danger-dark);
}

/* ===== RestoDialog (ui-dialog.js) ===== */
.resto-dialog {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--card);
  color: var(--text);
}
.resto-dialog::backdrop { background: rgba(2, 6, 23, 0.55); }
.resto-dialog .rdlg-fields { display: grid; gap: .3rem; }
.resto-dialog .rdlg-fields input,
.resto-dialog .rdlg-fields select,
.resto-dialog .rdlg-fields textarea { width: 100%; margin-bottom: .35rem; }
.resto-dialog .rdlg-check { display: flex; gap: .45rem; align-items: center; font-size: .85rem; margin: .2rem 0 .4rem; }
.resto-dialog .rdlg-error { color: var(--danger); font-size: .78rem; min-height: 1rem; }
.resto-dialog .rdlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }

/* ===== Void / refund state on the bill ===== */
.pill-status.void { background: var(--danger-soft); color: var(--danger-soft-text); }
.bill-adjustments { margin-top: .35rem; font-size: .78rem; color: var(--danger-soft-text); }
.bill-adjustments:empty { display: none; }

/* ===== Operations page (shifts, audit log) ===== */
.ops-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.ops-kv { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; font-size: .85rem; }
.ops-kv .v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.ops-variance-neg { color: var(--danger); }
.ops-variance-pos { color: var(--success, #16a34a); }
.ops-table-wrap { overflow-x: auto; }
.ops-audit-row td { vertical-align: top; }
.ops-audit-action { font-weight: 600; white-space: nowrap; }
.ops-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }

/* ===== Z report print (80mm) ===== */
@media print {
  body.zreport-print > *:not(#zReportPrint) { display: none !important; }
  body.zreport-print #zReportPrint { display: block !important; width: 72mm; font: 12px/1.35 monospace; color: #000; }
}
#zReportPrint { display: none; }
.ops-table-wrap .text-right { text-align: right; }
.ops-table-wrap table { width: 100%; }

/* Keep the sticky topbar out from under the status bar / camera cutout
   (edge-to-edge Android app, notched iPhones). Placed last so the
   per-breakpoint `padding: 0 …` shorthands above don't reset it. */
.topbar {
  padding-top: var(--sat);
  height: calc(56px + var(--sat));
}

/* ===== PHARMACY (pharmacy.js / catalog.js) ===== */
.pharm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.pharm-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border, #e5e7eb);
  background: var(--subtle, #f7f7f7);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.pharm-tile b { font-size: 1.35rem; line-height: 1.1; }
.pharm-tile span { font-size: 0.78rem; color: var(--muted, #6b7280); }
.pharm-tile.is-danger { border-color: #f1b4b4; background: #fdecec; }
.pharm-tile.is-danger b { color: #b42318; }
.pharm-alert-list { list-style: none; margin: 0; padding: 0; }
.pharm-alert-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 0.88rem;
}
.catalog-batches table input { width: 100%; }

/* Online orders on phones: one card per order, so the action buttons (Review
   prescription, Send for delivery, …) are never pushed off-screen by the table. */
@media (max-width: 760px) {
  #posOnlineOrdersTable thead { display: none; }
  #posOnlineOrdersTable,
  #posOnlineOrdersTable tbody,
  #posOnlineOrdersTable tr,
  #posOnlineOrdersTable td { display: block; width: 100%; }
  #posOnlineOrdersTable tr {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 10px);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
  }
  #posOnlineOrdersTable td { border: 0; padding: 0.15rem 0; }
  #posOnlineOrdersTable td:last-child {
    white-space: normal !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
  }
  #posOnlineOrdersTable td:last-child:empty { display: none; }
}

/* Prescription review dialog (pos.js openRxReview) */
.rx-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 17, 20, 0.55);
}
.card.rx-review-modal {
  position: fixed;
  z-index: 1001;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 94vw);
  max-height: 92vh;
  overflow: auto;
  margin: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
body.rx-review-open { overflow: hidden; }
@media (max-width: 760px) {
  .card.rx-review-modal {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding-bottom: 5rem;
  }
  .rx-review-modal .grid2 { display: block; }
  .rx-review-modal .card-header { position: sticky; top: -1px; z-index: 2; background: var(--card, #fff); }
}