/* MSlide Food Menu V2 — admin screens: a thin theme on top of Bulma 0.9.4.
 *
 * Markup uses Bulma components and helpers wherever they exist (title, subtitle,
 * heading, box, field/label/control, input, select, file, button, notification,
 * help, level, modal-card, image). This file only:
 *   1. themes Bulma for the dark menu with the MSlide orange as `is-primary`
 *      (Bulma 0.9 has no dark mode or CSS variables);
 *   2. keeps what Bulma does not provide: the no-scroll slide layout, the
 *      MSlide³ launch pad, the fixed Log out pill, the MSlide³ modal rules.
 * Scopes: .reveal .mslide-admin (slides), .ma-modal / .ma-fab / .ma-nav-admin
 * (overlays), .ma-page (server pages shown in the reveal.js modal).
 * Loaded by live/index.html after css/QRMenu1.css, and by the server pages
 * after css/vendor/bulma-0.9.4.min.css. */

:root {
  --ma-bg: #2b2b2b;
  --ma-surface: #353535;
  --ma-line: rgba(255, 255, 255, 0.12);
  --ma-muted: #b9b9b9;
  --ma-accent: #ff5816;       /* MSlide orange: Log out dot, Log out confirm */
  --ma-accent-hover: #ff6e33;
  /* Figma design sweep (2026-11-10): light neutral buttons on the dark slides */
  --ma-primary: #efefef;      /* submit buttons: Log in, Upload, Save changes, Send reset link */
  --ma-primary-hover: #ffffff;
  --ma-on-light: #2b2b2b;     /* text on light buttons */
  --ma-soft: #dddddd;         /* Show button, Admin pill */
  --ma-soft-line: #636363;    /* Admin pill border */
  --ma-soft-text: #3c3c3c;    /* Admin pill text */
  --ma-text-dim: #b5b5b5;     /* links, help, notes (Bulma grey-light) */
  --ma-modal-bg: #000000;     /* pages inside the reveal.js modal (Figma 03/06/07/08) */
  --ma-brand-h: 82px;         /* MSlide for food logo, 175x82 at full height */
  --ma-focus: #ffffff;        /* highlighted field / button outline: white, not orange */
  --ma-focus-ring: rgba(255, 255, 255, 0.25);
  --ma-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Size system (normalised across slides, modal pages and Figma): */
  --ma-content: 325px;        /* one content column = MSlide³ launch-pad width */
  --ma-control-h: 48px;       /* every input, select, file picker and button */
  --ma-pill-h: 34px;          /* Log out + Admin pills = V1 menu pills */
  --ma-field-gap: 12px;       /* space between fields */
  --ma-radius: 6px;           /* every container and message = MSlide³ launch-pad outer corners */
  /* Type scale (same on slides, modal pages and the dialog): */
  --ma-h1: 24px;              /* screen titles */
  --ma-h2: 20px;              /* dialog title, launch-pad tile titles */
  --ma-h3: 16px;              /* sub-sections */
  --ma-p: 14px;               /* body: subtitles, help, messages, links, notes */
  --ma-label: 12px;           /* field labels, eyebrow */
}
/* Compact scale for very short screens (same ratios, one step down) so no slide scrolls. */
@media (max-height: 620px) { :root { --ma-control-h: 40px; --ma-field-gap: 6px; --ma-h1: 20px; --ma-h2: 18px; --ma-h3: 15px; --ma-p: 13px; --ma-label: 11px; } }

/* ---- 1. Bulma theme: dark surfaces, light neutral buttons --------------- */

.mslide-admin, .ma-modal, .ma-page { font-family: var(--ma-font); }

.mslide-admin .button.is-primary, .ma-modal .button.is-primary, .ma-page .button.is-primary {
  background-color: var(--ma-primary);
  border-color: transparent;
  color: var(--ma-on-light);
}
.mslide-admin .button.is-primary:hover, .ma-modal .button.is-primary:hover, .ma-page .button.is-primary:hover,
.mslide-admin .button.is-primary:focus, .ma-page .button.is-primary:focus { background-color: var(--ma-primary-hover); color: var(--ma-on-light); }
.mslide-admin .button.is-primary:focus:not(:active), .ma-page .button.is-primary:focus:not(:active) {
  box-shadow: 0 0 0 0.125em var(--ma-focus-ring);
}
/* Show button (login) and Admin pill (bottom bar): Bulma is-light, Figma grey */
.mslide-admin .button.is-light, .ma-nav-admin .button.is-light { background-color: var(--ma-soft); border-color: transparent; color: var(--ma-on-light); }
.mslide-admin .button.is-light:hover, .ma-nav-admin .button.is-light:hover { background-color: #e8e8e8; color: var(--ma-on-light); }
.ma-nav-admin .button.is-light { border-color: var(--ma-soft-line); color: var(--ma-soft-text); }
/* Log out confirm: the destructive action keeps the MSlide orange */
.ma-modal .button.is-danger { background-color: var(--ma-accent); border-color: transparent; color: #fff; }
.ma-modal .button.is-danger:hover { background-color: var(--ma-accent-hover); color: #fff; }
.mslide-admin .has-text-primary, .ma-page .has-text-primary { color: var(--ma-accent) !important; }
/* Messages (login error, upload done, profile, reset): neutral, white text on the form surface (Figma 01/07) */
.mslide-admin .notification, .ma-page .notification {
  border-radius: var(--ma-radius);
  background-color: var(--ma-surface) !important;
  color: #fff !important;
}
.mslide-admin .tag.is-primary.is-light, .ma-page .tag.is-primary.is-light { background-color: #ffeee7; color: #c43e0a; }

.mslide-admin .box, .ma-page .box {
  background-color: var(--ma-surface) !important;   /* V1 custom.css: .box { background-color: transparent !important } */
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius);
  box-shadow: none;
  color: #fff;
}
.mslide-admin .input, .ma-page .input, .ma-page .select select, .ma-page .file-name {
  background-color: var(--ma-bg);
  border-color: var(--ma-line);
  color: #fff;
  box-shadow: none;
}
.mslide-admin .input::placeholder, .ma-page .input::placeholder { color: #8a8a8a; }
.mslide-admin .input:focus, .ma-page .input:focus, .ma-page .select select:focus {
  border-color: var(--ma-focus);
  box-shadow: 0 0 0 0.125em var(--ma-focus-ring);
}
.ma-page .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--ma-muted); }
.ma-page .file-cta { background-color: #efefef; border-color: transparent; }
.ma-page .file-name { border-width: 1px; max-width: none; flex: 1; }
.ma-page .file-cta, .ma-page .file-name { display: flex; align-items: center; padding-block: 0; }
.ma-page .file.has-name .file-cta { border-radius: 9999px 0 0 9999px; }
.ma-page .file.has-name .file-name { border-radius: 0 9999px 9999px 0; }

/* ---- Size system: one column width, one control height, one pill height */

.reveal .mslide-admin .ma-screen > *, .ma-page .section > *, .ma-modal .modal-card {
  width: 100%;
  max-width: var(--ma-content);
  margin-inline: auto;
}
.mslide-admin .input, .mslide-admin .button:not(.mslide3-launch-pad-entry),
.ma-page .input, .ma-page .button, .ma-page .select:not(.is-multiple), .ma-page .select select,
.ma-page .file-cta, .ma-page .file-name, .ma-modal .button {
  height: var(--ma-control-h);
  font-size: 1rem;
}
.mslide-admin .button:not(.mslide3-launch-pad-entry), .ma-page .button, .ma-modal .button { padding-inline: 1.25em; }
.mslide-admin .field:not(:last-child), .ma-page .field:not(:last-child) { margin-bottom: var(--ma-field-gap); }
.button.ma-fab, .ma-nav-admin .button { height: var(--ma-pill-h); font-size: 13px; padding-inline: 16px; }

/* ---- Type scale: h1 / h2 / h3 / p / labels ------------------------------ */

.reveal .mslide-admin h1, .ma-page h1, .ma-modal h1 { font-size: var(--ma-h1); font-weight: 400; line-height: 1.2; }
.reveal .mslide-admin h2, .ma-page h2, .ma-modal h2 { font-size: var(--ma-h2); font-weight: 400; line-height: 1.25; }
.reveal .mslide-admin h3, .ma-page h3, .ma-modal h3 { font-size: var(--ma-h3); font-weight: 500; line-height: 1.3; }
.reveal .mslide-admin p:not(.heading), .ma-page p:not(.heading), .ma-modal p:not(.heading),
.reveal .mslide-admin .level-item, .ma-page .help, .reveal .mslide-admin .help { font-size: var(--ma-p); line-height: 1.45; }
.mslide-admin .label, .ma-page .label, .reveal .mslide-admin .heading { font-size: var(--ma-label); }

/* Fields and buttons share the pill shape (Bulma is-rounded); containers use --ma-radius. */

/* reveal.js theme defaults (42px base, centred, heading fonts) must not leak in. */
.reveal .slides section.mslide-admin { font-size: 16px; line-height: 1.5; text-align: left; color: #fff; }
.reveal .mslide-admin .title, .reveal .mslide-admin .subtitle, .reveal .mslide-admin .heading {
  font-family: var(--ma-font);
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
}
.reveal .mslide-admin .heading { text-transform: uppercase; letter-spacing: 0.12em; }
.reveal .mslide-admin img { margin: 0; border: 0; box-shadow: none; background: none; }
.reveal .mslide-admin a { text-decoration: none; }

/* ---- 2a. Slide layout: no vertical scrolling inside a slide (rule) ------ */

.reveal .mslide-admin .ma-screen {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  max-width: 480px;
  /* Clear the top pills/logo and the 50px bottom bar. Sizes scale with the
   * viewport height so every screen fits from iPhone SE (667px) upwards. */
  padding: clamp(56px, 7.3vh, 68px) 20px clamp(62px, 8.5vh, 72px);   /* Figma: content starts at 68 of 932 */
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 19px);                                        /* Figma: 18.7 between blocks */
  overflow: hidden;
  box-sizing: border-box;
}
.reveal .mslide-admin .ma-screen > * { margin-block: 0; }
/* MSlide for food logo (Figma: 175x82, centred); shrinks with the viewport height */
.reveal .mslide-admin .ma-brand.image { width: auto; height: clamp(48px, 8.8vh, var(--ma-brand-h)); }
/* The screen titles are screen-reader only now: cancel Bulma's .title + .subtitle pull-up (-1.25rem) */
.reveal .mslide-admin .title.is-sr-only + .subtitle { margin-top: 4px; margin-bottom: 0; }
/* Dashboard (Figma 04): logo 68–150, subtitle 154–175, launch pad at 186 → ~11px under the subtitle, not the 19px block gap */
.reveal .mslide-admin .ma-screen > header + .ma-launch-pad { margin-top: calc(-1 * clamp(0px, 0.85vh, 8px)); }
.reveal .mslide-admin .ma-brand.image img { height: 100% !important; width: auto; margin: 0 auto !important; }  /* V1 QRMenu1.css: figure img { margin-top: -20% !important } */
.reveal .mslide-admin .box { margin-block: 0; padding: clamp(14px, 1.85vh, 17px); height: auto; }  /* Figma form padding 17.3 */  /* V1 custom.css sets .full-height-section .box { height: 50% } */
.reveal .mslide-admin .notification { margin-bottom: clamp(8px, 1.6vh, 12px); }
.reveal .mslide-admin .notification[hidden] { display: none; }

/* Very short screens (e.g. 320x568): drop decorative extras rather than scroll. */
@media (max-height: 620px) {
  .reveal .mslide-admin .ma-brand,
  .reveal .mslide-admin .heading { display: none; }
  .reveal .mslide-admin .ma-screen { gap: 8px; }
  .reveal .mslide-admin .box { padding: 10px 12px; }
  .reveal .mslide-admin .notification { margin-bottom: 6px; }
  .reveal .mslide-admin .label { margin-bottom: 0.25em; }
  .reveal .mslide-admin .mslide3-launch-pad-entry { padding: 8px; }
  .reveal .mslide-admin .help { margin-top: 0; }
}

/* Smallest visible areas (e.g. small phones with browser toolbars, ~480px):
 * the dashboard also drops its subtitle and the safety note. */
@media (max-height: 520px) {
  .reveal .mslide-admin[data-admin-slide="dashboard"] .subtitle,
  .reveal .mslide-admin[data-admin-slide="dashboard"] .ma-note { display: none; }
}

/* ---- 2b. Dashboard: MSlide³ launch pad -------------------------------- */
/* Adapted from MSlide3/4 (index, mobile view): same class names and values
 * (#ffffffd6 tiles, 1px seams, 6px outer corners, light Roboto, split final
 * row), scoped to the admin slide. Fixed 325px width as in MSlide³. The
 * entries are Bulma buttons, exactly as in MSlide³. */

:root {
  --mslide-launch-pad-bg: #ffffffd6;
  --mslide-launch-pad-border: rgba(255, 255, 255, 0.85);
  --mslide-launch-pad-text: #363636;
}
.reveal .mslide-admin .ma-launch-pad.index-buttons {
  box-sizing: border-box;
  width: 325px;
  max-width: 100%;
  margin: 0 auto;
}
.reveal .mslide-admin .mslide3-launch-pad-stack {
  display: grid;
  align-items: stretch;
  gap: 1px;
  grid-auto-rows: 1fr;
  justify-items: stretch;
}
.reveal .mslide-admin .mslide-launch-pad-split-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  height: 100%;
  width: 100%;
}
.reveal .mslide-admin .mslide3-launch-pad-final-cell { display: grid; min-width: 0; }
.reveal .mslide-admin .mslide3-launch-pad-entry {
  box-sizing: border-box;
  height: auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: clamp(18px, 2.78vh, 26px) 12px;  /* Figma 04: 25.9px (tiles 97.6px tall); MSlide³ p-6 scaled to fit without scrolling */
  white-space: normal;
  background-color: var(--mslide-launch-pad-bg);
  border: 1px solid var(--mslide-launch-pad-border) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.reveal .mslide-admin .mslide3-launch-pad-entry:hover,
.reveal .mslide-admin .mslide3-launch-pad-entry:focus-visible {
  background-color: #fff;
  border-color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.reveal .mslide-admin .mslide3-launch-pad-entry:focus-visible { outline: 2px solid var(--ma-focus); outline-offset: 2px; }
.reveal .mslide-admin .mslide3-launch-pad-corner-top-left { border-top-left-radius: var(--ma-radius) !important; }
.reveal .mslide-admin .mslide3-launch-pad-corner-top-right { border-top-right-radius: var(--ma-radius) !important; }
.reveal .mslide-admin .mslide3-launch-pad-corner-bottom-left { border-bottom-left-radius: var(--ma-radius) !important; }
.reveal .mslide-admin .mslide3-launch-pad-corner-bottom-right { border-bottom-right-radius: var(--ma-radius) !important; }
.reveal .mslide-admin .mslide3-launch-pad-title {
  display: block;
  width: 100%;
  font-size: var(--ma-h2);
  font-weight: 300;
  line-height: 1.15;
  color: var(--mslide-launch-pad-text) !important;
}
.reveal .mslide-admin .mslide3-launch-pad-description { font-size: var(--ma-p); line-height: 1.2; }
/* Disabled until the session provides the URL. */
.reveal .mslide-admin .mslide3-launch-pad-entry[aria-disabled="true"] { pointer-events: none; }
.reveal .mslide-admin .mslide3-launch-pad-entry[aria-disabled="true"] .mslide3-launch-pad-title { opacity: 0.55; }

/* ---- 2c. Log out pill (top left) and Admin pill (bottom bar) ----------- */
/* Both are Bulma buttons; only position, visibility and the dot are custom. */

.button.ma-fab {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 40;
  display: none;
  gap: 8px;
  font-weight: 700;
  background-color: rgba(43, 43, 43, 0.86);
  border-color: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.button.ma-fab::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ma-accent); }
body.mslide-admin-active .button.ma-fab { display: inline-flex; }
.ma-nav-admin { display: none; }
body.mslide-admin-active .ma-nav-admin { display: flex; }

/* ---- 2d. Log-out confirm (Bulma modal-card, dark) ---------------------- */

.ma-modal { z-index: 60; }
.ma-modal .modal-card { border-radius: var(--ma-radius); border: 1px solid var(--ma-line); }
.ma-modal .modal-card-body, .ma-modal .modal-card-foot { background-color: var(--ma-surface); border-color: var(--ma-line); }
.ma-modal .modal-card-foot { justify-content: flex-end; }
/* Sheets app prompt: three choices, stacked full width (main action first). */
.ma-modal[data-admin-modal="sheets-app"] .modal-card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.ma-modal[data-admin-modal="sheets-app"] .modal-card-foot .button { width: 100%; margin: 0; }
.ma-modal[data-admin-modal="sheets-app"][data-step="open"] [data-admin-step="open"] { order: -1; }
.ma-modal[data-admin-modal="sheets-app"] [data-admin-step]:not(.is-primary) { background: transparent; border-color: var(--ma-soft-line); color: #fff; }
.ma-modal[data-admin-modal="sheets-app"] [data-admin-step]:not(.is-primary):hover { border-color: #fff; }
.ma-modal .button.is-text { color: var(--ma-text-dim); background: none; text-decoration: underline; }
.ma-modal .button.is-text:hover, .ma-modal .button.is-text:focus { color: #fff; background: none; }

/* ---- 2e. Server pages in the reveal.js modal (uploader, profile, reset) */

html.ma-page, .ma-page body { background-color: var(--ma-modal-bg); color: #fff; min-height: 100%; }
.ma-page .section { padding-inline: 16px; }
.ma-page .file-label { flex: 1; }

/* ---- reveal.js modal: MSlide³ cross-MSlide standard --------------------- */
/* Verbatim from MSlide3/4 css/custom.css ("Lightbox"): reveal's default
 * overlay (same reveal.css 5.0.4) with MSlide's own header icons.
 * Icon URLs as in MSlide³ (../assets/brand/…).
 */

.reveal>.overlay .spinner{
    background-image: none !important;
}

.reveal>.overlay header a.external .icon{
    background-image: url(../assets/brand/open-new-window.svg) !important;
}

.reveal>.overlay header a.close .icon {
    background-image: url(../assets/brand/mark.svg) !important;
}

/* Figma modal header: black bar, thin grey Iconoir icons (open in new window 18px, close 24px) */
.reveal>.overlay, .reveal>.overlay header, .reveal>.overlay .viewport { background: #000; }
.reveal>.overlay header a .icon { width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 1; }

/* ---- Local UI preview only: outline any screen that would need scrolling. */
.ma-overflow { outline: 3px dashed #ff3b30; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .reveal .mslide-admin .mslide3-launch-pad-entry { transition: none; }
}