/* ============================================================
   Legend's Best — Admin Console shell (dashboard, products, ...).
   Reuses the design tokens defined in styles.css (:root).
   ============================================================ */

* { box-sizing: border-box; }

body.admin {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--blue-50);
}

.admin-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin-sidebar {
  width: 240px;
  flex: 0 0 240px;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-900);
  padding: 4px 8px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.admin-brand strong { display: block; font-family: var(--font-heading); font-size: 15px; }
.admin-brand span { display: block; font-size: 11px; letter-spacing: 0.06em; color: var(--gray-600); }

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  /* The sidebar is locked to the viewport height, so once the menu grows
     past it everything below the fold becomes unreachable — System Settings
     and anything under it simply could not be clicked. The nav scrolls on
     its own now, keeping the logo and Log out button fixed in place.
     min-height:0 is what actually lets a flex child shrink and scroll. */
  overflow-y: auto;
  min-height: 0;
  /* A thin scrollbar rather than the chunky default, and only where the
     browser supports it. */
  scrollbar-width: thin;
}

.admin-nav::-webkit-scrollbar { width: 6px; }
.admin-nav::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
.admin-nav::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
.admin-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--ink-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.admin-nav a:hover { background: var(--blue-50); color: var(--blue-700); }
.admin-nav a.active { background: var(--blue-600); color: #fff; }
.admin-nav a.disabled { color: var(--gray-400); cursor: default; pointer-events: none; }
.admin-nav .soon {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--gray-600);
}

/* ---- Collapsible nav groups (rendered by js/admin-common.js) ----
   Keeps the sidebar to ~12 rows instead of a flat list of 22 links. */
.admin-nav__group { display: flex; flex-direction: column; }

.admin-nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-700);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.admin-nav__group-toggle:hover { background: var(--blue-50); color: var(--blue-700); }

.admin-nav__group-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.admin-nav__group.open .admin-nav__group-toggle svg { transform: rotate(180deg); }

/* Collapsed by default; the group's own class is what reveals it, so the
   nav renders correctly even before any JS listener is attached. */
.admin-nav__group-items { display: none; flex-direction: column; gap: 2px; padding: 2px 0 4px 10px; }
.admin-nav__group.open .admin-nav__group-items { display: flex; }

.admin-nav__group-items a {
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  border-left: 2px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.admin-nav__group-items a.active { border-left-color: var(--blue-600); }

/* A group with only one destination collapses to a single row that IS the
   link — no disclosure arrow for a list of one. */
.admin-nav__solo { font-weight: 600; }

.admin-logout {
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink-700);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.admin-logout:hover { background: var(--blue-50); border-color: var(--blue-100); }

/* ---- Main area ---- */
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.admin-topbar {
  display: flex;
  align-items: center;
  padding: 20px 32px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
/* No justify-content:space-between here on purpose — the mobile menu
   toggle gets injected as this row's first child (see admin-common.js), so
   ordering is left-to-right: [toggle] [h1] ... [who], with .admin-who
   pushed flush-right by its own margin instead of relying on there always
   being exactly two children. */
.admin-topbar h1 { font-family: var(--font-heading); font-size: 20px; margin: 0; }
.admin-who { font-size: 13px; color: var(--gray-600); margin-left: auto; }
.admin-who strong { color: var(--ink-900); }

.admin-content { padding: 28px 32px; flex: 1; }

/* ---- Stat cards (dashboard) ---- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.admin-stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.admin-stat-card .label { font-size: 13px; color: var(--gray-600); margin-bottom: 6px; }
.admin-stat-card .value { font-family: var(--font-heading); font-size: 26px; font-weight: 700; }
.admin-stat-card .hint { font-size: 12px; color: var(--gray-400); margin-top: 4px; }

.admin-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}
.admin-panel h2 { font-family: var(--font-heading); font-size: 16px; margin: 0 0 14px; }

/* ---- Toolbar ---- */
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-toolbar input[type="search"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  min-width: 240px;
}
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}
.admin-btn--primary { background: var(--blue-600); color: #fff; }
.admin-btn--primary:hover { background: var(--blue-700); }
.admin-btn--ghost { background: transparent; color: var(--ink-700); border: 1px solid var(--border); }
.admin-btn--ghost:hover { background: var(--blue-50); }
.admin-btn--danger { background: var(--red-600); color: #fff; }
.admin-btn--danger:hover { background: #b91c1c; }
.admin-btn:active { transform: scale(0.97); }
.admin-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ---- Table ---- */
/* Wide tables scroll sideways inside this box — but on macOS and iOS the
   scrollbar is invisible until you are already scrolling, so a column past
   the right edge (Times used, Total given, a status, an action button) looks
   like it simply isn't there. Several admin tables are wide enough for that
   to hide real data from the person running the shop.

   These are scroll shadows, done in CSS alone so every table gets them
   without any per-page script: two white "cover" gradients pinned to the
   content with background-attachment:local, and two grey shadows pinned to
   the viewport with scroll. When there is nothing more to see in a
   direction, the cover sits over the shadow and hides it; scroll away from
   an edge and that edge's shadow appears. No JS, no resize listeners. */
.admin-table-wrap {
  overflow-x: auto;
  background-image:
    linear-gradient(to right, var(--white) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--white) 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(17, 23, 42, 0.13), rgba(17, 23, 42, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(17, 23, 42, 0.13), rgba(17, 23, 42, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 42px 100%, 42px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
table.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.admin-table th, table.admin-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.admin-table th { color: var(--gray-600); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
table.admin-table td.wrap { white-space: normal; }
/* No tint on the row under the pointer. The owner watched his reseller
   list on 4 Oct 2026 and asked for the whole effect gone: a shaded band
   running down the table as the cursor moves is the thing he kept seeing.
   The shadow and the fade went first; this is the tint itself. */
.admin-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.admin-pill--on { background: var(--green-50); color: var(--green-600); }
.admin-pill--off { background: #fbeceb; color: var(--red-600); }
.admin-pill--warn { background: #fef6e7; color: var(--amber); }

/* ---- Status filter tabs (e.g. admin-reviews.html) ---- */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-tabs button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-700);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.admin-tabs button:hover { background: var(--blue-50); }
.admin-tabs button.active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.admin-row-actions { display: flex; gap: 6px; }
/* Scoped to the small table-row buttons. A full .admin-btn placed in the
   same flex row (Settings, Hero, Emails) keeps its own colours — this rule
   used to win on specificity and paint a primary button white-on-white. */
.admin-row-actions button:not(.admin-btn) {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.admin-row-actions button:not(.admin-btn):hover:not(:disabled) { background: var(--blue-50); }
.admin-row-actions .danger:not(.admin-btn):hover:not(:disabled) { background: #fbeceb; border-color: #f3c8c5; }
.admin-row-actions button:disabled { opacity: 0.55; cursor: default; }

.admin-empty { text-align: center; color: var(--gray-600); padding: 40px 0; }

/* ---- Add/Edit popup modal (centered — same treatment on every screen
   size, not a side-sliding drawer) ---- */
.admin-scrim {
  position: fixed; inset: 0; background: rgba(17, 23, 42, 0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
  z-index: 60;
}
.admin-scrim.open { opacity: 1; pointer-events: auto; }

.admin-drawer {
  position: fixed; top: 50%; left: 50%;
  width: min(480px, 92vw);
  max-height: min(85vh, 720px);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 61; display: flex; flex-direction: column;
}
.admin-drawer.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.admin-drawer form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Pinned and opaque. The owner sent a screenshot on 4 Oct 2026 with the
   first field riding over "Add product": the head sat in the flow with a
   background a theme could soften, so a scrolled body showed through it.
   Sticky with its own stacking context, and a solid colour, means nothing
   in the form can ever cover the title or the close button. */
.admin-drawer__head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  background: var(--white, #fff);
  flex: 0 0 auto;
}
.admin-drawer__head h3 { margin: 0; font-family: var(--font-heading); font-size: 16px; }
.admin-drawer__close {
  border: none; background: none; font-size: 20px; cursor: pointer; color: var(--gray-600); line-height: 1;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.admin-drawer__close:hover { background: var(--bg-page); color: var(--ink-900); }
.admin-drawer__body { padding: 18px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.admin-drawer__foot { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex: 0 0 auto; }

.admin-field { margin-bottom: 14px; }
.admin-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.admin-field input, .admin-field select, .admin-field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 9px 12px; font-family: inherit; font-size: 14px; color: var(--ink-900);
  background: var(--white); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.admin-field textarea { resize: vertical; min-height: 70px; }
.admin-field select {
  cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
.admin-field input:hover:not(:focus, :disabled),
.admin-field select:hover:not(:focus, :disabled),
.admin-field textarea:hover:not(:focus, :disabled) { border-color: var(--gray-400); }
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100);
}
.admin-field input:disabled, .admin-field select:disabled, .admin-field textarea:disabled {
  background: var(--bg-page); color: var(--gray-400); cursor: not-allowed;
}
.admin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-field small { display: block; color: var(--gray-400); margin-top: 4px; font-size: 12px; }

/* Bare filter/sort selects that live directly in a toolbar, not inside
   an .admin-field wrapper (e.g. admin-activity.html, admin-databundles.html). */
.admin-toolbar select {
  height: 38px; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0 30px 0 12px; font-family: inherit; font-size: 13.5px; color: var(--ink-900);
  background: var(--white); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
  transition: border-color var(--dur-fast) var(--ease);
}
.admin-toolbar select:hover { border-color: var(--gray-400); }
.admin-toolbar select:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }

/* ---- Login gate ---- */
.admin-loading { display: flex; align-items: center; justify-content: center; height: 100vh; color: var(--gray-600); font-size: 14px; }

/* ---- Mobile sidebar toggle (button + scrim injected by admin-common.js) ---- */
.admin-menu-toggle {
  display: none;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-md);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 12px;
  color: var(--ink-700);
  cursor: pointer;
}
.admin-menu-toggle svg { width: 20px; height: 20px; }
.admin-sidebar-scrim {
  position: fixed; inset: 0; background: rgba(17, 23, 42, 0.35);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
  z-index: 49;
}
.admin-sidebar-scrim.open { opacity: 1; pointer-events: auto; }

/* Never let the admin shell force horizontal scroll on the page body —
   a wide table/panel scrolls inside its own container instead (already
   true of .admin-table-wrap; this is the backstop for anything else). */
body.admin { overflow-x: hidden; }

/* ---------- Tablet & below: sidebar becomes an off-canvas drawer ---------- */
@media (max-width: 860px), ((pointer: coarse) and (hover: none) and (max-width: 1100px)) {
  .admin-shell { display: block; }
  .admin-sidebar {
    position: fixed; z-index: 50; top: 0; left: 0; height: 100vh; width: 260px;
    transform: translateX(-100%); transition: transform var(--dur) var(--ease);
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-menu-toggle { display: inline-flex; }
  .admin-field-row { grid-template-columns: 1fr; }
  .admin-topbar { padding: 16px 20px; }
  .admin-content { padding: 20px; }
}

/* ---------- Phones: tighter spacing, stacked stat cards, no dead zones ---------- */
@media (max-width: 600px), ((pointer: coarse) and (hover: none) and (max-width: 760px)) {
  .admin-topbar { padding: 14px 16px; gap: 10px; }
  .admin-topbar h1 { font-size: 17px; }
  .admin-who { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
  .admin-topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .admin-theme-btn { width: 34px; height: 34px; margin-right: 6px; }
  .admin-theme-btn svg { width: 16px; height: 16px; }
  .admin-content { padding: 14px; }
  .admin-panel { padding: 16px; }
  .admin-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-stat-card { padding: 14px; }
  .admin-stat-card .value { font-size: 21px; }
  .admin-toolbar { gap: 10px; }
  .admin-toolbar input[type="search"] { min-width: 0; width: 100%; }
  .admin-btn { padding: 9px 14px; font-size: 13.5px; }
  table.admin-table th, table.admin-table td { padding: 10px 8px; font-size: 13px; }
  .admin-drawer { width: 94vw; max-height: 90vh; }
  .admin-drawer__head, .admin-drawer__body, .admin-drawer__foot { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 480px) {
  /* Menu, title, theme, bell and the admin's own name do not all fit on a
     phone. The name goes: whoever is holding the phone already knows it. */
  .admin-who { display: none; }
  .admin-theme-btn { margin-right: 10px; }
}

@media (max-width: 380px) {
  .admin-stats { grid-template-columns: 1fr; }
}

/* ---- Filter bars on the list screens (Orders / Customers / Transactions).
   The spec asks for status, service, date and amount filters alongside the
   free-text search, rather than search alone. ---- */
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.admin-filters select,
.admin-filters input[type="date"],
.admin-filters input[type="number"] {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; background: var(--white); color: var(--ink-900);
}
.admin-filters label { font-size: 12px; color: var(--gray-600); display: inline-flex; align-items: center; gap: 5px; }
.admin-filters .admin-btn { padding: 7px 14px; font-size: 13px; }

/* A file in the uploads folder that the admin panel didn't put there. It is
   shown rather than hidden — the previous listing filtered these out, which
   meant the one place the owner could look was the one place that wouldn't
   show them. */
.file-card--unknown {
  border-color: var(--danger, #e11d48);
  box-shadow: 0 0 0 1px var(--danger, #e11d48);
}
.file-card__warning {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--danger, #e11d48);
  font-weight: 600;
}
.file-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border-radius: 8px;
  background: var(--bg-page, #f4f6fb);
  color: var(--gray-600, #6b7280);
  font-size: 12px;
  font-weight: 600;
}

/* An explanatory line above a table — used where a number's meaning isn't
   obvious from its label (a currency rate, for instance, where getting the
   direction backwards is an easy and expensive mistake). */
.admin-note {
  background: var(--blue-50, #eff4ff);
  border: 1px solid var(--blue-100, #dbe4ff);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-700, #1f2937);
  margin-bottom: 16px;
}

/* Under a paged list: how much of it is on screen, and a way to get more. */
.admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--gray-600);
}

/* ---- Revenue by line (dashboard) ----
   A single Revenue figure merges four businesses; these rows say which one
   earned what, with a bar for the share so the comparison is readable at a
   glance rather than needing arithmetic. */
.revenue-lines { margin-bottom: 28px; }
.revenue-lines__title {
  font-family: var(--font-heading);
  font-size: 15px;
  margin: 0 0 14px;
}
.revenue-line {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.revenue-line + .revenue-line { border-top: 1px solid var(--border); }
.revenue-line__label { font-size: 13.5px; font-weight: 600; }
.revenue-line__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-page, #f4f6fb);
  overflow: hidden;
}
.revenue-line__bar i {
  display: block;
  height: 100%;
  background: var(--blue-600);
  border-radius: inherit;
  /* A line that earned almost nothing still needs to be visible as a line. */
  min-width: 2px;
}
.revenue-line__value { font-size: 13.5px; font-weight: 700; white-space: nowrap; text-align: right; }
.revenue-line__value small { display: block; font-weight: 500; font-size: 11.5px; color: var(--gray-600); }

@media (max-width: 560px) {
  .revenue-line { grid-template-columns: 1fr auto; }
  .revenue-line__bar { grid-column: 1 / -1; order: 3; }
}


/* ---- Admin bell (injected by admin-common.js into .admin-topbar) ---- */
.admin-bell { position: relative; margin-left: auto; margin-right: 16px; }
.admin-bell + .admin-who { margin-left: 0; }
.admin-bell__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--white); color: var(--ink-900); cursor: pointer;
}
.admin-bell__btn:hover { background: var(--blue-50); border-color: var(--blue-100); }
.admin-bell__btn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.admin-bell__btn svg { width: 20px; height: 20px; }
.admin-bell__count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--red-600); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--white);
}
.admin-bell__panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px));
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(12, 19, 48, 0.16); z-index: 60; overflow: hidden;
}
.admin-bell__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.admin-bell__head span { display: flex; gap: 10px; }
.admin-bell__link { background: none; border: 0; color: var(--blue-600); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.admin-bell__link:hover { text-decoration: underline; }
.admin-bell__list { max-height: 360px; overflow-y: auto; }
.admin-bell__item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--ink-900); text-decoration: none; font-size: 13.5px; }
.admin-bell__item:hover { background: var(--blue-50); }
.admin-bell__item.is-unread { background: #f4f7ff; }
.admin-bell__item.is-unread .admin-bell__text { font-weight: 600; }
.admin-bell__icon { flex: 0 0 auto; font-size: 16px; line-height: 1.3; }
.admin-bell__text { display: block; line-height: 1.35; }
.admin-bell__text small { display: block; color: var(--gray-600); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.admin-bell__empty { padding: 20px 14px; color: var(--gray-600); font-size: 13px; text-align: center; }
.admin-bell__all { display: block; padding: 10px 14px; text-align: center; font-size: 13px; color: var(--blue-600); text-decoration: none; border-top: 1px solid var(--border); }
.admin-bell__all:hover { background: var(--blue-50); }
@media (max-width: 720px) {
  .admin-bell { margin-right: 8px; }
  .admin-bell__panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* ---- Typed confirmation (LB.confirmTyped) ---- */
.admin-confirm-scrim { position: fixed; inset: 0; background: rgba(12, 19, 48, 0.55); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.admin-confirm { width: min(440px, 100%); background: var(--white); border-radius: 14px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.admin-confirm h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 17px; }
.admin-confirm p { margin: 0 0 14px; color: var(--gray-600); font-size: 13.5px; line-height: 1.5; }
.admin-confirm label { display: block; font-size: 13px; margin-bottom: 6px; }
.admin-confirm input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.admin-confirm input:focus { outline: none; border-color: var(--red-600); box-shadow: 0 0 0 3px #fbeceb; }
.admin-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.admin-btn:disabled { opacity: 0.55; cursor: default; }

/* ---- Support thread ---- */
.support-thread { display: flex; flex-direction: column; gap: 8px; }
.support-msg { max-width: 92%; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; white-space: pre-wrap; line-height: 1.45; border: 1px solid var(--border); background: var(--bg-page); }
.support-msg--out { align-self: flex-end; background: #eef3ff; border-color: #d6e0ff; }
.support-msg small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--gray-600); white-space: normal; }

/* ---- Notification centre ---- */
.notif-row.is-unread td:first-child { border-left: 3px solid var(--blue-600); }
.notif-row td .notif-msg { display: block; }
.notif-row td .notif-msg small { color: var(--gray-600); }

/* ---- Email page ---- */
.email-preview { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: #fafbfe; min-height: 120px; overflow-x: auto; }
.email-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.email-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-50); color: var(--ink-900); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
.email-chip button { border: 0; background: none; cursor: pointer; color: var(--gray-600); font-size: 14px; line-height: 1; padding: 0; }
.email-results { position: relative; }
.email-results__list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto; }
.email-results__list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.email-results__list button:hover { background: var(--blue-50); }
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.event-grid label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; }
/* A checkbox inside a field must stay a checkbox: the text-field rule
   above gives every input width:100%, which pushed each label's words into
   a one-word-per-line column beside a stretched box. */
.admin-field input[type="checkbox"], .admin-field input[type="radio"], .event-grid input {
  width: auto; flex: 0 0 auto; margin: 0; padding: 0; border: none; box-shadow: none; background: none; accent-color: var(--blue-600);
}

/* ---- "More options" in the product drawer: the rarely-touched fields
   fold away so a new product is a short form. ---- */
.admin-more { border: 1px solid var(--border); border-radius: 10px; background: var(--gray-50, #f8f9fc); margin: 4px 0 16px; }
.admin-more > summary { cursor: pointer; list-style: none; padding: 12px 14px; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 10px; }
.admin-more > summary::-webkit-details-marker { display: none; }
.admin-more > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s; flex: 0 0 auto; }
.admin-more[open] > summary::before { transform: rotate(45deg); }
.admin-more > summary span { font-weight: 500; color: var(--gray-600); font-size: 12.5px; }
.admin-more__body { padding: 4px 14px 6px; border-top: 1px solid var(--border); }
.admin-nav__group-toggle--more { color: var(--gray-600); }

.admin-more__h { margin: 12px 0 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-600); }


/* ============================================================
   Dark mode for the admin console (the sun/moon button in the top bar,
   remembered per browser). Only the shared tokens change, so every panel,
   table, drawer and form follows without its own dark rules. The customer
   site is untouched: this applies to body.admin alone.
   ============================================================ */
html[data-admin-theme="dark"] body.admin {
  --white: #1b2a44;
  --bg-page: #111c2d;
  --blue-50: #22334f;
  --blue-100: #2d4470;
  --border: #2f3f5a;
  --ink-900: #eef2f7;
  --ink-700: #cfd8e6;
  --gray-600: #8f9cb0;
  --gray-400: #6e7d94;
  --gray-200: #33456a;
  --gray-100: #24365a;
  --gray-50: #1f2f4c;
  --green-50: #14301f;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
  /* premium.css glass surfaces (sidebar, top bar, panels) */
  --glass-bg: rgba(27, 42, 68, 0.82);
  --glass-bg-strong: rgba(27, 42, 68, 0.97);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --depth-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --depth-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  --depth-3: 0 6px 10px rgba(0, 0, 0, 0.3), 0 30px 60px -24px rgba(0, 0, 0, 0.6);
  background: #111c2d;
  color: var(--ink-900);
  color-scheme: dark;
}
html[data-admin-theme="dark"] body.admin .admin-topbar { background: var(--white); }
html[data-admin-theme="dark"] body.admin .admin-nav a:hover,
html[data-admin-theme="dark"] body.admin .admin-nav__group-toggle:hover { color: #fff; }
html[data-admin-theme="dark"] body.admin :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"]) {
  background: #16243c;
  color: var(--ink-900);
  border-color: var(--border);
}
html[data-admin-theme="dark"] body.admin :is(input, textarea)::placeholder { color: var(--gray-400); }
html[data-admin-theme="dark"] body.admin .admin-bell__item.is-unread { background: #24365a; }
html[data-admin-theme="dark"] body.admin .support-msg--out { background: #24365a; border-color: #2d4470; }
html[data-admin-theme="dark"] body.admin .email-preview { background: #16243c; color: var(--ink-900); }
html[data-admin-theme="dark"] body.admin .admin-pill--off { background: #3a1f24; }
html[data-admin-theme="dark"] body.admin .admin-pill--warn { background: #3a3120; color: #ffd54a; }
html[data-admin-theme="dark"] body.admin .admin-pill--on { background: #14301f; color: #4ade80; }
html[data-admin-theme="dark"] body.admin .chat-icon-btn,
html[data-admin-theme="dark"] body.admin .chat-emoji,
html[data-admin-theme="dark"] body.admin .chat-staged__thumb { background: var(--white); }
html[data-admin-theme="dark"] body.admin .chat-staged { background: var(--gray-50); }
html[data-admin-theme="dark"] body.admin .toast { background: #eef2f7; color: #0b1220; }
html[data-admin-theme="dark"] body.admin .admin-drawer,
html[data-admin-theme="dark"] body.admin .admin-confirm { background: var(--white); }
html[data-admin-theme="dark"] body.admin img[src$="logo-icon-blue.png"] { filter: brightness(1.6); }

.admin-theme-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-left: auto;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
}
.admin-theme-btn:hover { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-600); }
.admin-theme-btn svg { width: 18px; height: 18px; }
.admin-theme-btn .moon, html[data-admin-theme="dark"] .admin-theme-btn .sun { display: none; }
html[data-admin-theme="dark"] .admin-theme-btn .moon { display: block; }
.admin-theme-btn ~ .admin-bell, .admin-theme-btn ~ .admin-who { margin-left: 0; }
.admin-theme-btn ~ .admin-who { margin-left: 8px; }

body.admin { touch-action: manipulation; }

/* ---- Undo in the toast ----------------------------------------------- */
/* Nothing in this console asks "are you sure?" first. A delete is held for
   a few seconds behind this Undo instead, so a wrong click costs one more
   click rather than every right click costing a dialog. The base .toast is
   click-through, so the one that carries an Undo takes its clicks back. */
body.admin .toast--undo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 8px;
}
body.admin .toast--undo.show { pointer-events: auto; }
body.admin .toast__count {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
body.admin .toast__undo {
  border: 0;
  background: rgba(128, 128, 128, 0.3);
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
body.admin .toast__undo:hover { background: rgba(128, 128, 128, 0.45); }
body.admin .toast__undo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- Dashboard overview ----------------------------------------------- */
/* The period control, the wallet tiles, the two charts and the quick
   actions. Every figure they carry is read from the database, so an empty
   shop shows an empty chart rather than a demo curve. */
body.admin .dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
body.admin .dash-head h2 { margin: 0 0 4px; font-family: var(--font-heading); font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
body.admin .dash-head p { margin: 0; font-size: 13px; color: var(--mm-muted, var(--gray-600)); max-width: 60ch; }
body.admin .dash-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: var(--mm-card-2, var(--gray-100));
  border: 1px solid var(--mm-line, var(--border));
}
body.admin .dash-tabs button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mm-muted, var(--gray-600));
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.admin .dash-tabs button:hover { color: var(--mm-text, var(--ink-900)); }
body.admin .dash-tabs button.active { background: var(--mm-card, var(--white)); color: var(--mm-text, var(--ink-900)); box-shadow: var(--mm-shadow), inset 0 0 0 1px var(--mm-line, var(--border)); }

body.admin .dash-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
body.admin .dash-panel-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
body.admin .dash-panel-actions { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: var(--mm-muted, var(--gray-600)); }
body.admin .dash-link {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm-primary, var(--blue-600));
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
body.admin .dash-link:hover { text-decoration: underline; }
body.admin .dash-sub { margin: 2px 0 14px; font-size: 12.5px; color: var(--mm-muted, var(--gray-600)); }
body.admin .dash-live {
  font-size: 11px;
  font-weight: 700;
  color: var(--mm-success, #16a34a);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.admin .dash-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-success, #16a34a);
  box-shadow: 0 0 0 0 var(--mm-success-tint, rgba(22, 163, 74, 0.3));
  animation: dashPulse 2s ease-out infinite;
}
@keyframes dashPulse { 0% { box-shadow: 0 0 0 0 rgba(15, 138, 95, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(15, 138, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 138, 95, 0); } }
@media (prefers-reduced-motion: reduce) { body.admin .dash-live::before { animation: none; } }

body.admin .dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin-top: 14px;
}
body.admin .dash-tile {
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--mm-card-2, var(--gray-100));
  border: 1px solid var(--mm-line, var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.admin .dash-tile strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; }
body.admin .dash-tile span { display: block; font-size: 12.5px; color: var(--mm-text-2, var(--gray-600)); margin-top: 3px; }
body.admin .dash-tile span + span { font-size: 11.5px; color: var(--mm-muted, var(--gray-600)); margin-top: 1px; }
body.admin .dash-tile .dash-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(127, 127, 127, 0.12); }

body.admin .dash-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { body.admin .dash-split { grid-template-columns: minmax(0, 1fr); } }

body.admin .dash-chart { width: 100%; height: auto; display: block; }
body.admin .dash-empty { font-size: 13px; color: var(--mm-muted, var(--gray-600)); padding: 26px 0; text-align: center; }

body.admin .dash-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
body.admin .dash-legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--mm-text-2, var(--ink-700)); }
body.admin .dash-legend i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
body.admin .dash-legend b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--mm-text, var(--ink-900)); }

body.admin .dash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mm-line, var(--border));
  font-size: 13px;
}
body.admin .dash-row:last-child { border-bottom: 0; padding-bottom: 2px; }
body.admin .dash-row strong { font-variant-numeric: tabular-nums; }
body.admin .dash-row .dash-row__main { flex: 1; min-width: 0; }
body.admin .dash-row .dash-row__main span { display: block; font-size: 12px; color: var(--mm-muted, var(--gray-600)); margin-top: 1px; }
body.admin .dash-row time { font-size: 12px; color: var(--mm-muted, var(--gray-600)); white-space: nowrap; }
body.admin .dash-row b { font-variant-numeric: tabular-nums; }

body.admin .dash-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
body.admin .dash-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--mm-card, var(--white));
  border: 1px solid var(--mm-line, var(--border));
  box-shadow: var(--mm-shadow);
  color: var(--mm-text, var(--ink-900));
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.admin .dash-action:hover { transform: translateY(-2px); box-shadow: var(--mm-shadow-up); border-color: var(--mm-line-2, var(--border)); text-decoration: none; }
body.admin .dash-action__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--mm-primary-tint, rgba(1, 100, 206, 0.1));
  color: var(--mm-primary, var(--blue-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
body.admin .dash-action__icon svg { width: 16px; height: 16px; }

/* ---- Motion on a touch screen ----------------------------------------- */
/* The card tilt only runs where there is a real pointer, so on a phone the
   console had no feedback at all: a tap did nothing until the next screen
   appeared. These press states use the same custom properties the tilt
   writes, so the two can never fight each other. */
@media (hover: none) {
  body.admin .fx-card:active { --lift: 2px; --rx: 2.5deg; }
  body.admin .dash-tile:active,
  body.admin .dash-action:active,
  body.admin .admin-nav a:active { transform: scale(0.98); }
}
body.admin .dash-tile,
body.admin .dash-action,
body.admin .admin-nav a { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }

/* The figures on a card lift as the card does, so the tile reads as one
   object rather than a picture with text on top. */
body.admin .admin-stat-card .stat-icon { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  body.admin .fx-card:active,
  body.admin .dash-tile:active,
  body.admin .dash-action:active { transform: none; --lift: 0px; --rx: 0deg; }
}

/* Under 1024px every button is held at 16px so iOS never zooms on a tap.
   A link beside such a button (Refresh next to See all) has to match, or
   the pair looks like two different components. */
@media (max-width: 1024px) {
  body.admin .dash-panel-actions .dash-link { font-size: 16px; }
}


/* ---- Payment proof cards ------------------------------------------------ */
/* Shared by the Payment Proofs page and the "waiting for your approval"
   panel that sits at the top of Orders, Data Bundles, AFA and Wallet, so a
   manual payment is checked where the order lives. */
.pf-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .pf-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--ink-900); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .pf-tab b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--blue-50); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
  .pf-tab.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
  .pf-tab.is-active b { background: rgba(255,255,255,.25); color: #fff; }
  .pf-tab[data-tab="review"]:not(.is-active) b.has { background: #fdecd3; color: #8a4b00; }
  .pf-search { min-width: 0; width: 300px; max-width: 100%; }
  @media (max-width: 720px) { .pf-search { width: 100%; } }
  .pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 16px; }
  .pf-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 16px; background: var(--white); border: 1px solid var(--border); }
  @media (max-width: 560px) { .pf-card { grid-template-columns: 1fr; } }
  .pf-shot { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; max-height: 320px; border-radius: 12px; overflow: hidden; background: var(--blue-50); border: 1px solid var(--border); padding: 0; cursor: zoom-in; }
  .pf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
  .pf-shot span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(11,31,68,.72); color: #fff; font-size: 11.5px; font-weight: 600; }
  .pf-noshot { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; color: var(--gray-600); font-size: 13px; cursor: default; }
  .pf-amount { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-900); line-height: 1.1; }
  .pf-method { font-size: 12.5px; color: var(--gray-600); margin: 2px 0 10px; }
  .pf-rows { display: grid; gap: 8px; margin-bottom: 14px; }
  .pf-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 13px; }
  .pf-row > span { color: var(--gray-600); }
  .pf-row > div { color: var(--ink-900); overflow-wrap: anywhere; }
  .pf-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
  .pf-copy { margin-left: 6px; border: 1px solid var(--border); background: var(--white); color: var(--blue-700); border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 11.5px; cursor: pointer; }
  .pf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Every press on a payment card is a real touch target, on a phone
     as much as a desktop. */
  .pf-actions .admin-btn { min-height: 44px; }
  .pf-approve { background: #0b7a4b !important; border-color: #0b7a4b !important; color: #fff !important; }
  .pf-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--blue-50); }
  .pf-status--paid { background: rgba(19, 160, 100, .14); color: #0b7048; }
  .pf-status--rejected, .pf-status--cancelled { background: rgba(200, 69, 43, .12); color: #c8452b; }
  .pf-status--pending_verification { background: #fdecd3; color: #8a4b00; }
  .pf-empty { padding: 40px 16px; text-align: center; color: var(--gray-600); background: var(--white); border-radius: 16px; border: 1px dashed var(--border); }
  .pf-light { position: fixed; inset: 0; z-index: 90; background: rgba(6, 14, 32, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
  .pf-light img { max-width: min(100%, 900px); max-height: calc(100vh - 110px); border-radius: 10px; background: #fff; }
  .pf-light__bar { display: flex; gap: 10px; margin-top: 12px; }
  .pf-light__bar a, .pf-light__bar button { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13.5px; text-decoration: none; cursor: pointer; }
  [hidden] { display: none !important; }

/* ---- "Waiting for your approval" panel ---------------------------------- */
/* Sits above the list on Orders, Data Bundles, AFA and Wallet; hidden when
   there is nothing to approve, so a clear day costs no space at all. */
body.admin .ap-panel { margin-bottom: 18px; border-color: #f2c9a2; box-shadow: 0 0 0 3px rgba(240, 138, 0, 0.08), var(--mm-shadow, 0 1px 2px rgba(15, 23, 42, 0.04)); }
body.admin .ap-panel .pf-grid { margin-top: 12px; }
body.admin .ap-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fdecd3;
  color: #8a4b00;
  font-size: 12.5px;
  font-weight: 700;
  margin-left: 8px;
}
body.admin .pf-card { border: 1px solid var(--mm-line, var(--border)); }

/* ---- Table kit: tick, act, delete in bulk ------------------------------- */
/* A tick box on every row, one More button holding the row's actions, and a
   bar that rises when anything is ticked. Styled here once so every list in
   the console looks and behaves the same. */
body.admin .kit-cell { width: 44px; padding-right: 0; }
body.admin .kit-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; }
body.admin .kit-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--mm-line-2, var(--border));
  border-radius: 6px;
  background: var(--mm-card, var(--white));
  cursor: pointer;
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.admin .kit-check input:hover { border-color: var(--mm-primary, var(--blue-600)); }
body.admin .kit-check input:checked,
body.admin .kit-check input:indeterminate { background: var(--mm-primary, var(--blue-600)); border-color: var(--mm-primary, var(--blue-600)); }
body.admin .kit-check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
body.admin .kit-check input:indeterminate::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 7px;
  width: 9px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
body.admin .kit-check input:active { transform: scale(0.9); }
body.admin table.admin-table tr.is-picked td { background: var(--mm-primary-tint, rgba(1, 100, 206, 0.09)); }
body.admin table.admin-table tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--mm-primary, var(--blue-600)); }

body.admin .kit-hidden-actions { display: none !important; }
body.admin .kit-more {
  width: 32px;
  height: 32px;
  border: 1px solid var(--mm-line, var(--border));
  border-radius: 9px;
  background: var(--mm-card, var(--white));
  color: var(--mm-muted, var(--gray-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.admin .kit-more svg { width: 18px; height: 18px; }
body.admin .kit-more:hover { background: var(--mm-card-2, var(--gray-100)); color: var(--mm-text, var(--ink-900)); border-color: var(--mm-line-2, var(--border)); }
body.admin .kit-more[aria-expanded="true"] { background: var(--mm-primary-tint, rgba(1, 100, 206, 0.09)); color: var(--mm-primary, var(--blue-600)); border-color: transparent; }
body.admin .kit-more:active { transform: scale(0.92); }

.kit-menu {
  position: fixed;
  z-index: 85;
  min-width: 186px;
  padding: 6px;
  border-radius: 12px;
  background: var(--mm-card, #fff);
  border: 1px solid var(--mm-line, #e6eaf0);
  box-shadow: var(--mm-shadow-pop, 0 24px 48px -20px rgba(15, 23, 42, 0.3));
  transform-origin: top right;
}
.kit-menu.is-up { transform-origin: bottom right; }
.kit-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mm-text, #0f172a);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kit-menu__item svg { width: 17px; height: 17px; color: var(--mm-muted, #64748b); flex: 0 0 auto; }
.kit-menu__item:hover { background: var(--mm-card-2, #f8fafc); }
.kit-menu__item:hover svg { color: var(--mm-text, #0f172a); }
.kit-menu__item.is-danger { color: var(--mm-danger, #c2410c); }
.kit-menu__item.is-danger svg { color: currentColor; }
.kit-menu__item.is-danger:hover { background: var(--mm-danger-tint, rgba(194, 65, 12, 0.1)); }

.kit-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  /* Not 999px. If this bar ever grows past one line, a pill radius draws a
     black disc over the table: the owner photographed exactly that on
     8 Oct 2026. 18px reads as the same rounded bar and cannot become a
     circle. The one line is held by the scrolling rule below. */
  border-radius: 18px;
  background: var(--mm-text, #0f172a);
  color: var(--mm-page, #f5f7fa);
  box-shadow: 0 24px 48px -18px rgba(15, 23, 42, 0.55);
  max-width: calc(100vw - 24px);
  overscroll-behavior: contain;
}
.kit-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--mm-primary, #0164ce);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.kit-bar__what { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.kit-bar .admin-btn { height: 34px; padding: 0 14px; font-size: 13px; }
.kit-bar .admin-btn--ghost { background: rgba(127, 127, 127, 0.22); border-color: transparent; color: inherit; box-shadow: none; }
.kit-bar .admin-btn--ghost:hover { background: rgba(127, 127, 127, 0.35); color: inherit; }
/* The bar carries the page's own actions as well as Delete (7 Oct 2026),
   and a page can register more of its own, so it holds eight on the gift
   codes screen. It used to WRAP, which at a pill radius drew a black disc
   over the table (owner's screenshot, 8 Oct 2026) and at desktop width
   still made a three row slab. One line that scrolls sideways instead:
   the same height whatever a page puts in it. */
.kit-bar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; scrollbar-width: none; }
.kit-bar::-webkit-scrollbar { height: 0; }
.kit-bar > * { flex: 0 0 auto; }
/* The count stays put while the actions move under it, so the number you
   are acting on is never scrolled away. */
.kit-bar__count { position: sticky; left: 0; z-index: 1; }
.kit-bar .admin-btn--primary { background: var(--mm-primary, #0164ce); border-color: transparent; color: #fff; }
.kit-bar .admin-btn--primary:hover { filter: brightness(1.08); }
/* Full width from tablet down. The old breakpoint was 560px, so a phone
   held in landscape, an iPad, and the admin on a phone at its own width all
   kept the floating pill and wrapped it into that disc. */
@media (max-width: 1024px) {
  .kit-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    border-radius: 16px;
    padding: 9px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .kit-bar > * { scroll-snap-align: start; }
  /* A thumb needs more than 34px of button. */
  .kit-bar .admin-btn { height: 40px; font-size: 14px; padding: 0 14px; }
}
@media (max-width: 560px) {
  .kit-bar__what { display: none; }
}


/* ---- Pictures in admin lists ------------------------------------------- */
body.admin .row-pic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--mm-card-2, var(--gray-100));
  flex: 0 0 auto;
  vertical-align: middle;
}
body.admin .row-with-pic { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
body.admin .row-pic--stack { margin-left: -14px; box-shadow: 0 0 0 2px var(--mm-card, var(--white)); }
body.admin .row-pic--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mm-muted, var(--gray-600));
}

/* The row under the pointer used to lift off the page with a shadow, and
   fade as it did it. The owner watched it on 4 Oct 2026 and asked for it
   gone: a list of resellers is something you read down, and a row rising to
   meet the cursor pulls the eye off the figures. The plain tint stays, so
   you can still see which row you are on. */
body.admin table.admin-table tbody tr { transition: none; }
body.admin .row-pics { display: inline-flex; align-items: center; flex: 0 0 auto; }
body.admin .row-with-pic > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---- Stickers in the admin's own chat ----
   Drawn by the page from a name (js/stickers.js), so nothing is loaded from
   anywhere and the same set is on every side of a conversation. */
.chat-stickers {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
  z-index: 5;
}
.chat-stickers__btn {
  border: 0;
  background: transparent;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  color: #0164ce;
}
.chat-stickers__btn svg { width: 100%; height: auto; display: block; }
.chat-sticker { display: block; width: 86px; height: 86px; color: #0164ce; }
.chat-sticker svg { width: 100%; height: 100%; }

/* Latest News editor: the gallery rows and the comment moderation rows. */
.news-media-list{display:flex;flex-direction:column;gap:8px;}
.news-media-row{display:flex;align-items:center;gap:10px;}
.news-media-url{flex:1;padding:9px 11px;border:1px solid var(--admin-line,#e6e9f0);border-radius:8px;font:inherit;font-size:15px;}
.news-comments-mod{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow:auto;}
.news-comment-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--admin-line,#e6e9f0);border-radius:10px;}