/* apps/admin/admin.css — page layout of the admin only. Components keep their own styles (packages/ui).
   Layout mirrors Figma BACKEND → Create ("Create listing - desktop", 1024): padding 24, 12-column grid gap 16, main 8 + side 4 columns, full width,
   sections gap 32 separated by Divider, field rows = 8-column grid, gap 16 (decision 0012).
   Track lines, the action panel and dividers are DS components (ListingLine, ActionPanel, Divider): only page layout here.
   Listings: Figma BACKEND → Listings (2026-11-10). Sign-in has no Figma frame (design/open.md). */

* { box-sizing: border-box; }
/* background on html only: surface-accent is translucent in the backend mode (black-a4), stacking it on body darkens it (0023) */
html { background: var(--surface-accent); min-height: 100%; }
/* Figma BACKEND → Create (Gio, 2026-11-10): the create / edit frame is on surface/base (white); fields keep surface-accent (black-a4) over it, decision 0032 */
html:has(.admin-page) { background: var(--surface-base); }
body { margin: 0; color: var(--text-strong); font-family: var(--font-sans); }
h1, h2, p { margin: 0; }

.admin { padding: 24px; display: flex; flex-direction: column; gap: 24px; max-width: 1024px; }

/* top bar = DS AdminBar (Figma page `admin` → `admin bar`, decision 0089). Mobile menu: a full-screen native modal
   dialog with a MenuLayer, like the shop's .site-menu (apps/storefront/base.css). */
.admin-menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; color: var(--text-strong);
  background: var(--surface-base);   /* surface-accent (the MenuLayer fill) is translucent in the backend mode: base under it = the page look */
}
.admin-menu:not([open]) { display: none; }
.admin-menu::backdrop { background: var(--surface-base); }
.admin-menu:focus { outline: none; }   /* programmatic focus target (decision 0043) */
/* lists on mobile: DS ListingRow in a plain <ul> (Figma Listings - mobile) */
.admin-rows { list-style: none; margin: 0; padding: 0; }
.admin-rows__empty { padding: 16px 0; }

/* Figma BACKEND → Create (2026-11-10): the frame is a 12-column grid, gap 16; main = 8 columns, side = 4 (fill).
   Create / edit is full width (Gio, 2026-11-10); the other admin pages keep max-width 1024. */
.admin:has(.admin-page) { max-width: none; }
.admin-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.admin-main { grid-column: span 8; }
.admin-side { grid-column: span 4; }
.admin-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.admin-side { display: flex; flex-direction: column; gap: 24px; }
/* Create / edit on desktop: the two columns scroll independently, each to its own end (Gio, 2026-11-12). The page is
   exactly the window: top bar, then the grid row fills the rest and each column has its own scroll. The bottom 24px of
   the frame padding moves inside the columns, so content runs to the window edge while scrolling and still ends 24px
   above it. The 4px padding cancelled by the margin keeps focus rings unclipped; position: relative keeps absolutely
   positioned helpers (e.g. visually hidden statuses) inside the scroll, or they would stretch the page. Mobile: one column, the page scrolls. */
.admin-page--attribute > .admin-side { position: sticky; top: 24px; }
.admin:has(.admin-page--edit) { height: 100vh; height: 100dvh; padding-bottom: 0; }
.admin-page--edit { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.admin-page--edit > .admin-main, .admin-page--edit > .admin-side { position: relative; min-height: 0; overflow-y: auto; margin: -4px -4px 0; padding: 4px 4px 24px; }

.admin-section { display: flex; flex-direction: column; gap: 16px; }
.admin-stack { display: flex; flex-direction: column; gap: 24px; }           /* Figma: Frame 1 / list, gap 24 */

.admin-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; align-items: start; }
.admin-row--tight { row-gap: 8px; }                                           /* Figma `label row`: gap-y 8 */
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .col-8 { grid-column: 8; }
.span-4.row-start { grid-column: 1 / span 4; }                                       /* a new grid row (Figma: checkbox rows under Label) */

.admin-status { min-height: 16px; }
.admin-status--error { color: var(--text-alert); }

/* sign-in (no Figma frame yet) and listings (Figma BACKEND → Listings) */
.admin-signin { max-width: 315px; display: flex; flex-direction: column; gap: 16px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--border-divider-strong); vertical-align: middle; }
.admin-table th:last-child, .admin-table td:last-child { padding-right: 0; }
.admin-table th { font-weight: 400; color: var(--text-moderate); }
.admin-table td.num, .admin-table th.num { font-variant-numeric: tabular-nums; }
.admin-table a { color: inherit; }
/* Figma BACKEND → Listings (2026-11-10): first column = row selection (checkbox label=false), price right-aligned */
.admin-table .select { width: 24px; }
.admin-table .select .zz-checkbox { display: flex; }
.admin-table .price { text-align: right; }
.admin-listings { gap: 24px; }
/* bulk bar: always rendered, fixed height (38 button + 2×8), so selecting never moves the table */
.admin-bulk { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 16px; background: var(--surface-subtle); }
.admin-bulk__count { flex: 1 1 auto; }
.admin-bulk__actions, .admin-bulk__message { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-bulk__message[hidden] { display: none; }

@media (max-width: 959px) {
  /* Figma page `admin` (decision 0089): the AdminBar bleeds to the screen edges, the page content keeps 16 */
  .admin { padding: 0 16px 16px; }
  .admin > .zz-admin-bar { margin: 0 -16px; }
  /* status tabs: one row that scrolls sideways (the last tab is cut at the edge, so it reads as more) */
  .admin .zz-tabs { overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .admin .zz-tabs > * { flex: none; }
  .admin-page { grid-template-columns: minmax(0, 1fr); }
  .admin-main, .admin-side { grid-column: auto; }
  /* the side (SKU, status, preview) follows the form; the actions are in the ActionBar at the bottom */
  .admin-page > .zz-action-bar { grid-column: 1 / -1; margin: 0 -16px -16px; }
  html:has(.zz-action-bar) { scroll-padding-bottom: 88px; }   /* the bar (16 + 38 + 16 + 1) + a gap: a focused field is never under it */
  /* bulk bar: after the rows; while something is selected it stays at the bottom of the viewport (Figma `bulk bar`) */
  .admin-bulk { min-height: 0; padding: 0; background: none; }
  .admin-bulk:not(:has(.admin-bulk__actions)) .admin-bulk__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .admin-bulk:has(.admin-bulk__actions) {
    position: sticky; bottom: 0; z-index: 2; margin: 0 -16px -16px;
    flex-direction: column; align-items: stretch; gap: 8px; padding: 16px;
    background: var(--surface-base); border-top: 1px solid var(--border-divider-strong);
  }
  .admin-bulk__actions { justify-content: flex-start; }
  .admin-page--attribute > .admin-side { position: static; }
  .admin:has(.admin-page--edit) { height: auto; padding-bottom: 16px; }
  .admin-page--edit { grid-template-rows: none; }
  .admin-page--edit > .admin-main, .admin-page--edit > .admin-side { overflow: visible; margin: 0; padding: 0; }
  .admin-row { grid-template-columns: minmax(0, 1fr); }
  .admin-row > *, .admin-row > .row-start { grid-column: 1 / -1; }   /* .row-start (1 / span 4) would add implicit columns to the 1-column grid and squeeze Label next to Country */
}
/* Figma `uploaded list` in Samples overview (2095:19476): rows with a title field, gap 16 */
.admin-samples { gap: 16px; }

/* Figma BACKEND → Create › side › preview (decision 0030): the PDP - mobile `pdp content`, in the shop theme
   (data-theme="frontend" = the frame's explicit Figma mode). Same values as apps/storefront/pdp.css (mobile):
   padding-x page-margin/mobile, padding-top small, padding-bottom 24 (literal, see open.md), row gap small,
   the gallery bleeds into the margins and the frame clips it (second image peeks). */
.admin-preview__shop {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--small);
  padding: var(--small) var(--page-margin-mobile) 24px;
  background: var(--surface-accent); color: var(--text-strong);
  overflow: hidden;
}
.admin-preview__shop .zz-gallery { --zz-gallery-bleed: var(--page-margin-mobile); }

/* Figma BACKEND → Attributes (2123:2053, decision 0034): list = Listings grammar + a toolbar (search fill, button hug,
   gap 16); entity page = the Create layout (main 8 + side 4) but in a 1024 frame on surface-accent, like Listings. */
.admin-toolbar { display: flex; gap: 16px; align-items: flex-start; }
.admin-toolbar__search { flex: 1 1 auto; min-width: 0; }
.admin:has(.admin-page--attribute) { max-width: 1024px; }
html:has(.admin-page--attribute) { background: var(--surface-accent); }
.admin-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }   /* Figma `record list`, gap 8 */
.admin-links a { color: inherit; }

/* Figma BACKEND → Shipping (2201:4782, decision 0057): frame on surface/base (Gio 2026-11-12, like Create, 0032);
   fields keep surface-accent over it. Sections of heading · help · table · Add, gap 16; column widths from the frame. */
html:has(.admin-shipping) { background: var(--surface-base); }
.admin-shipping { display: flex; flex-direction: column; gap: 24px; }
.admin-shipping h1, .admin-shipping h2, .admin-shipping p { margin: 0; }
.admin-shipping .admin-toolbar { align-items: center; }
.admin-shipping__intro { flex: 1 1 auto; }
.admin-shipping__section { display: flex; flex-direction: column; gap: 16px; }
.admin-shipping__problems { margin: 0; padding-left: 20px; }
.admin-shipping__table { table-layout: fixed; }
.admin-shipping__table .zz-input { width: 100%; min-width: 0; }
.admin-shipping__w-name { width: 240px; }
.admin-shipping__w-select { width: 180px; }
.admin-shipping__w-weight { width: 200px; }
.admin-shipping__w-short { width: 120px; }
.admin-shipping__w-count { width: 72px; }
.admin-shipping__actions { width: 88px; white-space: nowrap; text-align: right; }
.admin-shipping__minimum { display: flex; align-items: center; }   /* Figma `minimum order` row: label column 280, field 200 */
.admin-shipping__minimum > label { width: 280px; }
.admin-shipping__minimum > .zz-input { width: 200px; }
.admin-shipping__check { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.admin-shipping__check > :first-child { width: 240px; }
.admin-shipping__check > :last-child { width: 400px; max-width: 100%; }
.admin-shipping p.admin-shipping__result { margin-top: 16px; white-space: pre-line; }
#shipping-zones td { vertical-align: top; }   /* Figma zones rows: top left (Gio 2026-11-12), the countries cell grows with its names */

/* Figma BACKEND → Memo (2296:9962, decision 0087): Gio's list of records to sell later, mobile first. Frame on
   surface-accent like Listings; stack gap 24; add form 480 wide on desktop (fill on mobile), fields gap 16;
   list = MemoItem rows (packages/ui). Record = the offer form's release picker: the suggestions overlay what follows. */
.admin-memo { display: flex; flex-direction: column; gap: 24px; }
.admin-memo__add { display: flex; flex-direction: column; gap: 16px; width: 480px; max-width: 100%; }
.admin-memo__add .admin-status:empty { display: none; }
.admin-memo__submit { width: 100%; }
.admin-memo__photo { display: flex; flex-direction: column; gap: 8px; }
.admin-memo__photo-button { width: 100%; }
.admin-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-memo__photo-status { margin: 0; color: var(--text-moderate); }
.admin-memo__photo-status:empty { display: none; }
.admin-memo__list { display: flex; flex-direction: column; gap: 24px; }
.admin-memo__count { color: var(--text-moderate); }
.admin-memo__items { list-style: none; margin: 0; padding: 0; }
.admin-picker { position: relative; display: flex; flex-direction: column; gap: 4px; }
.admin-picker > p { margin: 0; }
.admin-picker__list { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: 360px; overflow-y: auto; }
@media (max-width: 959px) { .admin-memo__add { width: auto; } }

/* Shipping on mobile (decision 0089): the tables stack, one row = a block of fields, each with its column name
   above it (data-label, set in admin.js); the fixed desktop column widths are dropped. */
@media (max-width: 959px) {
  .admin-shipping .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-shipping__table, .admin-shipping__table tbody, .admin-shipping__table tr, .admin-shipping__table td { display: block; width: auto; }
  .admin-shipping__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .admin-shipping__table tr { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border-divider-strong); }
  .admin-shipping__table td { padding: 0; border: 0; text-align: left; }
  .admin-shipping__table td:empty { display: none; }
  .admin-shipping__table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--text-moderate); }
  .admin-shipping__minimum { flex-direction: column; align-items: stretch; gap: 4px; }
  .admin-shipping__minimum > label, .admin-shipping__minimum > .zz-input, .admin-shipping__check > :first-child { width: auto; }
}