/* =====================================================================
   panel.css — the vendor panel's own layer.

   Everything here is either the panel's chrome (`god-*`) or a deliberate
   override of a shared component for this site's density. The shared
   component library itself is console.css, loaded before this; see the head
   of resources/views/vendor/panel.blade.php for where the line between them
   sits.

   ## What was wrong with the old panel, and what each rule below fixes

   The panel used to be a screen inside the console, so it inherited a shell
   built for a shop owner standing at a counter: 56px tap targets, a 17px body
   size, one long undifferentiated scroll, and tables that could only scroll
   sideways. Read on a laptop by an operator holding a support call, that is
   too big to see much and too flat to find anything. So:

     * **One type scale, stated once.** `--god-t-*` below, and nothing in this
       panel sets a font-size that is not one of them. The old file set sizes
       ad hoc in four places, which is what "fonts and sizes not organized"
       actually looks like in a stylesheet.

     * **Density.** Controls are `--god-tap` (40px), not the till's 56px. A
       mouse does not need a thumb's worth of target, and the extra 16px per
       row is a third of a screen across a long form.

     * **Sections are cards, not headings in a scroll.** `.god-card` gives
       each group a boundary, so "where do modules end and API keys begin" is
       answered by looking rather than by reading.

     * **Responsive by structure, not by breakpoint tweaks.** Lists that must
       survive a phone are grids of cards (`.god-grid`), not tables. The one
       table left (a shop's tills) keeps its own horizontal scroll, which is
       the honest answer for genuinely tabular data.

   No colours of its own: everything is a token from tokens.css, so the panel
   follows the same three-state theme contract as every other surface.
   ===================================================================== */

:root {
  /* ---- the panel's own scale ---------------------------------------
     Deliberately a notch tighter than the console's: this is a desktop tool
     read at a desk, not a counter screen read standing up. */
  --god-t-xs:  0.75rem;    /* 12 — meta, timestamps, key prefixes */
  --god-t-sm:  0.8125rem;  /* 13 — labels, table cells */
  --god-t-md:  0.9375rem;  /* 15 — body */
  --god-t-lg:  1.0625rem;  /* 17 — card titles */
  --god-t-xl:  1.375rem;   /* 22 — page title */

  --god-tap: 40px;
  --god-shell-w: 1180px;
  --god-header-h: 60px;
}

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */

.god-body {
  min-height: 100dvh;
  background: var(--c-bg);
  background-image: var(--c-bg-grad);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--god-t-md);
}

.god-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.god-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--god-header-h);
  padding: var(--s-2) var(--s-5);
  border-block-end: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}

.god-header__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.god-header__logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  /* The one place the panel is visually distinct from a shop console at a
     glance: an operator with both open should never have to read the tab
     title to know which is which. */
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
}

.god-header__names {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.god-header__title {
  font-size: var(--god-t-md);
  font-weight: var(--w-bold);
}

.god-header__sub {
  font-size: var(--god-t-xs);
  color: var(--c-dim);
}

.god-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  margin-inline-start: auto;
}

/* ---- nav ---- */

.god-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
}

.god-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-size: var(--god-t-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
}

.god-nav__link:hover { background: var(--c-surface-2); }

.god-nav__link:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* Selection is ARIA — the class is only how it is painted. */
.god-nav__link[aria-current="page"] {
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
}

/* ---- main ---- */

.god-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--god-shell-w);
  margin-inline: auto;
  padding: var(--s-5) var(--s-5) var(--s-8);
}

.god-main:focus { outline: none; }

.god-banner {
  margin: 0;
  padding: var(--s-2) var(--s-5);
  font-size: var(--god-t-sm);
  text-align: center;
}

.god-banner--offline {
  background: var(--c-warn-soft);
  color: var(--c-warn);
}

/* ---------------------------------------------------------------------
   Page density overrides

   The shared `.adm-page` is sized for the console. These four rules are the
   whole difference, and they are here rather than forked into a new set of
   classes so that a shared screen dropped into this panel picks them up.
   --------------------------------------------------------------------- */

.god-page { gap: var(--s-4); }
.god-page__title { font-size: var(--god-t-xl); }
.god-page__head { gap: var(--s-2); }
.god-page__actions { gap: var(--s-2); }

.god-main .btn {
  min-height: var(--god-tap);
  font-size: var(--god-t-sm);
}

.god-main .input,
.god-main .adm-select,
.god-main .adm-textarea {
  min-height: var(--god-tap);
  font-size: var(--god-t-md);
}

.god-main .adm-textarea { min-height: calc(var(--god-tap) * 2); }

.god-main .adm-field__label { font-size: var(--god-t-sm); }
.god-main .adm-field__hint { font-size: var(--god-t-xs); }
.god-main .adm-table { font-size: var(--god-t-sm); }
.god-main .adm-table th { font-size: var(--god-t-xs); }

/* ---------------------------------------------------------------------
   Cards — the unit every section on every screen is made of
   --------------------------------------------------------------------- */

.god-card {
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-inset), var(--sh-1);
  overflow: hidden;
}

.god-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) 0;
}

.god-card__title {
  margin: 0;
  font-size: var(--god-t-lg);
  font-weight: var(--w-bold);
}

.god-card__hint {
  margin: var(--s-1) var(--s-4) 0;
  padding: 0;
  color: var(--c-dim);
  font-size: var(--god-t-xs);
  line-height: 1.6;
}

.god-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
}

/* A card whose body is a table: the table draws its own edges, so the body
   padding would double them. */
.god-card__body--flush { padding: 0; }
.god-card__body--flush .adm-table__wrap { box-shadow: none; border-radius: 0; }

.god-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-inline-start: auto;
}

/* ---------------------------------------------------------------------
   Section tabs — how a shop's screen is navigated

   In-page rather than routed: the shop's facts, modules, keys and receipt
   identity all arrive in the same two requests, so making each a route would
   re-fetch everything to show a section already in memory.
   --------------------------------------------------------------------- */

.god-sections {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--c-line);
}

.god-sections__tab {
  appearance: none;
  min-height: 34px;
  padding-inline: var(--s-3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink-2);
  font: inherit;
  font-size: var(--god-t-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
}

.god-sections__tab:hover { background: var(--c-surface-2); }

.god-sections__tab:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.god-sections__tab[aria-selected="true"] {
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
}

/* ---------------------------------------------------------------------
   Grids — the responsive answer for lists

   `auto-fill` with a `minmax` floor, so the same markup is three columns on a
   laptop, two on a tablet and one on a phone with no breakpoint of its own.
   Lists that must survive a phone are built from these rather than from
   tables, which is why this panel has almost no tables left.
   --------------------------------------------------------------------- */

.god-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30vw, 340px), 1fr));
  gap: var(--s-3);
}

/* One shop in the list. A link, so it behaves like one: middle-click,
   keyboard, and the browser's own affordances all work without JS. */
.god-shop {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-inset), var(--sh-1);
  color: inherit;
  text-decoration: none;
}

.god-shop:hover {
  box-shadow: var(--sh-inset), var(--sh-2);
  transform: translateY(-1px);
}

.god-shop:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.god-shop__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.god-shop__name {
  font-size: var(--god-t-lg);
  font-weight: var(--w-bold);
  line-height: 1.35;
}

.god-shop__slug {
  color: var(--c-dim);
  font-size: var(--god-t-xs);
}

.god-shop__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-block-start: var(--s-1);
  padding-block-start: var(--s-2);
  border-block-start: 1px solid var(--c-line);
}

.god-shop__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.god-shop__statlabel {
  color: var(--c-dim);
  font-size: var(--god-t-xs);
}

.god-shop__statvalue {
  font-size: var(--god-t-sm);
  font-weight: var(--w-bold);
}

/* ---------------------------------------------------------------------
   Facts — the shop overview's label/value pairs
   --------------------------------------------------------------------- */

.god-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 22vw, 220px), 1fr));
  gap: var(--s-3);
}

.god-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.god-fact__label {
  color: var(--c-dim);
  font-size: var(--god-t-xs);
}

.god-fact__value {
  font-size: var(--god-t-md);
  font-weight: var(--w-bold);
  /* Slugs and ids are long and unbreakable; a fact that overflows its column
     pushes the whole grid sideways. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Rows — a switch or a key with a label and an action beside it
   --------------------------------------------------------------------- */

.god-rows {
  display: flex;
  flex-direction: column;
}

.god-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--c-line);
}

.god-row:first-child { border-block-start: 0; }

.god-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.god-row__title {
  font-size: var(--god-t-md);
  font-weight: var(--w-medium);
}

.god-row__meta {
  color: var(--c-dim);
  font-size: var(--god-t-xs);
  overflow-wrap: anywhere;
}

.god-row__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

/* ---------------------------------------------------------------------
   The one-time API token
   --------------------------------------------------------------------- */

.god-token {
  display: block;
  margin-block: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  background: var(--c-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--god-t-sm);
  /* An `omk_…` is 44 unbroken characters with nowhere to wrap; a token that
     overflows its box is a token the operator copies half of. */
  word-break: break-all;
  user-select: all;
}

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */

.god-login {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--s-5);
}

.god-login__card {
  width: 100%;
  max-width: 380px;
  padding: var(--s-6);
  border-radius: var(--r-4);
  background: var(--c-surface);
  box-shadow: var(--sh-inset), var(--sh-3);
}

.god-login__title {
  margin: 0 0 var(--s-1);
  font-size: var(--god-t-xl);
}

.god-login__sub {
  margin: 0 0 var(--s-5);
  color: var(--c-dim);
  font-size: var(--god-t-sm);
}

/* ---------------------------------------------------------------------
   Narrow screens

   Two breakpoints and no more. The grids above already reflow on their own,
   so these only deal with the chrome — which cannot, because a header is a
   row until it is not.
   --------------------------------------------------------------------- */

@media (max-width: 860px) {
  .god-header {
    flex-wrap: wrap;
    padding-inline: var(--s-4);
  }

  /* The nav drops to its own full-width row under the brand, rather than
     compressing to unreadable pills beside it. */
  .god-nav {
    order: 3;
    width: 100%;
    padding-block-start: var(--s-2);
    border-block-start: 1px solid var(--c-line);
  }

  .god-main { padding-inline: var(--s-4); }
}

@media (max-width: 560px) {
  .god-header__title { font-size: var(--god-t-sm); }
  .god-header__logo { width: 32px; height: 32px; }

  .god-main { padding-inline: var(--s-3); }

  .god-page__title { font-size: var(--god-t-lg); }

  /* The page header's actions wrap under the title instead of squeezing it to
     two characters and an ellipsis. */
  .god-page__head { flex-wrap: wrap; }
  .god-page__actions { width: 100%; }
  .god-page__actions .btn { flex: 1 1 auto; }

  /* A row's action moves below its label rather than competing for width. */
  .god-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .god-row__actions { width: 100%; }

  .god-card__body { padding: var(--s-3); }
  .god-card__head { padding: var(--s-3) var(--s-3) 0; }
  .god-card__hint { margin-inline: var(--s-3); }
}