/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ==========================================================================
 * The operator's panel
 *
 * App-level scaffolding for /admin, and the only place it may live: the
 * design system's own files are in app/assets/stylesheets/gameon, which
 * bin/sync-design-system owns and prunes of anything it did not write.
 *
 * Layout only, and deliberately so. Every colour, height, radius and padding
 * an admin screen renders comes from a .go- class, so the panel keeps lining
 * up with the rest of the site for free — the moment a rule here grows a
 * colour it has started to fight the system. The one exception is .admin-kbd,
 * which the system has no primitive for; it is a candidate to upstream.
 * ========================================================================== */

/* The shell: a fixed rail and a content column that may shrink. minmax(0,1fr)
 * rather than 1fr, or a wide .go-table inside it blows the column out instead
 * of scrolling within .go-table-scroll. */
.admin-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--go-space-6);
  align-items: start;
}

/* 64px of app bar plus the shell's own 24px, so a scrolled rail clears the
 * sticky bar exactly. */
.admin-shell__side {
  position: sticky;
  top: calc(var(--go-space-16) + var(--go-space-6));
  padding-block: var(--go-space-6);
}

.admin-shell__main {
  padding-block: var(--go-space-6);
  min-width: 0;
}

/* A run-log row may grow taller than its dense-table minimum when an error
 * wraps. Collapsed cell borders then split a pixel between the two rows and
 * make the whole panel half a pixel tall. The shop page stacks its facts below
 * that panel at narrower widths, so use separate borders for integer geometry. */
.admin-store-log .go-table { border-collapse: separate; border-spacing: 0; }

/* At tablet and phone widths the facts column follows the runs rather than
 * sitting beside it. The dynamic log table leaves that first column two pixels
 * short of a complete grid unit, so close the unit before the next column. */
@media (max-width: 1120px) {
  .admin-store-runs { padding-bottom: var(--go-border-width); }
}

/* Below 760px there is no room for a column beside the content, so the rail
 * moves into the app bar's menu (.go-appbar__menu) and the shell becomes the
 * single column it already wants to be. The rail is not restyled to get there
 * — it keeps the vertical shape it is designed for, indents and count badges
 * and all — it is only rendered somewhere else.
 *
 * The aside is what goes away, not the rail: the layout renders the menu on
 * every panel screen, including «Cola de decisiones», which composes no shell
 * at all and would otherwise have no navigation on a phone. */
@media (max-width: 760px) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .admin-shell__side { display: none; }
}

/* On a phone «Cola de decisiones» comes first, because everything below the
 * stats is a scroll away and the queue is the only block on the board that
 * asks to be acted on rather than read.
 *
 * It is the PANELS that move, not the callout: pushing the grid down leaves
 * every other child of the stack at its default order, so the heading, the
 * stats and the sync alert stay where they are and the callout — last in the
 * source — lands directly under them. Ordering the callout up instead would
 * have to lift it over the heading too, and would need an explicit order on
 * every sibling to stop it. */
@media (max-width: 760px) {
  .admin-dash__panels { order: 1; }
}

/* The app bar's phone menu used to be .admin-menu, here. It is .go-appbar__menu
 * in the design system now: the public bar grew the same menu the moment its
 * seven pills stopped fitting on a phone, and two bars with the same problem at
 * the same width should not have two rules. Nothing app-level replaces it. */

/* «Cola de decisiones» is one decision at a time, so it reads as a column and
 * not as a page. It has no rule of its own: .go-container--narrow is already
 * the system's 760px measure, and a second copy of that number here would stop
 * tracking it. The queue is
 *   <div class="go-container go-container--narrow go-section"> … </div>
 */

/* The well a run of child items sits in — «Sin juego» and «Excluidos» under
 * «Listados», the three backlogs under «Juegos». Which items those are is
 * Admin::Screen's `parent`; this is only how they look.
 *
 * ONE recessed surface holding the whole run, not a tint per item: `gap: 0`
 * inside it, so the children read as one block rather than as separate things
 * that happen to share a colour. Flat — a sunk background and the system's own
 * radius, no inset shadow, no bevel.
 *
 * It costs the grid nothing, and that is the reason for no vertical padding: a
 * 40px item with no gap between siblings makes the well 40·n tall, and the
 * rail's own 4px gap still separates it from the items above and below. Any
 * padding here would move every item after it off the 4px grid, which the
 * alignment gate measures on the page's absolute offsets.
 *
 * The items keep every height, radius and colour .go-railitem gives them; hover
 * and aria-current still win, because the system's rules are one class deeper
 * than the indent below. A selected child has to look selected first and
 * grouped second. */
.admin-rail__well {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--go-radius-md);
  background: var(--go-color-surface-sunk);
  min-width: 0;
  /* Joined to the item above it: the rail's own 4px gap is pulled back so the
   * well starts where its parent ends, and the corners between the two are
   * squared below. It still costs the grid nothing — 40px items with no gap
   * make the well 40·n tall, and closing a 4px gap moves everything after it by
   * 4px, which is a whole grid unit. */
  margin-top: calc(var(--go-space-1) * -1);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* The two halves of the join. The parent squares its bottom corners, and the
 * first child squares its top ones — both only show when that row is hovered
 * or is the current page, which is exactly when a rounded corner in the middle
 * of the block would be visible. */
.admin-railitem--leads {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.admin-rail__well > .go-railitem:first-child {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.admin-railitem--child { padding-inline-start: var(--go-space-6); }

/* A table row that navigates, and the anchor inside it that is the real link.
 *
 * The row's own affordance is the system's (`.go-table tbody tr:hover td`
 * tints it); all this adds is the pointer, so what looks clickable is what is.
 *
 * The anchor takes no colour and no size of its own — `inherit` and
 * `currentColor` only — so the cell keeps the type the system gives it. What it
 * drops is the underline: fifty underlined titles in a table whose every row is
 * clickable is the same fact stated once per row. It comes back on hover and on
 * keyboard focus, where it is the only signal there is. The clipping is
 * repeated here because the anchor, not the cell, is now the block that
 * overflows. */
tr[data-controller~="row-link"] { cursor: pointer; }

.admin-rowlink {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-rowlink:hover,
.admin-rowlink:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* A keycap. The system has no kbd primitive, and the queue is driven from the
 * keyboard, so this is the one invented thing in the panel. The 1px border
 * with a 2px bottom is the whole illusion; it is inline, so it takes its box
 * from the text around it rather than from the control scale. */
.admin-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border: 1px solid var(--go-color-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--go-color-surface);
  font-family: var(--go-font-mono);
  font-size: var(--go-text-2xs);
  line-height: 1;
  color: var(--go-color-ink);
}

/* «Portada» — the home page's layout screen.
 *
 * Three rules and no colours of their own. .admin-swatch is the second invented
 * thing in the panel, alongside .admin-kbd: the system has no colour-input
 * primitive, and left to the browser the control is ~23px tall, which drags the
 * whole table row off the 4px grid. It is sized from the control scale and
 * borrowed nothing else. */
.admin-layout__num  { width: 72px; }
.admin-layout__span { width: 84px; }

/* Cells that hold one control and must not stretch. width:1% is the shrink-to-
 * fit idiom .go-td-action already uses; the widths above are what stops the
 * 100%-wide .go-input inside from resolving against nothing. */
.admin-layout__cell { width: 1%; white-space: nowrap; }

.admin-swatch {
  width: var(--go-control-h-md);
  height: var(--go-control-h-md);
  flex: none;
  padding: var(--go-border-width);
  border: var(--go-border);
  border-radius: var(--go-radius-sm);
  background: var(--go-color-surface);
  cursor: pointer;
}

/* The browser draws its own inset around the colour; without these the swatch
 * reads as a 4px-smaller square floating inside a border. */
.admin-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.admin-swatch::-webkit-color-swatch { border: 0; border-radius: var(--go-radius-xs); }
.admin-swatch::-moz-color-swatch { border: 0; border-radius: var(--go-radius-xs); }

/* One panel in the layout preview. It is a stand-in for a .go-tile and wears
 * the same tinted offset shadow, which is what makes the accent legible at this
 * size — and it is drawn from --go-cat, so the preview and the page are tinted
 * by one value rather than by two that can disagree.
 *
 * The panel's OTHER colour has nowhere to go on a shadow, so the column count
 * inside carries .go-badge--cat: a badge is exactly what the design system
 * fills with --go-cat and writes in --go-cat-ink, which makes the one filled
 * thing in the preview the one that shows the pair.
 *
 * [hidden] is restated because this rule sets `display`, and a class beats the
 * UA stylesheet: without it, hiding a panel would do nothing here. */
.admin-preview__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--go-space-2);
  height: var(--go-control-h-lg);
  padding-inline: calc(var(--go-space-3) - var(--go-border-width));
  border: var(--go-border);
  border-radius: var(--go-radius-md);
  background: var(--go-color-surface);
  box-shadow: var(--go-border-width) var(--go-border-width) 0 var(--go-cat);
  min-width: 0;
}

.admin-preview__panel[hidden] { display: none; }

.admin-preview__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--go-text-xs);
  line-height: var(--go-leading-xs);
  font-weight: var(--go-weight-semibold);
}

/* The app bar is sticky and 64px, so an in-page anchor lands underneath it:
 * the rail's «Tiendas» item jumps to #tiendas and the heading it was aiming at
 * is the part that ends up hidden. scroll-margin is the property for exactly
 * this and costs no layout. 64 + 16 of air, both from the space scale. */
[id] {
  scroll-margin-top: calc(var(--go-space-16) + var(--go-space-4));
}