/* ============================================================
   SERVIQ RESTAURANT OS
   Main application stylesheet

   Structure
   ------------------------------------------------------------
   01. Design tokens
   02. Reset / global
   03. Application shell
   04. Sidebar
   05. Top bar
   06. Shared page layout
   07. Buttons
   08. Dashboard
   09. Tables / orders UI
   10. Settings
   11. Kitchen display
   12. Customer ordering
   13. Login
   14. Messages
   15. Responsive
============================================================ */


/* ============================================================
   01. DESIGN TOKENS
============================================================ */

:root {
  --bg: #f6f7f5;
  --panel: #ffffff;
  --panel-soft: #fafbf9;

  --text: #151815;
  --muted: #747a75;
  --muted-2: #9aa09b;

  --line: #e7eae6;

  --nav: #111412;
  --nav-2: #171b18;
  --nav-text: #cdd2ce;

  --accent: #167d6b;
  --accent-dark: #0e5f50;
  --accent-soft: #e8f4f0;

  --green: #159164;
  --green-soft: #e9f7f0;

  --amber: #c98720;
  --amber-soft: #fbf2df;

  --blue: #3867d6;
  --blue-soft: #edf2ff;

  --violet: #7459d9;
  --violet-soft: #f1effd;

  --danger: #b94a4a;
  --danger-soft: #fceeee;

  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.02);

  --shadow:
    0 10px 32px rgba(18, 24, 20, 0.05);
}


/* ============================================================
   02. RESET / GLOBAL
============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    "DM Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  font-size: 14px;

  background: var(--bg);
  color: var(--text);

  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* ============================================================
   03. APPLICATION SHELL
============================================================ */

.app-shell {
  min-height: 100vh;
}

.main {
  margin-left: 258px;
  min-height: 100vh;
}

.full-main {
  min-height: 100vh;
}


/* ============================================================
   04. SIDEBAR
============================================================ */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;

  width: 258px;

  display: flex;
  flex-direction: column;

  padding: 22px 16px 16px;

  background: var(--nav);
  color: #ffffff;

  z-index: 40;
}


/* ---------- Sidebar top ---------- */

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 6px;
}


.brand {
  display: flex;
  align-items: center;
  gap: 11px;

  text-decoration: none;
}


.brand-mark {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #1e9d85,
      #116554
    );

  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-weight: 800;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18);
}


.brand-mark.large {
  width: 44px;
  height: 44px;

  border-radius: 13px;
}


.brand-copy b,
.brand-copy small,
.login-brand b,
.login-brand small {
  display: block;
}


.brand-copy b,
.login-brand b {
  font-family: "Manrope", sans-serif;
  font-size: 15px;

  letter-spacing: -0.3px;
}


.brand-copy small,
.login-brand small {
  margin-top: 1px;

  font-size: 10px;

  color: #7f8a83;
}


.sidebar-close {
  display: none;

  border: 0;

  background: none;

  color: #ffffff;

  font-size: 28px;
}


/* ---------- Workspace selector ---------- */

.workspace-chip {
  margin: 24px 0 12px;
  padding: 10px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 10px;

  border:
    1px solid
    #252a26;

  border-radius: 13px;

  background: #151916;
}


.workspace-avatar {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 9px;

  background: #252b27;

  font-family: "Manrope";
  font-weight: 800;
}


.workspace-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.workspace-chip small,
.workspace-chip strong {
  display: block;
}


.workspace-chip small {
  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  color: #6f7a72;
}


.workspace-chip strong {
  margin-top: 2px;

  overflow: hidden;

  font-size: 12px;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.chevron {
  color: #778179;
}


/* ---------- Navigation ---------- */

.nav-groups {
  display: grid;

  gap: 22px;

  overflow: auto;

  padding: 2px;
}


.nav-group {
  display: grid;

  gap: 4px;
}


.nav-label {
  padding:
    8px
    10px
    6px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1.3px;

  text-transform: uppercase;

  color: #667068;
}


.nav-item {
  position: relative;

  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 10px;

  padding: 10px 11px;

  border-radius: 10px;

  color: #9fa9a2;

  text-decoration: none;

  font-size: 13px;
  font-weight: 500;

  transition:
    background .18s ease,
    color .18s ease;
}


.nav-item:hover {
  background: #191e1a;

  color: #e8ece9;
}


.nav-item.active {
  background: #1d2420;

  color: #ffffff;

  box-shadow:
    inset 0 0 0 1px
    #27302a;
}


.nav-item.active::before {
  content: "";

  position: absolute;

  left: -2px;

  width: 3px;
  height: 18px;

  border-radius: 999px;

  background: #38af92;
}


.nav-icon {
  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;
}


.nav-icon svg {
  width: 17px;
  height: 17px;

  fill: currentColor;
}


.nav-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #35b38f;

  box-shadow:
    0 0 0 3px
    rgba(53,179,143,.12);
}


.soon {
  padding: 3px 5px;

  border:
    1px solid
    #303630;

  border-radius: 999px;

  color: #68716b;

  font-size: 8px;

  letter-spacing: 0.6px;

  text-transform: uppercase;
}


.nav-item.disabled {
  opacity: .56;
}


/* ---------- Sidebar footer ---------- */

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;

  border-top:
    1px solid
    #202520;
}


.admin-link {
  display: flex;
  justify-content: space-between;

  padding: 7px 9px;

  color: #758079;

  text-decoration: none;

  font-size: 11px;
}


.user-block {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    30px;

  align-items: center;

  gap: 9px;

  padding: 9px;
}


.user-avatar {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: #202621;

  font-weight: 700;
}


.user-copy {
  min-width: 0;
}


.user-copy strong,
.user-copy small {
  display: block;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.user-copy strong {
  font-size: 11px;
}


.user-copy small {
  margin-top: 2px;

  color: #677168;

  font-size: 9px;
}


.icon-button {
  border: 0;

  background: transparent;

  color: #6e7870;

  cursor: pointer;
}


/* ============================================================
   05. TOP BAR
============================================================ */

.topbar {
  position: sticky;

  top: 0;

  z-index: 20;

  height: 66px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 0 34px;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(246,247,245,.88);

  backdrop-filter:
    blur(12px);
}


.topbar-context {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #626a64;

  font-size: 11px;
  font-weight: 600;
}


.status-breathe {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #29a77e;

  box-shadow:
    0 0 0 4px
    rgba(41,167,126,.12);
}


.topbar-actions {
  display: flex;

  align-items: center;

  gap: 8px;
}


.topbar-button,
.round-button {
  height: 36px;

  border:
    1px solid
    var(--line);

  border-radius: 10px;

  background: #ffffff;

  color: #5f6761;

  box-shadow:
    var(--shadow-sm);
}


.topbar-button {
  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    0
    8px
    0
    12px;
}


.topbar-button kbd {
  padding: 3px 5px;

  border:
    1px solid
    #e7e9e5;

  border-radius: 5px;

  background: #f3f4f2;

  color: #8a918c;

  font-size: 9px;
}


.round-button {
  width: 36px;
}


.mobile-menu {
  display: none;

  border: 0;

  background: transparent;

  font-size: 20px;
}


/* ============================================================
   06. SHARED PAGE LAYOUT
============================================================ */

.page {
  width: min(
    calc(100% - 50px),
    1500px
  );

  margin-inline: auto;

  padding:
    38px
    18px
    60px;
}


.breadcrumb {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #8b928d;

  font-size: 11px;
  font-weight: 600;
}


.breadcrumb span {
  color: #c5cac6;
}


.dashboard-hero,
.settings-heading {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 28px;

  margin-bottom: 28px;
}


.dashboard-hero h1,
.settings-heading h1 {
  margin:
    11px
    0
    8px;

  font-family: "Manrope", sans-serif;

  font-size: 34px;

  line-height: 1.05;

  letter-spacing: -1.35px;
}


.dashboard-hero p,
.settings-heading p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
}


.panel {
  border:
    1px solid
    var(--line);

  border-radius: var(--radius-lg);

  background: var(--panel);

  box-shadow:
    0 1px 0
    rgba(0,0,0,.012);
}


.panel-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;
}


.panel-head h2 {
  margin:
    3px
    0
    0;

  font-family: "Manrope";

  font-size: 18px;

  letter-spacing: -0.45px;
}


.panel-kicker {
  color: #8e958f;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.3px;
}


/* ============================================================
   07. BUTTONS
============================================================ */

.hero-actions {
  display: flex;

  gap: 10px;
}


.primary-button,
.secondary-button {
  min-height: 42px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 16px;

  padding: 0 15px;

  border-radius: 11px;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}


.primary-button {
  border:
    1px solid
    var(--accent-dark);

  background:
    var(--accent);

  color: #ffffff;

  box-shadow:
    0 5px 14px
    rgba(22,125,107,.14);
}


.primary-button:hover {
  background:
    var(--accent-dark);
}


.secondary-button {
  border:
    1px solid
    var(--line);

  background:
    #ffffff;

  color:
    #4d554f;
}


/* ============================================================
   08. DASHBOARD
============================================================ */

/* ---------- KPI strip ---------- */

.signal-strip {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  margin-bottom: 18px;

  border:
    1px solid
    var(--line);

  border-radius: var(--radius-lg);

  background: #ffffff;

  box-shadow:
    0 1px 0
    rgba(0,0,0,.01);
}


.signal-item {
  position: relative;

  min-width: 0;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  align-items: center;

  gap: 13px;

  padding: 21px 22px;
}


.signal-item:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 18px;
  right: 0;
  bottom: 18px;

  width: 1px;

  background:
    var(--line);
}


.signal-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  align-self: start;

  border-radius: 10px;
}


.signal-icon svg {
  width: 17px;
  height: 17px;

  display: block;

  fill: currentColor;
}


.signal-icon.emerald {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.signal-icon.blue {
  background:
    var(--blue-soft);

  color:
    var(--blue);
}


.signal-icon.amber {
  background:
    var(--amber-soft);

  color:
    var(--amber);
}


.signal-icon.violet {
  background:
    var(--violet-soft);

  color:
    var(--violet);
}


.signal-copy {
  min-width: 0;
}


.signal-copy small,
.signal-copy strong,
.signal-copy > span {
  display: block;
}


.signal-copy small {
  color: #7f8781;

  font-size: 10px;
  font-weight: 600;
}


.signal-copy strong {
  margin:
    4px
    0
    3px;

  font-family: "Manrope";

  font-size: 26px;

  line-height: 1;

  letter-spacing: -0.8px;
}


.signal-copy strong em {
  margin-left: 2px;

  color: #9da39e;

  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}


.signal-copy > span {
  overflow: hidden;

  color: #9aa09b;

  font-size: 10px;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ---------- Dashboard grid ---------- */

.dashboard-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(320px, .75fr);

  gap: 18px;

  margin-bottom: 18px;
}


.operations-panel,
.qr-quick-panel,
.orders-panel {
  padding: 22px;
}


/* ---------- Segmented control ---------- */

.segmented {
  display: flex;

  padding: 3px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background: #f7f8f6;
}


.segmented button {
  padding: 5px 9px;

  border: 0;

  border-radius: 6px;

  background: transparent;

  color: #8a918c;

  font-size: 9px;
}


.segmented button.selected {
  background: #ffffff;

  color: #39413b;

  box-shadow:
    0 1px 3px
    rgba(0,0,0,.06);
}


/* ---------- Service flow ---------- */

.flow-overview {
  display: grid;

  grid-template-columns:
    185px
    minmax(0, 1fr);

  align-items: center;

  gap: 28px;

  padding:
    27px
    10px
    24px;
}


.flow-ring {
  --pressure: 0%;

  position: relative;

  width: 150px;

  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--accent)
      var(--pressure),
      #eef1ee 0
    );
}


.flow-ring::after {
  content: "";

  position: absolute;

  width: 116px;

  aspect-ratio: 1;

  border-radius: 50%;

  background: #ffffff;
}


.flow-ring div {
  position: relative;

  z-index: 1;

  text-align: center;
}


.flow-ring strong,
.flow-ring span {
  display: block;
}


.flow-ring strong {
  font-family: "Manrope";

  font-size: 28px;

  letter-spacing: -1px;
}


.flow-ring span {
  color: #909791;

  font-size: 9px;

  letter-spacing: 0.7px;

  text-transform: uppercase;
}


.flow-stats {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}


.flow-stats > div {
  position: relative;
}


.flow-stats small,
.flow-stats strong,
.flow-stats p {
  display: block;

  margin: 0;
}


.flow-stats small {
  margin: 7px 0;

  color: #8b928d;

  font-size: 9px;

  letter-spacing: 0.8px;

  text-transform: uppercase;
}


.flow-stats strong {
  font-family: "Manrope";

  font-size: 27px;
}


.flow-stats p {
  margin-top: 4px;

  color: #a0a6a1;

  font-size: 10px;
}


.tiny-dot,
.kds-summary i {
  display: inline-block;

  width: 7px;
  height: 7px;

  border-radius: 50%;
}


.amber-dot {
  background: #d99b35;
}


.blue-dot {
  background: #5377d9;
}


.green-dot {
  background: #2a9e76;
}


/* ---------- Attention row ---------- */

.attention-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding-top: 17px;

  border-top:
    1px solid
    var(--line);
}


.attention-row > div {
  display: flex;

  align-items: center;

  gap: 10px;
}


.attention-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 9px;

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.attention-row strong,
.attention-row p {
  display: block;

  margin: 0;
}


.attention-row strong {
  font-size: 11px;
}


.attention-row p {
  margin-top: 2px;

  color: #8f9690;

  font-size: 10px;
}


.attention-row a {
  flex-shrink: 0;

  color: var(--accent);

  text-decoration: none;

  font-size: 10px;
  font-weight: 700;
}


/* ---------- Pills ---------- */

.live-pill {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 5px 8px;

  border:
    1px solid
    #d8ece4;

  border-radius: 999px;

  background: #f2faf6;

  color: #3c7b65;

  font-size: 9px;
  font-weight: 700;
}


.live-pill i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #2fa67c;
}


.live-pill.neutral {
  border-color:
    var(--line);

  background:
    #fafbfa;

  color:
    #7d847e;
}


/* ============================================================
   09. QR + ORDER TABLE
============================================================ */

/* ---------- QR quick panel ---------- */

.panel-intro {
  margin:
    12px
    0
    15px;

  color: #8b928d;

  font-size: 11px;

  line-height: 1.55;
}


.qr-stack {
  display: grid;
}


.qr-mini-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 11px 0;

  border-top:
    1px solid
    var(--line);
}


.qr-mini-row > div {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 10px;
}


.table-cube {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 8px;

  background: #f2f4f1;

  color: #656d67;

  font-size: 9px;
  font-weight: 800;
}


.qr-mini-row strong,
.qr-mini-row small {
  display: block;
}


.qr-mini-row strong {
  font-size: 11px;
}


.qr-mini-row small {
  margin-top: 2px;

  color: #9aa09b;

  font-size: 9px;
}


.qr-mini-row a {
  flex-shrink: 0;

  color: var(--accent);

  text-decoration: none;

  font-size: 9px;
  font-weight: 700;
}


.text-button {
  width: 100%;

  margin-top: 8px;

  padding: 9px;

  border:
    1px dashed
    #dfe3df;

  border-radius: 9px;

  background: #fafbfa;

  color: #69716b;

  font-size: 10px;
}


.text-button span {
  margin-left: 5px;

  color: #a8aea9;
}


/* ---------- Orders ---------- */

.panel-actions {
  display: flex;

  align-items: center;

  gap: 8px;
}


.icon-quiet {
  border: 0;

  background: transparent;

  color: #9aa09b;
}


.orders-table-wrap {
  overflow: auto;

  margin:
    13px
    -22px
    -22px;
}


.orders-table {
  width: 100%;

  min-width: 720px;

  border-collapse: collapse;
}


.orders-table th {
  padding:
    10px
    22px;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background: #fbfcfb;

  color: #9ba19c;

  text-align: left;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.65px;

  text-transform: uppercase;
}


.orders-table td {
  padding:
    14px
    22px;

  border-bottom:
    1px solid
    #f0f2ef;

  font-size: 11px;
}


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


.orders-table .right {
  text-align: right;
}


.muted {
  color: #949b95;
}


/* ---------- Status badges ---------- */

.status-badge {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 5px 8px;

  border-radius: 999px;

  background: #f3f4f2;

  color: #707771;

  font-size: 9px;
  font-weight: 700;
}


.status-badge i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #8f9791;
}


.status-preparing,
.status-accepted,
.status-submitted {
  background:
    var(--blue-soft);

  color:
    #4d68ad;
}


.status-preparing i,
.status-accepted i,
.status-submitted i {
  background:
    #5c7bd4;
}


.status-ready {
  background:
    var(--green-soft);

  color:
    #397e64;
}


.status-ready i {
  background:
    #2e9a72;
}


.status-delivered,
.status-payment_confirmed {
  background:
    var(--amber-soft);

  color:
    #896d35;
}


.status-delivered i,
.status-payment_confirmed i {
  background:
    #ca942c;
}


.status-completed {
  background:
    #eef2ef;

  color:
    #546059;
}


.status-completed i {
  background:
    #647269;
}


.row-actions button {
  padding: 6px 9px;

  border:
    1px solid
    var(--line);

  border-radius: 8px;

  background: #ffffff;

  font-size: 9px;
  font-weight: 700;
}


.row-more {
  color: #a3a9a4;
}


/* ---------- Empty state ---------- */

.empty-row td {
  padding: 38px;
}


.empty-state {
  text-align: center;
}


.empty-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  margin:
    auto
    auto
    8px;

  border-radius: 10px;

  background: #f1f3f0;
}


.empty-state strong,
.empty-state p {
  display: block;

  margin: 0;
}


.empty-state p {
  margin-top: 4px;

  color: #979e98;

  font-size: 10px;
}


/* ============================================================
   10. SETTINGS
============================================================ */

.settings-heading {
  align-items: flex-start;
}


.settings-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    390px;

  align-items: start;

  gap: 24px;
}


.settings-form {
  padding: 28px;
}


.settings-section {
  padding-bottom: 22px;

  border-bottom:
    1px solid
    var(--line);
}


.settings-section h2 {
  margin:
    5px
    0;

  font-family: "Manrope";

  font-size: 21px;
}


.settings-section p,
.field-group p {
  max-width: 620px;

  color: #8a918c;

  font-size: 11px;

  line-height: 1.55;
}


.field-group {
  padding: 24px 0;

  border-bottom:
    1px solid
    var(--line);
}


.field-group > label {
  display: block;

  margin-bottom: 12px;

  font-size: 11px;
  font-weight: 700;
}


/* ---------- Logo ---------- */

.logo-upload-row {
  display: flex;

  align-items: center;

  gap: 14px;
}


.logo-preview {
  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--line);

  border-radius: 18px;

  background: #f6f7f5;

  font-family: "Manrope";

  font-size: 24px;
  font-weight: 800;
}


.logo-preview img {
  width: 100%;
  height: 100%;

  padding: 9px;

  object-fit: contain;
}


.upload-button {
  display: inline-flex;

  align-items: center;

  padding: 8px 11px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background: #ffffff;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}


.logo-upload-row p {
  margin:
    6px
    0
    0;
}


/* ---------- Colour ---------- */

.colour-control {
  width: min(
    100%,
    350px
  );

  height: 44px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    28px;

  align-items: center;

  gap: 8px;

  padding:
    5px
    7px;

  border:
    1px solid
    var(--line);

  border-radius: 11px;

  background: #ffffff;
}


.colour-control input[type="color"] {
  width: 31px;
  height: 31px;

  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 7px;

  background: none;
}


.colour-text {
  min-width: 0;

  border: 0;
  outline: 0;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 11px;

  text-transform: uppercase;
}


.colour-swatch {
  width: 22px;
  height: 22px;

  border-radius: 7px;
}


/* ---------- Brand principle ---------- */

.brand-principle {
  display: flex;

  gap: 11px;

  margin-top: 20px;

  padding: 14px;

  border:
    1px solid
    #e0ebe5;

  border-radius: 12px;

  background:
    #f7faf8;
}


.brand-principle > span {
  color:
    var(--accent);
}


.brand-principle strong,
.brand-principle p {
  display: block;

  margin: 0;
}


.brand-principle strong {
  font-size: 11px;
}


.brand-principle p {
  margin-top: 3px;

  color: #7f8781;

  font-size: 10px;
}


.settings-actions {
  display: flex;

  gap: 9px;

  margin-top: 22px;
}


/* ---------- Device preview ---------- */

.preview-column {
  position: sticky;

  top: 92px;
}


.preview-label {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 11px;
}


.preview-label span {
  color: #838a84;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.2px;
}


.preview-label small {
  color: #a3a9a4;

  font-size: 9px;
}


.phone-frame {
  width: 320px;

  margin: auto;

  padding: 9px;

  border-radius: 36px;

  background: #171a18;

  box-shadow:
    0 26px 60px
    rgba(23,31,25,.16);
}


.phone-notch {
  position: relative;

  z-index: 2;

  width: 74px;
  height: 18px;

  margin:
    -1px
    auto
    -17px;

  border-radius:
    0
    0
    12px
    12px;

  background: #171a18;
}


.phone-screen {
  min-height: 618px;

  overflow: hidden;

  padding:
    25px
    18px
    15px;

  border-radius: 29px;

  background: #fafbf9;
}


.preview-restaurant-top {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;
}


.preview-logo {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 9px;

  background:
    var(--restaurant-brand);

  color: #ffffff;

  font-size: 12px;
  font-weight: 800;
}


.preview-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #ffffff;
}


.preview-restaurant-top small,
.preview-restaurant-top strong {
  display: block;
}


.preview-restaurant-top small {
  color: #9aa09b;

  font-size: 6px;

  letter-spacing: .6px;
}


.preview-restaurant-top strong {
  margin-top: 1px;

  font-family: "Manrope";

  font-size: 10px;
}


.preview-table-chip {
  display: inline-flex;

  margin:
    20px
    0
    9px;

  padding:
    6px
    8px;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--restaurant-brand)
      10%,
      white
    );

  color:
    var(--restaurant-brand);

  font-size: 7px;
  font-weight: 700;
}


.phone-screen h3 {
  max-width: 210px;

  margin:
    6px
    0
    14px;

  font-family: "Manrope";

  font-size: 19px;

  line-height: 1.1;

  letter-spacing: -0.6px;
}


.preview-categories {
  display: flex;

  gap: 7px;

  overflow: hidden;

  margin-bottom: 12px;
}


.preview-categories span {
  padding:
    6px
    9px;

  border:
    1px solid
    #e7e9e5;

  border-radius: 999px;

  font-size: 7px;

  white-space: nowrap;
}


.preview-categories span.on {
  border-color:
    var(--restaurant-brand);

  background:
    var(--restaurant-brand);

  color: #ffffff;
}


.preview-food-card {
  display: grid;

  grid-template-columns:
    62px
    minmax(0, 1fr)
    24px;

  align-items: center;

  gap: 10px;

  margin-bottom: 8px;

  padding: 8px;

  border:
    1px solid
    #e8ebe7;

  border-radius: 13px;

  background: #ffffff;
}


.preview-food-img {
  height: 56px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      #e7d3b3,
      #c38b52
    );

  color: #ffffff;

  font-size: 10px;
  font-weight: 800;
}


.preview-food-img.pale {
  background:
    linear-gradient(
      145deg,
      #d8e5db,
      #8aa391
    );
}


.preview-food-card strong,
.preview-food-card small,
.preview-food-card b {
  display: block;
}


.preview-food-card strong {
  font-size: 8px;
}


.preview-food-card small {
  margin:
    2px
    0
    5px;

  color: #9aa09b;

  font-size: 6px;
}


.preview-food-card b {
  font-size: 8px;
}


.preview-food-card button {
  width: 22px;
  height: 22px;

  border: 0;
  border-radius: 7px;

  background:
    var(--restaurant-brand);

  color: #ffffff;
}


.preview-cart {
  width: 100%;

  display: flex;

  justify-content: space-between;

  margin-top: 14px;

  padding:
    10px
    11px;

  border: 0;
  border-radius: 11px;

  background:
    var(--restaurant-brand);

  color: #ffffff;

  font-size: 8px;
  font-weight: 700;
}


.preview-powered {
  margin-top: 16px;

  color: #a0a6a1;

  text-align: center;

  font-size: 6px;
}


.preview-powered b {
  color: #5d655f;
}


/* ============================================================
   11. KITCHEN DISPLAY
============================================================ */

.kds-page {
  min-height:
    calc(100vh - 66px);

  padding:
    34px
    36px
    55px;

  background: #171a18;

  color: #f6f8f6;
}


.kds-head {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 26px;
}


.dark-breadcrumb {
  color: #687169;
}


.kds-head h1 {
  margin:
    10px
    0
    4px;

  font-family: "Manrope";

  font-size: 34px;

  letter-spacing: -1.2px;
}


.kds-head p {
  margin: 0;

  color: #7e8880;

  font-size: 12px;
}


.kds-summary {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;
}


.kds-summary > span {
  padding:
    8px
    10px;

  border:
    1px solid
    #2a302b;

  border-radius: 9px;

  background: #1d211e;

  color: #88928a;

  font-size: 9px;
}


.kds-summary b {
  margin:
    0
    3px;

  color: #ffffff;
}


.kds-live {
  color: #8fcbb9 !important;
}


.kds-live i {
  background:
    #35b28e !important;

  box-shadow:
    0 0 0 4px
    rgba(53,178,142,.09);
}


.ticket-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(290px, 1fr)
    );

  gap: 14px;
}


.ticket {
  position: relative;

  overflow: hidden;

  padding: 18px;

  border:
    1px solid
    #2a302b;

  border-radius: 15px;

  background: #202420;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.08);
}


.ticket-accent {
  position: absolute;

  inset:
    0
    auto
    0
    0;

  width: 3px;

  background:
    #687169;
}


.ticket-new .ticket-accent {
  background:
    #d49b3e;
}


.ticket-accepted .ticket-accent,
.ticket-preparing .ticket-accent {
  background:
    #617fd2;
}


.ticket-ready .ticket-accent {
  background:
    #33a67f;
}


.ticket-top {
  display: flex;

  justify-content: space-between;

  gap: 12px;
}


.station-tag {
  color: #78827a;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1px;
}


.ticket-top h2 {
  margin:
    4px
    0
    0;

  font-family: "Manrope";

  font-size: 23px;
}


.ticket-age {
  color: #6d776f;

  font-size: 8px;
}


.ticket-table {
  display: flex;

  align-items: center;

  gap: 7px;

  margin:
    14px
    0;

  padding:
    10px
    0;

  border-top:
    1px solid
    #2b302c;

  border-bottom:
    1px solid
    #2b302c;

  font-size: 10px;
}


.ticket-table > span:first-child {
  color: #7b857d;
}


.ticket-status {
  margin-left: auto;

  padding:
    4px
    6px;

  border:
    1px solid
    #323833;

  border-radius: 999px;

  color: #88928a;

  font-size: 8px;
}


.ticket-items {
  min-height: 92px;

  display: grid;

  gap: 10px;
}


.ticket-items > div {
  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr);

  align-items: start;

  gap: 8px;
}


.ticket-items strong {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background: #2b302c;

  font-size: 9px;
}


.ticket-items span {
  font-size: 11px;

  line-height: 1.4;
}


.ticket-actions {
  margin-top: 16px;
}


.ticket-actions form {
  margin: 0;
}


.ticket-actions button {
  width: 100%;
  height: 38px;

  border-radius: 9px;

  font-size: 10px;
  font-weight: 800;

  cursor: pointer;
}


.kds-primary {
  border: 0;

  background: #f1f4f1;

  color: #171a18;
}


.kds-ready {
  border: 0;

  background: #2c9a77;

  color: #ffffff;
}


.kds-secondary {
  border:
    1px solid
    #353b36;

  background: #272c28;

  color: #b9c0ba;
}


.kds-empty {
  grid-column:
    1 / -1;

  min-height: 300px;

  display: grid;
  place-items: center;
  align-content: center;

  border:
    1px dashed
    #303631;

  border-radius: 16px;

  color: #7c867e;

  text-align: center;
}


.kds-empty > span {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: #202620;

  color: #55b697;
}


.kds-empty h2 {
  margin:
    12px
    0
    4px;

  font-family: "Manrope";

  color: #dfe4e0;
}


.kds-empty p {
  margin: 0;

  font-size: 10px;
}


/* ============================================================
   12. CUSTOMER ORDERING
============================================================ */

.customer-app {
  --restaurant-brand: #167d6b;

  min-height: 100vh;

  background: #f8f8f5;
}


.customer-topbar {
  max-width: 1240px;

  height: 78px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  margin: auto;

  padding:
    0
    22px;

  border-bottom:
    1px solid
    #e7e8e4;
}


.restaurant-lockup {
  display: flex;

  align-items: center;

  gap: 10px;
}


.restaurant-logo {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 12px;

  background:
    var(--restaurant-brand);

  color: #ffffff;

  font-family: "Manrope";
  font-weight: 800;
}


.restaurant-logo img {
  width: 100%;
  height: 100%;

  padding: 3px;

  object-fit: contain;

  background: #ffffff;
}


.restaurant-lockup small,
.restaurant-lockup strong {
  display: block;
}


.restaurant-lockup small {
  color: #999f99;

  font-size: 8px;

  letter-spacing: .7px;

  text-transform: uppercase;
}


.restaurant-lockup strong {
  font-family: "Manrope";

  font-size: 14px;
}


.customer-table {
  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    7px
    10px;

  border:
    1px solid
    #e2e5e1;

  border-radius: 999px;

  background: #ffffff;

  font-size: 10px;
  font-weight: 700;
}


.customer-table-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--restaurant-brand);
}


.customer-hero-v2 {
  max-width: 1240px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin: auto;

  padding:
    48px
    22px
    36px;
}


.customer-eyebrow {
  color:
    var(--restaurant-brand);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.4px;
}


.customer-hero-v2 h1 {
  max-width: 680px;

  margin:
    8px
    0
    9px;

  font-family: "Manrope";

  font-size: 45px;

  line-height: 1.04;

  letter-spacing: -1.8px;
}


.customer-hero-v2 p {
  margin: 0;

  color: #7d847e;

  font-size: 13px;
}


.customer-context-card {
  min-width: 180px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    12px
    14px;

  border:
    1px solid
    #e4e7e3;

  border-radius: 14px;

  background: #ffffff;
}


.customer-context-card > span {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    color-mix(
      in srgb,
      var(--restaurant-brand)
      11%,
      white
    );

  color:
    var(--restaurant-brand);
}


.customer-context-card small,
.customer-context-card strong,
.customer-context-card p {
  display: block;

  margin: 0;
}


.customer-context-card small {
  color: #9aa09b;

  font-size: 8px;
}


.customer-context-card strong {
  font-size: 11px;
}


.customer-context-card p {
  margin-top: 2px;

  font-size: 8px;
}


.customer-layout-v2 {
  max-width: 1240px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    320px;

  gap: 24px;

  margin: auto;

  padding:
    0
    22px
    40px;
}


.category-pills {
  display: flex;

  gap: 8px;

  overflow: auto;

  padding-bottom: 15px;

  scrollbar-width: none;
}


.category-pills a,
.category-pills span {
  padding:
    8px
    12px;

  border:
    1px solid
    #e0e3df;

  border-radius: 999px;

  background: #ffffff;

  color: #696f6a;

  text-decoration: none;

  font-size: 10px;

  white-space: nowrap;
}


.category-pills span.active {
  border-color:
    var(--restaurant-brand);

  background:
    var(--restaurant-brand);

  color: #ffffff;
}


.menu-category-v2 {
  padding:
    20px
    0;
}


.menu-category-head {
  display: flex;

  align-items: end;
  justify-content: space-between;

  margin-bottom: 13px;
}


.menu-category-head > div > span {
  color: #a0a6a1;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.menu-category-head h2 {
  margin:
    3px
    0;

  font-family: "Manrope";

  font-size: 24px;

  letter-spacing: -0.7px;
}


.menu-category-head p {
  margin: 0;

  color: #8b928d;

  font-size: 10px;
}


.item-count {
  color: #9ca29d;

  font-size: 9px;
}


.food-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.food-card-v2 {
  min-height: 145px;

  display: grid;

  grid-template-columns:
    128px
    minmax(0, 1fr);

  overflow: hidden;

  border:
    1px solid
    #e5e8e4;

  border-radius: 16px;

  background: #ffffff;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.food-card-v2:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 28px
    rgba(28,36,30,.06);
}


.food-visual {
  position: relative;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      145deg,
      #ece4d9,
      #d4bda0
    );
}


.food-grid
.food-card-v2:nth-child(2n)
.food-visual {
  background:
    linear-gradient(
      145deg,
      #e3ece5,
      #b4c8b8
    );
}


.food-monogram {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.52);

  color: #6f665d;

  font-family: "Manrope";

  font-size: 12px;
  font-weight: 800;

  backdrop-filter:
    blur(4px);
}


.available-chip {
  position: absolute;

  top: 9px;
  left: 9px;

  padding:
    4px
    6px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.84);

  color: #657067;

  font-size: 7px;
}


.food-card-body {
  display: flex;

  flex-direction: column;

  padding: 14px;
}


.food-card-body h3 {
  margin: 0;

  font-family: "Manrope";

  font-size: 14px;

  line-height: 1.25;
}


.food-card-body p {
  margin:
    5px
    0
    12px;

  color: #8b928d;

  font-size: 9px;

  line-height: 1.45;
}


.food-card-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: auto;
}


.food-card-bottom > strong {
  font-size: 11px;
}


.quantity-stepper {
  display: grid;

  grid-template-columns:
    27px
    24px
    27px;

  align-items: center;

  overflow: hidden;

  border:
    1px solid
    #e1e4e0;

  border-radius: 9px;
}


.quantity-stepper button {
  height: 28px;

  border: 0;

  background: #f8f9f7;

  color: #59615b;

  cursor: pointer;
}


.quantity-stepper input {
  width: 24px;

  border: 0;
  outline: 0;

  background: #ffffff;

  text-align: center;

  font-size: 9px;
}


/* ---------- Customer order panel ---------- */

.customer-order-card {
  position: sticky;

  top: 24px;

  align-self: start;

  padding: 19px;

  border:
    1px solid
    #e4e7e3;

  border-radius: 17px;

  background: #ffffff;

  box-shadow:
    0 12px 35px
    rgba(29,37,31,.04);
}


.order-card-head {
  display: flex;

  align-items: center;

  gap: 10px;

  padding-bottom: 14px;

  border-bottom:
    1px solid
    #eceeeb;
}


.bag-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    color-mix(
      in srgb,
      var(--restaurant-brand)
      10%,
      white
    );

  color:
    var(--restaurant-brand);
}


.order-card-head small,
.order-card-head h2 {
  display: block;

  margin: 0;
}


.order-card-head small {
  color: #9ca29d;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 1px;
}


.order-card-head h2 {
  margin-top: 2px;

  font-family: "Manrope";

  font-size: 16px;
}


.customer-order-empty {
  min-height: 115px;

  display: grid;
  place-items: center;
  align-content: center;

  color: #9aa09b;

  text-align: center;
}


.customer-order-empty > span {
  color:
    var(--restaurant-brand);

  font-size: 18px;
}


.customer-order-empty p {
  max-width: 190px;

  font-size: 9px;

  line-height: 1.45;
}


.customer-order-card > label {
  display: block;

  margin-bottom: 7px;

  font-size: 9px;
  font-weight: 700;
}


.customer-order-card textarea {
  width: 100%;

  padding: 10px;

  resize: vertical;

  border:
    1px solid
    #e1e4e0;

  border-radius: 10px;

  outline: 0;

  background: #fbfcfb;

  font-size: 10px;
}


.customer-order-card textarea:focus {
  border-color:
    var(--restaurant-brand);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--restaurant-brand)
      10%,
      transparent
    );
}


.customer-order-button {
  width: 100%;

  display: flex;

  justify-content: space-between;

  margin-top: 10px;

  padding:
    12px
    13px;

  border: 0;
  border-radius: 10px;

  background:
    var(--restaurant-brand);

  color: #ffffff;

  font-size: 10px;
  font-weight: 800;

  cursor: pointer;
}


.payment-note {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  margin-top: 12px;

  padding: 10px;

  border-radius: 10px;

  background: #f6f8f6;

  color: #727a74;
}


.payment-note > span {
  color: #438b70;
}


.payment-note p {
  margin: 0;

  font-size: 8px;

  line-height: 1.4;
}


.customer-footer {
  padding:
    18px
    0
    32px;

  color: #a0a6a1;

  text-align: center;

  font-size: 8px;
}


.customer-footer strong {
  margin-left: 4px;

  color: #5a625c;
}


/* ---------- Order status ---------- */

.order-status-page {
  --restaurant-brand: #167d6b;

  min-height: 100vh;

  display: grid;
  place-items: center;

  padding: 28px;

  background:
    radial-gradient(
      circle
      at 50% 0%,
      color-mix(
        in srgb,
        var(--restaurant-brand)
        7%,
        white
      ),
      #f7f8f5 38%
    );
}


.order-status-card {
  width:
    min(510px, 100%);

  padding: 32px;

  border:
    1px solid
    #e3e6e2;

  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 22px 60px
    rgba(28,38,31,.07);
}


.status-orbit {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--restaurant-brand)
      11%,
      white
    );

  color:
    var(--restaurant-brand);

  font-size: 18px;
}


.order-status-card h1 {
  margin:
    6px
    0;

  font-family: "Manrope";

  font-size: 34px;

  letter-spacing: -1px;
}


.status-lead {
  color: #7f8781;

  font-size: 11px;

  line-height: 1.6;
}


.status-progress {
  margin:
    26px
    0;
}


.status-progress-line {
  position: relative;

  height: 3px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  background: #e9ebe8;
}


.status-progress-line span::before {
  content: "";

  display: block;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #dfe3df;

  transform:
    translateY(-3px);
}


.status-progress-line
span.done::before {
  background:
    var(--restaurant-brand);

  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--restaurant-brand)
      11%,
      white
    );
}


.status-progress-labels {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 8px;

  color: #a0a6a1;

  font-size: 7px;
}


.status-progress-labels span:last-child {
  text-align: right;
}


.order-receipt-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    13px
    0;

  border-top:
    1px solid
    #eceeeb;

  border-bottom:
    1px solid
    #eceeeb;
}


.order-receipt-head small,
.order-receipt-head strong {
  display: block;
}


.order-receipt-head small {
  color: #9ba19c;

  font-size: 7px;
}


.order-receipt-head strong {
  margin-top: 1px;

  font-size: 11px;
}


.order-receipt-items {
  padding:
    12px
    0;
}


.order-receipt-items > div {
  display: flex;

  justify-content: space-between;

  gap: 12px;

  padding:
    7px
    0;

  font-size: 10px;
}


.order-receipt-items b {
  margin-right: 4px;

  color: #939a94;
}


.order-receipt-total {
  display: flex;

  justify-content: space-between;

  padding-top: 13px;

  border-top:
    1px solid
    #eceeeb;

  font-size: 13px;
}


.status-note {
  margin-top: 18px;
}


.status-powered {
  margin-top: 22px;

  color: #a0a6a1;

  text-align: center;

  font-size: 8px;
}


.status-powered strong {
  color: #606862;
}


/* ============================================================
   13. LOGIN
============================================================ */

.login-page {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    1.1fr
    .9fr;

  background: #f6f7f5;
}


.login-showcase {
  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  padding:
    36px
    46px;

  background: #111512;

  color: #ffffff;
}


.login-showcase::before {
  content: "";

  position: absolute;

  right: -120px;
  bottom: -120px;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(30,139,111,.24),
      transparent 66%
    );
}


.login-showcase::after {
  content: "";

  position: absolute;

  inset:
    auto
    8%
    15%
    auto;

  width: 250px;
  height: 250px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius: 50%;

  box-shadow:
    0 0 0 60px
    rgba(255,255,255,.018),
    0 0 0 120px
    rgba(255,255,255,.012);
}


.login-brand {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  gap: 11px;
}


.showcase-copy {
  position: relative;

  z-index: 1;

  margin:
    auto
    0;
}


.showcase-kicker {
  color: #5fb49c;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.8px;
}


.showcase-copy h1 {
  margin:
    12px
    0
    14px;

  font-family: "Manrope";

  font-size: 47px;

  line-height: 1.04;

  letter-spacing: -2px;
}


.showcase-copy p {
  max-width: 510px;

  color: #8f9a92;

  font-size: 12px;

  line-height: 1.6;
}


.showcase-cards {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 12px;
}


.showcase-cards > div {
  padding: 15px;

  border:
    1px solid
    #232a24;

  border-radius: 13px;

  background:
    rgba(24,29,25,.75);

  backdrop-filter:
    blur(8px);
}


.showcase-cards span {
  color: #4b9f87;

  font-size: 9px;
  font-weight: 800;
}


.showcase-cards p {
  margin:
    7px
    0
    0;

  color: #9aa49d;

  font-size: 10px;

  line-height: 1.5;
}


.login-form-side {
  display: grid;

  place-items: center;

  padding: 35px;
}


.login-card-v2 {
  width:
    min(390px, 100%);
}


.mobile-login-brand {
  display: none;
}


.login-card-v2 h2 {
  margin: 0;

  font-family: "Manrope";

  font-size: 30px;

  letter-spacing: -1px;
}


.login-card-v2 > p {
  margin:
    7px
    0
    28px;

  color: #858c86;

  font-size: 11px;
}


.login-card-v2 label {
  display: block;

  margin:
    14px
    0
    7px;

  font-size: 10px;
  font-weight: 700;
}


.login-card-v2 input {
  width: 100%;
  height: 44px;

  padding:
    0
    12px;

  border:
    1px solid
    #dfe3de;

  border-radius: 10px;

  outline: 0;

  background: #ffffff;
}


.login-card-v2 input:focus {
  border-color: #8abaae;

  box-shadow:
    0 0 0 3px
    rgba(22,125,107,.08);
}


.login-submit {
  width: 100%;

  justify-content: space-between;

  margin-top: 18px;
}


.demo-note {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 20px;

  padding: 11px;

  border:
    1px solid
    var(--line);

  border-radius: 10px;

  background: #fbfcfb;
}


.demo-note > span {
  color: #929993;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .8px;

  text-transform: uppercase;
}


.demo-note code {
  padding:
    4px
    6px;

  border-radius: 6px;

  background: #f0f2ef;

  color: #5c645e;

  font-size: 8px;
}


/* ============================================================
   14. MESSAGES
============================================================ */

.messages {
  position: fixed;

  top: 82px;
  right: 20px;

  z-index: 100;
}


.message {
  padding:
    11px
    13px;

  border:
    1px solid
    var(--line);

  border-radius: 10px;

  background: #ffffff;

  box-shadow:
    var(--shadow);

  font-size: 11px;
}


.message.success {
  border-color: #cae9dc;

  background: #f3faf7;
}


.message.error {
  border-color: #f0d2d2;

  background: #fff7f7;
}


/* ============================================================
   15. RESPONSIVE
============================================================ */

/* ---------- <= 1100px ---------- */

@media (max-width: 1100px) {

  .signal-strip {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .signal-item:nth-child(2)::after {
    display: none;
  }


  .dashboard-grid,
  .settings-layout {
    grid-template-columns:
      1fr;
  }


  .preview-column {
    position: static;
  }


  .phone-frame {
    margin: 0;
  }


  .customer-layout-v2 {
    grid-template-columns:
      1fr;
  }


  .customer-order-card {
    position: static;
  }


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


/* ---------- <= 820px ---------- */

@media (max-width: 820px) {

  .sidebar {
    transform:
      translateX(-100%);

    transition:
      transform .2s ease;
  }


  .nav-open .sidebar {
    transform:
      translateX(0);

    box-shadow:
      20px 0 60px
      rgba(0,0,0,.18);
  }


  .sidebar-close {
    display: block;
  }


  .main {
    margin-left: 0;
  }


  .topbar {
    padding:
      0
      18px;
  }


  .mobile-menu {
    display: block;
  }


  .topbar-context {
    display: none;
  }


  .page {
    width: 100%;

    padding:
      28px
      18px
      50px;
  }


  .dashboard-hero,
  .settings-heading,
  .kds-head,
  .customer-hero-v2 {
    align-items: flex-start;

    flex-direction: column;
  }


  .dashboard-hero h1,
  .settings-heading h1 {
    font-size: 29px;
  }


  .signal-strip {
    grid-template-columns:
      1fr
      1fr;
  }


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


  .flow-overview {
    grid-template-columns:
      135px
      minmax(0, 1fr);
  }


  .flow-ring {
    width: 120px;
  }


  .flow-ring::after {
    width: 92px;
  }


  .flow-stats {
    gap: 10px;
  }


  .attention-row {
    align-items: flex-start;

    flex-direction: column;
  }


  .kds-page {
    padding:
      24px
      18px;
  }


  .kds-summary {
    width: 100%;
  }


  .customer-hero-v2 h1 {
    font-size: 36px;
  }


  .customer-context-card {
    width: 100%;
  }


  .customer-layout-v2,
  .customer-hero-v2,
  .customer-topbar {
    padding-left: 14px;
    padding-right: 14px;
  }


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


  .login-page {
    grid-template-columns:
      1fr;
  }


  .login-showcase {
    display: none;
  }


  .login-form-side {
    padding: 24px;
  }


  .mobile-login-brand {
    display: block;

    margin-bottom: 40px;

    color: var(--accent);

    font-family: "Manrope";
    font-weight: 800;
  }


  .phone-frame {
    width:
      min(320px, 100%);
  }
}


/* ---------- <= 520px ---------- */

@media (max-width: 520px) {

  .topbar-button span,
  .topbar-button kbd {
    display: none;
  }


  .signal-strip {
    grid-template-columns:
      1fr;
  }


  .signal-item:not(:last-child)::after {
    top: auto;
    right: 18px;
    bottom: 0;
    left: 18px;

    width: auto;
    height: 1px;
  }


  .hero-actions {
    width: 100%;
  }


  .hero-actions a {
    flex: 1;
  }


  .flow-overview {
    grid-template-columns:
      1fr;
  }


  .flow-ring {
    margin: auto;
  }


  .flow-stats {
    grid-template-columns:
      repeat(3, 1fr);
  }


  .orders-panel {
    padding-left: 14px;
    padding-right: 14px;
  }


  .orders-table-wrap {
    margin-left: -14px;
    margin-right: -14px;
  }


  .customer-hero-v2 {
    padding-top: 30px;
  }


  .customer-hero-v2 h1 {
    font-size: 31px;
  }


  .food-card-v2 {
    grid-template-columns:
      105px
      minmax(0, 1fr);
  }


  .settings-actions {
    flex-direction: column;
  }


  .settings-actions > * {
    width: 100%;
  }


  .customer-topbar {
    height: 70px;
  }


  .customer-table {
    font-size: 9px;
  }


  .order-status-card {
    padding: 24px;
  }


  .showcase-copy h1 {
    font-size: 35px;
  }
}


/* ============================================================
   16. ORDERS WORKSPACE
============================================================ */

.orders-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  margin-bottom: 28px;
}


.orders-page-header h1 {
  margin: 11px 0 8px;

  font-family: "Manrope";

  font-size: 34px;
  line-height: 1.05;

  letter-spacing: -1.35px;
}


.orders-page-header p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
}


/* ---------- Summary ---------- */

.orders-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 18px;
}


.order-summary-card {
  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  align-items: center;

  gap: 12px;

  min-height: 112px;

  padding: 18px;

  border:
    1px solid
    var(--line);

  border-radius: 15px;

  background: #ffffff;
}


.order-summary-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.order-summary-icon.blue {
  background:
    var(--blue-soft);

  color:
    var(--blue);
}


.order-summary-icon.green {
  background:
    var(--green-soft);

  color:
    var(--green);
}


.order-summary-icon.amber {
  background:
    var(--amber-soft);

  color:
    var(--amber);
}


.order-summary-icon svg {
  width: 17px;
  height: 17px;

  fill: currentColor;
}


.order-summary-card small,
.order-summary-card strong,
.order-summary-card span {
  display: block;
}


.order-summary-card small {
  color: #818882;

  font-size: 10px;
  font-weight: 600;
}


.order-summary-card strong {
  margin: 3px 0;

  font-family: "Manrope";

  font-size: 24px;

  letter-spacing: -.7px;
}


.order-summary-card div > span {
  color: #9ca29d;

  font-size: 9px;
}


/* ---------- Workspace panel ---------- */

.orders-workspace-panel {
  overflow: hidden;
}


.orders-toolbar {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  padding: 22px;
}


.orders-toolbar h2 {
  margin: 3px 0 0;

  font-family: "Manrope";

  font-size: 19px;

  letter-spacing: -.5px;
}


.orders-filter-form {
  display: flex;

  align-items: center;

  gap: 8px;
}


.orders-filter-form select,
.orders-filter-form input {
  height: 38px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background: #ffffff;

  color: #505852;

  outline: 0;

  font-size: 10px;
}


.orders-filter-form select {
  min-width: 130px;

  padding:
    0
    28px
    0
    10px;
}


.orders-filter-form select:focus,
.orders-filter-form input:focus {
  border-color:
    #9dc8bb;

  box-shadow:
    0 0 0 3px
    rgba(22,125,107,.07);
}


.orders-search {
  position: relative;
}


.orders-search svg {
  position: absolute;

  top: 50%;
  left: 11px;

  width: 14px;
  height: 14px;

  fill: #9aa09b;

  transform:
    translateY(-50%);
}


.orders-search input {
  width: 210px;

  padding:
    0
    10px
    0
    33px;
}


.orders-filter-button {
  min-height: 38px;

  padding:
    0
    13px;
}


/* ---------- Master list ---------- */

.orders-master-list {
  border-top:
    1px solid
    var(--line);
}


.orders-master-head,
.orders-master-row {
  display: grid;

  grid-template-columns:
    minmax(170px, 1.2fr)
    minmax(110px, .8fr)
    minmax(130px, .9fr)
    minmax(130px, .9fr)
    minmax(100px, .7fr)
    minmax(100px, .7fr)
    28px;

  align-items: center;

  column-gap: 15px;
}


.orders-master-head {
  padding:
    10px
    22px;

  background:
    #fafbfa;

  color:
    #9aa09b;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .7px;

  text-transform: uppercase;
}


.orders-master-row {
  min-height: 68px;

  padding:
    10px
    22px;

  border-top:
    1px solid
    #f0f2ef;

  color:
    inherit;

  text-decoration:
    none;

  transition:
    background .16s ease;
}


.orders-master-row:hover {
  background:
    #fbfcfb;
}


.order-reference {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 10px;
}


.order-reference-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 9px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size: 9px;
  font-weight: 800;
}


.order-reference strong,
.order-reference small,
.orders-master-row strong,
.cell-note {
  display: block;
}


.order-reference strong {
  font-size: 11px;
}


.order-reference small,
.cell-note {
  margin-top: 2px;

  color: #9aa09b;

  font-size: 8px;
}


.table-reference {
  font-size: 10px;
}


.order-time {
  font-size: 10px;
}


.order-value {
  font-size: 11px;
}


.align-right {
  text-align: right;
}


.order-row-arrow {
  color: #a5aba6;

  text-align: right;

  font-size: 14px;
}


.orders-workspace-empty {
  min-height: 300px;

  display: grid;
  place-items: center;
  align-content: center;

  padding: 40px;

  text-align: center;
}


.orders-workspace-empty > span {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    #f0f3f0;

  color:
    #77817a;
}


.orders-workspace-empty svg {
  width: 18px;
  height: 18px;

  fill:
    currentColor;
}


.orders-workspace-empty h3 {
  margin:
    12px
    0
    5px;

  font-family:
    "Manrope";

  font-size: 15px;
}


.orders-workspace-empty p {
  max-width: 340px;

  margin: 0;

  color:
    #929993;

  font-size: 10px;

  line-height: 1.5;
}


/* ============================================================
   17. ORDER DETAIL
============================================================ */

.order-detail-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  margin-bottom: 24px;
}


.order-back-link {
  display: inline-flex;

  margin-bottom: 15px;

  color:
    #737c75;

  text-decoration: none;

  font-size: 10px;
  font-weight: 700;
}


.order-detail-title-row {
  display: flex;

  align-items: center;

  gap: 12px;
}


.order-detail-title-row h1 {
  margin:
    4px
    0
    0;

  font-family:
    "Manrope";

  font-size: 34px;

  letter-spacing: -1.2px;
}


.order-detail-header p {
  margin:
    8px
    0
    0;

  color:
    #8c938e;

  font-size: 11px;
}


.order-header-value {
  text-align: right;
}


.order-header-value small,
.order-header-value strong,
.order-header-value span {
  display: block;
}


.order-header-value small {
  color:
    #969d97;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .7px;
}


.order-header-value strong {
  margin:
    4px
    0;

  font-family:
    "Manrope";

  font-size: 28px;

  letter-spacing: -.8px;
}


.order-header-value span {
  color:
    #949b95;

  font-size: 9px;
}


.order-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(300px, .65fr);

  align-items: start;

  gap: 18px;
}


.order-detail-main {
  display: grid;

  gap: 18px;
}


.order-detail-side {
  display: grid;

  gap: 14px;
}


.order-detail-panel,
.order-side-card {
  padding: 22px;
}


.order-item-count {
  padding:
    5px
    8px;

  border:
    1px solid
    var(--line);

  border-radius: 999px;

  background:
    #fafbfa;

  color:
    #818882;

  font-size: 9px;
}


/* ---------- Line items ---------- */

.order-line-items {
  margin-top: 15px;
}


.order-line-item {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  gap: 12px;

  padding:
    15px
    0;

  border-top:
    1px solid
    #edf0ec;
}


.order-line-quantity {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    #f1f4f1;

  color:
    #626b64;

  font-size: 10px;
  font-weight: 800;
}


.order-line-description strong {
  display: block;

  font-size: 11px;
}


.order-line-description > small {
  display: block;

  margin-top: 7px;

  color:
    #a0a6a1;

  font-size: 8px;
}


.order-modifiers {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 6px;
}


.order-modifiers span {
  padding:
    4px
    6px;

  border-radius: 999px;

  background:
    #f5f7f5;

  color:
    #717971;

  font-size: 8px;
}


.order-item-note {
  margin-top: 7px;

  color:
    #8b7350;

  font-size: 9px;

  font-style: italic;
}


.order-line-price {
  min-width: 100px;

  text-align: right;
}


.order-line-price strong,
.order-line-price small {
  display: block;
}


.order-line-price strong {
  font-size: 11px;
}


.order-line-price small {
  margin-top: 3px;

  color:
    #9ca29d;

  font-size: 8px;
}


/* ---------- Totals ---------- */

.order-total-breakdown {
  margin-top: 12px;

  padding-top: 12px;

  border-top:
    1px solid
    var(--line);
}


.order-total-breakdown > div {
  display: flex;

  justify-content: space-between;

  padding:
    6px
    0;

  color:
    #7d857f;

  font-size: 10px;
}


.order-total-breakdown strong {
  color:
    #525a54;
}


.order-total-final {
  margin-top: 6px;

  padding-top:
    13px !important;

  border-top:
    1px solid
    var(--line);

  color:
    var(--text) !important;

  font-size:
    12px !important;
}


.order-total-final strong {
  font-family:
    "Manrope";

  font-size: 17px;
}


/* ---------- Timeline ---------- */

.order-timeline {
  margin-top: 17px;
}


.timeline-event {
  position: relative;

  display: grid;

  grid-template-columns:
    18px
    minmax(0, 1fr)
    auto;

  gap: 10px;

  padding-bottom: 20px;
}


.timeline-event:not(:last-child)::before {
  content: "";

  position: absolute;

  top: 14px;
  bottom: 0;
  left: 5px;

  width: 1px;

  background:
    #e5e9e5;
}


.timeline-marker {
  position: relative;

  z-index: 1;

  width: 11px;
  height: 11px;

  margin-top: 2px;

  border:
    3px solid
    #d7eee7;

  border-radius: 50%;

  background:
    var(--accent);
}


.timeline-event strong,
.timeline-event p,
.timeline-event time,
.timeline-event time small {
  display: block;
}


.timeline-event strong {
  font-size: 10px;
}


.timeline-event p {
  margin:
    3px
    0
    0;

  color:
    #929993;

  font-size: 8px;
}


.timeline-event time {
  color:
    #747c76;

  text-align: right;

  font-size: 9px;
  font-weight: 700;
}


.timeline-event time small {
  margin-top: 2px;

  color:
    #a4aaa5;

  font-size: 7px;
  font-weight: 500;
}


.timeline-empty {
  color:
    #949b95;

  font-size:
    10px;
}


/* ---------- Sidebar cards ---------- */

.order-side-card h2 {
  margin:
    4px
    0
    6px;

  font-family:
    "Manrope";

  font-size:
    17px;

  letter-spacing:
    -.4px;
}


.order-side-card > p {
  margin:
    0
    0
    16px;

  color:
    #8f9690;

  font-size:
    9px;

  line-height:
    1.5;
}


.order-action-stack {
  display: grid;

  gap: 8px;
}


.full-button {
  width: 100%;
}


/* ---------- Payment ---------- */

.payment-summary {
  margin:
    14px
    0;

  padding:
    12px;

  border-radius:
    11px;

  background:
    #f7f9f7;
}


.payment-summary > div {
  display: flex;

  justify-content:
    space-between;

  gap: 10px;

  padding:
    5px
    0;

  font-size:
    9px;
}


.payment-summary span {
  color:
    #858d87;
}


.payment-outstanding {
  margin-top:
    4px;

  padding-top:
    10px !important;

  border-top:
    1px solid
    #e4e8e4;

  font-size:
    10px !important;
}


.payment-confirm-form {
  display: grid;

  gap:
    7px;

  margin-top:
    14px;
}


.payment-confirm-form label {
  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    6px;

  font-size:
    9px;

  font-weight:
    700;
}


.payment-confirm-form label span {
  color:
    #a1a7a2;

  font-size:
    8px;

  font-weight:
    500;
}


.payment-confirm-form select,
.payment-confirm-form input,
.order-danger-zone textarea {
  width:
    100%;

  border:
    1px solid
    var(--line);

  border-radius:
    9px;

  outline:
    0;

  background:
    #ffffff;

  font-size:
    10px;
}


.payment-confirm-form select,
.payment-confirm-form input {
  height:
    38px;

  padding:
    0
    10px;
}


.order-danger-zone textarea {
  padding:
    10px;

  resize:
    vertical;
}


.payment-record-list {
  display:
    grid;

  gap:
    8px;

  margin:
    14px
    0;
}


.payment-record-list > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px;

  border:
    1px solid
    #edf0ed;

  border-radius:
    9px;
}


.payment-record-list strong,
.payment-record-list small {
  display:
    block;
}


.payment-record-list strong {
  font-size:
    9px;
}


.payment-record-list small {
  margin-top:
    2px;

  color:
    #9ba19c;

  font-size:
    7px;
}


/* ---------- Notes ---------- */

.customer-order-note {
  margin:
    13px
    0
    0;

  padding:
    12px;

  border-left:
    3px solid
    var(--accent);

  border-radius:
    0
    9px
    9px
    0;

  background:
    #f7faf8;

  color:
    #626a64;

  font-size:
    10px;

  line-height:
    1.55;
}


/* ---------- Cancellation ---------- */

.order-danger-zone {
  border-color:
    #eddada;
}


.danger-button {
  min-height:
    39px;

  margin-top:
    9px;

  border:
    1px solid
    #e8cccc;

  border-radius:
    10px;

  background:
    #fff5f5;

  color:
    #a23f3f;

  font-size:
    10px;

  font-weight:
    800;

  cursor:
    pointer;
}


.cancellation-record {
  border-color:
    #efdede;

  background:
    #fffafa;
}


.cancellation-meta {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    8px;

  margin-top:
    14px;
}


.cancellation-meta span {
  padding:
    9px;

  border-radius:
    8px;

  background:
    #fff;

  color:
    #9a8585;

  font-size:
    8px;
}


.cancellation-meta strong {
  display:
    block;

  margin-top:
    3px;

  color:
    #685d5d;

  font-size:
    9px;
}


/* ============================================================
   ORDER RESPONSIVE
============================================================ */

@media (max-width: 1150px) {

  .orders-summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .orders-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .orders-filter-form {
    flex-wrap:
      wrap;
  }


  .order-detail-grid {
    grid-template-columns:
      1fr;
  }


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


@media (max-width: 900px) {

  .orders-master-head {
    display:
      none;
  }


  .orders-master-row {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    row-gap:
      8px;
  }


  .orders-master-row > div:nth-child(2),
  .orders-master-row > div:nth-child(3),
  .orders-master-row > div:nth-child(5) {
    display:
      none;
  }


  .orders-master-row > div:nth-child(4) {
    grid-column:
      1;
  }


  .orders-master-row > div:nth-child(6) {
    grid-column:
      2;

    grid-row:
      1;

    align-self:
      center;
  }


  .orders-master-row > div:nth-child(7) {
    grid-column:
      2;

    grid-row:
      2;
  }
}


@media (max-width: 700px) {

  .orders-summary-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .orders-filter-form {
    display:
      grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .orders-search {
    grid-column:
      1 / -1;
  }


  .orders-search input {
    width:
      100%;
  }


  .orders-filter-button {
    width:
      100%;
  }


  .order-detail-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .order-header-value {
    text-align:
      left;
  }


  .order-detail-side {
    grid-template-columns:
      1fr;
  }
}


@media (max-width: 520px) {

  .orders-summary-grid {
    grid-template-columns:
      1fr;
  }


  .orders-filter-form {
    grid-template-columns:
      1fr;
  }


  .orders-filter-form select {
    width:
      100%;
  }


  .orders-search {
    grid-column:
      auto;
  }


  .orders-master-row {
    padding:
      14px;
  }


  .order-line-item {
    grid-template-columns:
      30px
      minmax(0, 1fr);
  }


  .order-line-price {
    grid-column:
      2;

    text-align:
      left;
  }
}

/* ============================================================
   ORDERS ICON POLISH
   Stroke-based icon system
============================================================ */

.order-summary-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 10px;

  background: var(--accent-soft);
  color: var(--accent);
}


.order-summary-icon.blue {
  background: var(--blue-soft);
  color: var(--blue);
}


.order-summary-icon.green {
  background: var(--green-soft);
  color: var(--green);
}


.order-summary-icon.amber {
  background: var(--amber-soft);
  color: var(--amber);
}


.order-summary-icon svg {
  width: 17px;
  height: 17px;

  display: block;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Search icon */

.orders-search svg {
  position: absolute;

  top: 50%;
  left: 11px;

  width: 14px;
  height: 14px;

  fill: none;
  stroke: #9aa09b;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transform: translateY(-50%);
}


/* Empty state icon */

.orders-workspace-empty > span {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: #f0f3f0;

  color: #77817a;
}


.orders-workspace-empty svg {
  width: 18px;
  height: 18px;

  display: block;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Row arrow */

.order-row-arrow {
  display: grid;
  place-items: center;

  color: #a5aba6;
}


.order-row-arrow svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .16s ease,
    color .16s ease;
}


.orders-master-row:hover .order-row-arrow svg {
  transform: translateX(2px);

  color: var(--accent);
}

/* ============================================================
   FIX: ORDERS SUMMARY ICON ALIGNMENT
============================================================ */

.order-summary-icon {
  position: relative;

  width: 40px;
  height: 40px;

  min-width: 40px;
  min-height: 40px;

  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  align-self: center;

  overflow: hidden;

  border-radius: 11px;

  line-height: 0;
}


.order-summary-icon svg {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;

  margin: 0;
  padding: 0;

  display: block;

  transform: translate(-50%, -50%);

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  overflow: visible;
}


/* Keep the icon and metric block perfectly aligned */

.order-summary-card {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  align-items: center;

  column-gap: 14px;

  padding: 20px;
}


.order-summary-card > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}


.order-summary-card small {
  margin: 0 0 4px;

  line-height: 1.2;
}


.order-summary-card strong {
  margin: 0 0 4px;

  line-height: 1;
}


.order-summary-card div > span {
  margin: 0;

  line-height: 1.3;
}

/* ============================================================
   18. TABLES & QR WORKSPACE
============================================================ */

.tables-page-header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 28px;
}


.tables-page-header h1 {
  margin:
    11px
    0
    8px;

  font-family: "Manrope";

  font-size: 34px;

  line-height: 1.05;

  letter-spacing: -1.35px;
}


.tables-page-header p {
  max-width: 690px;

  margin: 0;

  color: var(--muted);

  font-size: 14px;
}


.tables-header-actions {
  display: flex;

  gap: 9px;
}


.tables-header-actions svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   TABLE SUMMARY
============================================================ */

.table-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 12px;

  margin-bottom: 18px;
}


.table-summary-card {
  min-height: 112px;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  align-items: center;

  gap: 14px;

  padding: 20px;

  border:
    1px solid
    var(--line);

  border-radius: 15px;

  background: #ffffff;
}


.table-summary-icon {
  position: relative;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.table-summary-icon.green {
  background:
    var(--green-soft);

  color:
    var(--green);
}


.table-summary-icon.blue {
  background:
    var(--blue-soft);

  color:
    var(--blue);
}


.table-summary-icon.amber {
  background:
    var(--amber-soft);

  color:
    var(--amber);
}


.table-summary-icon svg {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;

  transform:
    translate(-50%, -50%);

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.table-summary-card small,
.table-summary-card strong,
.table-summary-card div > span {
  display: block;
}


.table-summary-card small {
  margin-bottom: 4px;

  color:
    #818882;

  font-size: 10px;
  font-weight: 600;
}


.table-summary-card strong {
  margin-bottom: 4px;

  font-family:
    "Manrope";

  font-size: 24px;

  line-height: 1;

  letter-spacing: -.7px;
}


.table-summary-card div > span {
  color:
    #9ca29d;

  font-size: 9px;
}


/* ============================================================
   TABLE PANEL
============================================================ */

.tables-main-panel {
  overflow: visible;

  padding-bottom: 22px;
}


.tables-toolbar {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 22px;

  padding: 22px;
}


.tables-toolbar h2 {
  margin:
    3px
    0
    0;

  font-family:
    "Manrope";

  font-size: 19px;

  letter-spacing: -.5px;
}


.tables-filter-form {
  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}


.tables-filter-form select,
.tables-filter-form input {
  height: 38px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  outline: 0;

  background: #ffffff;

  color:
    #505852;

  font-size: 10px;
}


.tables-filter-form select {
  min-width: 130px;

  padding:
    0
    28px
    0
    10px;
}


.tables-search {
  position: relative;
}


.tables-search svg {
  position: absolute;

  top: 50%;
  left: 11px;

  width: 14px;
  height: 14px;

  transform:
    translateY(-50%);

  fill: none;

  stroke:
    #9aa09b;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.tables-search input {
  width: 220px;

  padding:
    0
    10px
    0
    33px;
}


.tables-filter-button {
  min-height: 38px;

  padding:
    0
    13px;
}


/* ============================================================
   TABLE CARDS
============================================================ */

.restaurant-table-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;

  padding:
    0
    22px;
}


.restaurant-table-card {
  position: relative;

  min-width: 0;

  padding: 18px;

  border:
    1px solid
    #e5e8e4;

  border-radius: 16px;

  background: #ffffff;

  transition:
    transform .17s ease,
    box-shadow .17s ease,
    border-color .17s ease;
}


.restaurant-table-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #dce2dd;

  box-shadow:
    0 12px 30px
    rgba(23,32,25,.05);
}


.table-card-inactive {
  opacity: .68;

  background:
    #fafbfa;
}


/* ---------- Top ---------- */

.restaurant-table-top {
  position: relative;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}


.table-identity {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 11px;
}


.table-number-mark {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 11px;

  background:
    #f0f4f1;

  color:
    #606a62;

  font-family:
    "Manrope";

  font-size: 10px;
  font-weight: 800;
}


.table-name-row {
  display: flex;

  align-items: center;

  gap: 7px;

  flex-wrap: wrap;
}


.table-name-row h3 {
  margin: 0;

  font-family:
    "Manrope";

  font-size: 15px;

  letter-spacing: -.35px;
}


.table-identity p {
  margin:
    3px
    0
    0;

  color:
    #979e98;

  font-size: 8px;
}


.table-state-pill {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding:
    4px
    7px;

  border-radius: 999px;

  font-size: 7px;
  font-weight: 800;
}


.table-state-pill i {
  width: 5px;
  height: 5px;

  border-radius: 50%;
}


.table-state-pill.available {
  background:
    var(--green-soft);

  color:
    #397e64;
}


.table-state-pill.available i {
  background:
    #2e9a72;
}


.table-state-pill.occupied {
  background:
    var(--amber-soft);

  color:
    #896d35;
}


.table-state-pill.occupied i {
  background:
    #ca942c;
}


.table-state-pill.inactive {
  background:
    #f0f2f0;

  color:
    #808782;
}


/* ---------- Menu ---------- */

.table-card-menu {
  position: relative;
}


.table-menu-button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--line);

  border-radius: 8px;

  background:
    #ffffff;

  color:
    #8d958f;

  cursor: pointer;
}


.table-menu-button svg {
  width: 15px;
  height: 15px;

  fill:
    currentColor;
}


.table-dropdown {
  position: absolute;

  top: 36px;
  right: 0;

  z-index: 20;

  width: 180px;

  display: none;

  overflow: hidden;

  padding: 5px;

  border:
    1px solid
    var(--line);

  border-radius: 10px;

  background:
    #ffffff;

  box-shadow:
    0 16px 40px
    rgba(20,27,22,.12);
}


.table-dropdown.open {
  display: block;
}


.table-dropdown form {
  margin: 0;
}


.table-dropdown button {
  width: 100%;

  display: block;

  padding:
    9px
    10px;

  border: 0;

  border-radius: 7px;

  background:
    transparent;

  color:
    #555e57;

  text-align: left;

  font-size: 9px;

  cursor: pointer;
}


.table-dropdown button:hover {
  background:
    #f5f7f5;
}


/* ---------- Meta ---------- */

.table-meta-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 8px;

  margin-top: 17px;
}


.table-meta-grid > div {
  padding:
    10px;

  border-radius: 10px;

  background:
    #f8faf8;
}


.table-meta-grid small,
.table-meta-grid strong {
  display: block;
}


.table-meta-grid small {
  color:
    #9ba19c;

  font-size: 7px;

  text-transform: uppercase;

  letter-spacing: .7px;
}


.table-meta-grid strong {
  margin-top: 3px;

  color:
    #5d655f;

  font-size: 9px;
}


/* ---------- QR preview ---------- */

.table-qr-preview {
  display: grid;

  grid-template-columns:
    56px
    minmax(0, 1fr);

  align-items: center;

  gap: 11px;

  margin-top: 12px;

  padding: 11px;

  border:
    1px solid
    #edf0ed;

  border-radius: 11px;
}


.mini-qr {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  padding: 6px;

  border-radius: 8px;

  background:
    #fafbfa;
}


.mini-qr svg {
  width: 100%;
  height: 100%;

  fill:
    #313833;
}


.table-qr-preview small,
.table-qr-preview strong,
.table-qr-preview span {
  display: block;
}


.table-qr-preview small {
  color:
    #a0a6a1;

  font-size: 7px;
}


.table-qr-preview strong {
  margin:
    2px
    0;

  font-size: 10px;
}


.table-qr-preview span {
  color:
    #9aa09b;

  font-size: 7px;
}


/* ---------- Actions ---------- */

.table-card-actions {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    34px;

  gap: 7px;

  margin-top: 13px;
}


.table-action-button,
.table-action-icon {
  min-height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background:
    #ffffff;

  color:
    #606861;

  text-decoration: none;

  font-size: 8px;
  font-weight: 800;
}


.table-action-button.primary {
  border-color:
    #d2e9e2;

  background:
    #f2faf7;

  color:
    var(--accent);
}


.table-action-button svg,
.table-action-icon svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.tables-empty-state {
  grid-column:
    1 / -1;

  min-height: 320px;

  display: grid;
  place-items: center;
  align-content: center;

  padding: 40px;

  text-align: center;
}


.tables-empty-state > span {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    #f0f3f0;

  color:
    #77817a;
}


.tables-empty-state svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.tables-empty-state h3 {
  margin:
    12px
    0
    5px;

  font-family:
    "Manrope";

  font-size: 15px;
}


.tables-empty-state p {
  max-width: 340px;

  margin:
    0
    0
    15px;

  color:
    #929993;

  font-size: 10px;
}


/* ============================================================
   SERVIQ MODALS
============================================================ */

.modal-open {
  overflow: hidden;
}


.serviq-modal {
  position: fixed;

  inset: 0;

  z-index: 200;

  display: none;

  place-items: center;

  padding: 20px;
}


.serviq-modal.open {
  display: grid;
}


.serviq-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(13,18,15,.48);

  backdrop-filter:
    blur(3px);
}


.serviq-modal-card {
  position: relative;

  z-index: 1;

  width:
    min(520px, 100%);

  max-height:
    calc(100vh - 40px);

  overflow: auto;

  padding: 24px;

  border:
    1px solid
    var(--line);

  border-radius: 18px;

  background:
    #ffffff;

  box-shadow:
    0 28px 90px
    rgba(14,22,17,.22);
}


.serviq-modal-card.small {
  width:
    min(440px, 100%);
}


.serviq-modal-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(--line);
}


.serviq-modal-head h2 {
  margin:
    4px
    0
    5px;

  font-family:
    "Manrope";

  font-size: 21px;

  letter-spacing: -.6px;
}


.serviq-modal-head p {
  max-width: 390px;

  margin: 0;

  color:
    #8c938e;

  font-size: 10px;

  line-height: 1.5;
}


.modal-close-button {
  width: 32px;
  height: 32px;

  flex-shrink: 0;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background:
    #ffffff;

  color:
    #7b837d;

  font-size: 18px;

  cursor: pointer;
}


/* ---------- Form ---------- */

.serviq-form {
  display: grid;

  gap: 15px;

  padding-top: 20px;
}


.serviq-form label {
  display: grid;

  gap: 7px;
}


.serviq-form label > span {
  font-size: 9px;
  font-weight: 800;
}


.serviq-form input,
.serviq-form select {
  width: 100%;
  height: 42px;

  padding:
    0
    11px;

  border:
    1px solid
    var(--line);

  border-radius: 10px;

  outline: 0;

  background:
    #ffffff;

  color:
    #4e5650;

  font-size: 10px;
}


.serviq-form input:focus,
.serviq-form select:focus {
  border-color:
    #9bc8ba;

  box-shadow:
    0 0 0 3px
    rgba(22,125,107,.07);
}


.serviq-form-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 12px;
}


.serviq-form-note {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  padding: 11px;

  border-radius: 10px;

  background:
    #f5f9f6;

  color:
    #778079;
}


.serviq-form-note > span {
  color:
    var(--accent);
}


.serviq-form-note p {
  margin: 0;

  font-size: 9px;

  line-height: 1.5;
}


.serviq-modal-actions {
  display: flex;

  justify-content: flex-end;

  gap: 8px;

  padding-top: 4px;
}


/* ============================================================
   TABLES RESPONSIVE
============================================================ */

@media (max-width: 1250px) {

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


  .tables-toolbar {
    align-items: stretch;

    flex-direction: column;
  }

}


@media (max-width: 1100px) {

  .table-summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 760px) {

  .tables-page-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .tables-header-actions {
    width: 100%;
  }


  .tables-header-actions > * {
    flex: 1;
  }


  .tables-filter-form {
    display: grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .tables-search {
    grid-column:
      1 / -1;
  }


  .tables-search input {
    width: 100%;
  }


  .tables-filter-form select {
    width: 100%;
  }


  .restaurant-table-grid {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 520px) {

  .table-summary-grid {
    grid-template-columns:
      1fr;
  }


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


  .tables-search {
    grid-column: auto;
  }


  .restaurant-table-grid {
    padding:
      0
      14px;
  }


  .tables-toolbar {
    padding:
      18px
      14px;
  }


  .serviq-form-grid {
    grid-template-columns:
      1fr;
  }


  .serviq-modal-actions {
    flex-direction: column-reverse;
  }


  .serviq-modal-actions button {
    width: 100%;
  }

}

/* ============================================================
   19. MENU MANAGEMENT
============================================================ */

.menu-page-header,
.menu-item-detail-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.menu-page-header h1,
.menu-item-detail-header h1 {
  margin: 11px 0 8px;
  font-family: "Manrope";
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -1.35px;
}

.menu-page-header p,
.menu-item-detail-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.menu-header-actions {
  display: flex;
  gap: 8px;
}


/* ---------- Summary ---------- */

.menu-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.menu-summary-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.menu-summary-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.menu-summary-icon.blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.menu-summary-icon.green {
  background: var(--green-soft);
  color: var(--green);
}

.menu-summary-icon.violet {
  background: var(--violet-soft);
  color: var(--violet);
}

.menu-summary-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-summary-card small,
.menu-summary-card strong,
.menu-summary-card div > span {
  display: block;
}

.menu-summary-card small {
  margin-bottom: 4px;
  color: #818882;
  font-size: 10px;
  font-weight: 600;
}

.menu-summary-card strong {
  margin-bottom: 4px;
  font-family: "Manrope";
  font-size: 24px;
  line-height: 1;
}

.menu-summary-card div > span {
  color: #9ca29d;
  font-size: 9px;
}


/* ---------- Toolbar ---------- */

.menu-main-panel {
  overflow: hidden;
}

.menu-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
}

.menu-toolbar h2 {
  margin: 3px 0 0;
  font-family: "Manrope";
  font-size: 19px;
}

.menu-filter-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.menu-filter-form input,
.menu-filter-form select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #505852;
  outline: 0;
  font-size: 10px;
}

.menu-filter-form select {
  min-width: 130px;
  padding: 0 28px 0 10px;
}

.menu-search {
  position: relative;
}

.menu-search svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  fill: none;
  stroke: #9aa09b;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.menu-search input {
  width: 210px;
  padding: 0 10px 0 33px;
}

.menu-filter-button {
  min-height: 38px;
}


/* ---------- Cards ---------- */

.menu-item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0 22px 22px;
}

.menu-management-card {
  overflow: hidden;
  border: 1px solid #e5e8e4;
  border-radius: 16px;
  background: #fff;
}

.menu-card-image {
  position: relative;
  height: 175px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #e8eee9, #cddbd1);
  color: #607066;
  text-decoration: none;
}

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

.menu-card-image > span:not(.menu-availability-pill) {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  font-family: "Manrope";
  font-weight: 800;
}

.menu-availability-pill {
  position: absolute;
  top: 11px;
  left: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(245,252,248,.92);
  color: #397e64;
  font-size: 8px;
  font-weight: 800;
  backdrop-filter: blur(5px);
}

.menu-availability-pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2e9a72;
}

.menu-availability-pill.unavailable {
  background: rgba(255,255,255,.92);
  color: #777f79;
}

.menu-card-body {
  padding: 16px;
}

.menu-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.menu-card-heading span {
  display: block;
  margin-bottom: 4px;
  color: #9aa09b;
  font-size: 8px;
}

.menu-card-heading a {
  color: var(--text);
  text-decoration: none;
  font-family: "Manrope";
  font-size: 14px;
  font-weight: 700;
}

.menu-card-heading > strong {
  flex-shrink: 0;
  font-size: 11px;
}

.menu-card-body > p {
  min-height: 37px;
  margin: 8px 0 13px;
  color: #8e958f;
  font-size: 9px;
  line-height: 1.5;
}

.menu-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.menu-card-meta > span {
  padding: 9px;
  border-radius: 9px;
  background: #f7f9f7;
}

.menu-card-meta small,
.menu-card-meta strong {
  display: block;
}

.menu-card-meta small {
  color: #a0a6a1;
  font-size: 7px;
}

.menu-card-meta strong {
  margin-top: 2px;
  font-size: 8px;
}

.menu-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 11px;
}

.menu-card-actions a,
.menu-card-actions button {
  width: 100%;
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #606861;
  text-decoration: none;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}


/* ---------- Empty ---------- */

.menu-empty-state {
  grid-column: 1 / -1;
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.menu-empty-state > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f0f3f0;
  color: #77817a;
}

.menu-empty-state svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.menu-empty-state h3 {
  margin: 12px 0 5px;
  font-family: "Manrope";
  font-size: 15px;
}

.menu-empty-state p {
  margin: 0 0 14px;
  color: #929993;
  font-size: 10px;
}


/* ============================================================
   MENU ITEM DETAIL
============================================================ */

.menu-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  align-items: start;
  gap: 18px;
}

.menu-detail-main {
  display: grid;
  gap: 18px;
}

.menu-detail-sidebar {
  position: sticky;
  top: 90px;
}

.menu-detail-panel,
.menu-detail-preview {
  padding: 22px;
}

.menu-edit-form {
  display: grid;
  gap: 15px;
  margin-top: 20px;
}

.menu-edit-form label {
  display: grid;
  gap: 7px;
}

.menu-edit-form label > span {
  font-size: 9px;
  font-weight: 800;
}

.menu-edit-form input,
.menu-edit-form textarea,
.menu-edit-form select,
.serviq-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  outline: 0;
  color: #4e5650;
  font-size: 10px;
}

.menu-edit-form input,
.menu-edit-form select {
  height: 42px;
  padding: 0 11px;
}

.menu-edit-form textarea,
.serviq-form textarea {
  padding: 11px;
  resize: vertical;
}

.menu-item-image-editor {
  min-height: 220px;
  overflow: hidden;
  border-radius: 14px;
  background: #eef2ee;
}

.menu-item-image-editor img {
  width: 100%;
  height: 280px;
  display: block;
  object-fit: cover;
}

.menu-image-placeholder {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #69746c;
  font-family: "Manrope";
  font-size: 30px;
  font-weight: 800;
}

.menu-save-button {
  justify-self: start;
}


/* ---------- Modifiers ---------- */

.modifier-group-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.modifier-group-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfb;
}

.modifier-group-head strong,
.modifier-group-head span {
  display: block;
}

.modifier-group-head strong {
  font-size: 11px;
}

.modifier-group-head span {
  margin-top: 2px;
  color: #989f99;
  font-size: 8px;
}

.modifier-options {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.modifier-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 8px;
  background: #fff;
}

.modifier-option strong,
.modifier-option small {
  display: block;
}

.modifier-option strong {
  font-size: 9px;
}

.modifier-option small {
  margin-top: 2px;
  color: #9da39e;
  font-size: 7px;
}

.modifier-option > b {
  font-size: 9px;
}

.modifier-quick-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  gap: 7px;
  margin-top: 10px;
}

.modifier-quick-form input {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  font-size: 9px;
}

.modifier-quick-form button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.modifier-empty,
.modifier-empty-large {
  color: #999f9a;
  font-size: 9px;
}

.modifier-empty-large {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  text-align: center;
}

.modifier-empty-large strong {
  display: block;
  color: #5c645e;
}

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

.modifier-group-create {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.modifier-group-create > div {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  gap: 8px;
}

.modifier-group-create label {
  display: grid;
  gap: 6px;
}

.modifier-group-create label span {
  font-size: 8px;
  font-weight: 800;
}

.modifier-group-create input[type="text"],
.modifier-group-create input[type="number"] {
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.modifier-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px !important;
  margin: 11px 0;
  font-size: 9px;
}


/* ---------- Customer preview ---------- */

.menu-preview-food {
  margin-top: 15px;
}

.menu-preview-image {
  height: 200px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(145deg, #e8eee9, #cbd9cf);
}

.menu-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-preview-image span {
  font-family: "Manrope";
  font-size: 24px;
  font-weight: 800;
  color: #657069;
}

.menu-preview-category {
  display: block;
  margin-top: 14px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.menu-preview-food h3 {
  margin: 5px 0;
  font-family: "Manrope";
  font-size: 18px;
}

.menu-preview-food p {
  color: #8e958f;
  font-size: 9px;
  line-height: 1.5;
}

.menu-preview-food > strong {
  font-size: 13px;
}


/* ============================================================
   CUSTOMER MENU IMPROVEMENTS
============================================================ */

.customer-context-icon svg,
.bag-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-food-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-visual:has(.customer-food-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.02),
    rgba(0,0,0,.06)
  );
  pointer-events: none;
}

.food-visual .available-chip {
  z-index: 2;
}

.customer-item-price strong,
.customer-item-price small {
  display: block;
}

.customer-item-price small {
  margin-top: 2px;
  color: #9aa09b;
  font-size: 7px;
}

.customer-order-summary {
  max-height: 245px;
  overflow: auto;
  margin: 3px 0 12px;
}

.customer-order-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0ec;
  font-size: 9px;
}

.customer-order-line b {
  margin-right: 4px;
  color: var(--restaurant-brand);
}

.customer-order-line strong {
  flex-shrink: 0;
}

.customer-running-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 16px;
  padding: 11px;
  border-radius: 10px;
  background: #f7f9f7;
}

.customer-running-total span {
  color: #858d87;
  font-size: 8px;
}

.customer-running-total strong {
  font-family: "Manrope";
  font-size: 13px;
}


/* ============================================================
   MENU RESPONSIVE
============================================================ */

@media (max-width: 1250px) {

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

  .menu-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

}


@media (max-width: 1100px) {

  .menu-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-detail-grid {
    grid-template-columns: 1fr;
  }

  .menu-detail-sidebar {
    position: static;
  }

}


@media (max-width: 760px) {

  .menu-page-header,
  .menu-item-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .menu-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .menu-header-actions > * {
    flex: 1;
  }

  .menu-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .menu-search {
    grid-column: 1 / -1;
  }

  .menu-search input {
    width: 100%;
  }

  .menu-filter-form select {
    width: 100%;
  }

  .menu-item-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 520px) {

  .menu-summary-grid {
    grid-template-columns: 1fr;
  }

  .menu-filter-form {
    grid-template-columns: 1fr;
  }

  .menu-search {
    grid-column: auto;
  }

  .menu-item-grid {
    padding: 0 14px 14px;
  }

  .menu-toolbar {
    padding: 18px 14px;
  }

  .modifier-group-create > div,
  .modifier-quick-form {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   MENU ITEM EDITOR — PREMIUM RETOUCH
============================================================ */


/* ---------- Upload field ---------- */

.premium-upload-field {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 18px;

  padding: 15px;

  border:
    1px solid
    #e1e6e1;

  border-radius: 13px;

  background:
    #fafcfa;
}


.premium-upload-copy {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 12px;
}


.premium-upload-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 10px;

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.premium-upload-icon svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.premium-upload-copy strong,
.premium-upload-copy p {
  display: block;

  margin: 0;
}


.premium-upload-copy strong {
  color:
    #4d564f;

  font-size: 10px;
}


.premium-upload-copy p {
  margin-top: 3px;

  color:
    #989f99;

  font-size: 8px;

  line-height: 1.45;
}


.premium-upload-actions {
  flex-shrink: 0;
}


.premium-upload-button {
  min-height: 36px;

  display: inline-flex !important;

  align-items: center;

  gap: 7px !important;

  padding:
    0
    11px;

  border:
    1px solid
    #dce2dd;

  border-radius: 9px;

  background:
    #ffffff;

  color:
    #525b54;

  font-size: 9px;
  font-weight: 800;

  cursor: pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}


.premium-upload-button:hover {
  border-color:
    #acd3c6;

  background:
    #f2faf7;

  color:
    var(--accent);
}


.premium-upload-button svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.9;

  stroke-linecap:
    round;
}


.premium-upload-input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  padding: 0 !important;

  clip:
    rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0 !important;
}


/* ---------- Selected file ---------- */

.selected-file-row {
  grid-column:
    1 / -1;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding-top: 12px;

  border-top:
    1px solid
    #e8ebe8;
}


.selected-file-row[hidden] {
  display: none;
}


.selected-file-row > div {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 9px;
}


.selected-file-status {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 8px;

  background:
    var(--green-soft);
}


.selected-file-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--green);
}


.selected-file-row strong,
.selected-file-row small {
  display: block;
}


.selected-file-row strong {
  overflow: hidden;

  color:
    #555e57;

  font-size: 9px;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.selected-file-row small {
  margin-top: 2px;

  color:
    #9ba19c;

  font-size: 7px;
}


.clear-selected-image {
  flex-shrink: 0;

  padding:
    6px
    8px;

  border: 0;

  background:
    transparent;

  color:
    #909791;

  font-size: 8px;

  cursor: pointer;
}


.clear-selected-image:hover {
  color:
    var(--danger);
}


/* ---------- Image editor ---------- */

.menu-item-image-editor {
  position: relative;

  min-height: 260px;

  overflow: hidden;

  border:
    1px solid
    #e4e8e4;

  border-radius: 15px;

  background:
    #eef2ee;
}


.menu-item-image-editor > img {
  width: 100%;
  height: 300px;

  display: block;

  object-fit: cover;
}


.menu-item-image-editor > img[hidden] {
  display: none;
}


.menu-image-placeholder {
  min-height: 300px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      145deg,
      #edf2ee,
      #dbe5dd
    );

  color:
    #657168;

  font-family:
    "Manrope";

  font-size: 31px;
  font-weight: 800;
}


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


.menu-image-overlay {
  position: absolute;

  right: 12px;
  bottom: 12px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    6px
    9px;

  border-radius: 999px;

  background:
    rgba(17,20,18,.68);

  color:
    #ffffff;

  font-size: 8px;

  backdrop-filter:
    blur(6px);
}


.menu-image-overlay-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #6bd4b3;
}


/* ---------- Main editor fields ---------- */

.menu-form-field {
  display: grid;

  gap: 7px;
}


.menu-form-field > span {
  color:
    #525a54;

  font-size: 9px;

  font-weight: 800;
}


.menu-form-field input,
.menu-form-field textarea,
.menu-form-field select {
  width: 100%;

  min-width: 0;
}


.field-prefix-wrap,
.field-suffix-wrap {
  position: relative;

  min-width: 0;
}


.field-prefix-wrap input {
  padding-left:
    34px !important;
}


.field-prefix {
  position: absolute;

  top: 50%;
  left: 11px;

  z-index: 2;

  color:
    #8f9690;

  font-size: 10px;

  transform:
    translateY(-50%);
}


.field-suffix-wrap input {
  padding-right:
    43px !important;
}


.field-suffix {
  position: absolute;

  top: 50%;
  right: 11px;

  color:
    #969d97;

  font-size: 8px;

  transform:
    translateY(-50%);
}


.field-help {
  color:
    #9da39e;

  font-size: 8px;

  line-height: 1.4;
}


/* ---------- Save ---------- */

.menu-edit-actions {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding-top: 6px;
}


.unsaved-hint {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    #979e98;

  font-size: 8px;
}


.unsaved-hint > span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #c5cbc6;
}


/* ============================================================
   MODIFIER OVERFLOW FIX
============================================================ */

.modifier-group-form-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(82px, 105px)
    minmax(82px, 105px);

  gap: 10px;
}


.modifier-group-form-grid > label {
  min-width: 0;
}


.modifier-group-form-grid input {
  width: 100%;

  min-width: 0;

  max-width: 100%;

  box-sizing: border-box;
}


.modifier-quick-form {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(120px, .65fr)
    auto;

  align-items: end;

  gap: 9px;
}


.modifier-inline-field {
  min-width: 0;
}


.modifier-inline-field input {
  width: 100%;

  min-width: 0;

  max-width: 100%;
}


/* ============================================================
   CUSTOMER PREVIEW LIVE IMAGE
============================================================ */

.menu-preview-image {
  position: relative;

  overflow: hidden;
}


.menu-preview-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.menu-preview-image img[hidden] {
  display: none;
}


.menu-preview-image > span#customer-item-placeholder {
  height: 100%;

  display: grid;
  place-items: center;
}


.menu-preview-image > span#customer-item-placeholder[hidden] {
  display: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 720px) {

  .premium-upload-field {
    grid-template-columns: 1fr;
  }


  .premium-upload-actions {
    width: 100%;
  }


  .premium-upload-button {
    width: 100%;

    justify-content: center;
  }


  .selected-file-row {
    grid-column: auto;
  }


  .menu-edit-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .menu-edit-actions .primary-button {
    width: 100%;
  }


  .modifier-group-form-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .modifier-name-field {
    grid-column:
      1 / -1;
  }


  .modifier-quick-form {
    grid-template-columns: 1fr;
  }


  .modifier-add-option-button {
    width: 100%;
  }

}


@media (max-width: 460px) {

  .modifier-group-form-grid {
    grid-template-columns: 1fr;
  }


  .modifier-name-field {
    grid-column: auto;
  }


  .selected-file-row {
    align-items: flex-start;

    flex-direction: column;
  }

}

/* ============================================================
   MENU ITEM DETAIL — LAYOUT REBALANCE
============================================================ */

/* Wider page canvas */
.menu-item-detail-page {
  max-width: 1380px;
  margin: 0 auto;
}


/* Header breathes properly */
.menu-item-detail-header {
  align-items: flex-start;

  margin-bottom: 24px;
}


.menu-item-heading-copy {
  max-width: 760px;
}


/* Main split */
.menu-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(320px, .82fr);

  align-items: start;

  gap: 20px;
}


/* Main content */
.menu-detail-main {
  min-width: 0;

  display: grid;

  gap: 18px;
}


/* Right preview */
.menu-detail-sidebar {
  min-width: 0;

  position: sticky;

  top: 88px;

  display: grid;

  gap: 14px;
}


/* Panels */
.menu-detail-panel,
.menu-detail-preview,
.menu-item-operational-card {
  border-radius: 16px;
}


/* ============================================================
   CUSTOMER PRESENTATION PANEL
============================================================ */

.menu-detail-panel {
  padding: 22px;
}


.menu-detail-panel .panel-head {
  margin-bottom: 16px;
}


.menu-detail-panel .panel-head h2 {
  font-size: 18px;
}


.menu-detail-subtitle {
  max-width: 620px;

  margin-top: 5px;

  font-size: 9px;
}


/* Image less oversized */
.menu-item-image-editor {
  min-height: 230px;

  border-radius: 14px;
}


.menu-item-image-editor > img,
.menu-image-placeholder {
  height: 245px;
  min-height: 245px;
}


/* Upload field integrated */
.premium-upload-field {
  margin-top: 12px;

  padding: 13px 14px;

  border-radius: 11px;
}


/* Form spacing */
.menu-edit-form {
  gap: 13px;
}


.menu-form-field > span {
  font-size: 8px;
}


.menu-edit-form input,
.menu-edit-form select {
  height: 40px;
}


.menu-edit-form textarea {
  min-height: 90px;
}


/* Save row */
.menu-edit-actions {
  margin-top: 2px;

  padding-top: 10px;

  border-top: 1px solid #edf0ed;
}


/* ============================================================
   RIGHT PREVIEW
============================================================ */

.menu-detail-preview {
  padding: 16px;
}


.menu-preview-image {
  height: 165px;

  border-radius: 12px;
}


.menu-preview-food h3 {
  margin: 7px 0 4px;

  font-size: 16px;
}


.menu-preview-food p {
  margin-bottom: 9px;

  font-size: 8px;

  line-height: 1.45;
}


.menu-preview-footer {
  margin-top: 8px;
}


/* Operations card tighter */
.menu-item-operational-card {
  padding: 16px;
}


.menu-operational-row {
  padding: 9px 0;
}


/* ============================================================
   MODIFIER SECTION — COMPACT REDESIGN
============================================================ */

.modifiers-panel {
  padding: 22px;

  overflow: visible;
}


/* Remove the huge visual emptiness */
.modifier-group-list {
  margin-top: 14px;

  display: grid;

  gap: 10px;
}


/* Empty state becomes compact */
.modifier-empty-large {
  min-height: 0;

  padding: 22px;

  border: 1px dashed #dce2dd;

  border-radius: 11px;

  background: #fafbfa;
}


.modifier-empty-icon {
  width: 34px;
  height: 34px;

  margin-bottom: 8px;
}


.modifier-empty-large strong {
  font-size: 10px;
}


.modifier-empty-large p {
  margin-top: 3px;

  font-size: 8px;
}


/* Existing groups */
.modifier-group-card {
  border-radius: 11px;
}


.modifier-group-head {
  padding: 12px 13px;
}


.modifier-option {
  min-height: 44px;

  padding: 9px 13px;
}


/* Quick option form */
.modifier-quick-form {
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(115px, .65fr)
    auto;

  gap: 8px;

  padding: 10px 12px;
}


/* ============================================================
   CREATE MODIFIER GROUP — CLEANER CARD
============================================================ */

.modifier-create-section {
  margin-top: 16px;

  padding-top: 16px;
}


.modifier-create-heading {
  margin-bottom: 10px;
}


.modifier-create-heading h3 {
  margin: 3px 0 2px;

  font-size: 13px;
}


.modifier-create-heading p {
  font-size: 8px;
}


.modifier-group-create {
  margin-top: 0;

  padding: 12px;

  border-radius: 11px;

  background: #fbfcfb;
}


.modifier-group-form-grid {
  grid-template-columns:
    minmax(0, 1fr)
    92px
    92px;

  gap: 8px;
}


.modifier-group-form-grid input {
  height: 36px;
}


/* footer */
.modifier-create-footer {
  margin-top: 10px;
}


.modifier-checkbox strong {
  font-size: 8px;
}


.modifier-checkbox small {
  font-size: 7px;
}


/* ============================================================
   DESKTOP SCALE
============================================================ */

@media (min-width: 1440px) {

  .menu-item-detail-page {
    max-width: 1460px;
  }


  .menu-detail-grid {
    grid-template-columns:
      minmax(0, 2.15fr)
      minmax(330px, .85fr);
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1120px) {

  .menu-item-detail-page {
    max-width: none;
  }


  .menu-detail-grid {
    grid-template-columns: 1fr;
  }


  .menu-detail-sidebar {
    position: static;

    grid-template-columns:
      1fr
      1fr;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 720px) {

  .menu-detail-sidebar {
    grid-template-columns: 1fr;
  }


  .modifier-group-form-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .modifier-name-field {
    grid-column: 1 / -1;
  }


  .modifier-quick-form {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   FIX: MODIFIER EMPTY STATE HEIGHT
============================================================ */

.modifier-group-list {
  display: block;
  margin-top: 14px;
}


.modifier-empty-large {
  min-height: 0 !important;
  height: auto !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 28px 20px !important;

  margin: 0;

  border: 1px dashed #dfe4df;
  border-radius: 12px;

  background: #fbfcfb;

  text-align: center;
}


.modifier-empty-large .modifier-empty-icon {
  margin-bottom: 10px;
}


.modifier-empty-large strong {
  margin: 0;

  font-size: 10px;
}


.modifier-empty-large p {
  margin: 4px 0 0;

  font-size: 8px;

  line-height: 1.45;
}


/* Make sure the modifier panel does not artificially stretch */

.modifiers-panel {
  height: auto !important;
  min-height: 0 !important;
}


.modifier-create-section {
  margin-top: 18px;
}

/* ============================================================
   FIX: ADD MODIFIER GROUP BUTTON
============================================================ */

.modifier-create-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-top: 14px;
}


.modifier-create-footer > .secondary-button {
  min-width: 150px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 16px;

  border-radius: 10px;

  white-space: nowrap;

  font-size: 9px;
  font-weight: 800;

  line-height: 1;
}


/* Keep checkbox content from squeezing the button */

.modifier-checkbox {
  flex: 1;

  min-width: 0;
}


/* Mobile */

@media (max-width: 620px) {

  .modifier-create-footer {
    align-items: stretch;
    flex-direction: column;
  }


  .modifier-create-footer > .secondary-button {
    width: 100%;
    min-width: 0;
  }

}

/* ============================================================
   CUSTOMER ITEM MODIFIERS
============================================================ */

.customer-modifier-area {
  margin-top: 13px;

  border-top:
    1px solid
    #edf0ed;

  padding-top: 11px;
}


.customer-customise-trigger {
  width: 100%;

  min-height: 38px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding:
    0
    11px;

  border:
    1px solid
    #e2e7e3;

  border-radius: 10px;

  background:
    #fafcfa;

  color:
    #555e57;

  font-size: 9px;
  font-weight: 800;

  cursor: pointer;
}


.customer-customise-trigger > span:first-child {
  display: inline-flex;

  align-items: center;

  gap: 7px;
}


.customer-customise-trigger svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke:
    var(--restaurant-brand);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.customer-customise-arrow {
  color:
    #9ba29c;

  transition:
    transform .16s ease;
}


.customer-customise-trigger.open
.customer-customise-arrow {
  transform:
    rotate(180deg);
}


/* ---------- Groups ---------- */

.customer-modifier-groups {
  display: grid;

  gap: 10px;

  margin-top: 9px;
}


.customer-modifier-groups[hidden] {
  display: none;
}


.customer-modifier-group {
  min-width: 0;

  margin: 0;

  padding: 12px;

  border:
    1px solid
    #e5e9e5;

  border-radius: 11px;

  background:
    #ffffff;
}


.customer-modifier-group.has-error {
  border-color:
    #e4a9a9;

  box-shadow:
    0 0 0 3px
    rgba(184,67,67,.05);
}


.customer-modifier-heading {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 9px;
}


.customer-modifier-heading legend {
  padding: 0;

  color:
    #303732;

  font-size: 10px;
  font-weight: 800;
}


.customer-modifier-heading small {
  display: block;

  margin-top: 2px;

  color:
    #9aa19b;

  font-size: 7px;
}


.customer-required-chip {
  flex-shrink: 0;

  padding:
    4px
    6px;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--restaurant-brand)
      10%,
      white
    );

  color:
    var(--restaurant-brand);

  font-size: 7px;
  font-weight: 800;
}


/* ---------- Options ---------- */

.customer-modifier-options {
  display: grid;

  gap: 6px;
}


.customer-modifier-option {
  position: relative;

  min-height: 40px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    8px
    9px;

  border:
    1px solid
    #edf0ed;

  border-radius: 9px;

  background:
    #fafbfa;

  cursor: pointer;

  transition:
    border-color .14s ease,
    background .14s ease;
}


.customer-modifier-option:hover {
  border-color:
    #d9e4dd;
}


.customer-modifier-option:has(input:checked) {
  border-color:
    color-mix(
      in srgb,
      var(--restaurant-brand)
      32%,
      #dde3de
    );

  background:
    color-mix(
      in srgb,
      var(--restaurant-brand)
      5%,
      white
    );
}


.customer-modifier-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.customer-modifier-control {
  width: 16px;
  height: 16px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border:
    1.5px solid
    #bbc3bd;

  background:
    #ffffff;
}


input[type="radio"]
+ .customer-modifier-control {
  border-radius: 50%;
}


input[type="checkbox"]
+ .customer-modifier-control {
  border-radius: 5px;
}


.customer-modifier-option
input:checked
+ .customer-modifier-control {
  border-color:
    var(--restaurant-brand);

  background:
    var(--restaurant-brand);

  box-shadow:
    inset 0 0 0 4px
    #ffffff;
}


.customer-modifier-name {
  min-width: 0;

  flex: 1;

  color:
    #515a53;

  font-size: 9px;
  font-weight: 600;
}


.customer-modifier-option > strong {
  flex-shrink: 0;

  color:
    #646d66;

  font-size: 8px;
}


.customer-modifier-error {
  margin-top: 8px;

  color:
    #b04d4d;

  font-size: 8px;
  font-weight: 600;
}


.customer-modifier-error[hidden] {
  display: none;
}


/* ---------- Cart summary modifiers ---------- */

.customer-order-line-detailed {
  align-items: flex-start;
}


.customer-order-line-detailed > div {
  min-width: 0;
}


.customer-summary-modifiers {
  display: grid;

  gap: 2px;

  margin-top: 4px;
}


.customer-summary-modifiers span {
  color:
    #929a94;

  font-size: 7px;
}

/* ============================================================
   MENU ITEM DETAIL V3
============================================================ */

.menu-v3-page {
  width: 100%;
  max-width: 1440px;

  margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.menu-v3-header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 28px;

  margin-bottom: 24px;
}


.menu-v3-header-copy {
  min-width: 0;
}


.menu-v3-back {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 10px;

  color: #7d857f;

  text-decoration: none;

  font-size: 9px;
  font-weight: 700;
}


.menu-v3-back svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.menu-v3-title-line {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 8px;
}


.menu-v3-title-line h1 {
  margin: 0;

  font-family: "Manrope";

  font-size: 34px;

  line-height: 1.08;

  letter-spacing: -1.35px;
}


.menu-v3-title-line p {
  margin: 6px 0 0;

  color: #858d87;

  font-size: 11px;
}


.menu-v3-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  flex-shrink: 0;

  padding: 5px 8px;

  border-radius: 999px;

  background: var(--green-soft);

  color: #397e64;

  font-size: 8px;
  font-weight: 800;
}


.menu-v3-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #2e9a72;
}


.menu-v3-status.off {
  background: #f0f2f0;

  color: #858d87;
}


.menu-v3-status.off i {
  background: #909791;
}


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

.menu-v3-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(340px, .65fr);

  align-items: start;

  gap: 18px;
}


.menu-v3-main {
  min-width: 0;

  display: grid;

  gap: 18px;
}


.menu-v3-sidebar {
  min-width: 0;

  position: sticky;

  top: 88px;

  display: grid;

  gap: 14px;
}


/* ============================================================
   PANEL
============================================================ */

.menu-v3-panel {
  padding: 22px;

  border-radius: 17px;
}


.menu-v3-panel-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 17px;
}


.menu-v3-panel-head h2 {
  margin: 4px 0 0;

  font-family: "Manrope";

  font-size: 18px;

  letter-spacing: -.45px;
}


.menu-v3-panel-head p {
  max-width: 620px;

  margin: 5px 0 0;

  color: #919892;

  font-size: 9px;

  line-height: 1.5;
}


/* ============================================================
   IMAGE
============================================================ */

.menu-v3-image-shell {
  position: relative;

  min-height: 285px;

  overflow: hidden;

  border: 1px solid #e4e8e4;

  border-radius: 15px;

  background: #edf2ee;
}


.menu-v3-image-shell > img {
  width: 100%;
  height: 285px;

  display: block;

  object-fit: cover;
}


.menu-v3-image-shell > img[hidden] {
  display: none;
}


.menu-v3-image-placeholder {
  height: 285px;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      145deg,
      #edf2ee,
      #dbe5dd
    );

  color: #657168;

  font-family: "Manrope";

  font-size: 31px;
  font-weight: 800;
}


.menu-v3-image-placeholder[hidden] {
  display: none;
}


.menu-v3-image-badge {
  position: absolute;

  right: 12px;
  bottom: 12px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 9px;

  border-radius: 999px;

  background: rgba(17, 20, 18, .69);

  color: #fff;

  font-size: 8px;

  backdrop-filter: blur(6px);
}


.menu-v3-image-badge > span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #66d1af;
}


/* ============================================================
   UPLOAD
============================================================ */

.menu-v3-uploader {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 14px;

  margin-top: 12px;

  padding: 13px 14px;

  border: 1px solid #e1e6e1;

  border-radius: 12px;

  background: #fafcfa;
}


.menu-v3-uploader-copy {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 11px;
}


.menu-v3-uploader-icon {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 10px;

  background: var(--accent-soft);

  color: var(--accent);
}


.menu-v3-uploader-icon svg,
.menu-v3-upload-button svg {
  width: 15px;
  height: 15px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.menu-v3-uploader-copy strong,
.menu-v3-uploader-copy p {
  display: block;

  margin: 0;
}


.menu-v3-uploader-copy strong {
  font-size: 10px;
}


.menu-v3-uploader-copy p {
  margin-top: 3px;

  color: #949c96;

  font-size: 8px;
}


.menu-v3-upload-button {
  min-height: 36px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 0 11px;

  border: 1px solid #dce2dd;

  border-radius: 9px;

  background: #fff;

  color: #555e57;

  font-size: 9px;
  font-weight: 800;

  cursor: pointer;
}


.menu-v3-upload-button:hover {
  border-color: #acd3c6;

  background: #f2faf7;

  color: var(--accent);
}


.menu-v3-file-input {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;
}


.menu-v3-selected-file {
  grid-column: 1 / -1;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding-top: 10px;

  border-top: 1px solid #e9ece9;
}


.menu-v3-selected-file[hidden] {
  display: none;
}


.menu-v3-selected-file > div {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 8px;
}


.menu-v3-file-dot {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #2e9a72;
}


.menu-v3-selected-file strong,
.menu-v3-selected-file small {
  display: block;
}


.menu-v3-selected-file strong {
  font-size: 9px;
}


.menu-v3-selected-file small {
  margin-top: 2px;

  color: #9ba19c;

  font-size: 7px;
}


.menu-v3-clear-file {
  border: 0;

  background: transparent;

  color: #929a94;

  font-size: 8px;

  cursor: pointer;
}


/* ============================================================
   FORM
============================================================ */

.menu-v3-edit-form {
  display: grid;

  gap: 14px;
}


.menu-v3-form-section {
  display: grid;

  gap: 13px;

  margin-top: 2px;
}


.menu-v3-field {
  min-width: 0;

  display: grid;

  gap: 6px;
}


.menu-v3-field > span,
.menu-v3-new-group label > span,
.menu-v3-option-form label > span {
  color: #58615a;

  font-size: 8px;
  font-weight: 800;
}


.menu-v3-field input,
.menu-v3-field textarea,
.menu-v3-field select,
.menu-v3-new-group input,
.menu-v3-option-form input {
  width: 100%;

  min-width: 0;

  border: 1px solid var(--line);

  border-radius: 9px;

  outline: 0;

  background: #fff;

  color: #4e5650;

  font-size: 10px;

  box-sizing: border-box;
}


.menu-v3-field input,
.menu-v3-field select,
.menu-v3-new-group input,
.menu-v3-option-form input {
  height: 40px;

  padding: 0 10px;
}


.menu-v3-field textarea {
  min-height: 90px;

  padding: 10px;

  resize: vertical;
}


.menu-v3-field input:focus,
.menu-v3-field textarea:focus,
.menu-v3-field select:focus,
.menu-v3-new-group input:focus,
.menu-v3-option-form input:focus {
  border-color: #9bc8ba;

  box-shadow:
    0 0 0 3px
    rgba(22, 125, 107, .07);
}


.menu-v3-field > small {
  color: #9ca39d;

  font-size: 8px;
}


.menu-v3-two-columns {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


.menu-v3-money-field,
.menu-v3-time-field,
.menu-v3-price-input {
  position: relative;
}


.menu-v3-money-field > b,
.menu-v3-price-input > b {
  position: absolute;

  top: 50%;
  left: 11px;

  color: #909791;

  font-size: 9px;

  transform: translateY(-50%);
}


.menu-v3-money-field input,
.menu-v3-price-input input {
  padding-left: 29px;
}


.menu-v3-time-field > b {
  position: absolute;

  top: 50%;
  right: 11px;

  color: #9aa19b;

  font-size: 8px;

  transform: translateY(-50%);
}


.menu-v3-time-field input {
  padding-right: 42px;
}


.menu-v3-save-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-top: 4px;

  padding-top: 14px;

  border-top: 1px solid #edf0ed;
}


.menu-v3-unsaved-note {
  display: flex;

  align-items: center;

  gap: 7px;

  color: #969d97;

  font-size: 8px;
}


.menu-v3-unsaved-note i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #c5cbc6;
}


/* ============================================================
   MODIFIER GROUPS
============================================================ */

.menu-v3-group-count {
  flex-shrink: 0;

  padding: 5px 8px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: #fafbfa;

  color: #777f79;

  font-size: 8px;
}


.menu-v3-group-list {
  display: grid;

  gap: 12px;
}


.menu-v3-group-card {
  overflow: hidden;

  border: 1px solid #e4e8e4;

  border-radius: 13px;

  background: #fbfcfb;
}


.menu-v3-group-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  padding: 14px;

  border-bottom: 1px solid #edf0ed;
}


.menu-v3-group-title {
  display: flex;

  align-items: center;

  gap: 7px;

  flex-wrap: wrap;
}


.menu-v3-group-title h3 {
  margin: 0;

  font-family: "Manrope";

  font-size: 11px;
}


.menu-v3-required,
.menu-v3-optional {
  padding: 4px 6px;

  border-radius: 999px;

  font-size: 7px;
  font-weight: 800;
}


.menu-v3-required {
  background: var(--accent-soft);

  color: var(--accent);
}


.menu-v3-optional {
  background: #f0f2f0;

  color: #7d857f;
}


.menu-v3-group-head p {
  margin: 4px 0 0;

  color: #989f99;

  font-size: 8px;
}


.menu-v3-option-count {
  color: #909791;

  font-size: 8px;
}


.menu-v3-options {
  display: grid;
}


.menu-v3-option-row {
  min-height: 48px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 9px 14px;

  border-bottom: 1px solid #edf0ed;

  background: #fff;
}


.menu-v3-option-row > div {
  display: flex;

  align-items: center;

  gap: 9px;
}


.menu-v3-option-dot {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #2e9a72;

  box-shadow:
    0 0 0 3px
    rgba(46, 154, 114, .08);
}


.menu-v3-option-dot.off {
  background: #9aa19b;

  box-shadow: none;
}


.menu-v3-option-row strong,
.menu-v3-option-row small {
  display: block;
}


.menu-v3-option-row strong {
  font-size: 9px;
}


.menu-v3-option-row small {
  margin-top: 2px;

  color: #9ca39d;

  font-size: 7px;
}


.menu-v3-option-row > b {
  font-size: 9px;
}


.menu-v3-no-options {
  padding: 14px;

  background: #fff;

  color: #969d97;

  font-size: 8px;
}


/* ============================================================
   ADD OPTION
============================================================ */

.menu-v3-option-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(130px, .65fr)
    auto;

  align-items: end;

  gap: 8px;

  padding: 12px;

  background: #f8faf8;
}


.menu-v3-option-form label {
  min-width: 0;

  display: grid;

  gap: 5px;
}


.menu-v3-option-form button {
  height: 40px;

  padding: 0 13px;

  border: 1px solid #d9ded9;

  border-radius: 9px;

  background: #fff;

  color: #535c55;

  font-size: 8px;
  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;
}


/* ============================================================
   EMPTY GROUP
============================================================ */

.menu-v3-empty-groups {
  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 24px;

  border: 1px dashed #dce2dd;

  border-radius: 12px;

  background: #fbfcfb;

  text-align: center;
}


.menu-v3-empty-groups > span {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  margin-bottom: 9px;

  border-radius: 10px;

  background: var(--accent-soft);

  color: var(--accent);
}


.menu-v3-empty-groups svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;
}


.menu-v3-empty-groups strong {
  font-size: 10px;
}


.menu-v3-empty-groups p {
  margin: 4px 0 0;

  color: #969d97;

  font-size: 8px;
}


/* ============================================================
   NEW GROUP
============================================================ */

.menu-v3-new-group {
  margin-top: 18px;

  padding-top: 18px;

  border-top: 1px solid #edf0ed;
}


.menu-v3-new-group > div h3 {
  margin: 4px 0 3px;

  font-family: "Manrope";

  font-size: 14px;
}


.menu-v3-new-group > div p {
  margin: 0;

  color: #969d97;

  font-size: 8px;
}


.menu-v3-new-group form {
  margin-top: 12px;

  padding: 13px;

  border: 1px solid #e5e9e5;

  border-radius: 12px;

  background: #fafbfa;
}


.menu-v3-new-group-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    100px
    100px;

  gap: 9px;
}


.menu-v3-new-group-grid label {
  min-width: 0;

  display: grid;

  gap: 5px;
}


.menu-v3-new-group-footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: 12px;
}


.menu-v3-required-switch {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;
}


.menu-v3-required-switch > input {
  position: absolute;

  opacity: 0;
}


.menu-v3-checkbox {
  width: 16px;
  height: 16px;

  display: block;

  flex-shrink: 0;

  border: 1.5px solid #bdc5bf;

  border-radius: 5px;

  background: #fff;
}


.menu-v3-required-switch
input:checked
+ .menu-v3-checkbox {
  border-color: var(--accent);

  background: var(--accent);

  box-shadow:
    inset 0 0 0 4px
    #fff;
}


.menu-v3-required-switch strong,
.menu-v3-required-switch small {
  display: block;
}


.menu-v3-required-switch strong {
  font-size: 8px;
}


.menu-v3-required-switch small {
  margin-top: 2px;

  color: #9ca39d;

  font-size: 7px;
}


/* ============================================================
   CUSTOMER PREVIEW
============================================================ */

.menu-v3-preview {
  padding: 16px;

  border-radius: 16px;
}


.menu-v3-preview-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 13px;
}


.menu-v3-preview-head h3 {
  margin: 4px 0 0;

  font-family: "Manrope";

  font-size: 13px;
}


.menu-v3-preview-live {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: #5d776d;

  font-size: 7px;
  font-weight: 700;
}


.menu-v3-preview-live i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #2e9a72;
}


.menu-v3-preview-card {
  overflow: hidden;

  border: 1px solid #e5e9e5;

  border-radius: 14px;

  background: #fff;
}


.menu-v3-preview-image {
  position: relative;

  height: 190px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #edf2ee,
      #dbe5dd
    );
}


.menu-v3-preview-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.menu-v3-preview-image img[hidden] {
  display: none;
}


.menu-v3-preview-image > span#customer-item-placeholder {
  height: 100%;

  display: grid;

  place-items: center;

  font-family: "Manrope";

  font-size: 25px;

  font-weight: 800;

  color: #647068;
}


.menu-v3-preview-image
> span#customer-item-placeholder[hidden] {
  display: none;
}


.menu-v3-preview-available {
  position: absolute;

  top: 10px;
  left: 10px;

  height: auto !important;

  display: inline-flex !important;

  padding: 5px 7px;

  border-radius: 999px;

  background: rgba(245, 252, 248, .92);

  color: #397e64 !important;

  font-family: "DM Sans" !important;

  font-size: 7px !important;
  font-weight: 800 !important;
}


.menu-v3-preview-product {
  padding: 14px;
}


.menu-v3-preview-product > small {
  color: var(--accent);

  font-size: 7px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .7px;
}


.menu-v3-preview-product h4 {
  margin: 5px 0;

  font-family: "Manrope";

  font-size: 16px;
}


.menu-v3-preview-product p {
  margin: 0;

  color: #8d958f;

  font-size: 8px;

  line-height: 1.5;
}


.menu-v3-preview-product > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 12px;
}


.menu-v3-preview-product > div strong {
  font-size: 12px;
}


.menu-v3-preview-product > div span {
  color: #979e98;

  font-size: 8px;
}


/* ---------- Modifier preview ---------- */

.menu-v3-preview-modifiers {
  padding: 0 14px 14px;

  border-top: 1px solid #edf0ed;
}


.menu-v3-preview-modifier-title {
  padding: 12px 0 8px;

  color: #525b54;

  font-size: 9px;
  font-weight: 800;
}


.menu-v3-preview-group {
  padding: 10px;

  border: 1px solid #e8ece8;

  border-radius: 10px;

  background: #fafbfa;
}


.menu-v3-preview-group + .menu-v3-preview-group {
  margin-top: 8px;
}


.menu-v3-preview-group-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 7px;
}


.menu-v3-preview-group-head strong,
.menu-v3-preview-group-head small {
  display: block;
}


.menu-v3-preview-group-head strong {
  font-size: 8px;
}


.menu-v3-preview-group-head small {
  margin-top: 2px;

  color: #9ca39d;

  font-size: 6px;
}


.menu-v3-preview-group-head > span {
  flex-shrink: 0;

  padding: 3px 5px;

  border-radius: 999px;

  background: var(--accent-soft);

  color: var(--accent);

  font-size: 6px;
  font-weight: 800;
}


.menu-v3-preview-options {
  display: grid;

  gap: 5px;
}


.menu-v3-preview-option {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  min-height: 31px;

  padding: 6px 7px;

  border: 1px solid #edf0ed;

  border-radius: 8px;

  background: #fff;
}


.menu-v3-preview-option > div {
  display: flex;

  align-items: center;

  gap: 7px;
}


.menu-v3-preview-control {
  width: 13px;
  height: 13px;

  display: block;

  border: 1.4px solid #bdc4be;

  background: #fff;
}


.menu-v3-preview-control.radio {
  border-radius: 50%;
}


.menu-v3-preview-control.checkbox {
  border-radius: 4px;
}


.menu-v3-preview-option span {
  font-size: 7px;
}


.menu-v3-preview-option strong {
  font-size: 7px;
}


.menu-v3-preview-no-options {
  margin: 0;

  color: #9ba19c;

  font-size: 7px;
}


.menu-v3-preview-add {
  width: calc(100% - 28px);
  height: 38px;

  margin: 0 14px 14px;

  border: 0;

  border-radius: 9px;

  background: var(--accent);

  color: #fff;

  font-size: 8px;
  font-weight: 800;

  opacity: .85;
}


/* ============================================================
   OPERATIONS
============================================================ */

.menu-v3-operations {
  padding: 17px;

  border-radius: 15px;
}


.menu-v3-operations > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 10px 0;

  border-bottom: 1px solid #edf0ed;
}


.menu-v3-operations > div:last-child {
  border-bottom: 0;
}


.menu-v3-operations > div span {
  color: #919892;

  font-size: 8px;
}


.menu-v3-operations > div strong {
  text-align: right;

  font-size: 8px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1150px) {

  .menu-v3-layout {
    grid-template-columns: 1fr;
  }


  .menu-v3-sidebar {
    position: static;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, .7fr);
  }

}


@media (max-width: 760px) {

  .menu-v3-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .menu-v3-title-line {
    align-items: flex-start;

    flex-direction: column;
  }


  .menu-v3-two-columns {
    grid-template-columns: 1fr;
  }


  .menu-v3-uploader {
    grid-template-columns: 1fr;
  }


  .menu-v3-upload-button {
    justify-content: center;
  }


  .menu-v3-selected-file {
    grid-column: auto;
  }


  .menu-v3-option-form {
    grid-template-columns: 1fr;
  }


  .menu-v3-new-group-grid {
    grid-template-columns: 1fr 1fr;
  }


  .menu-v3-group-name-field {
    grid-column: 1 / -1;
  }


  .menu-v3-sidebar {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 520px) {

  .menu-v3-panel {
    padding: 15px;
  }


  .menu-v3-new-group-grid {
    grid-template-columns: 1fr;
  }


  .menu-v3-group-name-field {
    grid-column: auto;
  }


  .menu-v3-new-group-footer,
  .menu-v3-save-row {
    align-items: stretch;

    flex-direction: column;
  }


  .menu-v3-new-group-footer button,
  .menu-v3-save-row button {
    width: 100%;
  }

}

/* ============================================================
   MENU ITEM V3 — FINAL ALIGNMENT / OVERFLOW FIX
============================================================ */


/* ------------------------------------------------------------
   1. KILL HORIZONTAL PAGE OVERFLOW
------------------------------------------------------------ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


.app-shell,
.main,
.menu-v3-page,
.menu-v3-layout,
.menu-v3-main,
.menu-v3-sidebar,
.menu-v3-panel,
.menu-v3-preview,
.menu-v3-operations {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


/*
The page container must never become wider than the
space remaining beside the sidebar.
*/
.menu-v3-page {
  width: 100%;
  max-width: 100%;
}


/*
Keep the grid columns inside their available width.
*/
.menu-v3-layout {
  width: 100%;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 380px);

  gap: 18px;
}


/*
Prevent long inner content from forcing grid expansion.
*/
.menu-v3-main,
.menu-v3-sidebar {
  width: 100%;
  overflow: hidden;
}


/*
Forms and nested grids must respect their parent width.
*/
.menu-v3-edit-form,
.menu-v3-form-section,
.menu-v3-new-group,
.menu-v3-new-group form,
.menu-v3-group-card,
.menu-v3-option-form,
.menu-v3-uploader,
.menu-v3-selected-file {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


/* ------------------------------------------------------------
   2. TITLE + AVAILABLE BADGE ALIGNMENT
------------------------------------------------------------ */

.menu-v3-title-line {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 8px;
}


.menu-v3-title-line > div {
  min-width: 0;
}


.menu-v3-title-line h1 {
  margin: 0;

  line-height: 1.05;
}


.menu-v3-title-line p {
  margin: 7px 0 0;
}


/*
Badge now aligns visually with the heading baseline area
instead of floating in the middle of the whole title block.
*/
.menu-v3-status {
  margin-top: 6px;

  flex-shrink: 0;

  align-self: flex-start;
}


/* ------------------------------------------------------------
   3. HEADER WIDTH BALANCE
------------------------------------------------------------ */

.menu-v3-header {
  width: 100%;

  align-items: flex-end;
}


.menu-v3-header-copy {
  flex: 1;

  min-width: 0;
}


.menu-v3-header > form {
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   4. IMAGE / UPLOAD SAFETY
------------------------------------------------------------ */

.menu-v3-image-shell,
.menu-v3-image-shell > img,
.menu-v3-uploader {
  max-width: 100%;
}


.menu-v3-image-shell > img {
  object-fit: cover;
}


/* ------------------------------------------------------------
   5. RIGHT PREVIEW MUST NOT FORCE WIDTH
------------------------------------------------------------ */

.menu-v3-preview-card,
.menu-v3-preview-image,
.menu-v3-preview-product,
.menu-v3-preview-modifiers,
.menu-v3-preview-group,
.menu-v3-preview-option {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


.menu-v3-preview-option > div {
  min-width: 0;
}


.menu-v3-preview-option > div > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   6. DESKTOP WIDTH
------------------------------------------------------------ */

@media (min-width: 1200px) {

  .menu-v3-layout {
    grid-template-columns:
      minmax(0, 1fr)
      360px;
  }

}


/* ------------------------------------------------------------
   7. TABLET
------------------------------------------------------------ */

@media (max-width: 1100px) {

  .menu-v3-layout {
    grid-template-columns: 1fr;
  }


  .menu-v3-sidebar {
    overflow: visible;
  }

}


/* ------------------------------------------------------------
   8. SMALL SCREENS
------------------------------------------------------------ */

@media (max-width: 700px) {

  .menu-v3-title-line {
    flex-direction: column;
  }


  .menu-v3-status {
    margin-top: 0;
  }

}

/* ============================================================
   ORDER DETAIL — MODIFIER DISPLAY
============================================================ */

.order-modifiers {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 7px;
}


.order-modifiers > span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 25px;

  padding: 4px 7px;

  border: 1px solid #e4e9e5;
  border-radius: 7px;

  background: #f8faf8;

  color: #6f7771;

  font-size: 8px;
  font-weight: 600;
}


.order-modifier-dot {
  width: 5px;
  height: 5px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--accent);
}


.order-modifiers b {
  color: var(--accent);

  font-size: 8px;
}


.order-modifiers b.included {
  color: #858d87;
}


.order-modifiers b.negative {
  color: #527666;
}

/* ============================================================
   CUSTOMER ORDER STATUS V2
============================================================ */

.order-status-card-v2 {
  width: min(100%, 590px);

  padding: 36px;

  border-radius: 24px;
}


/* ============================================================
   STATUS ICON
============================================================ */

.status-orbit-v2 {
  width: 58px;
  height: 58px;

  margin-bottom: 20px;
}


/* ============================================================
   CONTEXT
============================================================ */

.status-context-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  margin-top: 25px;

  padding: 14px 0;

  border-top: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}


.status-context-row > div small,
.status-context-row > div strong {
  display: block;
}


.status-context-row > div small {
  margin-bottom: 3px;

  color: #9ba19c;

  font-size: 7px;

  letter-spacing: .6px;
}


.status-context-row > div strong {
  font-size: 10px;
}


/* ============================================================
   PROGRESS
============================================================ */

.status-progress-v2 {
  margin: 24px 0 27px;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.status-section-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 10px;
}


.status-section-heading > span {
  color: #767e78;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .7px;
}


.status-section-heading > small {
  color: #9ba19c;

  font-size: 7px;
}


/* ============================================================
   ITEMS
============================================================ */

.order-receipt-items-v2 {
  border-top: 1px solid #edf0ed;
}


.status-order-item {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  padding: 14px 0;

  border-bottom: 1px solid #edf0ed;
}


.status-order-item-main {
  min-width: 0;

  display: flex;

  align-items: flex-start;

  gap: 8px;
}


.status-order-quantity {
  flex-shrink: 0;

  color: var(--restaurant-brand);

  font-size: 9px;
  font-weight: 800;
}


.status-order-item-main strong {
  display: block;

  color: #404842;

  font-size: 10px;
}


.status-order-price {
  flex-shrink: 0;

  font-size: 10px;
}


/* ============================================================
   MODIFIERS
============================================================ */

.status-order-modifiers {
  display: grid;

  gap: 3px;

  margin-top: 5px;
}


.status-order-modifiers > span {
  display: flex;

  align-items: center;

  gap: 4px;

  color: #919992;

  font-size: 7px;
}


.status-order-modifiers > span::before {
  content: "";

  width: 4px;
  height: 4px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--restaurant-brand);
}


.status-order-modifiers b {
  color: var(--restaurant-brand);

  font-size: 7px;
}


.status-order-modifiers b.included {
  color: #929a94;
}


/* ============================================================
   PRICE BREAKDOWN
============================================================ */

.status-price-breakdown {
  padding: 13px 0 0;
}


.status-price-breakdown > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 6px 0;
}


.status-price-breakdown > div span {
  color: #868e88;

  font-size: 8px;
}


.status-price-breakdown > div strong {
  font-size: 9px;
}


.order-receipt-total-v2 {
  margin-top: 7px;

  padding-top: 13px !important;

  border-top: 1px solid #e6eae6;
}


.order-receipt-total-v2 span {
  color: #303732 !important;

  font-size: 11px !important;
  font-weight: 700;
}


.order-receipt-total-v2 strong {
  font-family: "Manrope";

  font-size: 17px !important;
}


/* ============================================================
   CUSTOMER NOTE
============================================================ */

.status-customer-note {
  margin-top: 17px;

  padding: 12px;

  border: 1px solid #e5e9e5;
  border-radius: 10px;

  background: #fafbfa;
}


.status-customer-note small {
  display: block;

  margin-bottom: 5px;

  color: #8d958f;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .6px;
}


.status-customer-note p {
  margin: 0;

  color: #59615b;

  font-size: 8px;

  line-height: 1.5;
}


/* ============================================================
   PAYMENT NOTE
============================================================ */

.status-note-v2 {
  align-items: flex-start;

  margin-top: 18px;
}


.status-note-v2 > div {
  min-width: 0;
}


.status-note-v2 strong {
  display: block;

  margin-bottom: 2px;

  color: #5b645d;

  font-size: 8px;
}


.status-note-v2 p {
  margin: 0;

  line-height: 1.45;
}


/* ============================================================
   AUTO REFRESH
============================================================ */

.status-refresh-note {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-top: 14px;

  color: #9ba19c;

  font-size: 7px;
}


.status-refresh-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--restaurant-brand);

  animation: statusPulse 1.8s ease-in-out infinite;
}


@keyframes statusPulse {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: 1;
  }

}


/* ============================================================
   POWERED
============================================================ */

.status-powered {
  margin-top: 23px;

  text-align: center;

  color: #a0a6a1;

  font-size: 7px;
}


.status-powered strong {
  color: #59615b;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

  .order-status-page {
    padding: 18px;
  }


  .order-status-card-v2 {
    padding: 25px 20px;

    border-radius: 20px;
  }


  .status-context-row {
    grid-template-columns:
      1fr
      1fr;
  }


  .status-context-row > .status-badge {
    grid-column: 1 / -1;

    justify-self: start;
  }

}

/* ============================================================
   KITCHEN V2
============================================================ */

.kds-page-v2 {
  padding: 34px 32px 50px;
}

.accepted-dot {
  background: #8b72e7;
}

.kds-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 18px;
}

.kds-filter-bar > div {
  display: flex;
  align-items: center;

  gap: 8px;
}

.kds-filter-bar > div > span {
  color: #819089;
  font-size: 8px;
  font-weight: 800;
}

.kds-filter-bar select {
  height: 34px;

  padding: 0 30px 0 10px;

  border: 1px solid #303833;
  border-radius: 8px;

  background: #191e1b;
  color: #d9e2dc;

  font-size: 8px;
}

.kds-filter-bar > a {
  color: #77cdb2;

  font-size: 8px;
  font-weight: 800;

  text-decoration: none;
}


.ticket-grid-v2 {
  align-items: start;
}

.ticket-v2 {
  min-width: 0;
}

.ticket-table-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.ticket-table-v2 > div {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}

.ticket-table-v2 small {
  display: block;

  margin-top: 2px;

  color: #77827b;

  font-size: 7px;
}

.ticket-table-icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 8px;

  background: #222924;

  color: #8b9990;
}


.ticket-items-v2 {
  display: grid;

  gap: 0;
}

.kds-item {
  display: flex;

  gap: 10px;

  padding: 12px 0;

  border-bottom: 1px solid #2b322e;
}

.kds-item:last-child {
  border-bottom: 0;
}

.kds-item-qty {
  width: 28px;

  flex-shrink: 0;

  color: #f3f7f4;

  font-size: 15px;
  font-weight: 800;
}

.kds-item > div {
  min-width: 0;
}

.kds-item > div > strong {
  display: block;

  color: #f4f7f5;

  font-size: 11px;
}

.kds-item-modifiers {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 6px;
}

.kds-item-modifiers span {
  padding: 4px 6px;

  border: 1px solid #354139;
  border-radius: 6px;

  background: #202722;

  color: #aab6ae;

  font-size: 7px;
}

.kds-item-note {
  margin: 7px 0 0;

  color: #d9b982;

  font-size: 8px;
}


.kds-order-note {
  margin: 4px 0 13px;

  padding: 10px;

  border: 1px solid #3b382f;
  border-radius: 9px;

  background: #24221c;
}

.kds-order-note > span {
  color: #d3b475;

  font-size: 7px;
  font-weight: 800;
}

.kds-order-note p {
  margin: 4px 0 0;

  color: #d3cbb9;

  font-size: 8px;
}


.kds-handoff {
  display: flex;
  align-items: center;

  gap: 9px;

  padding: 10px;

  border: 1px solid #245a48;
  border-radius: 9px;

  background: #173329;
}

.kds-handoff > span {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 7px;

  background: #20503f;

  color: #73d2ae;
}

.kds-handoff strong {
  display: block;

  color: #e0eee8;

  font-size: 8px;
}

.kds-handoff p {
  margin: 2px 0 0;

  color: #8eaaa0;

  font-size: 7px;
}


/* ============================================================
   SERVICE BOARD
============================================================ */

.service-board-page {
  padding: 34px 36px 50px;
}


.service-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 25px;

  margin-bottom: 25px;
}

.service-board-head h1 {
  margin: 8px 0 4px;

  font-family: "Manrope";
  font-size: 30px;

  letter-spacing: -1px;
}

.service-board-head p {
  margin: 0;

  color: #8b938d;

  font-size: 10px;
}


.service-board-stats {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}

.service-board-stats > span {
  min-height: 31px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 0 9px;

  border: 1px solid var(--line);
  border-radius: 999px;

  background: #fff;

  color: #778079;

  font-size: 8px;
}

.service-board-stats i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.service-board-stats i.waiting {
  background: #d99a31;
}

.service-board-stats i.assigned {
  background: #567de7;
}

.service-board-stats i.moving {
  background: #20a379;
}

.service-live i {
  background: #20a379;
}


.service-task-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(315px, 1fr)
    );

  align-items: start;

  gap: 14px;
}


.service-task-card {
  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 15px;

  background: #fff;
}


.service-task-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  padding: 16px;

  border-bottom: 1px solid #edf0ed;
}

.service-task-kicker {
  color: var(--accent);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .7px;
}

.service-task-top h2 {
  margin: 4px 0 0;

  font-family: "Manrope";

  font-size: 17px;
}

.service-task-age {
  color: #909791;

  font-size: 8px;
}


.service-destination {
  display: flex;
  align-items: center;

  gap: 9px;

  padding: 13px 16px;

  background: #fafbfa;
}

.service-destination-icon {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 9px;

  background: var(--accent-soft);

  color: var(--accent);

  font-size: 10px;
  font-weight: 800;
}

.service-destination strong,
.service-destination small {
  display: block;
}

.service-destination strong {
  font-size: 10px;
}

.service-destination small {
  margin-top: 2px;

  color: #929993;

  font-size: 7px;
}


.service-task-items {
  display: grid;

  gap: 0;

  padding: 4px 16px;
}

.service-task-items > div {
  display: flex;

  gap: 8px;

  padding: 10px 0;

  border-bottom: 1px solid #edf0ed;
}

.service-task-items > div:last-child {
  border-bottom: 0;
}

.service-task-items > div > b {
  color: var(--accent);

  font-size: 9px;
}

.service-task-items strong {
  display: block;

  font-size: 9px;
}

.service-task-items small {
  display: block;

  margin-top: 3px;

  color: #929993;

  font-size: 7px;
}


.service-assignee {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 4px 16px 12px;

  padding: 9px;

  border: 1px solid #e7ebe7;
  border-radius: 9px;

  background: #fafbfa;
}

.service-assignee-avatar {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: #e8efeb;

  color: #52635b;

  font-size: 9px;
  font-weight: 800;
}

.service-assignee small,
.service-assignee strong {
  display: block;
}

.service-assignee small {
  color: #969d97;

  font-size: 7px;
}

.service-assignee strong {
  margin-top: 2px;

  font-size: 8px;
}


.service-task-actions {
  padding: 13px 16px 16px;

  border-top: 1px solid #edf0ed;
}


.service-assign-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 7px;
}

.service-assign-form select {
  min-width: 0;
  height: 38px;

  padding: 0 9px;

  border: 1px solid var(--line);
  border-radius: 9px;

  background: #fff;

  font-size: 8px;
}

.service-assign-form button,
.service-primary,
.service-deliver {
  height: 38px;

  border: 0;
  border-radius: 9px;

  background: var(--accent);

  color: #fff;

  font-size: 8px;
  font-weight: 800;

  cursor: pointer;
}

.service-assign-form button {
  padding: 0 14px;
}

.service-primary,
.service-deliver {
  width: 100%;
}

.service-deliver {
  background: #176f59;
}


.service-empty {
  grid-column: 1 / -1;

  min-height: 300px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border: 1px dashed #dde3de;
  border-radius: 15px;

  background: #fbfcfb;

  text-align: center;
}

.service-empty > span {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  margin-bottom: 10px;

  border-radius: 11px;

  background: var(--accent-soft);

  color: var(--accent);
}

.service-empty h2 {
  margin: 0;

  font-family: "Manrope";

  font-size: 14px;
}

.service-empty p {
  max-width: 330px;

  margin: 5px 0 0;

  color: #929993;

  font-size: 8px;
}


@media (max-width: 760px) {

  .service-board-page {
    padding: 24px 18px 40px;
  }

  .service-board-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-task-grid {
    grid-template-columns: 1fr;
  }

  .service-assign-form {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   BASE SHELL V2
============================================================ */


/* ============================================================
   WORKSPACE CHIP
============================================================ */

.workspace-chip-v2 {
  width: calc(100% - 20px);

  min-height: 58px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    20px;

  align-items: center;

  gap: 9px;

  margin: 10px;

  padding: 9px;

  border: 1px solid #252c28;
  border-radius: 12px;

  background: #151a17;

  color: inherit;

  text-align: left;

  cursor: default;

  box-sizing: border-box;
}


.workspace-chip-v2:hover {
  background: #181e1a;
}


.workspace-chip-copy {
  min-width: 0;
}


.workspace-chip-copy small,
.workspace-chip-copy strong {
  display: block;
}


.workspace-chip-copy small {
  color: #6f7b74;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: .7px;

  text-transform: uppercase;
}


.workspace-chip-copy strong {
  overflow: hidden;

  margin-top: 2px;

  color: #f2f5f3;

  font-size: 10px;
  font-weight: 700;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.workspace-chip-chevron {
  display: grid;
  place-items: center;

  color: #66736b;
}


.workspace-chip-chevron svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   NAV LABELS
============================================================ */

.nav-label {
  letter-spacing: 1.2px;
}


/* ============================================================
   DISABLED NAV
============================================================ */

.nav-item.disabled {
  opacity: .42;

  cursor: default;

  pointer-events: none;
}


.nav-item .soon {
  margin-left: auto;

  padding: 3px 6px;

  border: 1px solid #303732;
  border-radius: 999px;

  color: #657068;

  font-size: 6px;

  text-transform: uppercase;

  letter-spacing: .4px;
}


/* ============================================================
   ADMIN LINK
============================================================ */

.admin-link {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;
}


.admin-link svg {
  width: 12px;
  height: 12px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   USER
============================================================ */

.user-block-v2 {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr)
    30px;

  align-items: center;

  gap: 9px;
}


.user-block-v2 form {
  margin: 0;
}


.user-logout-button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 8px;

  background: transparent;

  color: #728078;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}


.user-logout-button:hover {
  border-color: #2a332e;

  background: #1a211d;

  color: #d8e0db;
}


.user-logout-button svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


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

.topbar-v2 {
  display: flex;

  align-items: center;
  justify-content: space-between;
}


.topbar-left {
  display: flex;

  align-items: center;

  gap: 10px;
}


.topbar-v2 .topbar-button,
.topbar-v2 .round-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;
}


.topbar-v2 .topbar-button {
  gap: 7px;
}


.topbar-v2 .topbar-button svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.topbar-v2 .round-button svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.mobile-menu svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 900px) {

  .topbar-button kbd {
    display: none;
  }

}


@media (max-width: 620px) {

  .topbar-button > span {
    display: none;
  }

}

/* ============================================================
   TEAM MANAGEMENT
============================================================ */

.team-page,
.team-form-page {
  width: 100%;
  max-width: 1440px;

  margin: 0 auto;
}


/* ============================================================
   PAGE HEADER
============================================================ */

.team-page-head,
.team-form-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;
}


.team-page-head h1,
.team-form-head h1 {
  margin: 8px 0 4px;

  font-family: "Manrope";

  font-size: 32px;

  letter-spacing: -1.1px;
}


.team-page-head p,
.team-form-head p {
  max-width: 700px;

  margin: 0;

  color: #858e87;

  font-size: 10px;

  line-height: 1.5;
}


.team-back-link {
  display: inline-block;

  margin-bottom: 9px;

  color: #7d857f;

  font-size: 8px;
  font-weight: 700;

  text-decoration: none;
}


/* ============================================================
   STAT CARDS
============================================================ */

.team-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 18px;
}


.team-stat-card {
  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

  padding: 18px;

  border: 1px solid var(--line);
  border-radius: 14px;

  background: #fff;
}


.team-stat-icon {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 11px;
}


.team-stat-icon svg {
  width: 17px;
  height: 17px;
}


.team-stat-icon.teal {
  background: #e5f4ef;
  color: #16876f;
}


.team-stat-icon.green {
  background: #e7f7ef;
  color: #24966f;
}


.team-stat-icon.blue {
  background: #e9effd;
  color: #5279df;
}


.team-stat-icon.amber {
  background: #fff2da;
  color: #c78a24;
}


.team-stat-icon.green svg,
.team-stat-icon.blue svg {
  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.team-stat-icon.teal svg,
.team-stat-icon.amber svg {
  fill: currentColor;
}


.team-stat-card small,
.team-stat-card strong,
.team-stat-card span {
  display: block;
}


.team-stat-card small {
  color: #6f7871;

  font-size: 8px;
}


.team-stat-card strong {
  margin-top: 2px;

  font-family: "Manrope";

  font-size: 21px;
}


.team-stat-card > div > span {
  margin-top: 2px;

  color: #a0a6a1;

  font-size: 7px;
}


/* ============================================================
   DIRECTORY
============================================================ */

.team-directory-panel {
  overflow: hidden;

  padding: 0;

  border-radius: 16px;
}


.team-directory-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 18px;

  padding: 20px;
}


.team-directory-head h2 {
  margin: 4px 0 0;

  font-family: "Manrope";

  font-size: 16px;
}


.team-filter-form {
  display: flex;

  align-items: center;

  gap: 7px;
}


.team-filter-form select,
.team-filter-form button,
.team-search {
  height: 38px;

  border: 1px solid var(--line);
  border-radius: 9px;

  background: #fff;
}


.team-search {
  width: 220px;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 0 10px;
}


.team-search svg {
  width: 13px;
  height: 13px;

  flex-shrink: 0;

  fill: none;

  stroke: #8f9791;

  stroke-width: 1.7;
}


.team-search input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  font-size: 8px;
}


.team-filter-form select {
  min-width: 125px;

  padding: 0 9px;

  color: #5d665f;

  font-size: 8px;
}


.team-filter-form button {
  padding: 0 13px;

  color: #505851;

  font-size: 8px;
  font-weight: 800;

  cursor: pointer;
}


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

.team-table-wrap {
  overflow-x: auto;

  border-top: 1px solid var(--line);
}


.team-table {
  width: 100%;

  border-collapse: collapse;
}


.team-table th {
  padding: 10px 20px;

  background: #fbfcfb;

  color: #969d97;

  font-size: 7px;
  font-weight: 800;

  text-align: left;

  text-transform: uppercase;

  letter-spacing: .65px;
}


.team-table td {
  padding: 14px 20px;

  border-top: 1px solid #edf0ed;

  vertical-align: middle;

  font-size: 8px;
}


.team-member-cell {
  display: flex;

  align-items: center;

  gap: 9px;
}


.team-member-avatar {
  width: 33px;
  height: 33px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 9px;

  background: #edf2ee;

  color: #59665e;

  font-size: 10px;
  font-weight: 800;
}


.team-member-cell strong,
.team-member-cell small {
  display: block;
}


.team-member-cell strong {
  font-size: 9px;
}


.team-member-cell small {
  margin-top: 2px;

  color: #959c96;

  font-size: 7px;
}


.team-role-badge {
  display: inline-flex;

  padding: 5px 7px;

  border-radius: 999px;

  background: #eff2ef;

  color: #657068;

  font-size: 7px;
  font-weight: 800;
}


.team-role-badge.role-owner {
  background: #f0ecfc;

  color: #6e56bc;
}


.team-role-badge.role-manager {
  background: #e8eefc;

  color: #5271c4;
}


.team-role-badge.role-kitchen {
  background: #fff0dd;

  color: #a96f20;
}


.team-role-badge.role-runner,
.team-role-badge.role-waiter {
  background: #e7f5ef;

  color: #377f63;
}


.team-role-badge.role-cashier {
  background: #e9f0f7;

  color: #55758f;
}


.team-branch-list {
  display: flex;

  flex-wrap: wrap;

  gap: 4px;
}


.team-branch-list span,
.team-all-branches {
  display: inline-flex;

  padding: 4px 6px;

  border: 1px solid #e5e9e5;
  border-radius: 6px;

  background: #fafbfa;

  color: #707972;

  font-size: 7px;
}


.team-status {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 7px;
  font-weight: 700;
}


.team-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;
}


.team-status.active {
  color: #397e64;
}


.team-status.active i {
  background: #2e9a72;
}


.team-status.inactive {
  color: #8c938d;
}


.team-status.inactive i {
  background: #a5aaa6;
}


.team-muted {
  color: #929993;
}


.team-row-actions {
  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 8px;
}


.team-row-actions a,
.team-row-actions button {
  border: 0;

  background: transparent;

  color: var(--accent);

  font-size: 7px;
  font-weight: 800;

  text-decoration: none;

  cursor: pointer;
}


.team-row-actions button.danger-text {
  color: #a86666;
}


.team-row-actions form {
  margin: 0;
}


.team-empty {
  min-height: 250px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}


.team-empty > span {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  margin-bottom: 8px;

  border-radius: 10px;

  background: var(--accent-soft);

  color: var(--accent);
}


.team-empty strong {
  font-size: 10px;
}


.team-empty p {
  margin: 4px 0 0;

  color: #969d97;

  font-size: 8px;
}


/* ============================================================
   MEMBER FORM
============================================================ */

.team-form-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    300px;

  align-items: start;

  gap: 16px;
}


.team-form-panel {
  padding: 22px;

  border-radius: 16px;
}


.team-form-panel > form {
  display: grid;

  gap: 0;
}


.team-form-section {
  padding: 20px 0;

  border-bottom: 1px solid #edf0ed;
}


.team-form-section:first-child {
  padding-top: 0;
}


.team-form-section h2 {
  margin: 4px 0;

  font-family: "Manrope";

  font-size: 16px;
}


.team-form-section > p {
  margin: 0 0 15px;

  color: #949b95;

  font-size: 8px;
}


.team-form-section label {
  display: grid;

  gap: 5px;

  margin-bottom: 11px;
}


.team-form-section label > span:first-child {
  color: #5d665f;

  font-size: 8px;
  font-weight: 800;
}


.team-form-section input[type="text"],
.team-form-section input[type="email"] {
  width: 100%;
  height: 41px;

  padding: 0 10px;

  border: 1px solid var(--line);
  border-radius: 9px;

  outline: 0;

  background: #fff;

  box-sizing: border-box;

  font-size: 9px;
}


.team-form-section input:focus {
  border-color: #9ac8b9;

  box-shadow:
    0 0 0 3px
    rgba(22, 125, 107, .07);
}


.team-form-section label > small {
  color: #9ba19c;

  font-size: 7px;
}


.team-form-two {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


/* ============================================================
   ROLE OPTIONS
============================================================ */

.team-role-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}


.team-role-option,
.team-branch-option {
  position: relative;

  display: flex !important;

  align-items: flex-start;

  gap: 9px !important;

  min-width: 0;

  margin: 0 !important;

  padding: 12px;

  border: 1px solid #e3e8e4;
  border-radius: 10px;

  background: #fbfcfb;

  cursor: pointer;
}


.team-role-option > input,
.team-branch-option > input {
  position: absolute;

  opacity: 0;
}


.team-role-radio {
  width: 15px;
  height: 15px;

  flex-shrink: 0;

  border: 1.5px solid #bdc5bf;
  border-radius: 50%;

  background: #fff;
}


.team-role-option input:checked
+ .team-role-radio {
  border-color: var(--accent);

  box-shadow:
    inset 0 0 0 4px
    #fff;

  background: var(--accent);
}


.team-role-option:has(input:checked),
.team-branch-option:has(input:checked) {
  border-color: #9ecdbd;

  background: #f4faf7;
}


.team-role-option strong,
.team-role-option small,
.team-branch-option strong,
.team-branch-option small {
  display: block;
}


.team-role-option strong,
.team-branch-option strong {
  font-size: 9px;
}


.team-role-option small,
.team-branch-option small {
  margin-top: 2px;

  color: #929993;

  font-size: 7px;

  line-height: 1.4;
}


/* ============================================================
   BRANCH OPTIONS
============================================================ */

.team-branch-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}


.team-branch-check {
  width: 15px;
  height: 15px;

  flex-shrink: 0;

  border: 1.5px solid #bdc5bf;
  border-radius: 4px;

  background: #fff;
}


.team-branch-option input:checked
+ .team-branch-check {
  border-color: var(--accent);

  background: var(--accent);

  box-shadow:
    inset 0 0 0 4px
    #fff;
}


.team-no-branches {
  grid-column: 1 / -1;

  padding: 15px;

  border: 1px dashed #dfe4df;
  border-radius: 10px;

  color: #929993;

  font-size: 8px;
}


/* ============================================================
   FORM ACTIONS
============================================================ */

.team-form-actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  padding-top: 18px;
}


/* ============================================================
   FORM SIDEBAR
============================================================ */

.team-form-side {
  display: grid;

  gap: 12px;
}


.team-access-note,
.team-invite-note {
  padding: 18px;

  border-radius: 15px;
}


.team-access-note h3,
.team-invite-note h3 {
  margin: 5px 0;

  font-family: "Manrope";

  font-size: 13px;
}


.team-access-note > p,
.team-invite-note > p {
  color: #8e9690;

  font-size: 8px;

  line-height: 1.55;
}


.team-access-note > div {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  padding: 10px 0;

  border-top: 1px solid #edf0ed;
}


.team-access-note > div > span {
  width: 24px;
  height: 24px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 7px;

  background: var(--accent-soft);

  color: var(--accent);

  font-size: 8px;
  font-weight: 800;
}


.team-access-note > div p {
  margin: 0;

  color: #7f8781;

  font-size: 8px;
}


.team-access-note > div strong {
  color: #515a53;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

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


  .team-directory-head {
    align-items: stretch;

    flex-direction: column;
  }


  .team-filter-form {
    flex-wrap: wrap;
  }


  .team-form-layout {
    grid-template-columns: 1fr;
  }


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

}


@media (max-width: 700px) {

  .team-page-head,
  .team-form-head {
    align-items: flex-start;

    flex-direction: column;
  }


  .team-stat-grid,
  .team-role-grid,
  .team-branch-grid,
  .team-form-two,
  .team-form-side {
    grid-template-columns: 1fr;
  }


  .team-search {
    width: 100%;
  }


  .team-filter-form select,
  .team-filter-form button {
    flex: 1;
  }

}

/* ============================================================
   TEAM METRIC ICONS — CONSISTENT SVG SYSTEM
============================================================ */

.team-stat-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex: 0 0 40px;

  border-radius: 11px;
}


.team-stat-icon svg {
  width: 17px;
  height: 17px;

  display: block;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

  overflow: visible;
}


.team-stat-icon.teal {
  background: #e5f4ef;
  color: #16876f;
}


.team-stat-icon.green {
  background: #e7f7ef;
  color: #24966f;
}


.team-stat-icon.blue {
  background: #e9effd;
  color: #5279df;
}


.team-stat-icon.amber {
  background: #fff2da;
  color: #c78a24;
}

/* ============================================================
   TEAM METRIC ICONS — FINAL OVERRIDE
   KEEP THIS AT THE VERY BOTTOM OF app.css
============================================================ */

.team-stat-card .team-stat-icon {
  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;
  min-height: 42px !important;

  flex: 0 0 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 12px !important;

  line-height: 1 !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}


/* SVG itself */

.team-stat-card .team-stat-icon svg {
  width: 18px !important;
  height: 18px !important;

  min-width: 18px !important;
  min-height: 18px !important;

  display: block !important;

  position: static !important;

  inset: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 1.8 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  overflow: visible !important;
}


/* Kill any inherited fill rules */

.team-stat-card .team-stat-icon svg path,
.team-stat-card .team-stat-icon svg circle,
.team-stat-card .team-stat-icon svg rect {
  fill: none !important;

  stroke: currentColor !important;

  vector-effect: non-scaling-stroke;
}


/* Individual tones */

.team-stat-card .team-stat-icon.teal {
  background: #e4f3ee !important;
  color: #178b72 !important;
}

.team-stat-card .team-stat-icon.green {
  background: #e5f5ed !important;
  color: #20946d !important;
}

.team-stat-card .team-stat-icon.blue {
  background: #e9effd !important;
  color: #5579df !important;
}

.team-stat-card .team-stat-icon.amber {
  background: #fff1d8 !important;
  color: #c9871d !important;
}


/* Card alignment */

.team-stat-card {
  display: flex !important;

  align-items: center !important;

  gap: 13px !important;
}


.team-stat-card > div {
  min-width: 0;
}

.service-assign-form button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ============================================================
   PREMIUM WORKSPACE SWITCHER
============================================================ */

.workspace-switcher {
  position: relative;
  margin: 10px 10px 12px;
}

.workspace-trigger {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #263029;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 65%),
    #151a17;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 6px 18px rgba(0,0,0,.08);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.workspace-trigger:hover {
  border-color: #324039;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 65%),
    #181f1b;
}

.workspace-switcher.open .workspace-trigger {
  border-color: rgba(56,175,146,.46);
  background:
    linear-gradient(180deg, rgba(56,175,146,.055), transparent 70%),
    #18201c;
  box-shadow:
    inset 0 0 0 1px rgba(56,175,146,.06),
    0 8px 24px rgba(0,0,0,.12);
}

.workspace-avatar-premium {
  width: 36px;
  height: 36px;
  border: 1px solid #313b35;
  border-radius: 10px;
  background:
    linear-gradient(145deg, #27302a, #1d241f);
  color: #f3f7f4;
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.workspace-trigger-copy {
  min-width: 0;
}

.workspace-trigger-copy small,
.workspace-trigger-copy strong,
.workspace-trigger-copy > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-trigger-copy small {
  color: #748078;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.workspace-trigger-copy strong {
  margin-top: 2px;
  color: #f5f7f5;
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: -.15px;
}

.workspace-trigger-copy > span {
  margin-top: 2px;
  color: #66736b;
  font-size: 7px;
  font-weight: 600;
}

.workspace-trigger-chevron {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #68756d;
  transition:
    transform .2s ease,
    background .18s ease,
    color .18s ease;
}

.workspace-trigger:hover .workspace-trigger-chevron {
  background: #202822;
  color: #95a199;
}

.workspace-switcher.open .workspace-trigger-chevron {
  transform: rotate(180deg);
  background: #202a24;
  color: #9eb0a5;
}

.workspace-trigger-chevron svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-popover[hidden] {
  display: none;
}

.workspace-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  width: 100%;
  padding: 8px;
  border: 1px solid #2a342e;
  border-radius: 14px;
  background: #151a17;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);
  transform-origin: top center;
  animation: workspace-popover-in .16s ease-out;
}

@keyframes workspace-popover-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.workspace-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 7px 9px;
}

.workspace-popover-head small,
.workspace-popover-head strong {
  display: block;
}

.workspace-popover-head small {
  color: #68746d;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.workspace-popover-head strong {
  margin-top: 3px;
  color: #e9eeeb;
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.workspace-branch-count {
  flex-shrink: 0;
  padding: 4px 6px;
  border: 1px solid #29332d;
  border-radius: 999px;
  background: #1a211d;
  color: #718078;
  font-size: 6px;
  font-weight: 700;
}

.workspace-option-list {
  display: grid;
  gap: 3px;
}

.workspace-option-form {
  margin: 0;
}

.workspace-option {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #b8c1bb;
  text-align: left;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.workspace-option:hover {
  border-color: #28322c;
  background: #1a211d;
  color: #f2f5f3;
}

.workspace-option.active {
  border-color: rgba(56,175,146,.18);
  background:
    linear-gradient(90deg, rgba(56,175,146,.10), rgba(56,175,146,.025));
  color: #f4f7f5;
}

.workspace-option-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #2b352f;
  border-radius: 9px;
  background: #202722;
  color: #849087;
  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 800;
}

.workspace-option.active .workspace-option-icon {
  border-color: rgba(56,175,146,.28);
  background: rgba(56,175,146,.10);
  color: #58c0a5;
}

.all-branches-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.workspace-option-copy {
  min-width: 0;
}

.workspace-option-copy strong,
.workspace-option-copy small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-option-copy strong {
  color: inherit;
  font-size: 9px;
  font-weight: 700;
}

.workspace-option-copy small {
  margin-top: 3px;
  color: #657169;
  font-size: 7px;
  font-weight: 500;
}

.workspace-option-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: transparent;
}

.workspace-option.active .workspace-option-check {
  background: rgba(56,175,146,.12);
  color: #4ab496;
}

.workspace-option-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-popover-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 7px 2px;
  border-top: 1px solid #232c27;
  color: #5f6b64;
  font-size: 6.5px;
  font-weight: 600;
}

.workspace-foot-dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #38af92;
  box-shadow: 0 0 0 3px rgba(56,175,146,.08);
}

@media (max-width: 900px) {
  .workspace-popover {
    width: min(280px, calc(100vw - 32px));
  }
}

/* ============================================================
   STAFF INVITATIONS & ONBOARDING V1
============================================================ */

.team-invitation-panel {
  margin-bottom: 18px;
  overflow: hidden;
}

.team-section-copy {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.team-invite-list {
  border-top: 1px solid var(--line);
}

.team-invite-row {
  display: grid;
  grid-template-columns:
    minmax(190px, 1.2fr)
    minmax(100px, .55fr)
    minmax(150px, 1fr)
    minmax(110px, .65fr)
    auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid #edf0ed;
}

.team-invite-row:first-child {
  border-top: 0;
}

.team-invite-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.team-invite-main strong,
.team-invite-main small {
  display: block;
}

.team-invite-main strong {
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-invite-main small {
  margin-top: 2px;
  overflow: hidden;
  color: #959c96;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-invite-status {
  display: inline-flex;
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 800;
}

.team-invite-status.status-pending {
  background: var(--amber-soft);
  color: #946b25;
}

.team-invite-status.status-accepted {
  background: var(--green-soft);
  color: #397e64;
}

.team-invite-status.status-expired,
.team-invite-status.status-revoked {
  background: #f0f2f0;
  color: #777f79;
}

.team-expiry {
  display: block;
  margin-top: 4px;
  color: #9ba19c;
  font-size: 7px;
}

.team-invite-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.team-invite-actions form {
  margin: 0;
}

.team-invite-actions button,
.team-copy-link {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #59635c;
  font-size: 7px;
  font-weight: 800;
  cursor: pointer;
}

.team-invite-actions .team-copy-link {
  border-color: #cfe5dc;
  background: #f2faf7;
  color: var(--accent);
}

.team-invite-actions button.danger-text {
  color: #a86666;
}

.team-accept-shell {
  min-height: calc(100vh - 66px);
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.team-accept-card {
  width: min(100%, 520px);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
}

.team-accept-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.team-accept-brand > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #1e9d85, #116554);
  color: #fff;
  font-family: "Manrope";
  font-weight: 800;
}

.team-accept-brand strong,
.team-accept-brand small {
  display: block;
}

.team-accept-brand strong {
  font-family: "Manrope";
  font-size: 14px;
}

.team-accept-brand small {
  margin-top: 1px;
  color: #909791;
  font-size: 8px;
}

.team-accept-kicker {
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.team-accept-card h1 {
  margin: 8px 0 8px;
  font-family: "Manrope";
  font-size: 28px;
  letter-spacing: -1px;
}

.team-accept-card > p {
  margin: 0;
  color: #7f8781;
  font-size: 10px;
  line-height: 1.6;
}

.team-accept-scope {
  margin: 20px 0;
  padding: 14px;
  border: 1px solid #e7ece8;
  border-radius: 11px;
  background: #fafbfa;
}

.team-accept-scope > small {
  display: block;
  margin-bottom: 8px;
  color: #8f9791;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.team-accept-form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.team-accept-form label {
  display: grid;
  gap: 6px;
}

.team-accept-form label > span {
  color: #5d665f;
  font-size: 8px;
  font-weight: 800;
}

.team-accept-form input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: #fff;
  font-size: 9px;
}

.team-accept-form input:focus {
  border-color: #9ac8b9;
  box-shadow: 0 0 0 3px rgba(22,125,107,.07);
}

.team-accept-button {
  width: 100%;
  margin-top: 4px;
}

.team-existing-account-note {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid #eadfc7;
  border-radius: 11px;
  background: #fffaf0;
}

.team-existing-account-note.success {
  border-color: #d4eadf;
  background: #f3faf6;
}

.team-existing-account-note strong {
  font-size: 9px;
}

.team-existing-account-note p {
  margin: 4px 0 0;
  color: #7f8781;
  font-size: 8px;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .team-invite-row {
    grid-template-columns: minmax(180px, 1fr) minmax(120px, .7fr) auto;
  }

  .team-invite-row > :nth-child(3) {
    grid-column: 1 / 2;
  }

  .team-invite-row > :nth-child(4) {
    grid-column: 2 / 3;
  }

  .team-invite-row > :nth-child(5) {
    grid-column: 3 / 4;
  }
}

@media (max-width: 700px) {
  .team-invite-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .team-invite-row > :nth-child(3),
  .team-invite-row > :nth-child(4),
  .team-invite-row > :nth-child(5) {
    grid-column: auto;
  }

  .team-invite-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .team-accept-card {
    padding: 24px 20px;
  }
}


/* ============================================================
   CUSTOMER PAYMENT DETAILS
============================================================ */

.customer-payment-card {
  margin: 24px 0;
  padding: 18px;
  border: 1px solid rgba(22, 125, 107, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(22, 125, 107, 0.055), rgba(255,255,255,0.96));
}

.customer-payment-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.customer-payment-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--restaurant-brand, var(--accent));
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.customer-payment-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--restaurant-brand, var(--accent));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.customer-payment-head h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  letter-spacing: -0.4px;
}

.customer-payment-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.customer-payment-amount {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #111412;
  color: #fff;
}

.customer-payment-amount small {
  color: #98a29b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.9px;
}

.customer-payment-amount strong {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
}

.customer-bank-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.customer-bank-details > div {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.customer-bank-details > div:last-child {
  border-bottom: 0;
}

.customer-bank-details small,
.customer-bank-details strong {
  display: block;
}

.customer-bank-details small {
  margin-bottom: 3px;
  color: #939b95;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.customer-bank-details strong {
  font-size: 12px;
}

.customer-account-number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.customer-account-number-row > span strong {
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  letter-spacing: 1.1px;
}

.customer-copy-account {
  min-width: 72px;
  min-height: 34px;
  border: 1px solid var(--restaurant-brand, var(--accent));
  border-radius: 9px;
  background: var(--restaurant-brand, var(--accent));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.customer-copy-account.copied {
  opacity: 0.75;
}

.customer-payment-note {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 11px;
  background: #f7f8f7;
}

.customer-payment-note strong {
  font-size: 10px;
}

.customer-payment-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.customer-payment-safety {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: #7e8781;
  font-size: 9px;
  line-height: 1.5;
}

.customer-payment-safety span {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--restaurant-brand, var(--accent));
}

.customer-payment-safety p {
  margin: 0;
}


/* ============================================================
   COMMAND SEARCH
============================================================ */

body.command-open {
  overflow: hidden;
}

.serviq-command[hidden] {
  display: none !important;
}

.serviq-command {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: start center;
  padding-top: min(14vh, 120px);
}

.serviq-command-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 10, 9, 0.52);
  backdrop-filter: blur(4px);
  cursor: default;
}

.serviq-command-panel {
  position: relative;
  width: min(calc(100% - 32px), 620px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.24);
}

.serviq-command-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
}

.serviq-command-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
}

.serviq-command-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.serviq-command-search kbd,
.topbar-button kbd {
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  font-family: inherit;
  font-size: 8px;
  padding: 3px 5px;
}

.serviq-command-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 7px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.serviq-command-results {
  display: grid;
  gap: 3px;
  max-height: min(56vh, 440px);
  overflow: auto;
  padding: 4px 8px 10px;
}

.serviq-command-results a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
}

.serviq-command-results a:hover,
.serviq-command-results a:focus {
  outline: 0;
  background: var(--accent-soft);
}

.serviq-command-results a[hidden] {
  display: none;
}

.serviq-command-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.serviq-command-results strong,
.serviq-command-results small {
  display: block;
}

.serviq-command-results strong {
  font-size: 11px;
}

.serviq-command-results small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.serviq-command-empty {
  padding: 28px 18px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}


/* ============================================================
   DARK APPEARANCE
============================================================ */

html[data-theme="dark"] {
  --bg: #0f1210;
  --panel: #151916;
  --panel-soft: #191e1a;
  --text: #eef2ef;
  --muted: #9ba59e;
  --muted-2: #778179;
  --line: #29302b;
  --accent-soft: #172821;
}

html[data-theme="dark"] body {
  color-scheme: dark;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-tabs,
html[data-theme="dark"] .settings-savebar,
html[data-theme="dark"] .payments-panel,
html[data-theme="dark"] .team-panel,
html[data-theme="dark"] .notification-popover {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .topbar-button,
html[data-theme="dark"] .round-button,
html[data-theme="dark"] .settings-field input,
html[data-theme="dark"] .settings-field select,
html[data-theme="dark"] .settings-field textarea,
html[data-theme="dark"] .settings-secondary-button {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--text);
}

html[data-theme="dark"] .settings-toggle-row,
html[data-theme="dark"] .settings-payment-preview,
html[data-theme="dark"] .settings-inherit-note {
  border-color: var(--line);
  background: var(--panel-soft);
}

html[data-theme="dark"] .customer-bank-details {
  border-color: var(--line);
  background: var(--panel);
}

html[data-theme="dark"] .customer-payment-card {
  background: linear-gradient(180deg, rgba(22,125,107,.12), var(--panel));
}

html[data-theme="dark"] .customer-payment-note {
  background: var(--panel-soft);
}

@media (max-width: 700px) {
  .serviq-command {
    padding-top: 72px;
  }

  .customer-account-number-row {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-copy-account {
    width: 100%;
  }
}

/* ============================================================
   SERVIQ DARK THEME — COMPLETE APPLICATION LAYER
   Loaded after all page-specific styles.
============================================================ */

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d100e;
  --panel: #151916;
  --panel-soft: #191e1a;
  --text: #edf2ee;
  --muted: #9aa49d;
  --muted-2: #78827b;
  --line: #2a332d;

  --nav: #0b0e0c;
  --nav-2: #131713;
  --nav-text: #cdd4cf;

  --accent: #2aae91;
  --accent-dark: #19836d;
  --accent-soft: #183129;

  --green-soft: #183226;
  --blue-soft: #192844;
  --violet-soft: #2a2441;
  --amber-soft: #392d18;
  --danger-soft: #391e1e;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .full-main {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .sidebar {
  background: #0a0d0b;
  border-right-color: #1c231f;
}

html[data-theme="dark"] .topbar {
  border-color: var(--line);
  background: rgba(13, 16, 14, .96);
}

html[data-theme="dark"] :is(
  h1, h2, h3, h4, strong, b
) {
  color: var(--text);
}

html[data-theme="dark"] :is(
  .breadcrumb,
  .breadcrumb a,
  .page-subtitle,
  .topbar-context,
  .muted,
  .settings-card p
) {
  color: var(--muted);
}

/* ------------------------------------------------------------
   Shared white surfaces
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .metric-card,
  .flow-card,
  .recent-orders,
  .order-summary-card,
  .orders-workspace-panel,
  .orders-table-shell,
  .table-summary-card,
  .tables-workspace-panel,
  .restaurant-table-card,
  .menu-summary-card,
  .menu-management-card,
  .service-task-card,
  .service-empty,
  .team-stat-card,
  .team-invitations-panel,
  .team-directory-panel,
  .team-form-section,
  .analytics-kpis,
  .analytics-panel,
  .analytics-filter,
  .analytics-workspace-pill,
  .payments-panel,
  .payments-summary-grid article,
  .payments-export-button,
  .settings-card,
  .settings-tabs,
  .settings-savebar,
  .notification-popover,
  .secondary-button,
  .segmented button.selected,
  .preview-food-card,
  .customer-order-card,
  .order-status-card,
  .order-summary-card,
  .cancellation-record,
  .table-menu-button,
  .table-dropdown,
  .table-action-button,
  .table-action-icon,
  .serviq-modal-card,
  .modal-close-button,
  .modifier-option,
  .customer-modifier-group,
  .menu-v3-option-row,
  .menu-v3-no-options,
  .menu-v3-preview-card,
  .menu-v3-preview-option,
  .menu-v3-preview-control,
  .team-role-radio,
  .team-branch-check,
  .team-accept-card,
  .team-existing-account-note
) {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--text);
}

/* ------------------------------------------------------------
   Inputs / selects / controls
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  input,
  select,
  textarea
) {
  color-scheme: dark;
}

html[data-theme="dark"] :is(
  .orders-filter-form select,
  .orders-filter-form input,
  .payment-confirm-form select,
  .payment-confirm-form input,
  .order-danger-zone textarea,
  .tables-filter-form select,
  .tables-filter-form input,
  .serviq-form input,
  .serviq-form select,
  .serviq-form textarea,
  .menu-filter-form input,
  .menu-filter-form select,
  .menu-edit-form input,
  .menu-edit-form textarea,
  .menu-edit-form select,
  .menu-v3-field input,
  .menu-v3-field textarea,
  .menu-v3-field select,
  .menu-v3-new-group input,
  .menu-v3-option-form input,
  .service-assign-form select,
  .team-filter-form select,
  .team-filter-form button,
  .team-search,
  .team-form-section input[type="text"],
  .team-form-section input[type="email"],
  .team-accept-form input,
  .payments-filter-form input,
  .payments-filter-form select,
  .analytics-custom-range input,
  .settings-field input,
  .settings-field select,
  .settings-field textarea
) {
  border-color: #323b35 !important;
  background: #111512 !important;
  color: var(--text) !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: #68736b;
}

/* ------------------------------------------------------------
   Topbar buttons
------------------------------------------------------------ */

html[data-theme="dark"] .topbar-button,
html[data-theme="dark"] .round-button {
  border-color: #303a33;
  background: #141915;
  color: #e3eae5;
}

html[data-theme="dark"] .topbar-button:hover,
html[data-theme="dark"] .round-button:hover {
  border-color: #425047;
  background: #1c231e;
}

/* ------------------------------------------------------------
   Dashboard
------------------------------------------------------------ */

html[data-theme="dark"] .flow-ring {
  background: conic-gradient(var(--accent) var(--progress, 0%), #28312b 0);
}

html[data-theme="dark"] .flow-ring::after {
  background: var(--panel) !important;
}

html[data-theme="dark"] :is(
  .recent-orders-head,
  .recent-order-row
) {
  border-color: var(--line);
}

html[data-theme="dark"] .recent-orders-head {
  background: #191e1a !important;
}

/* ------------------------------------------------------------
   Service board
------------------------------------------------------------ */

html[data-theme="dark"] .service-board-stats > span {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--text);
}

html[data-theme="dark"] .service-empty {
  min-height: 260px;
  background:
    linear-gradient(180deg, #151a16 0%, #121613 100%) !important;
}

html[data-theme="dark"] .service-empty :is(h2, p) {
  color: var(--text);
}

html[data-theme="dark"] .service-empty p {
  color: var(--muted);
}

/* ------------------------------------------------------------
   Orders
------------------------------------------------------------ */

html[data-theme="dark"] .orders-table-head {
  border-color: var(--line);
  background: #191e1a !important;
  color: #89948d;
}

html[data-theme="dark"] .order-row {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

html[data-theme="dark"] .order-row:hover {
  background: #181d19 !important;
}

html[data-theme="dark"] .row-actions button {
  border-color: #344039;
  background: #111512 !important;
  color: #dfe7e1;
}

/* ------------------------------------------------------------
   Tables & QR
------------------------------------------------------------ */

html[data-theme="dark"] .restaurant-table-card {
  background: #151a16 !important;
}

html[data-theme="dark"] :is(
  .table-stat-cell,
  .table-qr-panel
) {
  border-color: #29332c !important;
  background: #111512 !important;
}

html[data-theme="dark"] .table-dropdown {
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

/* ------------------------------------------------------------
   Menu
------------------------------------------------------------ */

html[data-theme="dark"] .menu-management-card {
  background: #151a16 !important;
}

html[data-theme="dark"] .menu-card-actions :is(a, button),
html[data-theme="dark"] .menu-v3-option-form button {
  border-color: #364139 !important;
  background: #111512 !important;
  color: #e0e7e2 !important;
}

html[data-theme="dark"] :is(
  .menu-card-meta,
  .modifier-option,
  .menu-v3-option-row,
  .menu-v3-no-options,
  .menu-v3-preview-option,
  .menu-v3-preview-control
) {
  border-color: var(--line) !important;
  background: #111512 !important;
}

html[data-theme="dark"] :is(
  .upload-button,
  .premium-upload-button,
  .menu-v3-upload-button
) {
  border-color: #354038 !important;
  background: #161b17 !important;
  color: #e0e7e2 !important;
}

/* ------------------------------------------------------------
   Team
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .team-invite-row,
  .team-directory-head,
  .team-directory-row
) {
  border-color: var(--line);
}

html[data-theme="dark"] .team-directory-head {
  background: #191e1a !important;
}

html[data-theme="dark"] :is(
  .team-role-radio,
  .team-branch-check
) {
  background: #111512 !important;
}

html[data-theme="dark"] :is(
  .team-invite-actions button,
  .team-copy-link
) {
  border-color: #354038 !important;
  background: #111512 !important;
  color: #dfe7e1 !important;
}

/* ------------------------------------------------------------
   Analytics
------------------------------------------------------------ */

html[data-theme="dark"] .analytics-presets {
  background: #111512;
}

html[data-theme="dark"] .analytics-presets button {
  color: #919b94;
}

html[data-theme="dark"] .analytics-presets button.active {
  background: #232a25 !important;
  color: #f0f4f1;
  box-shadow: none;
}

html[data-theme="dark"] .analytics-gridline {
  stroke: #29322c;
}

html[data-theme="dark"] .analytics-revenue-dot {
  fill: var(--panel);
}

html[data-theme="dark"] :is(
  .analytics-progress,
  .analytics-hour-bar,
  .analytics-branch-bar
) {
  background: #29322c;
}

html[data-theme="dark"] .analytics-table th {
  border-color: var(--line);
  background: #191e1a !important;
  color: #8d9790;
}

html[data-theme="dark"] :is(
  .analytics-table td,
  .analytics-branch-row
) {
  border-color: var(--line);
}

html[data-theme="dark"] .analytics-ops-grid > div {
  border-color: var(--line);
  background: #111512 !important;
}

/* ------------------------------------------------------------
   Payments
------------------------------------------------------------ */

html[data-theme="dark"] .payments-policy-strip {
  border-color: #29463b;
  background: #14261f !important;
}

html[data-theme="dark"] .payments-summary-grid article.attention {
  border-color: #51462f !important;
  background: #211c13 !important;
}

html[data-theme="dark"] .payments-period-tabs {
  border-color: var(--line);
  background: #111512;
}

html[data-theme="dark"] .payments-period-tabs a.active {
  background: #232a25 !important;
  box-shadow: none;
}

html[data-theme="dark"] :is(
  .payments-ledger,
  .payments-ledger-row,
  .payments-pagination
) {
  border-color: var(--line);
}

html[data-theme="dark"] .payments-ledger-head {
  background: #191e1a !important;
  color: #8d9790;
}

html[data-theme="dark"] .payments-ledger-row a {
  color: #dce5df;
}

html[data-theme="dark"] .payments-method-chip {
  background: #252d27;
  color: #bec8c1;
}

html[data-theme="dark"] .payments-method-bar {
  background: #29322c;
}

/* ------------------------------------------------------------
   Settings
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .settings-scope-badge,
  .settings-count-pill,
  .settings-secondary-button
) {
  border-color: var(--line);
  background: var(--panel-soft) !important;
  color: #bbc4bd;
}

html[data-theme="dark"] :is(
  .settings-toggle-row,
  .settings-payment-preview,
  .settings-inherit-note
) {
  border-color: var(--line);
  background: #111512 !important;
}

/* ------------------------------------------------------------
   Search command palette
------------------------------------------------------------ */

body.command-open {
  overflow: hidden;
}

.serviq-command[hidden] {
  display: none !important;
}

.serviq-command {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: start center;
  padding-top: min(13vh, 118px);
}

.serviq-command-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 6, 5, .62);
  backdrop-filter: blur(6px);
  cursor: default;
}

.serviq-command-panel {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), 620px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--panel);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .34);
}

.serviq-command-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.serviq-command-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
}

.serviq-command-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 14px;
}

.serviq-command-search kbd {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  font-family: inherit;
  font-size: 8px;
}

.serviq-command-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 7px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.serviq-command-results {
  display: grid;
  gap: 3px;
  max-height: min(58vh, 460px);
  overflow: auto;
  padding: 4px 8px 10px;
}

.serviq-command-results a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
}

.serviq-command-results a:hover,
.serviq-command-results a:focus {
  outline: 0;
  background: var(--accent-soft);
}

.serviq-command-results a[hidden] {
  display: none;
}

.serviq-command-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.serviq-command-results strong,
.serviq-command-results small {
  display: block;
}

.serviq-command-results strong {
  font-size: 11px;
}

.serviq-command-results small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.serviq-command-empty {
  padding: 28px 18px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

@media (max-width: 700px) {
  .serviq-command {
    padding-top: 70px;
  }
}

/* ============================================================
   V3 DARK REFINEMENT
   Dark mode should be tonal, not "black page + white islands".
   Remove bright panel fills and high-contrast separators while
   preserving QR readability and useful status colours.
============================================================ */

html[data-theme="dark"] {
  --dark-surface-0: #0d100e;
  --dark-surface-1: #121613;
  --dark-surface-2: #161b17;
  --dark-surface-3: #1b211d;
  --dark-line: rgba(236, 244, 239, 0.075);
  --dark-line-soft: rgba(236, 244, 239, 0.045);
  --dark-text-soft: #a0aaa3;
}

/* ---------- Remove stark white KPI / table surfaces ---------- */

html[data-theme="dark"] :is(
  .signal-strip,
  .order-summary-card,
  .orders-workspace-panel,
  .table-summary-card,
  .tables-workspace-panel,
  .menu-summary-card,
  .team-stat-card,
  .team-invitations-panel,
  .team-directory-panel,
  .analytics-kpis,
  .analytics-panel,
  .analytics-filter,
  .payments-panel,
  .payments-summary-grid article
) {
  background: var(--dark-surface-1) !important;
  border-color: var(--dark-line) !important;
  box-shadow: none !important;
}

/* Dashboard KPI dividers */
html[data-theme="dark"] .signal-item:not(:last-child)::after {
  background: var(--dark-line) !important;
}

/* Selected segmented controls should never turn white */
html[data-theme="dark"] .segmented button.selected {
  background: var(--dark-surface-3) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* Dashboard ring centre */
html[data-theme="dark"] .flow-ring::after {
  background: var(--dark-surface-1) !important;
}

/* ---------- Dashboard recent orders ---------- */

html[data-theme="dark"] :is(
  .recent-orders-head,
  .orders-master-head,
  .team-directory-head,
  .payments-ledger-head,
  .analytics-table th
) {
  background: var(--dark-surface-2) !important;
  color: #87928a !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .recent-order-row,
  .orders-master-row,
  .team-directory-row,
  .team-invite-row,
  .payments-ledger-row,
  .analytics-table td,
  .analytics-branch-row
) {
  border-color: var(--dark-line-soft) !important;
}

html[data-theme="dark"] :is(
  .recent-order-row,
  .orders-master-row,
  .team-directory-row,
  .team-invite-row,
  .payments-ledger-row
):hover {
  background: var(--dark-surface-2) !important;
}

/* ---------- Buttons that were rendered as white blocks ---------- */

html[data-theme="dark"] :is(
  .secondary-button,
  .row-more,
  .orders-filter-button,
  .tables-filter-button,
  .menu-filter-button,
  .team-filter-form button,
  .payments-export-button,
  .settings-secondary-button,
  .table-card-actions a,
  .table-card-actions button,
  .menu-card-actions a,
  .menu-card-actions button,
  .team-invite-actions button,
  .team-copy-link
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: #cbd4ce !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .secondary-button,
  .row-more,
  .orders-filter-button,
  .tables-filter-button,
  .menu-filter-button,
  .team-filter-form button,
  .payments-export-button,
  .settings-secondary-button,
  .table-card-actions a,
  .table-card-actions button,
  .menu-card-actions a,
  .menu-card-actions button,
  .team-invite-actions button,
  .team-copy-link
):hover {
  background: var(--dark-surface-3) !important;
  border-color: rgba(236, 244, 239, 0.12) !important;
}

/* ---------- Form controls ---------- */

html[data-theme="dark"] :is(
  .orders-filter-form input,
  .orders-filter-form select,
  .tables-filter-form input,
  .tables-filter-form select,
  .menu-filter-form input,
  .menu-filter-form select,
  .team-filter-form select,
  .team-search,
  .payments-filter-form input,
  .payments-filter-form select,
  .analytics-custom-range input,
  .settings-field input,
  .settings-field select,
  .settings-field textarea
) {
  background: #101411 !important;
  border-color: var(--dark-line) !important;
  color: #dce4df !important;
  box-shadow: none !important;
}

/* ---------- Tables & QR ---------- */

html[data-theme="dark"] .restaurant-table-card {
  background: var(--dark-surface-1) !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .table-stat-cell,
  .table-card-meta > span
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line-soft) !important;
  color: #d7dfda !important;
}

/*
QR itself remains black-on-white for reliable scanning.
Only its container is darkened.
*/
html[data-theme="dark"] .table-qr-preview {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .table-card-menu,
  .table-action-button,
  .table-action-icon
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: #cdd6d0 !important;
}

/* ---------- Menu ---------- */

html[data-theme="dark"] .menu-management-card {
  background: var(--dark-surface-1) !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] .menu-card-image {
  background: var(--dark-surface-3) !important;
}

html[data-theme="dark"] .menu-card-image > span:not(.menu-availability-pill) {
  background: #222a24 !important;
  color: #aeb8b1 !important;
}

html[data-theme="dark"] .menu-card-meta > span {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line-soft) !important;
}

html[data-theme="dark"] :is(
  .menu-edit-form input,
  .menu-edit-form textarea,
  .menu-edit-form select,
  .serviq-form textarea,
  .menu-v3-field input,
  .menu-v3-field textarea,
  .menu-v3-field select,
  .menu-v3-new-group input,
  .menu-v3-option-form input
) {
  background: #101411 !important;
  border-color: var(--dark-line) !important;
  color: #dce4df !important;
}

/* ---------- Team ---------- */

html[data-theme="dark"] :is(
  .team-role-radio,
  .team-branch-check
) {
  background: var(--dark-surface-2) !important;
  border-color: rgba(236, 244, 239, 0.18) !important;
}

html[data-theme="dark"] .team-directory-head {
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .team-member-avatar,
  .team-invite-avatar
) {
  background: #202720 !important;
  color: #cbd4ce !important;
}

/* ---------- Analytics ---------- */

html[data-theme="dark"] :is(
  .analytics-soft-pill,
  .analytics-workspace-pill
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: #bdc7c0 !important;
}

html[data-theme="dark"] .analytics-kpi:not(:last-child)::after {
  background: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .analytics-progress,
  .analytics-hour-bar,
  .analytics-branch-bar
) {
  background: #232b25 !important;
}

html[data-theme="dark"] .analytics-gridline {
  stroke: rgba(236, 244, 239, 0.075) !important;
}

html[data-theme="dark"] .analytics-ops-grid > div {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

/*
Some analytics builds include inline period-summary boxes.
Make every direct summary-like child tonal instead of white.
*/
html[data-theme="dark"] .analytics-trend-panel :is(
  .analytics-trend-summary,
  .analytics-period-summary,
  .analytics-chart-summary,
  .analytics-summary-card
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: var(--text) !important;
}

/* ---------- Payments ---------- */

html[data-theme="dark"] .payments-policy-strip {
  background: #12221c !important;
  border-color: rgba(42, 174, 145, 0.16) !important;
}

html[data-theme="dark"] .payments-summary-grid article.attention {
  background: #201b12 !important;
  border-color: rgba(201, 135, 32, 0.2) !important;
}

html[data-theme="dark"] :is(
  .payments-method-chip,
  .payments-period-tabs
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Settings ---------- */

html[data-theme="dark"] :is(
  .settings-toggle-row,
  .settings-payment-preview,
  .settings-inherit-note
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Status pills ---------- */

html[data-theme="dark"] :is(
  .status-badge,
  .order-status-pill,
  .table-state-pill,
  .menu-availability-pill,
  .team-role-badge,
  .team-invite-status,
  .payments-method-chip,
  .payments-reconciled,
  .payments-unreconciled
) {
  box-shadow: none !important;
}

/* Avoid white completed/neutral pills */
html[data-theme="dark"] :is(
  .status-completed,
  .order-status-completed,
  .status-neutral
) {
  background: #222923 !important;
  color: #cbd4ce !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Global separator softening ---------- */

html[data-theme="dark"] .main :is(
  hr,
  .divider,
  .section-divider
) {
  border-color: var(--dark-line) !important;
  background: var(--dark-line) !important;
}

/* Remove glow/shadow language from dark mode */
html[data-theme="dark"] .main :is(
  .signal-strip,
  .flow-card,
  .recent-orders,
  .orders-workspace-panel,
  .orders-table-shell,
  .tables-workspace-panel,
  .restaurant-table-card,
  .menu-management-card,
  .team-invitations-panel,
  .team-directory-panel,
  .analytics-panel,
  .payments-panel,
  .settings-card
) {
  box-shadow: none !important;
}

/* Search palette stays deliberately layered, but not outlined brightly */
html[data-theme="dark"] .serviq-command-panel {
  background: #141915 !important;
  border-color: rgba(236, 244, 239, 0.1) !important;
}

html[data-theme="dark"] .serviq-command-search {
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] .serviq-command-results a:hover,
html[data-theme="dark"] .serviq-command-results a:focus {
  background: #1a2a24 !important;
}
/* ============================================================
   V4 — EXACT INNER-SURFACE OVERRIDES
   These selectors target the remaining light-mode components
   that live inside app.css / page CSS rather than only the
   outer panels.
============================================================ */

/* ------------------------------------------------------------
   DASHBOARD — recent orders / QR quick list
------------------------------------------------------------ */

html[data-theme="dark"] .orders-table {
  color: var(--text);
}

html[data-theme="dark"] .orders-table thead th {
  background: #171c18 !important;
  color: #87928a !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .orders-table tbody td {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .055) !important;
  color: #dce4df;
}

html[data-theme="dark"] .orders-table tbody tr:hover td {
  background: #171c18 !important;
}

html[data-theme="dark"] .qr-mini-row {
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .table-cube {
  background: #202720 !important;
  color: #dbe4de !important;
  border-color: rgba(236, 244, 239, .08) !important;
}

html[data-theme="dark"] .text-button {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .07) !important;
  color: #a9b3ac !important;
}


/* ------------------------------------------------------------
   ORDER DETAIL
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .order-detail-panel,
  .order-side-card
) {
  background: #121613 !important;
  border-color: rgba(236, 244, 239, .075) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .order-line-item {
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] :is(
  .order-line-quantity,
  .order-item-count
) {
  background: #202720 !important;
  border-color: rgba(236, 244, 239, .08) !important;
  color: #dce5df !important;
}

html[data-theme="dark"] .order-total-breakdown {
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .order-total-breakdown > div {
  border-color: rgba(236, 244, 239, .045) !important;
}

html[data-theme="dark"] .payment-summary {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .07) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .payment-summary > div {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .payment-summary :is(span, small) {
  color: #8f9a92 !important;
}

html[data-theme="dark"] .payment-summary strong {
  color: #edf3ef !important;
}

html[data-theme="dark"] .payment-confirm-form :is(select, input) {
  background: #0f1310 !important;
  border-color: rgba(236, 244, 239, .09) !important;
  color: #dce4df !important;
}

html[data-theme="dark"] .customer-order-note {
  background: #171c18 !important;
  border-color: rgba(42, 174, 145, .22) !important;
  color: #d7e0da !important;
}

html[data-theme="dark"] .cancellation-meta span {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .07) !important;
}


/* ------------------------------------------------------------
   TABLES & QR — metadata cards were explicitly white in app.css
------------------------------------------------------------ */

html[data-theme="dark"] .table-meta-grid > div {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .065) !important;
  color: #dce4df !important;
}

html[data-theme="dark"] .table-meta-grid small {
  color: #7f8a82 !important;
}

html[data-theme="dark"] .table-meta-grid strong {
  color: #dce4df !important;
}

html[data-theme="dark"] .table-number-mark {
  background: #202720 !important;
  border-color: rgba(236, 244, 239, .08) !important;
  color: #dce5df !important;
}

html[data-theme="dark"] .table-qr-preview {
  background: #151a16 !important;
  border-color: rgba(236, 244, 239, .07) !important;
}

/* Keep only the actual QR graphic high contrast for scanning. */
html[data-theme="dark"] .mini-qr {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, .94) !important;
}

html[data-theme="dark"] .mini-qr svg {
  color: #111412 !important;
  fill: #111412 !important;
}


/* ------------------------------------------------------------
   TEAM DIRECTORY — exact table selectors
------------------------------------------------------------ */

html[data-theme="dark"] .team-table {
  color: var(--text);
}

html[data-theme="dark"] .team-table thead th {
  background: #171c18 !important;
  color: #87928a !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .team-table tbody td {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .055) !important;
  color: #dce4df !important;
}

html[data-theme="dark"] .team-table tbody tr:hover td {
  background: #171c18 !important;
}

html[data-theme="dark"] .team-branch-list > span {
  background: #202720 !important;
  border-color: rgba(236, 244, 239, .08) !important;
  color: #cbd5ce !important;
}

html[data-theme="dark"] .team-all-branches {
  background: #202720 !important;
  color: #cbd5ce !important;
}


/* ------------------------------------------------------------
   ANALYTICS — remaining inner metric cards
------------------------------------------------------------ */

/*
The current analytics build has an extra metric strip inside the
trend panel in some template versions. Target its direct inner
cards without affecting the chart container.
*/
html[data-theme="dark"] .analytics-trend-panel
  > div:not(.analytics-panel-head):not(.analytics-chart-shell)
  > div {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .065) !important;
  color: #dce4df !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .analytics-trend-panel
  > div:not(.analytics-panel-head):not(.analytics-chart-shell)
  > div :is(small, span, p) {
  color: #87928a !important;
}

html[data-theme="dark"] .analytics-trend-panel
  > div:not(.analytics-panel-head):not(.analytics-chart-shell)
  > div strong {
  color: #e9f0eb !important;
}

html[data-theme="dark"] .analytics-soft-pill {
  background: #1a201c !important;
  border-color: rgba(236, 244, 239, .075) !important;
  color: #c4cec7 !important;
}

html[data-theme="dark"] .analytics-table thead th {
  background: #171c18 !important;
  color: #87928a !important;
}

html[data-theme="dark"] .analytics-table tbody td {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .05) !important;
}


/* ------------------------------------------------------------
   PAYMENTS — inner ledger surfaces
------------------------------------------------------------ */

html[data-theme="dark"] .payments-ledger-head {
  background: #171c18 !important;
  color: #87928a !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .payments-ledger-row {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .05) !important;
}

html[data-theme="dark"] .payments-ledger-row:hover {
  background: #171c18 !important;
}

html[data-theme="dark"] .payments-method-chip {
  background: #202720 !important;
  color: #c5cfc8 !important;
}


/* ------------------------------------------------------------
   GLOBAL DARK-MODE SEPARATOR TUNING
------------------------------------------------------------ */

html[data-theme="dark"] .main :is(
  .panel,
  .signal-strip,
  .order-summary-card,
  .table-summary-card,
  .menu-summary-card,
  .team-stat-card,
  .analytics-kpis,
  .analytics-panel,
  .payments-panel,
  .settings-card
) {
  border-color: rgba(236, 244, 239, .075) !important;
}

html[data-theme="dark"] .main table :is(th, td) {
  border-color: rgba(236, 244, 239, .05);
}

html[data-theme="dark"] .main :is(
  .panel-head,
  .tables-toolbar,
  .team-directory-head,
  .payments-panel-head
) {
  border-color: rgba(236, 244, 239, .055) !important;
}

/* World-class dark mode should not use bright white outlines. */
html[data-theme="dark"] .main * {
  --shadow: none;
}