/* ============================================================
   ADNOC Talabati — Global Portal
   style.css — tokens → reset → base → layout → components
   Ported 1:1 from the ADNOC Talabati Design System bundles.
   ============================================================ */

/* ---------------- Fonts (ADNOC Sans — only typeface) ---------------- */
@font-face { font-family: "ADNOC Sans"; src: url("../assets/fonts/ADNOCSans-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; ascent-override: 96%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "ADNOC Sans"; src: url("../assets/fonts/ADNOCSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 96%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "ADNOC Sans"; src: url("../assets/fonts/ADNOCSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 96%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "ADNOC Sans"; src: url("../assets/fonts/ADNOCSans-Medium.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; ascent-override: 96%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "ADNOC Sans"; src: url("../assets/fonts/ADNOCSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 96%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "ADNOC Sans"; src: url("../assets/fonts/ADNOCSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; ascent-override: 96%; descent-override: 24.6%; line-gap-override: 0%; }

/* ---------------- Design tokens ---------------- */
:root {
  /* Brand */
  --adnoc-blue: #0047BA;
  --adnoc-blue-deep: #002E6D;
  --talabati-orange: #FF6A00;
  --accent-lime: #CDFF71;

  /* Primary interactive blue */
  --primary-blue: #2388FF;
  --primary-blue-600: #0047BA;
  --blue-100: #E3EFFF;
  --blue-200: #C3DDFF;
  --blue-300: #8DC1FF;
  --blue-400: #4E9FFF;
  --blue-tint: #D7E0FF;

  /* Neutrals */
  --neutral-0: #FFFFFF;
  --neutral-50: #F8FAFF;
  --neutral-100: #F1F3F7;
  --neutral-150: #ECECEC;
  --neutral-200: #E1E4ED;
  --neutral-300: #DBDBDB;
  --neutral-400: #A7A8A9;
  --neutral-500: #818285;
  --neutral-600: #5C5C5E;
  --neutral-700: #353E5C;
  --neutral-800: #19213D;
  --neutral-900: #020202;

  /* Semantic state */
  --success: #00953B;
  --success-strong: #1A8B4A;
  --warning: #EAB300;
  --danger: #CA170C;
  --danger-deep: #AB0A3D;
  --info: #009ADE;

  /* Chart series */
  --chart-1: #AB3FD5;
  --chart-2: #C9B400;
  --chart-3: #0047BA;
  --chart-4: #00953B;
  --chart-5: #FF6F61;
  --chart-indigo: #4147D5;
  --chart-navy: #16182F;

  /* Typography */
  --font-sans: "ADNOC Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-xbold: 800;

  /* Spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 50px; --space-10: 64px;

  /* Radius */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(62,72,84,0.05);
  --shadow-sm: 0 2px 8px rgba(62,72,84,0.06);
  --shadow-md: 0 6px 20px rgba(62,72,84,0.08);
  --shadow-lg: 0 12px 32px rgba(62,72,84,0.10);
  --shadow-card: 0 4px 16px rgba(62,72,84,0.06);

  /* Layout */
  --sidebar-width: 280px;
  --topbar-height: 84px;
  --bottombar-height: 76px;

  /* Portal theme (rp-*) — matches the Figma portal look */
  --rp-primary: #0047BA;
  --rp-primary-bright: #2388FF;
  --rp-primary-dark: #002E6D;
  --rp-primary-tint: #E3EFFF;
  --rp-orange: #FF6A00;
  --rp-gold: #84754E;
  --rp-silver: #8A8D8F;
  --rp-bg: #F1F2F4;
  --rp-sidebar: #F1F2F4;
  --rp-card: #FFFFFF;
  --rp-text: #19213D;
  --rp-text-2: #6B7280;
  --rp-border: #E1E4ED;
  --rp-green: #00953B;
  --rp-amber: #EAB300;
  --rp-orange-s: #F59E0B;
  --rp-red: #CA170C;
  --rp-purple: #7C3AED;
  --rp-cyan: #0091B5;

  /* Tone palette used by badges / icon buttons */
  --c-red: #CA170C; --c-amber: #EAB300; --c-orange: #F59E0B; --c-blue: #0047BA;
  --c-green: #00953B; --c-purple: #7C3AED; --c-cyan: #0091B5; --c-grey: #8A8D8F; --c-gold: #84754E;

  --focus-ring: var(--primary-blue);
}

/* ---------------- Reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--rp-text);
  background: var(--rp-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; white-space: nowrap; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d3d7e0; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes rp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.rp-pulse { animation: rp-pulse 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------- Typographic helpers ---------------- */
.rp-h1 { font-size: 24px; font-weight: 700; color: var(--rp-text); letter-spacing: -0.01em; }
.rp-h2 { font-size: 18px; font-weight: 700; color: var(--rp-text); }
.rp-sub { font-size: 13px; color: var(--rp-text-2); }
.rp-muted { color: var(--rp-text-2); }

/* ============================================================
   LAYOUT — app frame: sidebar + header + main
   ============================================================ */
.portal-layout { display: flex; min-height: 100svh; }

/* ---------------- Sidebar ---------------- */
.site-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  height: 100svh;
  position: sticky;
  top: 0;
  background: var(--rp-sidebar);
  border-right: 1px solid var(--rp-border);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px 24px;
  z-index: 40;
}
.site-sidebar .brand-lockup { padding: 4px 6px 0; }

.main-nav { flex: 1; overflow-y: auto; margin-top: 34px; padding-right: 8px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.main-nav a {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 18px; border-radius: var(--radius-md);
  background: transparent; text-decoration: none;
  font-size: 16px; font-weight: 500; color: var(--rp-text-2);
  transition: background .15s ease;
}
.main-nav a:hover { background: rgba(255,255,255,.6); text-decoration: none; }
.main-nav a svg { color: var(--rp-text-2); flex-shrink: 0; }
.main-nav a .nav-label { flex: 1; }
.main-nav li.current-menu-item a,
.main-nav a.active {
  background: var(--rp-card); box-shadow: var(--shadow-sm);
  font-weight: 600; color: var(--rp-text);
}
.main-nav li.current-menu-item a svg,
.main-nav a.active svg { color: var(--primary-blue); }

/* Brand lockup — "Powered by / Talabati" + falcon */
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.brand-lockup .brand-words { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.brand-lockup .brand-powered {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--talabati-orange); color: #fff; font-weight: 700; font-size: 10px;
  line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em;
}
.brand-lockup .brand-name { font-weight: 700; font-size: 18px; line-height: 1; color: var(--talabati-orange); }
.brand-lockup .brand-falcon { color: var(--adnoc-blue); }

/* ---------------- Header ---------------- */
.site-header {
  height: var(--topbar-height); flex-shrink: 0; background: var(--rp-bg);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 28px; position: sticky; top: 0; z-index: 30;
}
.site-header .header-search {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px;
  border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-sm);
  flex: 1; max-width: 480px;
}
.site-header .header-search svg { color: var(--rp-text-2); flex-shrink: 0; }
.site-header .header-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; color: var(--rp-text); min-width: 0; }
.site-header .header-actions { display: flex; align-items: center; gap: 16px; }
.site-header .header-bell {
  position: relative; width: 48px; height: 48px; border-radius: 50%; border: none;
  background: #fff; cursor: pointer; color: var(--rp-text);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(62,72,84,0.08);
}
.site-header .header-bell .bell-dot {
  position: absolute; top: 11px; right: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rp-red); box-shadow: 0 0 0 2px #fff;
}
.site-header .header-avatar {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0;
  background: linear-gradient(135deg, #2388FF, #0047BA); color: #fff; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(62,72,84,0.16);
}
.header-bell-wrap { position: relative; }
.notif-dropdown {
  position: absolute; right: 0; top: 56px; width: 300px; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(62,72,84,.16); overflow: hidden; z-index: 50; display: none;
}
.notif-dropdown.open { display: block; }
.notif-dropdown .notif-title { padding: 14px 16px; border-bottom: 1px solid var(--rp-border); font-weight: 700; font-size: 14px; }
.notif-dropdown .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--rp-border); }
.notif-dropdown .notif-item:last-child { border-bottom: none; }
.notif-dropdown .notif-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--rp-text); }
.notif-dropdown .notif-item span { display: block; font-size: 12px; color: var(--rp-text-2); margin-top: 2px; }

/* ---------------- Main content column ---------------- */
.site-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-content { padding: 24px 28px 56px; flex: 1; }

/* Page heading row */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.page-head .page-sub { font-size: 13px; color: var(--rp-text-2); margin-top: 4px; }
.page-head .page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Section header inside cards */
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-header .section-sub { margin-top: 4px; }

/* ---------------- Bottom tab bar (mobile only — hidden on desktop) ---------------- */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottombar-height);
  background: #fff; border-top: 1px solid var(--rp-border); z-index: 60;
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav ul { list-style: none; display: flex; margin: 0; padding: 0; width: 100%; }
.bottom-nav li { flex: 1; }
.bottom-nav a, .bottom-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; height: 100%; border: none; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--rp-text-2); text-decoration: none;
}
.bottom-nav a.active { color: var(--rp-primary); }
.bottom-nav a.active svg { color: var(--rp-primary); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------------- Cards ---------------- */
.rp-card { background: var(--rp-card); border-radius: 16px; box-shadow: var(--shadow-card); }
.card-pad { padding: 20px; }
.card-grid { display: grid; gap: 18px; }

/* KPI card */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.kpi-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-card {
  text-align: left; cursor: default; background: #fff; border: 1px solid transparent;
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, border-color .15s; width: 100%;
}
button.kpi-card { cursor: pointer; }
.kpi-card.active { border-color: var(--rp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-primary) 16%, transparent); }
.kpi-card .kpi-top { display: flex; align-items: center; gap: 9px; }
.kpi-card .kpi-top svg { color: var(--rp-primary); flex-shrink: 0; }
.kpi-card .kpi-label { font-size: 14px; font-weight: 500; color: var(--rp-text); white-space: normal; }
.kpi-card .kpi-line { display: flex; align-items: baseline; gap: 8px; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; color: var(--rp-text); line-height: 1; letter-spacing: -0.02em; }
.kpi-card .kpi-delta { font-size: 12.5px; font-weight: 600; color: var(--c-green); }
.kpi-card .kpi-delta.down { color: var(--c-red); }
.kpi-card .kpi-delta.flat { color: var(--c-grey); }
.kpi-card .kpi-sub { font-size: 12.5px; white-space: normal; color: var(--rp-text-2); }
.kpi-card .kpi-sub.up { color: var(--c-green); font-weight: 600; }
.kpi-card .kpi-sub.down { color: var(--c-red); font-weight: 600; }
/* tone-tinted icon variants */
.kpi-card.tone-red .kpi-top svg { color: var(--c-red); }
.kpi-card.tone-amber .kpi-top svg { color: var(--c-amber); }
.kpi-card.tone-orange .kpi-top svg { color: var(--c-orange); }
.kpi-card.tone-green .kpi-top svg { color: var(--c-green); }
.kpi-card.tone-purple .kpi-top svg { color: var(--c-purple); }
.kpi-card.tone-cyan .kpi-top svg { color: var(--c-cyan); }
.kpi-card.tone-gold .kpi-top svg { color: var(--c-gold); }
.kpi-card.tone-grey .kpi-top svg { color: var(--c-grey); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border: none; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1;
  cursor: pointer; white-space: nowrap;
  background: var(--primary-blue); color: #fff;
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { flex-shrink: 0; }
.btn.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; gap: 6px; }
.btn.btn-lg { height: 50px; padding: 0 26px; font-size: 18px; }
.btn.btn-full { width: 100%; }
.btn.btn-blue { background: var(--adnoc-blue); color: #fff; }
.btn.btn-green { background: var(--success-strong); color: #fff; }
.btn.btn-amber { background: var(--warning); color: #fff; }
.btn.btn-danger { background: var(--danger); color: #fff; }
.btn.btn-secondary { background: var(--blue-100); color: var(--adnoc-blue); }
.btn.btn-ghost { background: transparent; color: var(--rp-text); box-shadow: inset 0 0 0 1px var(--neutral-300); }
.btn.btn-link { background: transparent; color: var(--adnoc-blue); padding: 0; height: auto; font-weight: 600; border-radius: 0; }

/* Icon-only square button */
.icon-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--rp-border);
  background: #fff; color: var(--c-grey); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s ease;
}
.icon-btn:hover { background: var(--neutral-100); }
.icon-btn.tone-blue { color: var(--c-blue); }
.icon-btn.tone-red { color: var(--c-red); }
.icon-btn.tone-green { color: var(--c-green); }
.icon-btn.tone-amber { color: var(--c-amber); }
.icon-btn.tone-purple { color: var(--c-purple); }
.icon-btn.tone-cyan { color: var(--c-cyan); }

/* ---------------- Badges & status pills ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: color-mix(in srgb, var(--c-grey) 12%, #fff); color: var(--c-grey);
}
.badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.tone-red { background: color-mix(in srgb, var(--c-red) 12%, #fff); color: var(--c-red); }
.badge.tone-amber { background: color-mix(in srgb, var(--c-amber) 12%, #fff); color: var(--c-amber); }
.badge.tone-orange { background: color-mix(in srgb, var(--c-orange) 12%, #fff); color: var(--c-orange); }
.badge.tone-blue { background: color-mix(in srgb, var(--c-blue) 12%, #fff); color: var(--c-blue); }
.badge.tone-green { background: color-mix(in srgb, var(--c-green) 12%, #fff); color: var(--c-green); }
.badge.tone-purple { background: color-mix(in srgb, var(--c-purple) 12%, #fff); color: var(--c-purple); }
.badge.tone-cyan { background: color-mix(in srgb, var(--c-cyan) 12%, #fff); color: var(--c-cyan); }
.badge.tone-gold { background: color-mix(in srgb, var(--c-gold) 12%, #fff); color: var(--c-gold); }
.badge.solid { color: #fff; }
.badge.solid.tone-red { background: var(--c-red); } .badge.solid.tone-amber { background: var(--c-amber); }
.badge.solid.tone-blue { background: var(--c-blue); } .badge.solid.tone-green { background: var(--c-green); }
.badge.solid.tone-purple { background: var(--c-purple); } .badge.solid.tone-grey { background: var(--c-grey); }
.badge.solid.tone-orange { background: var(--c-orange); } .badge.solid.tone-gold { background: var(--c-gold); }

/* ---------------- Toggle switch ---------------- */
.toggle {
  width: 40px; height: 22px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  background: #cbd0db; position: relative; transition: background .18s; flex-shrink: 0; padding: 0;
}
.toggle .toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .18s;
}
.toggle[aria-pressed="true"] { background: var(--rp-primary); }
.toggle[aria-pressed="true"] .toggle-knob { left: 21px; }
.toggle.toggle-lg { width: 52px; height: 30px; }
.toggle.toggle-lg .toggle-knob { width: 24px; height: 24px; }
.toggle.toggle-lg[aria-pressed="true"] .toggle-knob { left: 25px; }
.toggle:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------- Forms ---------------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field > .field-label { font-size: 13px; font-weight: 600; color: var(--rp-text); }
.form-field > .field-label .required-mark { color: var(--rp-red); }
.form-field > .field-hint { font-size: 12px; color: var(--rp-text-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: span 2; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }

.text-input, .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"],
.form-field input[type="number"], .form-field input[type="password"], .form-field input[type="date"],
.form-field input[type="time"], .form-field input[type="url"] {
  height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rp-border);
  background: #fff; font-size: 14px; color: var(--rp-text); outline: none; width: 100%;
}
.form-field textarea, .textarea {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--rp-border); background: #fff;
  font-size: 14px; color: var(--rp-text); outline: none; width: 100%; resize: vertical; min-height: 80px;
}
.text-input:focus, .form-field input:focus, .form-field textarea:focus, .select-wrap select:focus {
  border-color: var(--primary-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 15%, transparent);
}
.form-field input:disabled, .form-field textarea:disabled { background: var(--neutral-100); color: var(--rp-text-2); }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--danger); }
.form-field .field-error { font-size: 12px; color: var(--danger); }

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; -webkit-appearance: none; height: 40px; padding: 0 34px 0 14px; border-radius: 10px;
  border: 1px solid var(--rp-border); background: #fff; font-size: 14px; color: var(--rp-text); cursor: pointer; width: 100%; outline: none;
}
.select-wrap .select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--rp-text-2); display: inline-flex; }

.search-input {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--rp-border); flex: 1; min-width: 180px;
}
.search-input svg { color: var(--rp-text-2); flex-shrink: 0; }
.search-input input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--rp-text); min-width: 0; }
.search-input.fixed { flex: none; }

/* checkbox + radio */
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--rp-text); cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--rp-primary); cursor: pointer; }

/* ---------------- Filter pills ---------------- */
.pill-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--rp-border); background: #fff; color: var(--rp-text-2); transition: all .14s;
}
.pill:hover { border-color: var(--c-blue); color: var(--c-blue); }
.pill.active { border-color: var(--c-blue); background: var(--c-blue); color: #fff; }
.pill.tone-green.active { border-color: var(--c-green); background: var(--c-green); }
.pill.tone-red.active { border-color: var(--c-red); background: var(--c-red); }
.pill.tone-amber.active { border-color: var(--c-amber); background: var(--c-amber); }

/* ---------------- Tabs ---------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rp-border); overflow-x: auto; }
.tabs button {
  padding: 11px 16px; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--rp-text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button.active { font-weight: 700; color: var(--rp-primary); border-bottom-color: var(--rp-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Segmented control (grid/list switch) */
.segmented { display: inline-flex; background: var(--neutral-100); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented button {
  border: none; background: transparent; cursor: pointer; padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--rp-text-2); display: inline-flex; align-items: center; gap: 6px;
}
.segmented button.active { background: #fff; color: var(--rp-text); box-shadow: var(--shadow-xs); }

/* ---------------- Table ---------------- */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--rp-text-2);
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--rp-border); white-space: nowrap;
}
.data-table td { padding: 14px; border-bottom: 1px solid var(--rp-border); color: var(--rp-text); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .cell-actions { display: flex; gap: 6px; }
.data-table .cell-strong { font-weight: 600; }
.data-table .cell-muted { color: var(--rp-text-2); font-size: 13px; }
.data-table th.align-right, .data-table td.align-right { text-align: right; }
.data-table th.align-center, .data-table td.align-center { text-align: center; }

/* Entity cell: avatar + name + sub */
.entity-cell { display: flex; align-items: center; gap: 12px; }
.entity-cell .entity-meta strong { display: block; font-weight: 600; font-size: 14px; }
.entity-cell .entity-meta span { display: block; font-size: 12.5px; color: var(--rp-text-2); }

/* ---------------- Avatar ---------------- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--blue-tint); color: var(--rp-primary); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.tone-green { background: color-mix(in srgb, var(--c-green) 15%, #fff); color: var(--c-green); }
.avatar.tone-purple { background: color-mix(in srgb, var(--c-purple) 15%, #fff); color: var(--c-purple); }
.avatar.tone-amber { background: color-mix(in srgb, var(--c-amber) 18%, #fff); color: #9a7b00; }
.avatar.tone-red { background: color-mix(in srgb, var(--c-red) 12%, #fff); color: var(--c-red); }
.avatar.tone-cyan { background: color-mix(in srgb, var(--c-cyan) 14%, #fff); color: var(--c-cyan); }

/* ---------------- Info card ---------------- */
.info-card {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--c-blue) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-blue) 25%, #fff);
  font-size: 13px; color: var(--rp-text-2);
}
.info-card > svg { color: var(--c-blue); flex-shrink: 0; margin-top: 1px; }
.info-card.tone-amber { background: color-mix(in srgb, var(--c-amber) 8%, #fff); border-color: color-mix(in srgb, var(--c-amber) 25%, #fff); }
.info-card.tone-amber > svg { color: var(--c-amber); }
.info-card.tone-red { background: color-mix(in srgb, var(--c-red) 8%, #fff); border-color: color-mix(in srgb, var(--c-red) 25%, #fff); }
.info-card.tone-red > svg { color: var(--c-red); }
.info-card.tone-green { background: color-mix(in srgb, var(--c-green) 8%, #fff); border-color: color-mix(in srgb, var(--c-green) 25%, #fff); }
.info-card.tone-green > svg { color: var(--c-green); }

/* ---------------- Progress bar ---------------- */
.progress-bar { height: 8px; border-radius: var(--radius-pill); background: var(--neutral-150); overflow: hidden; }
.progress-bar .progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--primary-blue); }
.progress-bar.tone-green .progress-fill { background: var(--c-green); }
.progress-bar.tone-amber .progress-fill { background: var(--c-amber); }
.progress-bar.tone-red .progress-fill { background: var(--c-red); }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(26,26,46,0.45); z-index: 100; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .34s;
}
.modal-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.modal-overlay[hidden], .side-panel-overlay[hidden] { display: none; }
.modal-box {
  background: #fff; border-radius: 16px; width: 460px; max-width: 100%; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.modal-overlay.open .modal-box { opacity: 1; transform: none; }
.modal-box.modal-wide { width: 560px; }
.modal-box .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--rp-border); }
.modal-box .modal-head h3 { font-size: 17px; font-weight: 700; color: var(--rp-text); }
.modal-box .modal-close { border: none; background: transparent; cursor: pointer; color: var(--rp-text-2); padding: 2px; display: inline-flex; }
.modal-box .modal-body { padding: 20px; }
.modal-box .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--rp-border); }

/* ---------------- Side panel (right drawer) ---------------- */
.side-panel-overlay { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.side-panel-overlay .panel-scrim { position: absolute; inset: 0; background: rgba(26,26,46,0.45); opacity: 0; transition: opacity .25s; }
.side-panel-overlay.open { pointer-events: auto; }
.side-panel-overlay.open .panel-scrim { opacity: 1; }
.side-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 480px; max-width: 100%;
  background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.side-panel.panel-wide { width: 560px; }
.side-panel-overlay.open .side-panel { transform: translateX(0); }
.side-panel .panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--rp-border); }
.side-panel .panel-head h3 { font-size: 18px; font-weight: 700; color: var(--rp-text); }
.side-panel .panel-head .rp-sub { margin-top: 4px; }
.side-panel .panel-close { border: none; background: transparent; cursor: pointer; color: var(--rp-text-2); padding: 2px; display: inline-flex; }
.side-panel .panel-body { flex: 1; overflow-y: auto; padding: 22px; }
.side-panel .panel-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--rp-border); }

/* ---------------- Charts ---------------- */
.chart-box { position: relative; width: 100%; }
.donut-wrap { position: relative; flex-shrink: 0; }
.donut-wrap .donut-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--rp-text);
}
.legend-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--rp-text-2); }
.legend-row .legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-row .legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ---------------- Timeline ---------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.timeline li::before {
  content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--rp-border);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .timeline-dot {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--c-green);
  flex-shrink: 0; margin-top: 2px; z-index: 1;
}
.timeline li.pending .timeline-dot { border-color: var(--neutral-300); }
.timeline li.current .timeline-dot { border-color: var(--primary-blue); }
.timeline .timeline-meta strong { display: block; font-size: 14px; font-weight: 600; }
.timeline .timeline-meta span { display: block; font-size: 12.5px; color: var(--rp-text-2); margin-top: 2px; }

/* ---------------- Empty / helper ---------------- */
.stack-v { display: flex; flex-direction: column; }
.stack-h { display: flex; align-items: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.text-right { text-align: right; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-wrap { flex-wrap: wrap; }

/* ---------------- Filters toolbar ---------------- */
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

/* ---------------- Launcher (index.html) ---------------- */
.launcher-page {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  background: var(--rp-bg); padding: 32px 20px;
}
.launcher-card {
  background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 48px 44px;
  max-width: 720px; width: 100%; text-align: center;
}
.launcher-card .launcher-brand { display: flex; justify-content: center; margin-bottom: 26px; }
.launcher-card .launcher-title { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.launcher-card .launcher-sub { font-size: 15px; color: var(--rp-text-2); margin-top: 8px; }
.launcher-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.launcher-links .portal-link {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px;
  border-radius: 18px; border: 1.5px solid var(--rp-border); text-decoration: none; color: var(--rp-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.launcher-links .portal-link:hover { border-color: var(--rp-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.launcher-links .portal-link svg { color: var(--rp-primary); }
.launcher-links .portal-link strong { font-size: 17px; font-weight: 700; }
.launcher-links .portal-link span { font-size: 13px; color: var(--rp-text-2); }

/* ---------------- Skip link ---------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--rp-primary); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------------- Back-to-top ---------------- */
.back-to-top {
  position: fixed; right: 22px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--rp-primary); color: #fff; cursor: pointer; box-shadow: var(--shadow-md);
  display: none; align-items: center; justify-content: center; z-index: 70;
}
.back-to-top.visible { display: inline-flex; }


/* ============================================================
   Leaflet 1.9.4 core stylesheet (BSD-2-Clause, (c) Vladimir Agafonkin)
   bundled for the delivery live-tracking maps
   ============================================================ */


/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url("../images/leaflet-layers.png");
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url("../images/leaflet-layers-2x.png");
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url("../images/leaflet-marker.png");
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}



/* map container default look */
[data-map] { height: 320px; border-radius: 14px; overflow: hidden; background: #E8ECF1; }

/* ============================================================
   Additional shared components (dashboard bento, sheets, toast)
   ============================================================ */

/* Segmented pill (white pill group, dark active) */
.seg-pill { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--rp-border); box-shadow: 0 1px 2px rgba(62,72,84,0.04); }
.seg-pill button { border: none; cursor: pointer; font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: var(--radius-pill); background: transparent; color: var(--rp-text-2); transition: all .15s; }
.seg-pill button.active { font-weight: 700; background: var(--rp-text); color: #fff; }

/* Bento layout: main + right rail */
.bento { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.bento .bento-col { display: flex; flex-direction: column; gap: 18px; }

/* Stat overview number in chart card */
.overview-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.overview-head .overview-label { font-size: 14px; color: var(--rp-text-2); font-weight: 600; }
.overview-head .overview-value { font-size: 30px; font-weight: 700; margin: 4px 0 2px; letter-spacing: -0.02em; }
.overview-head .overview-unit { font-size: 12.5px; color: var(--rp-text-2); }

/* Action-required list (card with rows) */
.action-list-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rp-border); }
.action-list-head .action-warning { margin-top: 3px; font-size: 12.5px; color: var(--rp-amber); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.action-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--rp-border); }
.action-row:last-child { border-bottom: none; }
.action-row .order-id { font-weight: 700; color: var(--rp-primary); font-size: 14px; }
.action-row .order-time { font-size: 12px; color: var(--rp-text-2); margin-left: 10px; }
.action-row .order-cust { font-size: 13px; font-weight: 600; }
.action-row .order-items { font-size: 12px; color: var(--rp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-row .order-actions { display: inline-flex; gap: 8px; }

/* Outline-red button */
.btn.btn-outline-red { background: #fff; color: var(--rp-red); box-shadow: inset 0 0 0 1px var(--rp-red); font-weight: 600; }

/* Link-style header button */
.link-more { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; color: var(--rp-primary); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* Sunken stat tile (processing times) */
.stat-tile { padding: 14px; border-radius: 12px; background: var(--neutral-100); }
.stat-tile .stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.stat-tile .stat-label { font-size: 12px; color: var(--rp-text-2); margin: 2px 0 4px; }
.stat-tile .stat-cmp { font-size: 11.5px; font-weight: 600; }
.stat-tile .stat-cmp.tone-green { color: var(--c-green); }
.stat-tile .stat-cmp.tone-red { color: var(--c-red); }
.stat-tile .stat-cmp.tone-grey { color: var(--c-grey); }

/* Order mix split bar */
.mix-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 12px; }
.mix-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.mix-row svg { flex-shrink: 0; }
.mix-row .mix-label { flex: 1; font-size: 13px; font-weight: 600; }
.mix-row .mix-count { font-size: 12.5px; color: var(--rp-text-2); }
.mix-row .mix-pct { font-size: 13px; font-weight: 700; width: 44px; text-align: right; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 200; background: #fff;
  border-left: 4px solid var(--c-green); border-radius: 12px; box-shadow: 0 10px 30px rgba(62,72,84,.16);
  padding: 14px 18px; display: none; align-items: center; gap: 10px; font-size: 14px; font-weight: 600;
}
.toast.show { display: flex; }
.toast.tone-red { border-left-color: var(--c-red); }
.toast svg { color: var(--c-green); }
.toast.tone-red svg { color: var(--c-red); }

/* More sheet (mobile nav overflow) */
.more-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.more-sheet-link {
  display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 12px;
  text-decoration: none; color: var(--rp-text); font-size: 15px; font-weight: 600;
}
.more-sheet-link:hover { background: var(--neutral-100); text-decoration: none; }
.more-sheet-link svg { color: var(--rp-primary); }
.more-sheet-link .chev { margin-left: auto; color: var(--rp-text-2); }

/* Sidebar count badge (solid red circle) + coming-soon items */
.main-nav .nav-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--rp-red); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.main-nav li.nav-soon a { opacity: .55; cursor: default; }
.main-nav li.nav-soon a:hover { background: transparent; }


/* ============================================================
   Interaction layer — hover states, focus polish, alignment fixes
   ============================================================ */

/* ---- Buttons: clear hover feedback on every variant ---- */
.btn { will-change: transform; }
.btn:hover { filter: brightness(1.07); box-shadow: 0 4px 14px rgba(35,136,255,.28); transform: translateY(-1px); }
.btn.btn-blue:hover { box-shadow: 0 4px 14px rgba(0,71,186,.30); }
.btn.btn-green:hover { box-shadow: 0 4px 14px rgba(26,139,74,.30); }
.btn.btn-amber:hover { box-shadow: 0 4px 14px rgba(234,179,0,.32); }
.btn.btn-danger:hover { box-shadow: 0 4px 14px rgba(202,23,12,.28); }
.btn.btn-secondary:hover { filter: none; background: var(--blue-200); box-shadow: 0 3px 10px rgba(0,71,186,.14); }
.btn.btn-ghost:hover { filter: none; background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-400); transform: translateY(-1px); }
.btn.btn-outline-red:hover { filter: none; background: color-mix(in srgb, var(--rp-red) 8%, #fff); box-shadow: inset 0 0 0 1px var(--rp-red), 0 3px 10px rgba(202,23,12,.14); }
.btn.btn-link:hover { filter: none; box-shadow: none; transform: none; text-decoration: underline; }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

/* ---- Icon buttons ---- */
.icon-btn { transition: background .14s ease, border-color .14s ease, transform .12s ease; }
.icon-btn:hover { background: var(--neutral-100); border-color: currentColor; transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); }

/* ---- Tabs / pills / segmented ---- */
.tabs button { transition: color .14s ease, background .14s ease; border-radius: 8px 8px 0 0; }
.tabs button:hover:not(.active) { color: var(--rp-text); background: var(--neutral-100); }
.pill { transition: all .14s ease; }
.pill:hover:not(.active) { background: var(--blue-100); }
.seg-pill button { transition: all .15s ease; }
.seg-pill button:hover:not(.active) { color: var(--rp-text); background: var(--neutral-100); }
.segmented button { transition: all .14s ease; }
.segmented button:hover:not(.active) { color: var(--rp-text); background: rgba(255,255,255,.7); }

/* ---- Table rows + entity links ---- */
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--neutral-50); }
.link-more:hover svg { transform: translateX(2px); }
.link-more svg { transition: transform .15s ease; }

/* ---- Header / nav / cards ---- */
.header-bell { transition: box-shadow .15s ease, transform .12s ease; }
.header-bell:hover { box-shadow: 0 4px 14px rgba(62,72,84,.18); transform: translateY(-1px); }
.header-avatar { transition: box-shadow .15s ease, transform .12s ease; }
.header-avatar:hover { box-shadow: 0 4px 14px rgba(0,71,186,.30); transform: translateY(-1px); }
.main-nav a { transition: background .15s ease, color .15s ease; }
.main-nav a:hover:not(.active) { background: rgba(255,255,255,.85); color: var(--rp-text); }
.bottom-nav a:hover, .bottom-nav button:hover { color: var(--rp-primary); }
button.kpi-card { transition: box-shadow .15s ease, transform .13s ease, border-color .15s ease; }
button.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.toggle:hover:not(:disabled) { filter: brightness(.96); }
.toggle[aria-pressed="true"]:hover:not(:disabled) { filter: brightness(1.08); }
.notif-dropdown .notif-item { transition: background .12s ease; }
.notif-dropdown .notif-item:hover { background: var(--neutral-50); }

/* ---- Radio & checkbox vertical alignment (global fix) ---- */
input[type="radio"], input[type="checkbox"] {
  margin: 0; width: 17px; height: 17px; accent-color: var(--rp-primary);
  flex-shrink: 0; vertical-align: middle; cursor: pointer;
}
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]),
.check-row, .radio-row {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; line-height: 1.3;
}
.radio-row { gap: 18px; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Spacing: filters vs tables/cards ---- */
.page-content > .rp-card + .rp-card,
.page-content > section + section { margin-top: 18px; }
.rp-card .filter-bar { margin-bottom: 16px; }
.filter-bar + .tabs { margin-top: 14px; }
.tabs + .filter-bar { margin-top: 16px; }
.tabs + .table-scroll, .filter-bar + .table-scroll { margin-top: 14px; }
.tabs + .data-table { margin-top: 12px; }

/* ---- Form validation states ---- */
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select,
.form-field.has-error .text-input { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent); }
.form-field .field-error { display: none; font-size: 12px; color: var(--danger); }
.form-field.has-error .field-error { display: block; }

/* ---- Toast (animated, JS-injected) ---- */
.toast {
  display: flex; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .28s cubic-bezier(.4,0,.2,1);
}
.toast.show { display: flex; opacity: 1; transform: none; }


/* ---------------- Mobile app header (avatar + eyebrow + page title) ---------------- */
.mobile-app-head { display: none; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.mobile-app-head .mobile-avatar {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: linear-gradient(135deg, #2388FF, #0047BA); color: #fff; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(62,72,84,0.16); flex-shrink: 0;
}
body.portal-admin .mobile-app-head .mobile-avatar { background: var(--rp-gold); }
.mobile-app-head .mobile-titles { display: flex; flex-direction: column; min-width: 0; }
.mobile-app-head .app-eyebrow { font-size: 12px; font-weight: 600; color: var(--rp-text-2); line-height: 1.2; }
.mobile-app-head .app-title { font-size: 19px; font-weight: 700; color: var(--rp-text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ PAGE-SPECIFIC LAYERS (generated from css-parts) ============ */

/* ---- admin-dashboard.css ---- */
/* ============================================================
   Admin — Platform Dashboard (admin-dashboard.html)
   ============================================================ */
.admin-dashboard { display: flex; flex-direction: column; gap: 24px; }
.admin-dashboard .page-head { margin-bottom: 0; }
.admin-dashboard .kpi-grid { margin-bottom: 0; }
.admin-dashboard .section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-dashboard .card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--rp-border); }
.admin-dashboard .card-flex-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* gold outline pill button (System Monitoring / Process Settlements / settle confirm) */
.admin-dashboard .btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; height: 42px; border-radius: var(--radius-pill);
  border: 1px solid var(--rp-gold); background: #fff; color: var(--rp-gold);
  font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.admin-dashboard .btn-gold:hover { background: color-mix(in srgb, var(--c-gold) 8%, #fff); }

/* platform status banner */
.admin-dashboard .status-banner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px; }
.admin-dashboard .status-item { flex: 1 1 180px; border-right: 1px solid var(--rp-border); padding-right: 16px; }
.admin-dashboard .status-item:last-of-type { border-right: none; }
.admin-dashboard .status-label { font-size: 12px; color: var(--rp-text-2); font-weight: 600; margin-bottom: 6px; }
.admin-dashboard .status-value { font-size: 22px; font-weight: 700; color: var(--rp-text); display: flex; align-items: center; gap: 7px; }
.admin-dashboard .status-value.small { font-size: 15px; }
.admin-dashboard .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rp-green); flex-shrink: 0; }
.admin-dashboard .status-sub { font-size: 11.5px; color: var(--rp-text-2); margin-top: 4px; }

/* restaurant performance table extras */
.admin-dashboard .rating-cell { display: inline-flex; align-items: center; gap: 4px; color: var(--rp-gold); font-weight: 600; }
.admin-dashboard .issues-none { color: var(--rp-green); font-size: 13px; }

/* charts row */
.admin-dashboard .charts-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
.admin-dashboard .chart-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.admin-dashboard .chart-sub { font-size: 12px; color: var(--rp-text-2); margin-bottom: 14px; }

/* revenue by restaurant — horizontal bars */
.admin-dashboard .rev-bars { display: flex; flex-direction: column; gap: 12px; }
.admin-dashboard .rev-row { display: flex; align-items: center; gap: 10px; }
.admin-dashboard .rev-label { font-size: 12px; color: var(--rp-text-2); width: 90px; flex-shrink: 0; }
.admin-dashboard .rev-track { flex: 1; height: 16px; border-radius: 6px; background: var(--rp-bg); }
.admin-dashboard .rev-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4E9FFF, #0047BA); }
.admin-dashboard .rev-value { font-size: 12px; font-weight: 600; width: 60px; text-align: right; }

/* active deliveries breakdown */
.admin-dashboard .deliv-count { display: flex; align-items: baseline; gap: 10px; }
.admin-dashboard .deliv-num { font-size: 32px; font-weight: 700; }
.admin-dashboard .deliv-note { font-size: 13px; color: var(--rp-text-2); }
.admin-dashboard .deliv-breakdown { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.admin-dashboard .deliv-row { display: flex; align-items: center; gap: 12px; }
.admin-dashboard .deliv-label { font-size: 13px; width: 130px; flex-shrink: 0; color: var(--rp-text-2); }
.admin-dashboard .deliv-track { flex: 1; height: 10px; border-radius: var(--radius-pill); background: var(--rp-bg); }
.admin-dashboard .deliv-fill { height: 100%; border-radius: var(--radius-pill); background: var(--rp-primary); }
.admin-dashboard .deliv-n { font-size: 13px; font-weight: 700; width: 24px; text-align: right; }

/* delivery agent status */
.admin-dashboard .agent-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.admin-dashboard .agent-tile { padding: 12px; border-radius: 12px; text-align: center; }
.admin-dashboard .agent-tile .tile-value { font-size: 20px; font-weight: 700; }
.admin-dashboard .agent-tile .tile-label { font-size: 11px; color: var(--rp-text-2); }
.admin-dashboard .agent-tile.tone-blue { background: color-mix(in srgb, var(--c-blue) 9%, #fff); }
.admin-dashboard .agent-tile.tone-blue .tile-value { color: var(--c-blue); }
.admin-dashboard .agent-tile.tone-green { background: color-mix(in srgb, var(--c-green) 9%, #fff); }
.admin-dashboard .agent-tile.tone-green .tile-value { color: var(--c-green); }
.admin-dashboard .agent-tile.tone-purple { background: color-mix(in srgb, var(--c-purple) 9%, #fff); }
.admin-dashboard .agent-tile.tone-purple .tile-value { color: var(--c-purple); }
.admin-dashboard .agent-tile.tone-grey { background: color-mix(in srgb, var(--c-grey) 9%, #fff); }
.admin-dashboard .agent-tile.tone-grey .tile-value { color: var(--c-grey); }
.admin-dashboard .agent-list { display: flex; flex-direction: column; gap: 8px; }
.admin-dashboard .agent-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rp-border); }
.admin-dashboard .agent-row:last-child { border-bottom: none; padding-bottom: 0; }
.admin-dashboard .agent-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-dashboard .agent-sub { font-size: 11px; color: var(--rp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* support overview */
.admin-dashboard .support-overview { display: flex; flex-direction: column; }
.admin-dashboard .support-body { display: flex; gap: 20px; align-items: center; flex: 1; }
.admin-dashboard .support-donut { text-align: center; flex-shrink: 0; }
.admin-dashboard .donut-cap { font-size: 11px; color: var(--rp-text-2); margin-top: 4px; }
.admin-dashboard .urgent-list { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
.admin-dashboard .urgent-ticket { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid var(--rp-border); border-radius: 10px; padding: 10px; background: #fff; color: inherit; text-decoration: none; }
.admin-dashboard .urgent-ticket:hover { border-color: var(--rp-primary); text-decoration: none; }
.admin-dashboard .urgent-top { display: flex; align-items: center; gap: 8px; }
.admin-dashboard .urgent-id { font-weight: 700; font-size: 12px; color: var(--rp-primary); }
.admin-dashboard .urgent-subj { font-size: 12.5px; color: var(--rp-text); }

/* finance snapshot */
.admin-dashboard .finance-snapshot { display: flex; flex-direction: column; }
.admin-dashboard .finance-blocks { display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: center; }
.admin-dashboard .finance-block { padding: 14px; border-radius: 12px; }
.admin-dashboard .finance-block.tone-green { background: color-mix(in srgb, var(--c-green) 7%, #fff); }
.admin-dashboard .finance-block.tone-gold { background: color-mix(in srgb, var(--c-gold) 9%, #fff); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-dashboard .finance-block.tone-red { background: color-mix(in srgb, var(--c-red) 6%, #fff); }
.admin-dashboard .fin-label { font-size: 12px; color: var(--rp-text-2); }
.admin-dashboard .fin-value { font-size: 24px; font-weight: 700; }
.admin-dashboard .fin-value.gold { font-size: 22px; color: var(--rp-gold); }
.admin-dashboard .fin-value.red { font-size: 22px; color: var(--rp-red); }
.admin-dashboard .fin-sub { font-size: 11.5px; color: var(--rp-text-2); margin-top: 2px; }
.admin-dashboard .fin-sub.warn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }

/* audit list */
.admin-dashboard .audit-list { display: flex; flex-direction: column; gap: 12px; }
.admin-dashboard .audit-row { display: flex; gap: 12px; align-items: flex-start; }
.admin-dashboard .audit-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.admin-dashboard .audit-dot.tone-gold { background: var(--c-gold); }
.admin-dashboard .audit-dot.tone-green { background: var(--c-green); }
.admin-dashboard .audit-dot.tone-grey { background: var(--c-grey); }
.admin-dashboard .audit-dot.tone-purple { background: var(--c-purple); }
.admin-dashboard .audit-text { flex: 1; font-size: 13px; }
.admin-dashboard .audit-text strong { font-weight: 600; }
.admin-dashboard .audit-text span { color: var(--rp-text-2); }
.admin-dashboard .audit-time { font-size: 12px; color: var(--rp-text-2); white-space: nowrap; }

/* settlement modal summary */
.admin-dashboard .settle-summary { padding: 14px; border-radius: 12px; background: var(--rp-bg); display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.admin-dashboard .settle-summary span:first-child { color: var(--rp-text-2); }
.admin-dashboard .settle-summary .settle-total { font-weight: 700; font-size: 18px; }

@media (max-width: 1024px) {
  .admin-dashboard .charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .admin-dashboard .status-item { border-right: none; flex: 1 1 45%; padding-right: 0; }
  .admin-dashboard .status-banner .btn-gold { width: 100%; }
}
@media (max-width: 480px) {
  .admin-dashboard .agent-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dashboard .support-body { flex-direction: column; align-items: stretch; }
  .admin-dashboard .support-donut { align-self: center; }
  .admin-dashboard .rev-label { width: 74px; }
  .admin-dashboard .deliv-label { width: 104px; }
}

/* Round 3 — Restaurant Performance table renders as stacked cards on mobile:
   name + status share the top row, issues line sits after the stat rows (mobile design) */
@media (max-width: 768px) {
  .admin-dashboard .data-table.card-table .c-title { width: auto; flex: 1; order: 1; margin-top: 0; min-width: 0; }
  .admin-dashboard .data-table.card-table .c-meta { order: 5; margin-top: 4px; }
}

/* ---- admin-delivery-order.css ---- */
/* ============================================================
   Admin — Delivery Order Details (admin-delivery-order.html)
   ============================================================ */

.admin-delivery-order-page .back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--rp-primary); margin-bottom: 14px; }
.admin-delivery-order-page .order-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* amber outline CTA (source "Reassign Agent") */
.admin-delivery-order-page .btn.btn-outline-amber { background: #fff; color: var(--rp-amber); box-shadow: inset 0 0 0 1px var(--rp-amber); }

/* two-column detail layout */
.admin-delivery-order-page .order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-delivery-order-page .order-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* card headings (source rp-h2 @14px) */
.admin-delivery-order-page .card-title { font-size: 14px; font-weight: 700; }
.admin-delivery-order-page .card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.admin-delivery-order-page .live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rp-green); font-weight: 600; white-space: nowrap; }
.admin-delivery-order-page .live-indicator .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rp-green); }
.admin-delivery-order-page .tracking-map[data-map] { border: 1px solid var(--rp-border); border-radius: 12px; }

/* order items card */
.admin-delivery-order-page .items-head { padding: 16px 20px; border-bottom: 1px solid var(--rp-border); }
.admin-delivery-order-page .item-note { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--rp-amber); margin-top: 2px; }
.admin-delivery-order-page .item-note svg { flex-shrink: 0; }
.admin-delivery-order-page .items-totals { padding: 14px 20px; border-top: 1px solid var(--rp-border); display: flex; flex-direction: column; gap: 6px; }
.admin-delivery-order-page .totals-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--rp-text-2); }
.admin-delivery-order-page .totals-row.grand { font-size: 15px; font-weight: 700; color: var(--rp-text); border-top: 1px solid var(--rp-border); padding-top: 8px; margin-top: 2px; }
.admin-delivery-order-page .totals-row.grand .total-amount { color: var(--rp-primary); }

/* delivery agent card */
.admin-delivery-order-page .agent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.admin-delivery-order-page .agent-name { font-weight: 700; font-size: 15px; }
.admin-delivery-order-page .agent-fleet { font-size: 12.5px; color: var(--rp-text-2); display: inline-flex; align-items: center; gap: 4px; }
.admin-delivery-order-page .agent-star { display: inline-flex; color: var(--rp-gold); }
.admin-delivery-order-page .agent-actions { display: flex; gap: 8px; }
.admin-delivery-order-page .agent-actions .btn { flex: 1; }

/* key–value info cards (Customer / Restaurant / Payment) */
.admin-delivery-order-page .kv-list { display: flex; flex-direction: column; gap: 9px; }
.admin-delivery-order-page .kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.admin-delivery-order-page .kv-row .kv-label { color: var(--rp-text-2); }
.admin-delivery-order-page .kv-row .kv-value { font-weight: 600; text-align: right; }

/* admin actions card */
.admin-delivery-order-page .admin-actions { display: flex; flex-direction: column; gap: 10px; }
.admin-delivery-order-page .admin-actions .btn { width: 100%; height: 40px; justify-content: flex-start; }

/* responsive */
@media (max-width: 1024px) {
  .admin-delivery-order-page .order-detail-grid { grid-template-columns: 1fr; }
}

/* ---- admin-delivery.css ---- */
/* ============================================================
   Admin — Delivery Management (admin-delivery.html)
   ============================================================ */

/* stat chip strip — 6-up */
.admin-delivery-page .kpi-grid.delivery-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.admin-delivery-page .delivery-stats .kpi-value { font-size: 24px; }

/* gold outline CTA (source "goldBtn") */
.admin-delivery-page .btn.btn-outline-gold { background: #fff; color: var(--rp-gold); box-shadow: inset 0 0 0 1px var(--rp-gold); }

/* "Manage Partners" — tab-trigger styled as the source gold button */
.admin-delivery-page .head-tab-link { border-bottom: none; overflow: visible; }
.admin-delivery-page .head-tab-link button,
.admin-delivery-page .head-tab-link button.active {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; margin-bottom: 0;
  border-radius: var(--radius-pill); border: 1px solid var(--rp-gold); background: #fff;
  color: var(--rp-gold); font-weight: 600; font-size: 14px; cursor: pointer;
}

/* live ops row: board + agent status */
.admin-delivery-page .delivery-live-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 20px; }
.admin-delivery-page .board-head { margin-bottom: 14px; align-items: flex-start; }
.admin-delivery-page .live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rp-green); font-weight: 600; white-space: nowrap; }
.admin-delivery-page .live-indicator .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rp-green); }
.admin-delivery-page .delivery-board [data-map] { border: 1px solid var(--rp-border); border-radius: 12px; margin-bottom: 12px; }
.admin-delivery-page .board-list { display: flex; flex-direction: column; gap: 10px; }
.admin-delivery-page .board-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rp-border); background: #fff; }
.admin-delivery-page .board-row.is-delayed { background: color-mix(in srgb, #DC2626 5%, #fff); }
.admin-delivery-page .board-row .board-id { font-weight: 700; font-size: 13px; color: var(--rp-primary); min-width: 78px; }
.admin-delivery-page .board-row .board-main { flex: 1; min-width: 0; }
.admin-delivery-page .board-row .board-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-delivery-page .board-row .board-agent { font-size: 12px; color: var(--rp-text-2); display: flex; align-items: center; gap: 5px; min-width: 0; }
.admin-delivery-page .board-row .board-agent svg { flex-shrink: 0; }
.admin-delivery-page .board-row .board-agent span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.admin-delivery-page .board-row .board-eta { text-align: right; min-width: 64px; }
.admin-delivery-page .board-row .eta-note { font-size: 11.5px; color: var(--rp-text-2); margin-top: 3px; }
.admin-delivery-page .board-row .eta-note.late { color: var(--rp-red); }

/* agent status card */
.admin-delivery-page .agent-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.admin-delivery-page .agent-mini { background: var(--rp-bg); border-radius: 10px; padding: 10px 8px; text-align: center; }
.admin-delivery-page .agent-mini strong { display: block; font-size: 18px; font-weight: 700; }
.admin-delivery-page .agent-mini span { display: block; font-size: 10.5px; color: var(--rp-text-2); }
.admin-delivery-page .agent-mini.tone-blue strong { color: var(--c-blue); }
.admin-delivery-page .agent-mini.tone-green strong { color: var(--c-green); }
.admin-delivery-page .agent-mini.tone-purple strong { color: var(--c-purple); }
.admin-delivery-page .agent-mini.tone-grey strong { color: var(--c-grey); }
.admin-delivery-page .agent-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rp-border); }
.admin-delivery-page .agent-row:first-child { border-top: none; }
.admin-delivery-page .agent-row .agent-meta { flex: 1; min-width: 0; }
.admin-delivery-page .agent-row .agent-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-delivery-page .agent-row .agent-sub { font-size: 11.5px; color: var(--rp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sub-nav pills (Deliveries / All Agents / Delivery Partners) */
.admin-delivery-page .tabs.delivery-subnav { border-bottom: none; overflow: visible; gap: 8px; margin-bottom: 16px; }
.admin-delivery-page .delivery-subnav button { padding: 8px 16px; margin-bottom: 0; border: 1px solid var(--rp-border); border-radius: var(--radius-pill); background: #fff; color: var(--rp-text-2); font-weight: 600; font-size: 13px; }
.admin-delivery-page .delivery-subnav button.active { border-color: var(--rp-primary); background: var(--rp-primary); color: #fff; font-weight: 600; }

/* deliveries section cards */
.admin-delivery-page .delivery-cards { display: flex; flex-direction: column; gap: 14px; }
.admin-delivery-page .tab-strip { padding: 4px 12px 0; }
.admin-delivery-page .filter-card { padding: 14px; }
.admin-delivery-page .filter-card .filter-bar { margin-bottom: 0; }
.admin-delivery-page .order-id-cell { font-weight: 700; color: var(--rp-primary); }
.admin-delivery-page .agent-unassigned { color: var(--rp-red); font-weight: 600; }
.admin-delivery-page .pickup-code { font-size: 13px; font-weight: 700; color: var(--rp-gold); }
.admin-delivery-page .rating-cell { display: inline-flex; align-items: center; gap: 4px; color: var(--rp-gold); font-weight: 600; }
.admin-delivery-page .data-table .cell-actions { justify-content: flex-end; }

/* partner cards */
.admin-delivery-page .partner-card { display: flex; flex-direction: column; gap: 14px; }
.admin-delivery-page .partner-ident { display: flex; align-items: center; gap: 10px; }
.admin-delivery-page .partner-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-delivery-page .partner-icon.tone-blue { background: color-mix(in srgb, var(--c-blue) 12%, #fff); color: var(--c-blue); }
.admin-delivery-page .partner-icon.tone-purple { background: color-mix(in srgb, var(--c-purple) 12%, #fff); color: var(--c-purple); }
.admin-delivery-page .partner-name { font-weight: 700; font-size: 16px; }
.admin-delivery-page .partner-stats { display: flex; gap: 22px; }
.admin-delivery-page .partner-stat strong { display: block; font-size: 22px; font-weight: 700; }
.admin-delivery-page .partner-stat span { display: block; font-size: 12px; color: var(--rp-text-2); }
.admin-delivery-page .partner-foot { display: flex; gap: 8px; border-top: 1px solid var(--rp-border); padding-top: 12px; }
.admin-delivery-page .partner-foot .btn { flex: 1; }

/* assign panel — agent picker */
.admin-delivery-page .order-brief { padding: 14px; border-radius: 12px; background: var(--rp-bg); }
.admin-delivery-page .order-brief strong { display: block; font-size: 14px; font-weight: 700; }
.admin-delivery-page .order-brief span { display: block; font-size: 13px; color: var(--rp-text-2); margin-top: 4px; }
.admin-delivery-page .agent-pick { display: flex; flex-direction: column; gap: 8px; }
.admin-delivery-page .agent-pick-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--rp-border); border-radius: 12px; cursor: pointer; }
.admin-delivery-page .agent-pick-row.selected { border-color: var(--rp-primary); }
.admin-delivery-page .agent-pick-row input { accent-color: var(--rp-primary); flex-shrink: 0; }
.admin-delivery-page .pick-meta { flex: 1; min-width: 0; }
.admin-delivery-page .pick-meta strong { display: block; font-weight: 600; font-size: 13px; }
.admin-delivery-page .pick-sub { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--rp-text-2); }
.admin-delivery-page .pick-star { display: inline-flex; color: var(--rp-gold); }

/* add-agent panel */
.admin-delivery-page .coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admin-delivery-page .coverage-grid .check-row { font-size: 13px; gap: 7px; }
.admin-delivery-page .employ-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* agent details panel */
.admin-delivery-page .agent-profile { display: flex; align-items: center; gap: 14px; }
.admin-delivery-page .agent-profile-name { font-size: 18px; font-weight: 700; }
.admin-delivery-page .agent-profile-sub { font-size: 13px; color: var(--rp-text-2); display: inline-flex; align-items: center; gap: 4px; }
.admin-delivery-page .agent-stats-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.admin-delivery-page .agent-stats-3 .agent-mini { padding: 12px; }
.admin-delivery-page .panel-sec-title { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.admin-delivery-page .kv-list { display: flex; flex-direction: column; gap: 8px; }
.admin-delivery-page .kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.admin-delivery-page .kv-row .kv-label { color: var(--rp-text-2); }
.admin-delivery-page .kv-row .kv-value { font-weight: 600; text-align: right; }

/* reassign modal */
.admin-delivery-page .reassign-note { font-size: 13.5px; color: var(--rp-text-2); }

/* responsive */
@media (max-width: 1600px) {
  .admin-delivery-page .kpi-grid.delivery-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .admin-delivery-page .delivery-live-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .admin-delivery-page .kpi-grid.delivery-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .admin-delivery-page .coverage-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-delivery-page .board-row { flex-wrap: wrap; }
  .admin-delivery-page .board-row .board-main { flex-basis: 100%; order: 3; }
}

/* round 3 — mobile card-tables (Admin Mobile design)
   Line breaks are forced with flex-basis reserves: the first cell of each card line
   gets flex:1 0 calc(100% - <room for the right-hand cell>) so following cells wrap. */
@media (max-width: 768px) {
  /* delivery card — line 1: id + status badge */
  .admin-delivery-page .deliveries-table td.c-id { flex: 1 0 calc(100% - 150px); }
  /* line 2: "Restaurant → Customer" bold on one line */
  .admin-delivery-page .deliveries-table td.c-title { width: auto; font-size: 13.5px; }
  .admin-delivery-page .deliveries-table td.c-cust { flex: 1 1 calc(100% - 150px); min-width: 0; }
  .admin-delivery-page .deliveries-table td.c-cust::before { content: "→ "; }
  /* line 3: agent · building */
  .admin-delivery-page .card-table td.c-meta.m-inline { width: auto; }
  .admin-delivery-page .deliveries-table td.m-loc { flex: 1 1 calc(100% - 135px); min-width: 0; }
  .admin-delivery-page .card-table td.m-loc::before { content: "· "; }
  /* footer: keep the ETA/time cell content-sized so it wraps below the meta line */
  .admin-delivery-page .deliveries-table td.c-foot { flex: 1 1 auto; }
  /* counter-pickup rows: meta line reads "Pickup code P-4823" (per mobile design) */
  .admin-delivery-page .deliveries-table tr:has(.pickup-code) td.c-meta.m-inline:not(.m-loc) { display: none; }
  .admin-delivery-page .deliveries-table tr:has(.pickup-code) td.m-loc { flex: 1 1 100%; }
  .admin-delivery-page .deliveries-table tr:has(.pickup-code) td.m-loc::before { content: "Pickup code\00a0"; color: var(--rp-text-2); }
  /* All Agents card — line 1: avatar+name left, status badge right */
  .admin-delivery-page .agents-table td.c-title { flex: 1 0 calc(100% - 130px); width: auto; order: 1; margin-top: 0; min-width: 0; }
  .admin-delivery-page .agents-table td.m-orders { flex: 1 1 calc(100% - 160px); min-width: 0; }
  .admin-delivery-page .agents-table td.m-orders::before { content: "· "; }
  .admin-delivery-page .agents-table td.m-orders::after { content: " active"; }
}

/* ---- admin-finance.css ---- */
/* ---------------- Admin — Finance Management ---------------- */
/* 6-across KPI strip (source uses repeat(6)); shared by finance + support */
.kpi-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-grid.cols-6 .kpi-value { font-size: 23px; }
.kpi-grid.cols-6 .kpi-label { font-size: 12.5px; color: var(--rp-text-2); }
.kpi-grid.cols-6 .kpi-sub { font-size: 11.5px; }
@media (max-width: 1400px) { .kpi-grid.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpi-grid.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Non-solid grey badge (Cash method, ticket categories) */
.badge.tone-grey { background: var(--neutral-100); color: var(--rp-text-2); }

/* Gold outline button (source goldBtn: Confirm & Transfer / Download Statement / Reply & Resolve) */
.btn.btn-outline-gold { background: #fff; color: var(--c-gold); box-shadow: inset 0 0 0 1px var(--c-gold); font-weight: 600; }

/* Card that only wraps a .tabs strip / a .filter-bar (shared by finance + support) */
.tabs-card { padding: 4px 12px 0; margin-bottom: 18px; }
.filter-card { padding: 14px; margin-bottom: 18px; }
.filter-card .filter-bar { margin-bottom: 0; }
.table-card { overflow: hidden; }

/* Charts row: revenue bar (1.5fr) + commission breakdown (1fr) */
.admin-finance .finance-charts {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px; margin-bottom: 22px;
}
@media (max-width: 1100px) { .admin-finance .finance-charts { grid-template-columns: 1fr; } }

/* Commission breakdown list */
.commission-card .comm-list { display: flex; flex-direction: column; gap: 12px; }
.commission-card .comm-line { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.commission-card .comm-label { color: var(--rp-text-2); }
.commission-card .comm-value { font-weight: 700; }
.commission-card .progress-bar.tone-purple .progress-fill { background: var(--c-purple); }
.commission-card .progress-bar.tone-cyan .progress-fill { background: var(--c-cyan); }
.commission-card .comm-total {
  border-top: 1px solid var(--rp-border); padding-top: 12px;
  display: flex; justify-content: space-between; font-size: 14px; font-weight: 600;
}
.commission-card .comm-total-value { font-weight: 700; color: var(--c-gold); }

/* Settlements / transactions table accents */
.admin-finance .net-amount { font-weight: 700; color: var(--c-green); }
.admin-finance .txn-id { font-weight: 700; color: var(--rp-primary); }
.admin-finance .txn-amount { font-weight: 600; }
.admin-finance .txn-amount.is-refund { color: var(--c-red); }
.admin-finance .refund-amount { font-weight: 700; color: var(--c-red); }
.admin-finance .processed-note { font-size: 12px; color: var(--rp-text-2); }
.admin-finance .cell-actions.justify-end { justify-content: flex-end; }

/* Invoices empty state */
.admin-finance .invoices-empty { padding: 50px 28px; text-align: center; color: var(--rp-text-2); }
.admin-finance .invoices-empty .invoices-title { font-size: 15px; font-weight: 600; margin-top: 10px; color: var(--rp-text); }
.admin-finance .invoices-empty p { font-size: 13px; margin-top: 6px; }
.admin-finance .invoices-empty .btn { margin-top: 14px; }

/* Process Settlements panel */
.settle-summary {
  display: flex; flex-direction: column; padding: 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--c-gold) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-gold) 22%, #fff);
}
.settle-summary .summary-label { font-size: 13px; color: var(--rp-text-2); }
.settle-summary .summary-value { font-size: 26px; font-weight: 700; color: var(--c-gold); margin-top: 2px; }
.settle-summary .summary-sub { font-size: 12.5px; color: var(--rp-text-2); margin-top: 4px; }
.settle-pick-list { display: flex; flex-direction: column; gap: 8px; }
.settle-pick {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--rp-border); border-radius: 10px; cursor: pointer;
}
.settle-pick input { width: 16px; height: 16px; accent-color: var(--rp-primary); flex-shrink: 0; }
.settle-pick .pick-meta { flex: 1; min-width: 0; }
.settle-pick .pick-meta strong { display: block; font-weight: 600; font-size: 13px; }
.settle-pick .pick-meta span { display: block; font-size: 12px; color: var(--rp-text-2); }
.settle-pick .pick-net { font-weight: 700; font-size: 13px; color: var(--c-green); }

/* Settlement Details modal */
.settlement-modal .detail-rest { font-size: 17px; font-weight: 700; }
.settlement-modal .fact { background: var(--rp-bg); border-radius: 10px; padding: 12px; }
.settlement-modal .fact-label { display: block; font-size: 12px; color: var(--rp-text-2); }
.settlement-modal .fact-value { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.settlement-modal .net-box {
  display: flex; justify-content: space-between; align-items: center; padding: 16px;
  border-radius: 12px; background: color-mix(in srgb, var(--c-green) 8%, #fff); font-weight: 600;
}
.settlement-modal .net-box-value { font-size: 18px; font-weight: 700; color: var(--c-green); }

/* round 3 — mobile card-tables (Admin Mobile design)
   Line breaks are forced with flex-basis reserves on the first cell of each line. */
@media (max-width: 768px) {
  /* settlement card — line 1: restaurant + status badge */
  .admin-finance .settle-table td.c-title { flex: 1 0 calc(100% - 130px); width: auto; order: 1; margin-top: 0; min-width: 0; font-size: 14px; }
  .admin-finance .settle-table td.c-foot::before { content: "Due\00a0"; }
  .admin-finance .settle-table td.c-row { padding: 3px 0; }
  /* transaction / refund cards — line 1: id + amount */
  .admin-finance .txn-table td.c-id,
  .admin-finance .refunds-table td.c-id { flex: 1 0 calc(100% - 130px); }
  .admin-finance .card-table td.c-meta.m-inline { width: auto; }
  .admin-finance .card-table td.c-meta.m-inline + td.c-meta.m-inline { flex: 1 1 calc(100% - 110px); min-width: 0; }
  .admin-finance .card-table td.c-meta.m-inline + td.c-meta.m-inline::before { content: "· "; }
  .admin-finance .card-table td.m-chip { width: auto; order: 5; margin-top: 4px; }
  .admin-finance .card-table td.m-date { margin-left: auto; font-size: 11.5px; flex: 0 0 auto; }
  .admin-finance .card-table td.c-status .txn-amount,
  .admin-finance .card-table td.c-status .refund-amount { font-size: 14.5px; font-weight: 700; }
}

/* ---- admin-restaurants.css ---- */
/* ============================================================
   Admin — Restaurant Management (admin-restaurants.html)
   ============================================================ */

/* 6-across stat chip row */
.kpi-grid.rest-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi-grid.rest-stats .kpi-label { font-size: 12.5px; color: var(--rp-text-2); }
.kpi-grid.rest-stats .kpi-value { font-size: 26px; }

/* Tabs card + stacked tab content */
.rest-mgmt .rest-tabs-card { padding: 4px 12px 0; margin-bottom: 22px; }
.rest-mgmt .tab-stack { display: flex; flex-direction: column; gap: 22px; }

/* Filter / toolbar card */
.rest-mgmt .rest-filter { padding: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rest-mgmt .rest-filter .last-updated { font-size: 12px; color: var(--rp-text-2); margin-left: auto; }

/* Restaurant card grid */
.rest-mgmt .rest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.rest-card { background: var(--rp-card); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.rest-card .rest-card-head { position: relative; height: 104px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 14px; background: #1f2937; }
.rest-card .rest-card-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rest-card .rest-card-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.12) 0%, rgba(15,23,42,0.74) 100%); }
.rest-card .rest-name { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 17px; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.rest-card .rest-head-badges { position: relative; z-index: 1; display: flex; gap: 6px; }
.rest-card .rest-card-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rest-card .rest-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rest-card .cuisine-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.rest-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--rp-gold); font-weight: 700; font-size: 13px; }
.rest-card .rest-loc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--rp-text-2); }
.rest-card .rest-loc svg { flex-shrink: 0; }
.rest-card .rest-figures { display: flex; gap: 14px; font-size: 12px; color: var(--rp-text-2); flex-wrap: wrap; }
.rest-card .rest-figures span { display: inline-flex; align-items: center; gap: 5px; }
.rest-card .rest-partner { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rp-text-2); }
.rest-card .fulfil-box { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--rp-bg); }
.rest-card .fulfil-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.rest-card .fulfil-row .fulfil-title { font-weight: 600; }
.rest-card .rest-note { font-size: 11.5px; color: var(--rp-amber); background: color-mix(in srgb, #EAB300 10%, #fff); padding: 6px 10px; border-radius: 8px; }
.rest-card .rest-admin { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.rest-card .rest-admin .admin-initials { width: 26px; height: 26px; border-radius: 50%; background: var(--rp-primary-tint); color: var(--rp-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.rest-card .rest-admin .admin-name { font-size: 12px; color: var(--rp-text-2); flex: 1; }
.rest-card .rest-card-actions { display: flex; gap: 8px; border-top: 1px solid var(--rp-border); padding-top: 10px; }
.rest-card .rest-card-actions .btn-mini { flex: 1; }

/* Mini rectangular button (cards, table rows, panels) */
.rest-mgmt .btn-mini { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; height: 32px; border-radius: 8px; border: 1px solid var(--rp-border); background: #fff; color: var(--rp-text); font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.rest-mgmt .btn-mini:hover { border-color: var(--rp-primary); color: var(--rp-primary); }

/* Gold outline pill button */
.rest-mgmt .btn.btn-gold-outline { background: #fff; color: var(--rp-gold); box-shadow: inset 0 0 0 1px var(--rp-gold); font-weight: 600; }

/* Pending approval (filter item: shown under All / Pending Approval tabs) */
.rest-mgmt .pending-stack { display: flex; flex-direction: column; gap: 22px; }
.rest-mgmt .pending-card { border-left: 4px solid var(--rp-amber); }
.rest-mgmt .pending-card .pending-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rest-mgmt .pending-card .pending-name { font-size: 18px; font-weight: 700; }
.rest-mgmt .pending-card .pending-meta { margin: 6px 0 0; font-size: 13px; color: var(--rp-text-2); }
.rest-mgmt .pending-card .pending-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Empty state when no restaurant matches the active filters */
.rest-mgmt .filter-empty { padding: 48px 24px; text-align: center; }
.rest-mgmt .filter-empty strong { display: block; font-weight: 700; margin-bottom: 6px; }
.rest-mgmt .filter-empty span { color: var(--rp-text-2); font-size: 14px; }

/* Onboard wizard */
.panel-onboard { width: 520px; }
.rest-mgmt .wizard-tabs { margin-bottom: 18px; }
.rest-mgmt .toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--rp-border); border-radius: 10px; }
.rest-mgmt .toggle-row strong { display: block; font-size: 13px; font-weight: 600; }
.rest-mgmt .toggle-row .toggle-hint { display: block; font-size: 12px; color: var(--rp-text-2); margin-top: 2px; }
.rest-mgmt .upload-drop { border: 2px dashed var(--rp-border); border-radius: 12px; padding: 22px; text-align: center; color: var(--rp-text-2); font-size: 13px; }
.rest-mgmt .radio-inline { display: flex; gap: 16px; }
.rest-mgmt .option-stack { display: flex; flex-direction: column; gap: 10px; }
.rest-mgmt .option-card { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--rp-border); border-radius: 12px; cursor: pointer; }
.rest-mgmt .option-card.selected { border-color: var(--rp-primary); }
.rest-mgmt .option-card.option-sm { padding: 12px; }
.rest-mgmt .option-card input { margin-top: 3px; accent-color: var(--rp-primary); }
.rest-mgmt .option-card strong { display: block; font-size: 14px; font-weight: 600; }
.rest-mgmt .option-card .option-sub { display: block; font-size: 12px; color: var(--rp-text-2); }
.rest-mgmt .coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rest-mgmt .coverage-grid .check-row { font-size: 13px; }
.rest-mgmt .form-subhead { font-size: 14px; font-weight: 700; margin-top: 4px; }
.rest-mgmt .form-subnote { font-size: 12px; color: var(--rp-text-2); margin-top: -10px; }

/* Manage panel — administrative controls */
.rest-mgmt .admin-controls { padding: 16px; border-radius: 14px; background: color-mix(in srgb, #84754E 8%, #fff); border: 1px solid color-mix(in srgb, #84754E 25%, #fff); display: flex; flex-direction: column; gap: 14px; }
.rest-mgmt .admin-controls .controls-title { font-size: 14px; font-weight: 700; color: var(--rp-gold); }
.rest-mgmt .assign-row { display: flex; gap: 8px; }
.rest-mgmt .assign-row .select-wrap { flex: 1; }

/* Enrollment link modal */
.rest-mgmt .enroll-link-box { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--rp-bg); font-size: 12.5px; color: var(--rp-primary); }
.rest-mgmt .enroll-link-box .enroll-url { overflow-wrap: anywhere; }
.rest-mgmt .enroll-link-box .btn-mini { margin-left: auto; flex-shrink: 0; }

/* Responsive */
@media (max-width: 1600px) {
  .kpi-grid.rest-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .rest-mgmt .rest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .panel-onboard .panel-foot { flex-wrap: wrap; }
  .panel-onboard .panel-foot .btn { flex: 1 1 40%; }
  .kpi-grid.rest-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rest-mgmt .rest-grid { grid-template-columns: 1fr; }
  .rest-mgmt .rest-filter .last-updated { margin-left: 0; }
  .rest-mgmt .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Round 3 — list-view table renders as stacked cards on mobile (name + status top row) */
@media (max-width: 768px) {
  .rest-mgmt .data-table.card-table .c-title { width: auto; flex: 1; order: 1; margin-top: 0; min-width: 0; }
}

/* ---- admin-roles.css ---- */
/* ============================================================
   Admin — Roles & Permissions (admin-roles.html)
   ============================================================ */
.admin-roles { display: flex; flex-direction: column; gap: 22px; }
.admin-roles .page-head { margin-bottom: 0; }

/* role cards — the grid doubles as the tab strip (data-tabs="role") */
.admin-roles .role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-bottom: none; overflow: visible; }
.admin-roles .role-grid .role-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left;
  background: var(--rp-card); border: 2px solid transparent; border-radius: 16px;
  box-shadow: var(--shadow-card); padding: 18px; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--rp-text); white-space: normal;
}
.admin-roles .role-card .role-head { display: flex; align-items: center; justify-content: space-between; }
.admin-roles .role-card .role-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.admin-roles .role-card .role-name { font-size: 15.5px; font-weight: 700; }
.admin-roles .role-card .role-desc { font-size: 12.5px; color: var(--rp-text-2); line-height: 1.5; min-height: 36px; }
.admin-roles .role-card .role-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rp-border); padding-top: 10px; }
.admin-roles .role-card .role-users { font-size: 12.5px; color: var(--rp-text-2); }
.admin-roles .role-card .role-view { font-size: 12.5px; font-weight: 600; }

.admin-roles .role-card.tone-gold .role-icon { background: color-mix(in srgb, var(--c-gold) 14%, #fff); color: var(--c-gold); }
.admin-roles .role-card.tone-blue .role-icon { background: color-mix(in srgb, var(--c-blue) 14%, #fff); color: var(--c-blue); }
.admin-roles .role-card.tone-green .role-icon { background: color-mix(in srgb, var(--c-green) 14%, #fff); color: var(--c-green); }
.admin-roles .role-card.tone-purple .role-icon { background: color-mix(in srgb, var(--c-purple) 14%, #fff); color: var(--c-purple); }
.admin-roles .role-card.tone-cyan .role-icon { background: color-mix(in srgb, var(--c-cyan) 14%, #fff); color: var(--c-cyan); }
.admin-roles .role-card.tone-grey .role-icon { background: color-mix(in srgb, var(--c-grey) 14%, #fff); color: var(--c-grey); }
.admin-roles .role-card.tone-gold .role-view { color: var(--c-gold); }
.admin-roles .role-card.tone-blue .role-view { color: var(--c-blue); }
.admin-roles .role-card.tone-green .role-view { color: var(--c-green); }
.admin-roles .role-card.tone-purple .role-view { color: var(--c-purple); }
.admin-roles .role-card.tone-cyan .role-view { color: var(--c-cyan); }
.admin-roles .role-card.tone-grey .role-view { color: var(--c-grey); }
.admin-roles .role-card.tone-gold.active { border-color: var(--c-gold); }
.admin-roles .role-card.tone-blue.active { border-color: var(--c-blue); }
.admin-roles .role-card.tone-green.active { border-color: var(--c-green); }
.admin-roles .role-card.tone-purple.active { border-color: var(--c-purple); }
.admin-roles .role-card.tone-cyan.active { border-color: var(--c-cyan); }
.admin-roles .role-card.tone-grey.active { border-color: var(--c-grey); }

/* permission matrix card */
.admin-roles .matrix-card { overflow: hidden; }
.admin-roles .matrix-card.tab-panel.active { display: block; }
.admin-roles .matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--rp-border); }
.admin-roles .matrix-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-roles .btn.btn-outline-blue { background: #fff; color: var(--rp-primary); box-shadow: inset 0 0 0 1px var(--rp-primary); font-weight: 600; }
.admin-roles .matrix-table thead tr { background: var(--rp-bg); }
.admin-roles .matrix-table th { padding: 12px 20px; }
.admin-roles .matrix-table th.align-center { padding: 12px 8px; min-width: 80px; }
.admin-roles .matrix-table td { padding: 12px 20px; }
.admin-roles .matrix-table td.align-center { padding: 12px 8px; }
.admin-roles .perm-yes { display: inline-flex; color: var(--rp-green); }
.admin-roles .perm-no { color: #CBD2DE; }
.admin-roles .matrix-note { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rp-border); font-size: 12.5px; color: var(--rp-text-2); }
.admin-roles .matrix-note svg { flex-shrink: 0; }

@media (max-width: 1280px) {
  .admin-roles .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .admin-roles .role-grid { grid-template-columns: 1fr; }
  .admin-roles .role-card .role-desc { min-height: 0; }
}

/* Round 3 — permission matrix on mobile: stays a compact grid (module + V/C/E/D check
   columns) exactly as the Admin Mobile design renders it — not stacked cards */
.admin-roles .matrix-table .perm-abbr { display: none; }
@media (max-width: 768px) {
  .admin-roles .matrix-table .perm-full { display: none; }
  .admin-roles .matrix-table .perm-abbr { display: inline; }
  .admin-roles .table-scroll { overflow: visible; }
  .admin-roles .matrix-table th { padding: 9px 10px; font-size: 11px; }
  .admin-roles .matrix-table th.align-center { min-width: 30px; padding: 9px 4px; }
  .admin-roles .matrix-table td { padding: 11px 10px; font-size: 12.5px; }
  .admin-roles .matrix-table td.align-center { padding: 11px 4px; }
}

/* ---- admin-support.css ---- */
/* ---------------- Admin — Support Module ---------------- */
/* Main queue + 300px side column */
.admin-support .support-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px; align-items: start;
}
.admin-support .support-main { display: flex; flex-direction: column; gap: 16px; }
.admin-support .support-main .tabs-card,
.admin-support .support-main .filter-card { margin-bottom: 0; }
.admin-support .support-side { display: flex; flex-direction: column; gap: 16px; }
.admin-support .agents-card, .admin-support .cats-card { padding: 18px; }
@media (max-width: 1100px) { .admin-support .support-layout { grid-template-columns: minmax(0, 1fr); } }

/* Ticket table */
.admin-support .ticket-table tbody tr { cursor: pointer; }
.admin-support .ticket-table tbody tr:hover td { background: var(--rp-bg); }
.admin-support .ticket-id { font-weight: 700; color: var(--rp-primary); }
.admin-support .ticket-subj { font-weight: 600; font-size: 13.5px; }
.admin-support .ticket-meta-line { font-size: 12px; color: var(--rp-text-2); margin-top: 2px; }
.admin-support .agent-unassigned { color: var(--c-red); font-weight: 600; font-size: 13px; }
.admin-support .agent-name { font-size: 13px; }

/* Support Agents card */
.agents-card .agents-list { display: flex; flex-direction: column; gap: 12px; }
.agents-card .agent-row { display: flex; align-items: center; gap: 10px; }
.agents-card .agent-info { flex: 1; min-width: 0; }
.agents-card .agent-info strong { display: block; font-size: 13px; font-weight: 600; }
.agents-card .agent-info span { display: block; font-size: 11.5px; color: var(--rp-text-2); }
.agents-card .agent-csat {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; color: var(--c-gold);
}
.agents-card .agent-csat svg { fill: currentColor; stroke: none; }

/* Tickets by Category card */
.cats-card .cat-list { display: flex; flex-direction: column; gap: 10px; }
.cats-card .cat-line { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.cats-card .cat-label { color: var(--rp-text-2); }
.cats-card .cat-count { font-weight: 700; }
.cats-card .progress-bar { height: 7px; }
.cats-card .progress-bar.tone-purple .progress-fill { background: var(--c-purple); }
.cats-card .progress-bar.tone-cyan .progress-fill { background: var(--c-cyan); }
.cats-card .progress-bar.tone-blue .progress-fill { background: var(--c-blue); }

/* Ticket detail panel */
.ticket-detail .ticket-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-detail .ticket-title { margin: 10px 0 4px; font-size: 17px; font-weight: 700; }
.ticket-detail .ticket-meta { font-size: 13px; color: var(--rp-text-2); }
.ticket-detail .convo-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ticket-detail .convo-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-detail .msg { background: var(--rp-bg); border-radius: 12px; padding: 12px; }
.ticket-detail .msg.me { background: var(--blue-tint); }
.ticket-detail .msg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ticket-detail .msg-who { font-size: 12.5px; font-weight: 700; }
.ticket-detail .msg.me .msg-who { color: var(--rp-primary); }
.ticket-detail .msg-time { font-size: 11px; color: var(--rp-text-2); white-space: nowrap; }
.ticket-detail .msg-body { font-size: 13px; color: var(--rp-text); line-height: 1.5; }
.ticket-detail .reply-opts { display: flex; gap: 16px; flex-wrap: wrap; }
.ticket-detail .reply-opts .check-row { font-size: 12.5px; color: var(--rp-text-2); }

/* round 3 — mobile card-table (ticket cards per Admin Mobile design) */
@media (max-width: 768px) {
  /* line 1: ticket id + updated time (top-right) */
  .admin-support .ticket-table td.c-id { flex: 1 0 calc(100% - 90px); }
  .admin-support .ticket-table td.c-status { font-size: 11.5px; }
  .admin-support .ticket-table td.c-title .ticket-subj { font-size: 14px; }
  /* chips row: category · priority · status + assignee right */
  .admin-support .ticket-table td.m-chip { width: auto; order: 5; margin-top: 4px; }
  .admin-support .ticket-table td.m-right { margin-left: auto; font-size: 11.5px; flex: 0 0 auto; }
}

/* ---- rest-dashboard.css ---- */
/* ---------------- Dashboard (restaurant-dashboard.html) ---------------- */
/* Mobile: Requires Action orders render as their own stacked cards (mobile design:
   id left + time right, customer, items/location, full-width Accept/Reject) */
@media (max-width: 768px) {
  .action-list.rp-card { background: transparent !important; box-shadow: none; padding: 0 !important; overflow: visible !important; }
  .action-list .action-list-head { padding: 0 2px 10px; border-bottom: none; }
  .action-list .action-row {
    background: var(--rp-card); border-radius: 16px; box-shadow: var(--shadow-card);
    padding: 14px; border-bottom: none; margin-bottom: 12px;
  }
  .action-list .action-row:last-child { margin-bottom: 0; }
  .action-list .action-row .order-items { white-space: normal; }
  .action-list .action-row .order-actions { display: flex; }
  .action-list .action-row .order-actions .btn { flex: 1; height: 44px; }
  /* id left + time right on the card's top line, like the mobile design */
  .action-list .action-row .mb-2 { display: flex; align-items: center; justify-content: space-between; }
  .action-list .action-row .order-time { margin-left: 0; }
}

/* ---- rest-kitchen.css ---- */
/* ============================================================
   Kitchen page (restaurant-kitchen.html)
   ============================================================ */

/* Live clock in the page head */
.page-head .kitchen-clock { font-size: 14px; font-weight: 700; color: var(--rp-primary); font-variant-numeric: tabular-nums; }

/* ---- Kitchen workflow speed ---- */
.kitchen-speed { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; }
.kitchen-speed .speed-card { text-align: center; }
.kitchen-speed .speed-metric { font-size: 13px; font-weight: 600; color: var(--rp-text-2); margin-bottom: 8px; }
.kitchen-speed .speed-note { font-size: 12px; font-weight: 600; margin-top: 6px; }
.kitchen-speed .speed-note.tone-red { color: var(--rp-red); }
.kitchen-speed .speed-note.tone-green { color: var(--rp-green); }
.kitchen-speed .speed-scale { font-size: 11px; color: var(--rp-text-2); }

/* Semicircle gauge — set --gauge-color / --gauge-angle (0–180deg) inline */
.speed-gauge { position: relative; width: 150px; height: 78px; margin: 4px auto 0; overflow: hidden; }
.speed-gauge .gauge-arc {
  position: absolute; top: 0; left: 0; width: 150px; height: 150px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--gauge-color) 0deg var(--gauge-angle), #EEF1FB var(--gauge-angle) 180deg, transparent 180deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 17px), #000 calc(100% - 16px));
  mask: radial-gradient(closest-side, transparent calc(100% - 17px), #000 calc(100% - 16px));
}
.speed-gauge .gauge-label { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 20px; font-weight: 700; }

/* 2×2 mini stat cards next to the gauges */
.kitchen-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kitchen-mini .mini-card { padding: 16px; display: flex; flex-direction: column; gap: 6px; justify-content: center; border: 1px solid var(--rp-border); }
.kitchen-mini .mini-card.alert { border-color: var(--rp-red); }
.kitchen-mini .mini-value { font-size: 24px; font-weight: 700; color: var(--rp-text); }
.kitchen-mini .mini-card.alert .mini-value { color: var(--rp-red); }
.kitchen-mini .mini-label { font-size: 12px; color: var(--rp-text-2); }

/* ---- Live order board (kanban) ---- */
.kitchen-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.kitchen-board .board-col { flex: 0 0 280px; background: #fff; border-radius: 12px; border: 1px solid var(--rp-border); overflow: hidden; display: flex; flex-direction: column; }
.board-col .col-bar { height: 4px; }
.board-col .col-bar.tone-red { background: var(--c-red); }
.board-col .col-bar.tone-amber { background: var(--c-amber); }
.board-col .col-bar.tone-blue { background: var(--c-blue); }
.board-col .col-bar.tone-purple { background: var(--c-purple); }
.board-col .col-bar.tone-green { background: var(--c-green); }
.board-col .col-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--rp-border); }
.board-col .col-title { font-size: 13px; font-weight: 700; }
.board-col .col-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 120px; }

.ticket-card { border: 1px solid var(--rp-border); border-radius: 10px; padding: 12px; background: #fff; }
.ticket-card .ticket-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ticket-card .ticket-id { font-weight: 700; font-size: 13px; color: var(--rp-primary); }
.ticket-card .ticket-timer { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.ticket-card .ticket-timer.tone-green { color: var(--c-green); background: color-mix(in srgb, var(--c-green) 12%, #fff); }
.ticket-card .ticket-timer.tone-amber { color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 12%, #fff); }
.ticket-card .ticket-timer.tone-red { color: var(--c-red); background: color-mix(in srgb, var(--c-red) 12%, #fff); }
.ticket-card .ticket-cust-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ticket-card .ticket-cust { font-weight: 600; font-size: 13px; }
.ticket-card .ticket-fulf { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.ticket-card .ticket-fulf.delivery { background: color-mix(in srgb, var(--rp-primary-bright) 12%, #fff); color: var(--rp-primary); }
.ticket-card .ticket-fulf.pickup { background: color-mix(in srgb, var(--rp-gold) 12%, #fff); color: var(--rp-gold); }
.ticket-card .ticket-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ticket-card .ticket-items li { font-size: 12px; color: var(--rp-text-2); }
.ticket-card .ticket-items li.ticket-more { color: var(--rp-primary); font-weight: 600; }
.ticket-card .ticket-note { margin-top: 8px; font-size: 12px; color: var(--rp-amber); background: color-mix(in srgb, #D97706 10%, #fff); padding: 5px 8px; border-radius: 7px; }
.ticket-card .ticket-btn { margin-top: 10px; width: 100%; height: 34px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: #fff; }
.ticket-card .ticket-btn.tone-red { background: var(--c-red); }
.ticket-card .ticket-btn.tone-amber { background: var(--c-amber); }
.ticket-card .ticket-btn.tone-blue { background: var(--c-blue); }
.ticket-card .ticket-btn.tone-purple { background: var(--c-purple); }
.ticket-card .ticket-btn.tone-green { background: var(--c-green); }
.ticket-card .ticket-btn:disabled { background: var(--rp-bg); color: var(--rp-text-2); cursor: default; opacity: .8; }

/* ---- Item availability ---- */
.avail-section .avail-search { width: 240px; }
.avail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.avail-card { position: relative; border: 1px solid var(--rp-border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.avail-card.out { background: color-mix(in srgb, #DC2626 5%, #fff); }
.avail-card .avail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.avail-card .avail-name { font-size: 14px; font-weight: 600; }
.avail-card .avail-cat { margin-top: 4px; }
.avail-card .avail-stock { font-size: 12px; color: var(--rp-text-2); }
.avail-card .avail-state { display: flex; align-items: center; gap: 8px; }
.avail-card .avail-status { font-size: 13px; font-weight: 600; color: var(--rp-text-2); }
.avail-card .avail-status.on { color: var(--rp-green); }

@media (max-width: 1280px) {
  .kitchen-speed { grid-template-columns: 1fr 1fr; }
  .kitchen-speed .speed-mini-col { grid-column: span 2; }
  .avail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .kitchen-speed { grid-template-columns: 1fr; }
  .kitchen-speed .speed-mini-col { grid-column: auto; }
  .avail-grid { grid-template-columns: 1fr; }
  .avail-section .section-header { flex-wrap: wrap; }
  .avail-section .avail-search { width: 100%; }
}

/* ---- rest-menu.css ---- */
/* ============================================================
   Menu Management page (restaurant-menu.html)
   ============================================================ */

/* Hero stats (Total / Available / Unavailable) */
.menu-hero-stats { display: flex; gap: 16px; }
.menu-hero-stats .menu-stat { text-align: right; }
.menu-hero-stats .stat-cap { font-size: 11px; color: var(--rp-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.menu-hero-stats .stat-num { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.menu-hero-stats .stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.menu-hero-stats .stat-dot.tone-green { background: var(--c-green); }
.menu-hero-stats .stat-dot.tone-red { background: var(--c-red); }

/* Action buttons under the hero */
.menu-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.menu-actions .btn-outline-blue { background: #fff; color: var(--rp-primary); box-shadow: inset 0 0 0 1px var(--rp-primary); font-weight: 600; }

/* Category tabs card */
.menu-cats { padding: 4px 12px 0; margin-bottom: 18px; }

/* Item grid */
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.menu-card { overflow: hidden; display: flex; flex-direction: column; }
.menu-card .menu-photo-wrap { position: relative; height: 120px; background: #1f2937; }
.menu-card .menu-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.menu-card .menu-status { position: absolute; top: 10px; right: 10px; }
.menu-card .menu-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.menu-card .menu-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.menu-card .menu-name { font-size: 15px; font-weight: 700; }
.menu-card .menu-price { font-size: 15px; font-weight: 700; color: var(--rp-primary); white-space: nowrap; }
.menu-card .menu-desc { font-size: 12.5px; color: var(--rp-text-2); line-height: 1.5; }
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; }
.menu-card .menu-meta { display: flex; gap: 14px; font-size: 12px; color: var(--rp-text-2); margin-top: auto; padding-top: 8px; }
.menu-card .menu-card-actions { display: flex; gap: 8px; border-top: 1px solid var(--rp-border); padding-top: 10px; }

/* Small outline button (Edit / + Add rows) */
.btn-mini { padding: 0 14px; height: 34px; border-radius: 8px; border: 1px solid var(--rp-border); background: #fff; color: var(--rp-text); font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-mini:hover { background: var(--neutral-100); }
.menu-card .menu-card-actions .btn-mini { flex: 1; }

/* List view thumbnail */
.menu-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #1f2937; }

/* ---- Add / Edit item panel ---- */
.prep-scaling-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--rp-border); border-radius: 10px; }
.prep-scaling-row span { font-size: 13px; font-weight: 600; }
.radio-row { display: flex; gap: 16px; }
.radio-row .check-row { font-size: 14px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-grid .check-row { font-size: 13px; }
.drop-zone { border: 2px dashed var(--rp-border); border-radius: 12px; padding: 24px; text-align: center; color: var(--rp-text-2); font-size: 13px; }
.drop-zone strong { display: block; font-weight: 600; color: var(--rp-text); }
.drop-zone span { display: block; margin-top: 4px; }

/* Variations / Add-ons subsections */
.subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-panel .sub-title { font-size: 14px; font-weight: 700; }
.side-panel .sub-desc { font-size: 12.5px; color: var(--rp-text-2); }
.sub-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sub-rows .sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--rp-border); border-radius: 10px; font-size: 13px; }
.sub-check { margin-top: 10px; font-size: 13px; }

/* Related-item chips */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip-row .chip { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--rp-primary-tint); color: var(--rp-primary); font-size: 13px; font-weight: 600; cursor: pointer; border: none; }

/* Preview modal photo */
.preview-photo { height: 150px; border-radius: 12px; overflow: hidden; background: #1f2937; margin-bottom: 14px; }
.preview-photo img { width: 100%; height: 100%; object-fit: cover; }
.preview-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.preview-name-row .preview-name, .preview-name-row .preview-price { font-size: 18px; font-weight: 700; }
.preview-name-row .preview-price { color: var(--rp-primary); }
.preview-total { border-top: 1px solid var(--rp-border); margin-top: 12px; padding-top: 12px; display: flex; justify-content: space-between; font-weight: 700; }
.preview-total .preview-amount { color: var(--rp-primary); }

@media (max-width: 1280px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .menu-grid { grid-template-columns: 1fr; }
  .menu-hero-stats { gap: 12px; }
  .check-grid { grid-template-columns: 1fr; }
}

/* ---- rest-offers.css ---- */
/* ============================================================
   Page: Offers & Promotions (restaurant-offers.html)
   ============================================================ */

/* page column rhythm (root flex gap from the source) */
.offers-page { display: flex; flex-direction: column; gap: 22px; }
.offers-page .page-head, .offers-page .kpi-grid { margin-bottom: 0; }

/* outline button variants (source: outlineBtn / goldOutline) */
.btn.btn-outline-blue { background: #fff; color: var(--rp-primary); box-shadow: inset 0 0 0 1px var(--rp-primary); font-weight: 600; }
.btn.btn-outline-gold { background: #fff; color: var(--rp-gold); box-shadow: inset 0 0 0 1px var(--rp-gold); font-weight: 600; }

/* live status dot next to KPI value */
.offers-page .kpi-card .kpi-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-green); flex-shrink: 0; }

/* tabs strip card */
.offers-page .tabs-card { padding: 4px 12px 0; }

/* section header tool cluster (search + status select) */
.offers-page .section-tools { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- Offers list ---------------- */
.offer-list { display: flex; flex-direction: column; gap: 12px; }
.offer-row {
  display: grid; grid-template-columns: 2.2fr 1.6fr 1.6fr 1.2fr auto;
  gap: 16px; align-items: center; padding: 16px;
  border: 1px solid var(--rp-border); border-radius: 12px;
}
.offer-row .offer-ident { display: flex; gap: 12px; min-width: 0; }
.offer-row .offer-type-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-blue) 12%, #fff); color: var(--c-blue);
}
.offer-row .offer-type-icon.tone-purple { background: color-mix(in srgb, var(--c-purple) 12%, #fff); color: var(--c-purple); }
.offer-row .offer-type-icon.tone-cyan { background: color-mix(in srgb, var(--c-cyan) 12%, #fff); color: var(--c-cyan); }
.offer-row .offer-type-icon.tone-amber { background: color-mix(in srgb, var(--c-amber) 12%, #fff); color: var(--c-amber); }
.offer-row .offer-type-icon.tone-gold { background: color-mix(in srgb, var(--c-gold) 12%, #fff); color: var(--c-gold); }
.offer-row .offer-name { font-weight: 700; font-size: 14px; }
.offer-row .offer-type-badge { margin: 4px 0; }
.offer-row .offer-desc { font-size: 12px; color: var(--rp-text-2); }
.offer-row .deal-value { font-weight: 700; font-size: 15px; color: var(--rp-primary); }
.offer-row .deal-cond { font-size: 12px; color: var(--rp-text-2); margin-top: 2px; }
.offer-row .deal-items { font-size: 12px; color: var(--rp-text-2); }
.offer-row .offer-window { font-size: 12px; color: var(--rp-text-2); }
.offer-row .window-range { display: flex; align-items: center; gap: 5px; }
.offer-row .window-time { margin-top: 3px; }
.offer-row .window-used { margin-top: 3px; font-weight: 600; color: var(--rp-text); }
.offer-row .offer-state { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.offer-row .offer-actions { display: flex; gap: 6px; }

/* ---------------- Coupon codes table ---------------- */
.coupon-code {
  display: inline-block; font-weight: 700; padding: 4px 10px; border-radius: 7px;
  background: var(--rp-primary-tint); color: var(--rp-primary); font-size: 13px;
}
.coupon-usage { min-width: 120px; }
.coupon-usage .usage-count { font-size: 12px; margin-bottom: 4px; }
.coupon-usage .usage-bar { height: 6px; border-radius: var(--radius-pill); background: var(--rp-bg); overflow: hidden; }
.coupon-usage .usage-fill { height: 100%; border-radius: var(--radius-pill); background: var(--rp-primary); }

/* ---------------- Promotional banners ---------------- */
.banner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.banner-card { overflow: hidden; }
.banner-card .banner-visual {
  height: 110px; background-color: #1E2F7A; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; position: relative;
  color: #fff; font-weight: 700; font-size: 18px; padding: 16px; text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.banner-card .banner-status { position: absolute; top: 10px; right: 10px; }
.banner-card .banner-body { padding: 14px; }
.banner-card .banner-title { font-weight: 700; font-size: 14px; }
.banner-card .banner-linked { font-size: 12px; color: var(--rp-text-2); margin: 4px 0; }
.banner-card .banner-range { font-size: 12px; color: var(--rp-text-2); display: flex; align-items: center; gap: 5px; }
.banner-card .banner-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--rp-border); margin-top: 12px; padding-top: 12px;
}
.banner-card .banner-tools { display: flex; gap: 6px; }

/* ---------------- Create Offer / Create Coupon panels ---------------- */
.promo-form .toggle-row { border: 1px solid var(--rp-border); border-radius: 10px; padding: 12px; }
.promo-form .toggle-row .toggle-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo-form .toggle-row .toggle-row-label { font-size: 13px; font-weight: 600; }
.promo-form .toggle-row .check-row { margin-top: 8px; font-size: 13px; }
.promo-form .radio-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.promo-form .radio-group .check-row { font-size: 13px; gap: 6px; }
.promo-form .code-row, .promo-form .date-range { display: flex; gap: 8px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
  .offer-row { grid-template-columns: 1fr 1fr; }
  .banner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .offer-row { grid-template-columns: 1fr; }
  .banner-grid { grid-template-columns: 1fr; }
  .offers-page .section-tools { width: 100%; }
  .offers-page .section-tools .search-input { flex: 1; width: auto !important; }
  .offers-page .section-header { flex-wrap: wrap; }
}

/* Mobile offer cards — status/toggle pinned top-right, actions as divider footer (matches mobile design) */
@media (max-width: 767px) {
  .offer-row { position: relative; gap: 8px; }
  .offer-row .offer-ident { padding-right: 92px; }
  .offer-row .offer-state { position: absolute; top: 14px; right: 14px; flex-direction: column; align-items: flex-end; gap: 6px; }
  .offer-row .offer-actions { border-top: 1px solid var(--rp-border); padding-top: 10px; justify-content: flex-end; }
}

/* ---- rest-orders.css ---- */
/* ============================================================
   Orders page (restaurant-orders.html)
   ============================================================ */

/* Six summary filter cards in one row */
.kpi-grid.orders-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Filter toolbar card */
.orders-filter { padding: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.orders-filter .segmented { border-radius: var(--radius-pill); background: var(--rp-bg); }
.orders-filter .segmented button { border-radius: var(--radius-pill); height: 34px; padding: 0 14px; font-size: 13px; }
.orders-filter .segmented button.active { color: var(--rp-primary); font-weight: 600; }
.orders-filter .toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Orders table card */
.orders-table-card .tabs-wrap { padding: 4px 12px 0; }
.orders-table-card .order-link { font-weight: 700; color: var(--rp-primary); }
.orders-table-card .cell-items { font-size: 13px; }
.orders-table-card .cell-time { white-space: nowrap; }
.orders-table-card .pickup-code { font-size: 13px; }
.orders-table-card .pickup-code .code-label { color: var(--rp-text-2); }
.orders-table-card .pickup-code .code-value { font-weight: 700; color: var(--rp-gold); }
.orders-table-card .cell-actions { justify-content: flex-end; }
.orders-table-card .empty-state { padding: 48px; text-align: center; }
.orders-table-card .empty-state strong { display: block; font-weight: 700; margin-bottom: 6px; }
.orders-table-card .empty-state span { color: var(--rp-text-2); font-size: 14px; }
.orders-table-card .table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--rp-border); flex-wrap: wrap; }
.orders-table-card .table-foot .foot-count { font-size: 13px; color: var(--rp-text-2); }
.orders-table-card .pager { display: flex; gap: 6px; }
.orders-table-card .pager button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--rp-border); background: #fff; color: var(--rp-text-2); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; }
.orders-table-card .pager button.active { background: var(--rp-primary); border-color: var(--rp-primary); color: #fff; }

/* Order details modal (620px in the source) */
.modal-box.order-details-box { width: 620px; }
.order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.order-detail-grid .detail-label { font-size: 12px; color: var(--rp-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.order-detail-grid .detail-value { font-size: 14px; font-weight: 600; }

/* Responsive (mirrors the shared kpi-grid behaviour) */
@media (max-width: 1280px) {
  .kpi-grid.orders-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .kpi-grid.orders-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .modal-box.order-details-box { width: 100%; }
  .order-detail-grid { grid-template-columns: 1fr; gap: 12px; }
  /* card-table: fulfilment chip + location share one meta line (mobile order card) */
  .orders-table-card .card-table td.c-meta.m-inline { width: auto; }
  .orders-table-card .card-table td.c-meta.m-inline + td.c-meta.m-inline { flex: 1; min-width: 0; }
  /* amount value stays bold/dark like the mobile card's total */
  .orders-table-card .card-table .c-row .cell-strong { font-size: 15px; }
  /* flattened host card: empty state + table foot render as their own cards */
  .orders-table-card .empty-state { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 32px 20px; }
  .orders-table-card .table-foot { border-top: none; padding: 12px 4px; }
}

/* ---- rest-profile.css ---- */
/* ---------------- Profile Settings (restaurant-profile.html) ---------------- */
.profile-settings .tabs { margin-bottom: 20px; }
.profile-settings .tabs button { display: inline-flex; align-items: center; gap: 7px; }
.profile-settings .tabs button svg { flex-shrink: 0; }

.profile-settings .save-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.profile-settings .panel-note { font-size: 12px; color: var(--rp-text-2); }

.profile-settings .setting-block { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--rp-border); }
.profile-settings .setting-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.profile-settings .block-head { margin-bottom: 14px; }
.profile-settings .block-head .block-title { font-size: 15px; font-weight: 700; }
.profile-settings .block-head .block-sub { font-size: 12.5px; color: var(--rp-text-2); margin-top: 2px; }

/* outline / mini buttons from the source style set */
.profile-settings .btn-outline-blue {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 40px;
  border-radius: var(--radius-pill); border: 1px solid var(--rp-primary); background: #fff;
  color: var(--rp-primary); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
}
.profile-settings .btn-outline-grey {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 40px;
  border-radius: var(--radius-pill); border: 1px solid var(--rp-border); background: #fff;
  color: var(--rp-text-2); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
}
.profile-settings .mini-btn {
  padding: 0 14px; height: 34px; border-radius: 8px; border: 1px solid var(--rp-border);
  background: #fff; color: var(--rp-text); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit;
}
.profile-settings .mini-btn.danger { color: var(--rp-red); border-color: var(--rp-red); }

/* banner / logo / gallery previews */
.profile-settings .banner-preview {
  position: relative; display: flex; align-items: flex-end; height: 90px;
  border-radius: 10px; overflow: hidden; padding: 10px; background: #1E2F7A;
}
.profile-settings .banner-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-settings .banner-preview::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.45));
}
.profile-settings .banner-change {
  position: relative; z-index: 1; padding: 0 12px; height: 30px; border-radius: 8px; border: none;
  background: rgba(255,255,255,.9); color: var(--rp-primary); font-weight: 600; font-size: 12px;
  cursor: pointer; font-family: inherit;
}
.profile-settings .logo-row { display: flex; align-items: center; gap: 12px; }
.profile-settings .logo-preview {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: var(--rp-gold); flex-shrink: 0;
}
.profile-settings .gallery-row { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-settings .gallery-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--rp-bg); }
.profile-settings .gallery-add {
  width: 72px; height: 72px; border-radius: 10px; border: 2px dashed var(--rp-border);
  background: #fff; color: var(--rp-text-2); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
}

/* rating display */
.profile-settings .rating-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-settings .rating-stars { display: inline-flex; gap: 2px; }
.profile-settings .rating-stars .on { color: var(--rp-gold); }
.profile-settings .rating-stars .off { color: #d8dae0; }
.profile-settings .rating-score { font-size: 28px; font-weight: 700; }
.profile-settings .rating-count { font-size: 13px; color: var(--rp-text-2); }

/* operating hours */
.profile-settings .hours-table input[type="time"] { width: 110px; }
.profile-settings .hours-table input[type="time"]:disabled { background: var(--neutral-100); color: var(--rp-text-2); cursor: not-allowed; }
.profile-settings .day-note { font-size: 11px; color: var(--rp-text-2); }
.profile-settings .copy-hint { font-size: 12.5px; color: var(--rp-text-2); margin-top: 8px; }

/* ordering status */
.profile-settings .accept-hero {
  padding: 24px; border-radius: 14px; border: 2px solid var(--rp-green);
  background: color-mix(in srgb, #16A34A 5%, #fff);
  display: flex; align-items: center; gap: 18px; margin-bottom: 20px;
}
.profile-settings .accept-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--rp-green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profile-settings .accept-copy { flex: 1; }
.profile-settings .accept-title { font-size: 17px; font-weight: 700; }
.profile-settings .accept-sub { font-size: 13px; color: var(--rp-text-2); margin-top: 2px; }
.profile-settings .accept-switch { text-align: center; }
.profile-settings .accept-hint { font-size: 11px; color: var(--rp-text-2); margin-top: 6px; }

.profile-settings .op-stack { display: flex; flex-direction: column; gap: 12px; }
.profile-settings .op-card { padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.profile-settings .op-card .op-icon {
  width: 36px; height: 36px; border-radius: 9px; background: var(--rp-primary-tint); color: var(--rp-primary);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profile-settings .op-card .op-content { flex: 1; order: 1; min-width: 0; }
.profile-settings .op-card .toggle { order: 2; }
.profile-settings .op-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-settings .op-title { font-size: 14px; font-weight: 600; }
.profile-settings .op-desc { font-size: 12.5px; color: var(--rp-text-2); margin-top: 2px; }
.profile-settings .op-extra { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
/* chip + extra controls only shown while the toggle is on (matches source behaviour) */
.profile-settings .op-card .toggle[aria-pressed="false"] ~ .op-content .op-chip,
.profile-settings .op-card .toggle[aria-pressed="false"] ~ .op-content .op-extra { display: none; }

.profile-settings .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.profile-settings .status-row { padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-settings .status-label { font-size: 13px; color: var(--rp-text-2); }

/* security & password */
.profile-settings .pw-stack { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.profile-settings .pw-field { display: flex; flex-direction: column; gap: 6px; }
.profile-settings .pw-label { font-size: 13px; font-weight: 600; }
.profile-settings .pw-label .required-mark { color: var(--rp-red); }
.profile-settings .pw-input {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--rp-border); background: #fff;
}
.profile-settings .pw-input input { flex: 1; border: none; outline: none; font: inherit; font-size: 14px; min-width: 0; }
.profile-settings .pw-eye { border: none; background: transparent; cursor: pointer; color: var(--rp-text-2); display: inline-flex; padding: 2px; }
.profile-settings .strength-bars { display: flex; gap: 4px; margin-top: 2px; }
.profile-settings .strength-bars i { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--rp-border); }
.profile-settings .strength-bars i.on { background: #16A34A; }
.profile-settings .strength-note { font-size: 11px; color: var(--rp-green); font-weight: 600; }

.profile-settings .twofa-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.profile-settings .twofa-desc { margin: 0; font-size: 13px; color: var(--rp-text-2); max-width: 420px; }

.profile-settings .session-list { display: flex; flex-direction: column; gap: 10px; }
.profile-settings .session-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border: 1px solid var(--rp-border); border-radius: 10px;
}
.profile-settings .session-name { font-size: 14px; font-weight: 600; }
.profile-settings .session-meta { font-size: 12px; color: var(--rp-text-2); }

/* activity log */
.profile-settings .ts-cell { font-size: 13px; color: var(--rp-text-2); white-space: nowrap; }
.profile-settings .detail-cell { font-size: 13px; }
.profile-settings .ip-cell { font-size: 12px; color: var(--rp-text-2); }

@media (max-width: 760px) {
  .profile-settings .accept-hero { flex-direction: column; text-align: center; }
  .profile-settings .status-grid { grid-template-columns: 1fr; }
}

/* round 2 — save-action rows + validating password fields */
.profile-settings .save-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-settings .pw-field.form-field .pw-input input {
  height: auto; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none;
}
.profile-settings .pw-field.form-field.has-error .pw-input {
  border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

/* round 3 — Activity Log card-table (mobile design: action+module badges row, detail, time) */
@media (max-width: 768px) {
  /* the outer settings card must stay a card — only the inner activity wrapper flattens */
  .profile-settings > .rp-card:has(.data-table.card-table) {
    background: var(--rp-card) !important; box-shadow: var(--shadow-card) !important;
    padding: 24px !important; border-radius: 16px !important;
  }
  /* activity row-cards sit inside the white settings card: bordered, not shadowed */
  .profile-settings .activity-table .card-table tr { box-shadow: none; border: 1px solid var(--rp-border); padding: 13px; }
  /* action + module badges sit adjacent on the top line, like the mobile design */
  .profile-settings .activity-table .card-table .c-title { width: auto; flex: 0 0 auto; order: 1; margin-top: 0; }
  .profile-settings .activity-table .card-table .c-status { margin-left: 0; margin-right: auto; }
  .profile-settings .activity-table .card-table .c-meta { margin-top: 3px; }
  .profile-settings .activity-table .card-table .c-meta .detail-cell { white-space: normal; color: var(--rp-text); }
  /* time sits directly under the detail line — no divider, like the mobile design */
  .profile-settings .activity-table .card-table .c-foot { margin-top: 0; padding-top: 0; border-top: none; }
  .profile-settings .activity-table .card-table .c-foot .ts-cell { font-size: 11.5px; }
}

/* ---- rest-reports.css ---- */
/* ============================================================
   Restaurant — Reports & Analytics page
   ============================================================ */

/* Gold outline button (mirror the existing .btn-outline-red pattern) */
.btn.btn-outline-gold { background: #fff; color: var(--rp-gold); box-shadow: inset 0 0 0 1px var(--rp-gold); font-weight: 600; }

/* Header date inputs */
.reports-head .report-date { width: 150px; }

/* KPI groups */
.report-group { margin-bottom: 26px; }
.report-group .group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.report-group .group-accent { width: 5px; height: 18px; border-radius: 3px; flex-shrink: 0; }
.report-group .group-accent.tone-blue { background: var(--c-blue); }
.report-group .group-accent.tone-purple { background: var(--c-purple); }
.report-group .group-accent.tone-cyan { background: var(--c-cyan); }
.report-group .group-accent.tone-gold { background: var(--c-gold); }
.report-group .metric-grid { gap: 16px; }
.report-group .metric-card { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.report-group .metric-top { display: flex; align-items: center; justify-content: space-between; }
.report-group .metric-icon { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.report-group .metric-icon.tone-blue { background: color-mix(in srgb, var(--c-blue) 14%, #fff); color: var(--c-blue); }
.report-group .metric-icon.tone-purple { background: color-mix(in srgb, var(--c-purple) 14%, #fff); color: var(--c-purple); }
.report-group .metric-icon.tone-cyan { background: color-mix(in srgb, var(--c-cyan) 14%, #fff); color: var(--c-cyan); }
.report-group .metric-icon.tone-gold { background: color-mix(in srgb, var(--c-gold) 14%, #fff); color: var(--c-gold); }
.report-group .metric-value { font-size: 24px; font-weight: 700; }
.report-group .metric-label { font-size: 12.5px; color: var(--rp-text-2); }

/* Analytics sections */
.reports-analytics { margin-bottom: 26px; }
.reports-analytics .seg-pill button.active { background: var(--rp-primary); }
.reports-analytics .analytics-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.reports-analytics .analytics-grid.even { grid-template-columns: 1fr 1fr; }
.reports-analytics .chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.reports-analytics .chart-title { font-size: 15px; font-weight: 700; }
.reports-analytics .chart-sub { font-size: 12px; color: var(--rp-text-2); margin-top: 2px; }
.reports-analytics .donut-flex { display: flex; align-items: center; gap: 18px; }
.reports-analytics .donut-flex .legend-row { font-size: 12px; row-gap: 8px; }
.reports-analytics .donut-label { font-size: 22px; }
.reports-analytics .chart-legend { margin-top: 10px; }
.reports-analytics .chart-legend .legend-row { font-size: 12px; }

/* Predefined report cards */
.predef-reports .predef-grid { gap: 16px; }
.predef-reports .predef-card { padding: 0; overflow: hidden; }
.predef-reports .predef-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rp-border); }
.predef-reports .predef-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.predef-reports .predef-icon.tone-blue { background: color-mix(in srgb, var(--c-blue) 14%, #fff); color: var(--c-blue); }
.predef-reports .predef-icon.tone-purple { background: color-mix(in srgb, var(--c-purple) 14%, #fff); color: var(--c-purple); }
.predef-reports .predef-icon.tone-cyan { background: color-mix(in srgb, var(--c-cyan) 14%, #fff); color: var(--c-cyan); }
.predef-reports .predef-icon.tone-gold { background: color-mix(in srgb, var(--c-gold) 14%, #fff); color: var(--c-gold); }
.predef-reports .predef-title { font-weight: 700; font-size: 14px; }
.predef-reports .predef-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.predef-reports .predef-item { padding: 10px; border-radius: 9px; background: var(--rp-bg); }
.predef-reports .predef-item-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.predef-reports .predef-item-foot { display: flex; align-items: center; justify-content: space-between; }
.predef-reports .predef-download { font-size: 12.5px; gap: 5px; }

@media (max-width: 1024px) {
  .reports-analytics .analytics-grid, .reports-analytics .analytics-grid.even { grid-template-columns: 1fr; }
}

/* Export panel */
.side-panel.export-panel { width: 460px; }
.export-panel .date-pair { display: flex; gap: 8px; margin-bottom: 8px; }
.export-panel .check-stack { display: flex; flex-direction: column; gap: 9px; }
.export-panel .check-stack .check-row { font-size: 13px; gap: 9px; }
.export-panel .fmt-hint { color: var(--rp-text-2); }

/* ---- rest-staff.css ---- */
/* ============================================================
   Restaurant — Staff Management page
   ============================================================ */

/* Outline button variants (mirror the existing .btn-outline-red pattern) */
.btn.btn-outline-blue { background: #fff; color: var(--rp-primary); box-shadow: inset 0 0 0 1px var(--rp-primary); font-weight: 600; }
.btn.btn-outline-amber { background: #fff; color: var(--rp-amber); box-shadow: inset 0 0 0 1px var(--rp-amber); font-weight: 600; }

/* Grey tint badge — completes the badge tone set (solid grey already exists) */
.badge.tone-grey { background: color-mix(in srgb, var(--c-grey) 14%, #fff); color: var(--c-grey); }

/* Toolbar card (search + role/status filters + export) */
.staff-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px; flex-wrap: wrap; }
.staff-toolbar .staff-export { margin-left: auto; height: 40px; font-size: 14px; color: var(--rp-text-2); box-shadow: inset 0 0 0 1px var(--rp-border); gap: 6px; padding: 0 16px; }
.staff-toolbar .staff-count { font-size: 12px; color: var(--rp-text-2); }

/* Staff table — solid role-tone avatars (source: solid fill, white initials) */
.staff-table .avatar.tone-gold, .staff-detail-panel .avatar.tone-gold { background: var(--c-gold); color: #fff; }
.staff-table .avatar.tone-purple, .staff-detail-panel .avatar.tone-purple { background: var(--c-purple); color: #fff; }
.staff-table .avatar.tone-cyan, .staff-detail-panel .avatar.tone-cyan { background: var(--c-cyan); color: #fff; }
.staff-table .avatar.tone-blue, .staff-detail-panel .avatar.tone-blue { background: var(--c-blue); color: #fff; }
.staff-table .avatar.tone-grey, .staff-detail-panel .avatar.tone-grey { background: var(--c-grey); color: #fff; }
.staff-table .contact-cell { font-size: 13px; }
.staff-table .contact-cell span { display: block; color: var(--rp-text-2); }
.staff-table .cell-actions { justify-content: flex-end; }

/* Add / edit staff panel */
.staff-add-panel .role-perms-box { padding: 14px; border-radius: 10px; background: var(--rp-primary-tint); }
.staff-add-panel .role-perms-box .perms-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.staff-add-panel .role-perms-box ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--rp-text-2); display: flex; flex-direction: column; gap: 4px; }
.staff-add-panel .emp-radio-row { display: flex; gap: 16px; }
.staff-add-panel .emp-radio-row .check-row { font-size: 13px; gap: 7px; }
.staff-add-panel .setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--rp-border); border-radius: 10px; }
.staff-add-panel .setting-row .setting-name { font-size: 13px; font-weight: 600; }
.staff-add-panel .setting-row .setting-hint { font-size: 12px; color: var(--rp-text-2); margin-top: 2px; }

/* Role permissions panel */
.side-panel.staff-perms-panel { width: 640px; }
.staff-perms-panel .perm-module { font-weight: 600; font-size: 13px; }
.staff-perms-panel .perm-check { color: var(--c-green); display: inline-flex; }
.staff-perms-panel .perm-x { color: var(--c-red); display: inline-flex; }

/* Staff detail panel */
.side-panel.staff-detail-panel { width: 460px; }
.staff-detail-panel .detail-person { display: flex; align-items: center; gap: 14px; }
.staff-detail-panel .avatar.avatar-lg { width: 60px; height: 60px; font-size: 20px; }
.staff-detail-panel .detail-name { font-size: 18px; font-weight: 700; }
.staff-detail-panel .detail-badges { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.staff-detail-panel .detail-block h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.staff-detail-panel .detail-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.staff-detail-panel .detail-row span:first-child { color: var(--rp-text-2); }
.staff-detail-panel .detail-row span:last-child { font-weight: 600; }
.staff-detail-panel .activity-log { display: flex; flex-direction: column; gap: 8px; }
.staff-detail-panel .activity-log div { font-size: 13px; color: var(--rp-text-2); padding-left: 14px; border-left: 2px solid var(--rp-border); }

/* Reset password modal */
.staff-reset-modal .reset-note { margin: 0; font-size: 14px; color: var(--rp-text-2); }
.staff-reset-modal .check-row { font-size: 13px; gap: 9px; }
.staff-reset-modal .temp-pass-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: var(--rp-bg); font-weight: 700; }

/* Confirm modal */
.modal-box .confirm-note { margin: 0; font-size: 14px; color: var(--rp-text-2); }

/* Success modal */
.modal-box.staff-success-modal { width: 380px; }
.staff-success-modal .modal-head { border-bottom: none; padding-bottom: 0; }
.staff-success-modal .success-body { text-align: center; padding: 8px 0; }
.staff-success-modal .success-icon { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--c-green) 14%, #fff); color: var(--c-green); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.staff-success-modal .success-title { font-size: 18px; font-weight: 700; }
.staff-success-modal .success-text { font-size: 14px; color: var(--rp-text-2); margin-top: 6px; }
.staff-success-modal .modal-foot { border-top: none; padding-top: 0; }

/* Mobile card-table: prefix the footer value (desktop keeps the bare column value) */
@media (max-width: 768px) {
  .staff-table .card-table .c-foot .cell-muted::before { content: "Last login "; }
}
@media (max-width: 768px) {
  .staff-table .data-table.card-table .c-foot { white-space: normal; font-size: 12px; }
}

/* ---- rest-stock.css ---- */
/* ============================================================
   Page: Stock Management (restaurant-stock.html)
   ============================================================ */

/* page column rhythm (root flex gap from the source) */
.stock-page { display: flex; flex-direction: column; gap: 22px; }
.stock-page .page-head { margin-bottom: 0; }

/* outline button variants (source: greyOutline / amber View Alerts) */
.btn.btn-outline-grey { background: #fff; color: var(--rp-text-2); box-shadow: inset 0 0 0 1px var(--rp-border); font-weight: 600; }
.btn.btn-outline-amber { background: #fff; color: var(--rp-amber); box-shadow: inset 0 0 0 1px var(--rp-amber); font-weight: 600; }

/* ---------------- Stock alert banner ---------------- */
.stock-alert {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px;
  background: color-mix(in srgb, #D97706 9%, #fff);
  border: 1px solid color-mix(in srgb, #D97706 30%, #fff);
}
.stock-alert > svg { color: var(--rp-amber); flex-shrink: 0; }
.stock-alert .stock-alert-text { flex: 1; font-size: 13.5px; color: var(--rp-text); }
.stock-alert .btn { height: 38px; font-size: 14px; }

/* ---------------- Summary cards (left border accent) ---------------- */
.stock-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.stock-kpi { border-left: 4px solid var(--c-blue); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.stock-kpi .stock-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stock-kpi .stock-kpi-head svg { color: var(--c-blue); flex-shrink: 0; }
.stock-kpi .stock-kpi-label { font-size: 13px; font-weight: 600; color: var(--rp-text-2); }
.stock-kpi .stock-kpi-value { font-size: 26px; font-weight: 700; color: var(--rp-text); line-height: 1.1; }
.stock-kpi .stock-kpi-sub { font-size: 12px; color: var(--rp-text-2); }
.stock-kpi.tone-green { border-left-color: var(--c-green); }
.stock-kpi.tone-green .stock-kpi-head svg { color: var(--c-green); }
.stock-kpi.tone-amber { border-left-color: var(--c-amber); }
.stock-kpi.tone-amber .stock-kpi-head svg { color: var(--c-amber); }
.stock-kpi.tone-amber .stock-kpi-value.is-alert { color: var(--c-amber); }
.stock-kpi.tone-red { border-left-color: var(--c-red); }
.stock-kpi.tone-red .stock-kpi-head svg { color: var(--c-red); }
.stock-kpi.tone-red .stock-kpi-value.is-alert { color: var(--c-red); }
.stock-kpi.tone-grey { border-left-color: var(--c-grey); }
.stock-kpi.tone-grey .stock-kpi-head svg { color: var(--c-grey); }

/* ---------------- Filter toolbar card ---------------- */
.stock-filter { padding: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stock-filter .filter-updated { font-size: 12px; color: var(--rp-text-2); margin-left: auto; }

/* ---------------- Stock level meter (table + grid tiles) ---------------- */
.stock-meter { min-width: 110px; }
.stock-meter .meter-count { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.stock-meter .meter-bar { height: 6px; border-radius: var(--radius-pill); background: var(--rp-bg); overflow: hidden; }
.stock-meter .meter-fill { height: 100%; border-radius: var(--radius-pill); background: #16A34A; }
.stock-meter .meter-fill.level-low { background: #D97706; }
.stock-meter .meter-fill.level-out { background: #DC2626; }

/* ---------------- Stock table ---------------- */
.stock-table tr.row-out td { background: color-mix(in srgb, #DC2626 4%, #fff); }
.stock-table .item-name { font-weight: 600; }
.stock-table .item-out-note { font-size: 11px; color: var(--rp-red); margin-top: 2px; }

/* mini outline action buttons (source: miniBtn) */
.stock-table .mini-btn, .stock-grid .mini-btn {
  padding: 0 14px; height: 34px; border-radius: 8px; border: 1px solid var(--rp-border);
  background: #fff; color: var(--rp-text); font-weight: 600; font-size: 13px; cursor: pointer;
}
.stock-table .mini-btn:hover, .stock-grid .mini-btn:hover { background: var(--neutral-100); }

/* ---------------- Grid view tiles ---------------- */
.stock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stock-grid .stock-tile { padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stock-grid .tile-emoji { font-size: 28px; }
.stock-grid .tile-name { font-weight: 700; }
.stock-grid .tile-cat { font-size: 12px; color: var(--rp-text-2); }
.stock-grid .stock-meter { width: 100%; min-width: 0; }

/* ---------------- Restock modal ---------------- */
.restock-form .restock-note { font-size: 13px; color: var(--rp-text-2); }
.restock-form .restock-current {
  padding: 12px; border-radius: 10px; background: var(--rp-bg);
  display: flex; justify-content: space-between; font-size: 13px;
}
.restock-form .restock-current span { color: var(--rp-text-2); }
.restock-form .auto-avail { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--rp-border); border-radius: 10px; }
.restock-form .auto-avail-label { font-size: 13px; font-weight: 600; }
.restock-form .auto-avail-hint { font-size: 12px; color: var(--rp-text-2); margin-top: 2px; }

/* ---------------- Alerts panel ---------------- */
.alert-list { display: flex; flex-direction: column; gap: 12px; }
.alert-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, #D97706 35%, #fff);
  background: color-mix(in srgb, #D97706 6%, #fff);
}
.alert-item.level-out {
  border-color: color-mix(in srgb, #DC2626 35%, #fff);
  background: color-mix(in srgb, #DC2626 6%, #fff);
}
.alert-item .alert-name { font-weight: 600; font-size: 14px; }
.alert-item .alert-cat { font-size: 12px; color: var(--rp-text-2); }

/* ---------------- Configure thresholds panel ---------------- */
.thresholds-form .threshold-list { display: flex; flex-direction: column; gap: 8px; }
.thresholds-form .threshold-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--rp-border); border-radius: 10px;
}
.thresholds-form .threshold-row .threshold-name { font-size: 14px; }
.thresholds-form .threshold-row .text-input { width: 80px; flex-shrink: 0; }
.thresholds-form .notify-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.thresholds-form .notify-list { display: flex; flex-direction: column; gap: 10px; }
.thresholds-form .notify-list .check-row { font-size: 13px; align-items: flex-start; }
.thresholds-form .notify-list .check-row input { margin-top: 2px; flex-shrink: 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1280px) {
  .stock-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .stock-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .stock-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .stock-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stock-alert { flex-wrap: wrap; }
  .stock-alert .stock-alert-text { min-width: 220px; }
  .stock-alert .btn { margin-left: 34px; }
  .stock-filter .filter-updated { margin-left: 0; order: 5; }
  .stock-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile card-table: tint the whole out-of-stock card, not the individual cells */
@media (max-width: 768px) {
  .stock-table .card-table tr.row-out { background: color-mix(in srgb, #DC2626 4%, #fff); }
  .stock-table .card-table tr.row-out td { background: transparent; }
}