/*
 * Components shared by the storefront AND the admin panel, loaded by
 * view/shared/head.html right after theme.css: only what both areas draw
 * the same — the one-time message, the language toggle and the theme button
 * (decision 90), a form inside a row of buttons. Everything one area alone
 * uses lives in its own file, storefront.css or admin.css (the owner,
 * 2026-10-06: the admin's dense Cloud-console look must never reach the
 * storefront). The CSP forbids style="" attributes, so one-off tweaks belong
 * in these files too.
 */

/* One-time message (shared/flash.html). */
.flash {
  margin-block-end: 1rem;
}

/* --- Language toggle and theme button (shared/lang_toggle.html,
 * shared/theme_button.html) ------------------------------------------------
 * One component for the storefront's header and the admin panel's top bar
 * (the owner, 2026-10-06: the admin's must be identical to the storefront's).
 * The design's measurements, in px like the rest of its port. On touch
 * screens the storefront makes both 44 px tall (storefront.css, the end);
 * the admin keeps BeerCSS's 40 px (decision 15).
 */

/* The toggle: a knob with the current flag slides to the side of the current
   language (a link to /bahasa/{other}, so it works without JS). The track is
   the sunken surface (--aa-inset, theme.css). */
.aa-langsw {
  --_size: 2.5rem;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 5px 0 14px;
  background: var(--aa-inset);
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
}

.aa-langsw.is-en {
  flex-direction: row-reverse;
  padding: 0 14px 0 5px;
}

/* The code carries the toggle's type: the storefront gives every button its
   own weight and spacing (`.aa :is(button, .button)`, a later file with a
   stronger selector), which would win on the link itself. */
.aa-langsw .code {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
}

.aa-langsw .knob {
  display: inline-flex;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow:
    0 0 0 2px var(--surface),
    0 1px 4px rgb(0 0 0 / 0.3);
}

.aa-langsw .knob img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  outline: 1px solid rgb(0 0 0 / 0.14);
  outline-offset: -1px;
}

body.dark .aa-langsw .knob img {
  outline-color: rgb(255 255 255 / 0.18);
}

.aa-langsw:hover {
  background: var(--surface-container);
}

/* The theme button: an outlined circle; the icon shows the mode it switches
   to. Two classes: BeerCSS's outlined button (`:is(button, .button).border`)
   would colour the icon in the brand blue. */
.aa-themebtn.border {
  background: transparent;
  color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant);
}

.aa-themebtn.border:hover {
  color: var(--on-surface);
}

/* The storefront's focus ring (2 px off the edge) in the admin panel too,
   where BeerCSS's own sits 4 px off. */
:is(.aa-langsw, .aa-themebtn):focus-visible {
  outline-offset: 2px;
}

/* --- A form in a row of buttons ------------------------------------------- */

/* Forms that sit inside a button row (table actions) must not break the row. */
nav form {
  display: inline-flex;
  margin: 0;
}

/* --- A form on its way: its buttons rest (decision 155) ------------------------ */

/* While a form is on its way its buttons rest (app.js): `disabled` when the
   page leaves — BeerCSS dims a disabled button —, else aria-disabled only
   (the answer comes in place: the pressed button keeps the keyboard's
   focus), dimmed alike here. The pointer says it is under way. */
:is(button, .button)[data-sending] {
  cursor: progress;
}

:is(button, .button)[data-sending][aria-disabled="true"] {
  opacity: 0.5;
}

/* --- Dialogs: the focus goes in as one opens --------------------------------- */

/* BeerCSS fades every <dialog> in with `transition: all`, its visibility too:
   at the moment showModal() looks for the control to focus, the dialog is
   still hidden, so the focus stayed on the page and a keyboard or screen
   reader user was left outside it — the menu drawers, the catalogue's filter
   sheet, the sign-in dialog (whose own focus on the e-mail field failed
   too), the account's sheets, "Perbesar" (the browser test found it on every
   one). Visibility flips at once on opening; the fade and the slide stay,
   and closing still waits for them, as BeerCSS has it. */
dialog:is([open], .active) {
  transition:
    all var(--speed3),
    visibility 0s,
    background-color 0s;
}

/* While it fades out, a closed dialog lets clicks through to the page
   (BeerCSS's caught them for those 0.3 s: a tap just after closing the menu
   landed on the fading menu). Without scripts no dialog opens and a sheet is
   laid out in the page: it keeps its clicks (`html.js` only). */
html.js dialog:not([open], .active) {
  pointer-events: none;
}