/* Solo staff admin area in the Tower OS look (owner, 16 Oct 2026: "all of
   this back end, need to be the same design as the Tower OS Front End";
   chose "Restyle /admin now to match").

   Tokens are copied from mission-control/static/css/mission-control.css and
   calm.css: page #f3f3f1, white cards with a 1.5px #dad9d4 outline and 14px
   corners, ink #16161a, orange #f28c00, Figtree, Michroma only for the small
   wordmark, JetBrains Mono for data, Title Case, calm.

   EVERY rule is under .solo-admin (AdminShell / AdminAuthShell in
   admin-shell.jsx) or html.solo-admin-on (set only while one of them is on
   screen), so the public site and the customer / partner portal
   (reseller-*.jsx) never change.

   The admin pages style themselves with inline styles, so the page-body
   rules below match those inline styles (as the browser writes them, e.g.
   "#000" reads back as "rgb(0, 0, 0)"), the same way index.html's
   responsive layer does, instead of editing 30 pages one by one. */

.solo-admin {
  --ink: #16161a; --ink2: #55555c; --ink3: #8c8c93;
  --pg: #f3f3f1; --card: #fff; --hair: #e7e6e2; --hair2: #f0efec;
  --orange: #f28c00; --orange-d: #d97a00; --orange-bg: #fff4e5;
  --green: #1fa64a; --red: #d9302c; --red-bg: #fdecea;
  --navbg: #0e0e10;
  --tile-bw: 1.5px; --tile-bc: #dad9d4; --tile-r: 14px;
  /* The site's own variables, re-pointed inside the admin area only. */
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-display: 'Figtree', system-ui, sans-serif;
  --fg: var(--ink); --fg-dim: var(--ink2); --bg: #fff;
  --line: var(--hair); --line-strong: var(--tile-bc);
  background: var(--pg); color: var(--ink);
  font-family: 'Figtree', system-ui, sans-serif; font-size: 13px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
@media (max-resolution: 1.33dppx), (-webkit-max-device-pixel-ratio: 1.33) {
  .solo-admin { --tile-bw: 2px; }
}
.solo-admin ::selection { background: var(--orange-bg); color: var(--ink); }

/* While the staff area is on screen the public site's top bar, footer and
   chat bubble step aside: the dark Tower OS bar replaces them. */
html.solo-admin-on #root > div > header,
html.solo-admin-on #root > div > footer,
html.solo-admin-on #root > div > button[aria-label="Open chat"] { display: none !important; }
html.solo-admin-on body { background: #f3f3f1; }

/* -- The dark top bar (Tower OS .nav / .brand) ----------------------------- */
.solo-admin .sa-bar {
  position: sticky; top: 0; z-index: 45; height: 58px;
  display: flex; align-items: center; gap: 16px; padding: 0 22px;
  background: var(--navbg); color: #fff;
}
.solo-admin .sa-brand { display: flex; align-items: center; gap: 14px; height: 58px; white-space: nowrap; flex: none; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.solo-admin .sa-brand img { height: 22px; width: auto; filter: invert(1); display: block; }
.solo-admin .sa-bdiv { width: 1px; height: 22px; background: #3a3a40; }
.solo-admin .sa-bname { font-family: Michroma, sans-serif; font-size: 11px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.solo-admin .sa-mark { font-size: 11px; font-weight: 600; color: #c9c9ce; border: 1px solid #3a3a40; border-radius: 6px; padding: 3px 7px; line-height: 1.2; }
.solo-admin .sa-bar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.solo-admin .sa-user { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 12px; border-left: 1px solid #2a2a2e; }
.solo-admin .sa-av { width: 30px; height: 30px; border-radius: 50%; background: #3a3a40; display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; color: #fff; }
.solo-admin .sa-user b { display: block; font-size: 12.5px; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-admin .sa-user small { display: block; font-size: 10.5px; color: #9a9aa0; }
.solo-admin .sa-menu-btn { display: none; align-items: center; gap: 6px; height: 34px; padding: 0 10px; margin-left: -8px; border-radius: 8px; border: 0; background: none; color: #e5e5ea; font: 600 12.5px/1 Figtree, sans-serif; cursor: pointer; flex: none; }
.solo-admin .sa-menu-btn:hover, .solo-admin .sa-menu-btn[aria-expanded="true"] { background: #1d1d21; color: #fff; }

/* -- Sidebar: a calm list, like Tower OS's Manage menu --------------------- */
.solo-admin .sa-body { display: flex; align-items: flex-start; min-height: calc(100vh - 58px); }
.solo-admin .sa-side {
  width: 236px; flex: 0 0 236px; position: sticky; top: 58px; height: calc(100vh - 58px);
  display: flex; flex-direction: column; background: #fff;
  border-right: var(--tile-bw) solid var(--tile-bc);
}
.solo-admin .sa-nav { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; }
.solo-admin .sa-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); text-align: left; cursor: pointer;
  font: 600 13px/1.25 Figtree, sans-serif;
}
.solo-admin .sa-item svg { width: 16px; height: 16px; color: var(--ink3); flex: none; }
.solo-admin .sa-item:hover { background: #f6f6f4; }
.solo-admin .sa-item.on { background: var(--orange-bg); }
.solo-admin .sa-item.on svg { color: var(--orange); }
.solo-admin .sa-item:focus { outline: none; }
.solo-admin .sa-item:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.solo-admin .sa-item.sub { padding-left: 36px; font-weight: 500; color: var(--ink2); }
.solo-admin .sa-item.sub.on { color: var(--ink); font-weight: 600; }
.solo-admin .sa-item.grp { color: var(--ink2); margin-top: 6px; }
.solo-admin .sa-item.grp.has-on { color: var(--ink); }
.solo-admin .sa-item.grp .sa-chev { margin-left: auto; display: flex; transition: transform .15s; color: var(--ink3); }
.solo-admin .sa-item .sa-chev svg { width: 12px; height: 12px; }
.solo-admin .sa-item.grp[aria-expanded="true"] .sa-chev { transform: rotate(180deg); }
.solo-admin .sa-foot { padding: 14px 16px 18px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 10px; }
.solo-admin .sa-who { font-size: 11.5px; color: var(--ink3); line-height: 1.45; overflow-wrap: anywhere; }
.solo-admin .sa-who b { display: block; color: var(--ink); font-weight: 600; font-size: 12.5px; }
/* [ Tower OS | Admin ] (Tower OS .app-sw, light) */
.solo-admin .sa-switch { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--tile-bc); border-radius: 9px; }
.solo-admin .sa-switch a, .solo-admin .sa-switch span { flex: 1; text-align: center; padding: 7px 6px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.solo-admin .sa-switch a:hover, .solo-admin .sa-switch a:focus-visible { background: #f6f6f4; color: var(--ink); outline: none; }
.solo-admin .sa-switch .on { background: var(--ink); color: #fff; }
.solo-admin .sa-signout { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--tile-bc); background: #fff; color: var(--ink); font: 600 12.5px/1 Figtree, sans-serif; cursor: pointer; }
.solo-admin .sa-signout:hover { border-color: #c6c5bf; background: #f6f6f4; }

/* -- Page area and header ("Area › Page", Figtree 20/800) ------------------ */
.solo-admin .sa-main { flex: 1; min-width: 0; padding: 22px 28px 100px; }
.solo-admin .sa-inner { max-width: 1180px; margin: 0 auto; }
.solo-admin .sa-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.solo-admin .sa-title { margin: 0; font: 800 20px/1.25 Figtree, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.solo-admin .sa-title .sa-area { color: var(--ink3); }
.solo-admin .sa-title .sa-sep { color: var(--ink3); margin: 0 6px; font-weight: 700; }
.solo-admin .sa-sub { margin-top: 4px; font-size: 13px; color: var(--ink2); }
.solo-admin .sa-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* -- Sign-in pages (AdminAuthShell) ---------------------------------------- */
.solo-admin.sa-auth .sa-authmain > section { background: transparent !important; color: var(--ink) !important; min-height: calc(100vh - 58px) !important; }
.solo-admin.sa-auth .sa-authmain > section > div[aria-hidden],
.solo-admin.sa-auth .sa-authmain > section > span[aria-hidden] { display: none; }
.solo-admin.sa-auth form { background: #fff !important; border: var(--tile-bw) solid var(--tile-bc) !important; border-radius: var(--tile-r) !important; backdrop-filter: none !important; }

/* ==========================================================================
   Page bodies: the inline styles the admin pages already use, re-skinned.
   ========================================================================== */

/* Labels and buttons: Title Case, not spaced capitals. */
.solo-admin .sa-page [style*="text-transform: uppercase"] { text-transform: capitalize !important; letter-spacing: 0 !important; }
/* Titles and names in the display face (a lead, a product, a card title)
   show as written: capitalising every word would change names and words
   like "eSIM". Modal titles go through adminTitleCase (ModalShell). */
.solo-admin .sa-page [style*="var(--font-display)"][style*="text-transform: uppercase"] { text-transform: none !important; }
.solo-admin .sa-page [style*="text-transform: uppercase"][style*="font-size: 9px"],
.solo-admin .sa-page [style*="text-transform: uppercase"][style*="font-size: 9.5px"],
.solo-admin .sa-page [style*="text-transform: uppercase"][style*="font-size: 10px"],
.solo-admin .sa-page [style*="text-transform: uppercase"][style*="font-size: 10.5px"] { font-size: 12px !important; font-weight: 600 !important; }
/* Grey field labels and section labels read as Tower OS's: ink2, 600. */
.solo-admin .sa-page div[style*="text-transform: uppercase"][style*="color: rgba(0, 0, 0, 0."] { color: var(--ink2) !important; }
.solo-admin .sa-page [style*="letter-spacing: 0.1"], .solo-admin .sa-page [style*="letter-spacing: 0.2"], .solo-admin .sa-page [style*="letter-spacing: 0.3"] { letter-spacing: 0 !important; }

/* Headings inside pages (sections, modals): Figtree, calm sizes. */
.solo-admin .sa-page h1, .solo-admin .sa-page h2, .solo-admin .sa-page h3 { font-family: 'Figtree', sans-serif !important; font-weight: 800 !important; letter-spacing: -.01em !important; color: var(--ink); }
.solo-admin .sa-page h1[style*="clamp("] { font-size: 20px !important; }
.solo-admin .sa-page h2[style*="clamp("] { font-size: 18px !important; }
.solo-admin .sa-page [style*="var(--font-display)"] { letter-spacing: -.01em !important; }

/* Black text and borders become Tower OS ink and hairlines. */
.solo-admin .sa-page [style*="color: rgb(0, 0, 0)"] { color: var(--ink) !important; }

/* Data: serials, IDs, codes. */
.solo-admin .sa-page [style*="monospace"], .solo-admin .sa-page code, .solo-admin .sa-page pre { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* Cards and panels: white, one 1.5px outline, rounded. */
.solo-admin .sa-page div[style*="border: 1px solid rgba(0, 0, 0"],
.solo-admin .sa-page form[style*="border: 1px solid rgba(0, 0, 0"],
.solo-admin .sa-page div[style*="border: 1px solid var(--line"],
.solo-admin .sa-page section[style*="border: 1px solid rgba(0, 0, 0"] {
  border: var(--tile-bw) solid var(--tile-bc) !important; border-radius: 12px !important; background-color: #fff !important;
}
.solo-admin .sa-page div[style*="background: rgba(0, 0, 0, 0.02)"],
.solo-admin .sa-page div[style*="background: rgba(0, 0, 0, 0.03)"],
.solo-admin .sa-page div[style*="background: rgba(0, 0, 0, 0.04)"],
.solo-admin .sa-page div[style*="background: rgb(250, 250, 250)"],
.solo-admin .sa-page div[style*="background: rgb(248, 248, 248)"] { background: #fff !important; border-radius: 12px; }
/* Small inline tags keep a light outline. */
.solo-admin .sa-page span[style*="border: 1px solid rgba(0, 0, 0"] { border-color: var(--tile-bc) !important; border-radius: 999px !important; padding-left: 8px !important; padding-right: 8px !important; }
/* Hairlines between rows / under headers. */
.solo-admin .sa-page [style*="border-bottom: 1px solid rgba(0, 0, 0"] { border-bottom-color: var(--hair) !important; }
.solo-admin .sa-page [style*="border-top: 1px solid rgba(0, 0, 0"] { border-top-color: var(--hair) !important; }

/* Pop-up dialogs (ModalShell and friends). */
.solo-admin .sa-page div[style*="position: fixed"][style*="inset: 0px"] { background: rgba(14, 14, 16, .45) !important; }
.solo-admin .sa-page div[style*="position: fixed"][style*="inset: 0px"] > div[style*="background: rgb(255, 255, 255)"] { border: var(--tile-bw) solid var(--tile-bc) !important; border-radius: var(--tile-r) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .14) !important; }

/* Tables: a white card, light header row, hairline rows. */
.solo-admin .sa-page table { background: #fff; border: var(--tile-bw) solid var(--tile-bc) !important; border-radius: var(--tile-r); border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden; font-size: 13px; }
.solo-admin .sa-page th { text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--ink3) !important; background: #fff !important; border-bottom: 1px solid var(--hair) !important; text-align: left; }
.solo-admin .sa-page td { border-bottom: 1px solid var(--hair2) !important; border-top: 0 !important; }
.solo-admin .sa-page tbody tr:last-child td { border-bottom: 0 !important; }
.solo-admin .sa-page tbody tr:hover td { background: #fafaf8; }

/* Inputs, selects, text areas. */
.solo-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.solo-admin select,
.solo-admin textarea {
  background: #fff !important; color: var(--ink) !important;
  border: 1px solid var(--tile-bc) !important; border-radius: 8px !important;
  font-family: 'Figtree', sans-serif !important; font-size: 13px !important;
  outline: none; box-shadow: none !important;
}
.solo-admin input:not([type="checkbox"]):not([type="radio"]):focus,
.solo-admin select:focus,
.solo-admin textarea:focus { border-color: #8c8c93 !important; }
.solo-admin input::placeholder, .solo-admin textarea::placeholder { color: var(--ink3); }
.solo-admin input[type="checkbox"], .solo-admin input[type="radio"] { accent-color: var(--orange); }
.solo-admin .sa-page input[style*="monospace"], .solo-admin .sa-page textarea[style*="monospace"] { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* Buttons. Secondary: outlined. Primary (the old black ones): orange. */
.solo-admin .sa-page button[style*="border: 1px solid rgba(0, 0, 0"],
.solo-admin .sa-page a[style*="border: 1px solid rgba(0, 0, 0"],
.solo-admin .sa-page button[style*="border: 1px solid var(--line"] {
  border-color: var(--tile-bc) !important; border-radius: 8px !important; background-color: #fff !important; color: var(--ink) !important; font-weight: 600 !important;
}
.solo-admin .sa-page button[style*="border: 1px solid rgba(0, 0, 0"]:hover:not(:disabled),
.solo-admin .sa-page a[style*="border: 1px solid rgba(0, 0, 0"]:hover { border-color: #c6c5bf !important; background-color: #f6f6f4 !important; }
.solo-admin .sa-page button[style*="border: 1px solid rgba(190, 40, 40"],
.solo-admin .sa-page button[style*="color: rgb(163, 0, 0)"] { border-radius: 8px !important; background-color: #fff !important; border-color: #f3b3b0 !important; color: var(--red) !important; font-weight: 600 !important; }
/* Outlined links and buttons drawn with a solid black border (Supply Chain
   and Warehouse "Manual ↗"-style links, Camera Review filters): the same
   calm outlined secondary. */
.solo-admin .sa-page a[style*="border: 1px solid rgb(0, 0, 0)"]:not([style*="background: rgb(0, 0, 0)"]),
.solo-admin .sa-page span[style*="border: 1px solid rgb(0, 0, 0)"]:not([style*="background: rgb(0, 0, 0)"]),
.solo-admin .sa-page span[style*="border: 1px solid rgba(0, 0, 0"][style*="display: inline-block"],
.solo-admin .sa-page button[style*="border: 1px solid rgb(0, 0, 0)"]:not([style*="background: rgb(0, 0, 0)"]) {
  border-color: var(--tile-bc) !important; border-radius: 8px !important; background-color: #fff !important; color: var(--ink) !important; font-weight: 600 !important;
}
.solo-admin .sa-page a[style*="border: 1px solid rgb(0, 0, 0)"]:not([style*="background: rgb(0, 0, 0)"]):hover,
.solo-admin .sa-page button[style*="border: 1px solid rgb(0, 0, 0)"]:not([style*="background: rgb(0, 0, 0)"]):hover { border-color: #c6c5bf !important; background-color: #f6f6f4 !important; }
/* A button in a row of buttons must not squeeze its label onto two lines. */
.solo-admin .sa-inner > .sa-page button { flex-shrink: 0; }
/* The old black buttons. Calm by default: in a list or a card they are
   outlined, like Tower OS's row actions. Orange (primary) only where a page
   asks for its main action: the page header, a pop-up dialog, a form's
   submit, and the "Moved To Tower OS" note. */
.solo-admin .sa-page button[style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-page a[style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-page button[style*="background: var(--fg)"] {
  background: #fff !important; border: 1px solid var(--tile-bc) !important; color: var(--ink) !important;
  border-radius: 8px !important; font-weight: 600 !important; font-size: 12.5px !important;
}
.solo-admin .sa-page button[style*="background: rgb(0, 0, 0)"]:hover:not(:disabled),
.solo-admin .sa-page a[style*="background: rgb(0, 0, 0)"]:hover,
.solo-admin .sa-page button[style*="background: var(--fg)"]:hover:not(:disabled) { border-color: #c6c5bf !important; background: #f6f6f4 !important; }
.solo-admin .sa-actions button[style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-actions a[style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-actions button[style*="background: var(--fg)"],
.solo-admin .sa-page div[style*="position: fixed"] button[style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-page button[type="submit"][style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-page button[type="submit"][style*="background: var(--fg)"],
.solo-admin .sa-page [data-testid$="-moved"] a[style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-page [data-testid*="moved"] a[style*="background: rgb(0, 0, 0)"] {
  background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; font-weight: 700 !important;
}
.solo-admin .sa-actions button[style*="background: rgb(0, 0, 0)"]:hover:not(:disabled),
.solo-admin .sa-actions a[style*="background: rgb(0, 0, 0)"]:hover,
.solo-admin .sa-page div[style*="position: fixed"] button[style*="background: rgb(0, 0, 0)"]:hover:not(:disabled),
.solo-admin .sa-page button[type="submit"][style*="background: rgb(0, 0, 0)"]:hover:not(:disabled),
.solo-admin .sa-page [data-testid*="moved"] a[style*="background: rgb(0, 0, 0)"]:hover { background: var(--orange-d) !important; border-color: var(--orange-d) !important; }
/* Text that was white on those black buttons (a card's description). */
.solo-admin .sa-page button[style*="background: rgb(0, 0, 0)"] [style*="color: rgba(255, 255, 255"],
.solo-admin .sa-page a[style*="background: rgb(0, 0, 0)"] [style*="color: rgba(255, 255, 255"] { color: var(--ink2) !important; }
.solo-admin .sa-actions button[style*="background: rgb(0, 0, 0)"] [style*="color: rgba(255, 255, 255"],
.solo-admin .sa-page div[style*="position: fixed"] button[style*="background: rgb(0, 0, 0)"] [style*="color: rgba(255, 255, 255"] { color: rgba(255, 255, 255, .85) !important; }
/* Segmented choices (lead / order / ticket status, Camera Review filter):
   the chosen one is the old black button with 7px 14px padding. It stays
   filled in ink, like the [Tower OS | Admin] switch, so the choice shows. */
.solo-admin .sa-page button[style*="background: rgb(0, 0, 0)"][style*="padding: 7px 14px"],
.solo-admin .sa-page button[style*="background: rgb(0, 0, 0)"][style*="padding: 7px 14px"]:hover:not(:disabled) {
  background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important;
}
/* A disabled primary (greyed) stays grey. */
.solo-admin .sa-page button[style*="background: rgba(0, 0, 0, 0.15)"] { border-radius: 8px !important; }
/* Other black blocks (an "on" chip, a badge): ink, rounded. */
.solo-admin .sa-page span[style*="background: rgb(0, 0, 0)"],
.solo-admin .sa-page div[style*="background: rgb(0, 0, 0)"] { background: var(--ink) !important; border-radius: 6px; }
.solo-admin .sa-page button[style*="font-size: 11.5px"], .solo-admin .sa-page button[style*="font-size: 11px"] { font-size: 12.5px !important; }

/* Underlined tab rows (Warehouse, RUT241, Settings): the active tab gets
   Tower OS's orange underline. */
.solo-admin .sa-page button[style*="border-style: none none solid"][style*="currentcolor rgb(0, 0, 0)"] { border-bottom-color: var(--orange) !important; color: var(--ink) !important; font-weight: 700 !important; }
.solo-admin .sa-page button[style*="border-style: none none solid"] { font-size: 13px !important; }

/* Links inside pages. */
.solo-admin .sa-page a[style*="text-decoration: underline"] { text-decoration-color: rgba(140, 140, 147, .55); text-underline-offset: 2px; }
.solo-admin .sa-page a[style*="text-decoration: underline"]:hover { color: var(--orange-d); text-decoration-color: currentColor; }

/* -- Phone and narrow screens ---------------------------------------------- */
@media (max-width: 899px) {
  /* index.html's phone rules size every h1 / h2 for the public site's big
     headlines (with !important); the staff area keeps calm headings. */
  .solo-admin h1, .solo-admin h2, .solo-admin .sa-page h1[style*="clamp("], .solo-admin .sa-page h2[style*="clamp("] { font-size: 18px !important; line-height: 1.25 !important; }
  .solo-admin .sa-brand img { padding-right: 0 !important; }
  .solo-admin .sa-bar { padding: 0 14px; gap: 10px; }
  .solo-admin .sa-menu-btn { display: inline-flex; }
  .solo-admin .sa-brand { gap: 10px; }
  .solo-admin .sa-brand img { height: 18px; }
  .solo-admin .sa-user { display: none; }
  .solo-admin .sa-side { display: none; }
  .solo-admin.sa-menu-open .sa-side {
    display: flex; position: fixed; top: 58px; left: 0; right: 0; bottom: 0; width: auto; height: auto;
    z-index: 44; border-right: 0;
  }
  .solo-admin .sa-main { padding: 16px 16px 80px; }
  /* Tables stay real tables (so they always fill their card); the box they
     sit in scrolls sideways instead. Nearly every page already wraps them in
     an overflowX: auto div; this catches any that isn't. */
  .solo-admin .sa-page table { min-width: 100%; }
  .solo-admin .sa-page div:has(> table):not([style*="overflow"]) { overflow-x: auto; max-width: 100%; }
  .solo-admin .sa-page [style*="min-width: max-content"] { max-width: none; }
  .solo-admin .sa-page div[style*="position: fixed"][style*="inset: 0px"] { padding: 12px !important; }
}
@media (max-width: 420px) {
  .solo-admin .sa-bname { font-size: 10px; letter-spacing: .14em; }
  .solo-admin .sa-bdiv { display: none; }
}
/* Phones: fields stay 16px so iOS doesn't zoom in on them (index.html). */
@media (max-width: 640px) {
  .solo-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  .solo-admin select,
  .solo-admin textarea { font-size: 16px !important; }
}