/* ============================================================
   Screen Definition Editor (admin) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary/.btn--outline from
   elements.css.

   ADMIN page: system admins / prosecutors author screen definitions under
   the default light .app-screen palette. This stylesheet only references
   --t-* semantic tokens, which app/theme.css rebinds per theme, so the
   page reskins without any role-specific color rules here. The controller
   toggles / queries the state classes restyled below (is-selected on the
   active definition row, asd-status-badge--active/--draft on the row /
   editor status pill). The create / clone dialogs carry the .app-screen
   root class so the same --t-* tokens resolve when appended to the modal
   root.

   LIVE PREVIEW: the ScreenEngine / LayoutRegistry preview output renders
   INSIDE #asd-preview-container with its own engine-owned classes. This
   stylesheet only frames it via the .asd-preview panel — it never selects
   or restyles the engine's markup. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page shell: intro, then a two-pane list / editor layout. */
  .admin-screens { display: grid; gap: var(--mea-space-5); align-content: start; }

  /* Page intro: heading block on the left, actions on the right. */
  .admin-screens__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                          justify-content: space-between; gap: var(--mea-space-3); }
  .admin-screens__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .admin-screens__title, .admin-screens__subtitle { margin: 0; min-inline-size: 0; }
  .admin-screens__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); flex-shrink: 0; }

  /* Two-pane layout: definition list, then editor / preview column. It
     collapses to a single column on narrow containers. */
  .admin-screens__layout { display: grid; gap: var(--mea-space-5); align-items: start;
                           grid-template-columns: minmax(16rem, 22rem) 1fr; }
  .admin-penal-codes .admin-screens__layout { grid-template-columns: minmax(0, 1fr); }
  @container (max-width: 52rem) {
    .admin-screens__layout { grid-template-columns: 1fr; }
  }

  /* Definition list panel. */
  .asd-list { display: grid; align-content: start; min-inline-size: 0;
              border-radius: var(--mea-radius-xl); overflow: hidden; }
  .asd-list__header { display: flex; align-items: center; gap: var(--mea-space-3);
                      padding: var(--mea-space-4) var(--mea-space-5); }
  .asd-list__title { margin: 0; min-inline-size: 0; }
  .asd-list__body { display: grid; }
  .asd-list__scroll { overflow-x: auto; }

  .asd-def-table { inline-size: 100%; border-collapse: collapse; }
  .asd-def-table--reference { min-inline-size: 36rem; }
  .asd-def-table--types { min-inline-size: 56rem; }
  .asd-def-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-5);
                       white-space: nowrap; }
  .asd-def-cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; }
  .asd-def-row { cursor: pointer; }

  /* Status pill shared by list rows and the editor header. */
  .asd-status-badge { display: inline-flex; align-items: center;
                      padding: var(--mea-space-1) var(--mea-space-3);
                      border-radius: var(--mea-radius-pill); white-space: nowrap; }

  /* Editor / preview column. */
  .asd-editor-col { display: grid; gap: var(--mea-space-5); align-content: start; min-inline-size: 0; }
  .asd-preview-root:empty { display: none; }

  /* Empty / select-a-definition prompt. */
  .asd-empty { display: grid; place-items: center; min-block-size: 12rem;
               padding: var(--mea-space-6); border-radius: var(--mea-radius-xl); }
  .asd-empty__text { margin: 0; text-align: center; }

  /* Editor panel. */
  .asd-editor { display: grid; align-content: start;
                border-radius: var(--mea-radius-xl); overflow: hidden; }
  .asd-editor__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3);
                        padding: var(--mea-space-4) var(--mea-space-5); }
  .asd-editor__title { margin: 0; min-inline-size: 0; }
  .asd-editor__body { display: grid; gap: var(--mea-space-4); align-content: start;
                      padding: var(--mea-space-5); }
  .asd-editor__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2);
                         margin-block-start: var(--mea-space-1); }

  /* Inline status messages (editor + dialogs). */
  .asd-msg:empty { display: none; }

  /* Form fields shared by the editor + dialogs. */
  .asd-field { display: grid; gap: var(--mea-space-2); min-inline-size: 0; }
  .asd-field__label { margin: 0; }
  .asd-field__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                      padding: var(--mea-space-2) var(--mea-space-3);
                      border-radius: var(--mea-radius-md); font: inherit; }
  .asd-field__input--code { min-height: auto; resize: vertical;
                            font-family: var(--mea-font-mono); }

  /* The role <select> on the group-mapping cards. Carries no width of its own, so
     without this it grows to its widest option (the long role slugs) and pushes
     the card past a narrow viewport. Full-width and shrinkable, like the fields. */
  .asd-editor__input { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%;
                       min-height: var(--t-target-min, 44px);
                       padding: var(--mea-space-2) var(--mea-space-3);
                       border-radius: var(--mea-radius-md); font: inherit; }
  .asd-field__error { margin: 0; }
  .asd-field__error:empty { display: none; }

  /* Live-preview panel framing the ScreenEngine output. */
  .asd-preview { display: grid; align-content: start;
                 border-radius: var(--mea-radius-xl); overflow: hidden; }
  .asd-preview__header { display: flex; flex-wrap: wrap; align-items: center;
                         justify-content: space-between; gap: var(--mea-space-3);
                         padding: var(--mea-space-4) var(--mea-space-5); }
  .asd-preview__title { margin: 0; min-inline-size: 0; }
  .asd-preview__close { min-height: auto; flex-shrink: 0; white-space: nowrap;
                        padding: var(--mea-space-1) var(--mea-space-3); }
  .asd-preview__body { padding: var(--mea-space-5); }
  .asd-preview-container { min-inline-size: 0; }

  /* Create / clone dialogs. */
  .asd-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                       padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .asd-modal { inline-size: 100%; max-inline-size: 32rem; max-block-size: 90vh;
               display: grid; grid-template-rows: auto 1fr;
               border-radius: var(--mea-radius-2xl); overflow: hidden; }
  .asd-modal__header { display: flex; align-items: center; justify-content: space-between;
                       gap: var(--mea-space-3); padding: var(--mea-space-4) var(--mea-space-5); }
  .asd-modal__title { margin: 0; min-inline-size: 0; }
  .asd-modal__close { min-height: auto; flex-shrink: 0; white-space: nowrap;
                      padding: var(--mea-space-1) var(--mea-space-3); }
  .asd-modal__body { display: grid; gap: var(--mea-space-4); align-content: start;
                     padding: var(--mea-space-5); overflow-y: auto; }

  /* Page-background blocks that the templates place directly on the desk and
     that carry no surface of their own. The class is "bare content block sitting
     directly on the desk", enumerated here by every shape it takes rather than by
     page: the top-level group cards on the role-mappings / grants / capabilities
     pages (config-card/asp-card only lay out a grid — they paint nothing), the
     bulk-upload panels, the bare settings forms (citation-phone,
     officer-notifications), and the penal-codes remedy-types reference section.
     Frame them like .asd-editor so their content sits on a card instead of
     floating on the dark desk with dark, unreadable text. The strict > chain
     matches only the top-level blocks; nested config-cards (e.g. the door
     checkboxes inside a portals asd-list, or a mapped-role row inside a group
     card) and the form bodies already inside an .asd-editor card are left alone. */
  .admin-screens > .config-grid > .config-card,
  .admin-screens > form,
  .admin-screens > .asd-reference,
  .admin-screens .asd-upload {
    display: grid; gap: var(--mea-space-3); align-content: start; min-inline-size: 0;
    padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  /* Collapse the mapped-role sub-grid to a single shrinkable column inside the
     now-padded card, so its 15rem auto-fit minimum can no longer overflow a
     narrow viewport. */
  .admin-screens > .config-grid > .config-card .config-grid { grid-template-columns: minmax(0, 1fr); }
}

@layer design {
  /* .admin-screens__title is used for BOTH the page intro heading (which sits on
     the bare desk background) and section headings inside white cards (e.g. the
     "add group" panel on the role-mappings page). Its default is the card text
     (--t-text, dark) so the in-card headings read on white; only the intro
     heading is repainted below. */
  .admin-screens__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                          font-weight: var(--mea-w-bold); color: var(--t-text); }

  /* The page intro sits directly on the desk page background (--t-bg, the dark
     gradient), NOT on a card. --t-text there would be dark-on-dark. The obvious
     swap to --t-bg-text does not help: the .app-screen skin rebinds --t-bg-text*
     to its own light-surface grays (it assumes a light page it never actually
     paints), so on the desk those resolve dark too. --t-text-inverse is the
     desk's on-dark text (white) and the skin leaves it alone, so the intro reads
     like every .dashboard__intro. The subtitle is muted by opacity, not a second
     color token, to keep the title/subtitle hierarchy without a hardcoded shade. */
  .admin-screens__heading .admin-screens__title { color: var(--t-text-inverse); }
  .admin-screens__subtitle { font-size: var(--mea-text-md); color: var(--t-text-inverse); opacity: .72; }

  /* A .asd-note carries no color of its own, so it inherits the .app-screen text
     color (--t-bg-text, the skin's dark card-text). That reads correctly for the
     notes nested inside white cards, but a note placed as a direct child of the
     screen sits on the dark desk background and goes dark-on-dark. Give only the
     page-level notes (direct children) the desk's on-dark text; the child
     combinator leaves every in-card note on its dark-on-white default. */
  .admin-screens > .asd-note { color: var(--t-text-inverse); opacity: .72; }

  /* Definition list panel + table. */
  .asd-list { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
              box-shadow: var(--mea-shadow-sm); }
  .asd-list__header { border-block-end: 1px solid var(--t-border); }
  .asd-list__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                     font-weight: var(--mea-w-bold); color: var(--t-text); }
  .asd-def-table__th { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                       text-transform: uppercase; letter-spacing: var(--mea-ls-wide);
                       color: var(--t-text-muted); border-block-end: 1px solid var(--t-border); }
  .asd-def-cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                  border-block-end: 1px solid var(--t-border); }
  .asd-def-table__body .asd-def-row:last-child .asd-def-cell { border-block-end: 0; }
  .asd-def-cell--key { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .asd-def-row:hover .asd-def-cell { background: var(--t-bg-recessed); }
  .asd-def-row.is-selected .asd-def-cell { background: var(--t-accent-light, var(--t-bg-active)); }

  /* Status pill — modifiers (set by the controller) recolour it only. */
  .asd-status-badge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                      background: var(--t-bg-recessed); color: var(--t-text-secondary); }
  .asd-status-badge--active { background: var(--t-success-bg); color: var(--t-success-text); }
  .asd-status-badge--draft { background: var(--t-warning-bg); color: var(--t-warning-text); }

  /* Empty / select prompt. */
  .asd-empty { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
               box-shadow: var(--mea-shadow-sm); }
  .asd-empty__text { font-size: var(--mea-text-md); color: var(--t-text-muted); }

  /* Editor panel. */
  .asd-editor { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                box-shadow: var(--mea-shadow-sm); }

  /* Surface for the bare page-background blocks framed in @layer layout (top-level
     group cards, bulk-upload panels, bare settings forms, the remedy-types
     reference section), matching .asd-editor. */
  .admin-screens > .config-grid > .config-card,
  .admin-screens > form,
  .admin-screens > .asd-reference,
  .admin-screens .asd-upload { background: var(--t-card-bg);
                border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm); }
  .asd-editor__header { border-block-end: 1px solid var(--t-border); }
  .asd-editor__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                       font-weight: var(--mea-w-bold); color: var(--t-text); }

  /* Inline status messages. */
  .asd-msg-error { margin: 0; font-size: var(--mea-text-sm); color: var(--t-error-text); }
  .asd-msg-ok { margin: 0; font-size: var(--mea-text-sm); color: var(--t-success-text); }

  /* Form fields. */
  .asd-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .asd-field__input { background: var(--t-bg-elevated); color: var(--t-text);
                      border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .asd-field__input:focus { outline: none; border-color: var(--t-border-focus); }
  .asd-field__input::placeholder { color: var(--t-text-muted); }
  .asd-field__input:disabled { background: var(--t-bg-recessed); color: var(--t-text-muted); }
  .asd-field__input--code { font-size: var(--mea-text-sm); }
  .asd-editor__input { background: var(--t-bg-elevated); color: var(--t-text);
                       border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .asd-editor__input:focus { outline: none; border-color: var(--t-border-focus); }
  .asd-field__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }

  /* Live-preview panel framing. */
  .asd-preview { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                 box-shadow: var(--mea-shadow-sm); }
  .asd-preview__header { border-block-end: 1px solid var(--t-border); }
  .asd-preview__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                        font-weight: var(--mea-w-bold); color: var(--t-text); }
  .asd-preview__body--error { font-size: var(--mea-text-sm); color: var(--t-error-text); }
  .asd-preview__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }
  .asd-preview__note { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* Dialogs. */
  .asd-modal-overlay { background: var(--t-bg-overlay, var(--t-bg-active)); }
  .asd-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
               box-shadow: var(--mea-shadow-lg); }
  .asd-modal__header { border-block-end: 1px solid var(--t-border); }
  .asd-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                      font-weight: var(--mea-w-bold); color: var(--t-text); }
}