/*
 * C2 Admin Forms: A-24 list (scope pills, Subcategory / Site filters, search, the seven-column
 * rows) and A-25 Upload / edit form (it shares the two-column layout of A-07: .doc-form__layout,
 * .doc-form__sections, .doc-form__side in admin-document-form.css). Classes are prefixed fcms-
 * (forms CMS) because every page stylesheet loads everywhere.
 */
@layer pages {
  /* A-24 list ------------------------------------------------------------------------------------ */
  .fcms-toolbar__gap { flex: 1; }

  .fcms-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .fcms-list { --list-cols: minmax(0, 1.8fr) 170px 170px 90px 120px 110px 40px; }

  .fcms-row__form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .fcms-row__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--petal-form-bg);
    color: var(--petal-form-fg);
    font-size: 17px;
  }
  .fcms-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .fcms-row__link {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
  }
  .fcms-row__link:hover { color: var(--color-text); text-decoration: underline; }
  /* The title link covers the whole row; the menu sits above it. */
  .fcms-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .fcms-row__link:focus-visible { outline: none; }
  .fcms-row__link:focus-visible::after { box-shadow: var(--ring); }
  .fcms-row:has(.fcms-row__link:hover) { box-shadow: 0 0 0 2px var(--color-divider); }
  .fcms-row.list-row--archived .fcms-row__link { color: inherit; }
  .fcms-row.list-row--archived .fcms-row__icon { background: var(--color-neutral-200); color: var(--color-neutral-800); }

  .fcms-row__subcategory { min-width: 0; overflow-wrap: anywhere; }
  .fcms-row__scope {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .fcms-row__scope .icon { flex: none; font-size: 15px; }
  .fcms-row__scope span { min-width: 0; overflow-wrap: anywhere; }
  .fcms-row__type { font: 700 11.5px var(--font-mono); }
  .fcms-row__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  /* "…": 34px at the start of the 40px column, the icon at the row's 13.5px. */
  .fcms-row__menu {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
  }
  .fcms-row__more {
    width: 34px;
    height: 34px;
    background: transparent;
    font-size: 13.5px;
  }
  .fcms-row__more:hover { background: var(--color-bg); }
  .fcms-row__more[aria-expanded="true"] { background: var(--color-text); color: var(--color-bg); }
  .fcms-row:has(.menu__panel:not([hidden])) { z-index: 2; }

  /* A-25 form ------------------------------------------------------------------------------------- */
  .fcms-head .page-head__title { font-size: 38px; }
  .fcms-head__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .fcms-form__lock { color: var(--color-neutral-700); font-size: 15px; }
  .fcms-form__manage {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 0;
    color: var(--color-blue-deep);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .fcms-form__manage .icon { font-size: 16px; }
  .fcms-form__manage:hover { text-decoration: underline; }

  .fcms-file { gap: 16px; }
  .fcms-file__block {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .fcms-file__block[hidden] { display: none; }
  .fcms-file__label {
    color: var(--color-neutral-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .fcms-file .file-card--inset { padding: 12px 14px; border-radius: 20px; }
  .fcms-file .fcms-file__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--petal-form-bg);
    color: var(--petal-form-fg);
    font-size: 20px;
  }
  .fcms-file .file-card__name { font-size: 14px; }
  .fcms-file .file-card__actions { align-items: center; }

  /* Visible to: "Global  All 6 Sites" on one line; the card's parts sit 16px apart. The boxes are
     outlined with an inset shadow (no border), the chosen one with the blue ring; its radio is a
     20px ring with a 6px blue border. */
  .fcms-scope { gap: 16px; }
  .fcms-choices .choice {
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 0;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
  }
  .fcms-choices .choice:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-text) 30%, transparent); }
  .fcms-choices .choice:has(input:checked) { box-shadow: 0 0 0 2px var(--color-blue); }
  .fcms-choices .choice__dot { margin-top: 0; }
  .fcms-choices .choice:has(input:checked) .choice__dot {
    border: 6px solid var(--color-blue);
    background: transparent;
    box-shadow: none;
  }
  .fcms-choices .choice__text {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
  }
  .fcms-choices .choice__title,
  .fcms-choices .choice__hint { font-size: 15px; }

  /* Employees (docs/PHASE2.md §16): the three choices stacked, then the job role and people pickers. */
  .fcms-employees { gap: 16px; }
  .fcms-employees__note { margin: -6px 0 0; }
  .fcms-employees__choices { flex-direction: column; }
  .fcms-employees__pick { display: grid; gap: 16px; }

  /* Ready to publish */
  .fcms-checks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fcms-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-neutral-700);
    font-size: 14px;
  }
  .fcms-check.is-done { color: var(--color-text); }
  .fcms-check__mark {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-neutral-500);
    border-radius: 50%;
    color: transparent;
    font-size: 14px;
  }
  .fcms-check.is-done .fcms-check__mark {
    border-color: transparent;
    background: var(--color-accent-2-600);
    color: #fff;
  }
  .fcms-ready__actions {
    display: flex;
    gap: 10px;
  }
  .fcms-ready__publish { flex: 1; }

  .fcms-sheet > .btn--primary { flex: 1; }

  /* Laptop / tablet / phone ------------------------------------------------------------------------ */
  /* The seven columns take 824px before the title. Narrower, Updated goes first, then Type, then
     the Subcategory column (the name moves under the title). */
  .fcms-row__meta { display: none; }

  @media (max-width: 1439px) {
    .fcms-list { --list-cols: minmax(0, 1.8fr) 170px 170px 90px 110px 40px; }
    .fcms-list :is(.list-header, .fcms-row) > :nth-child(5) { display: none; }
  }

  @media (max-width: 1199px) {
    .fcms-list { --list-cols: minmax(0, 1.8fr) 140px 150px 110px 40px; }
    .fcms-list :is(.list-header, .fcms-row) > :nth-child(4) { display: none; }
  }

  @media (max-width: 1023px) {
    .fcms-list { --list-cols: minmax(0, 1fr) 150px 110px 40px; }
    .fcms-list :is(.list-header, .fcms-row) > :nth-child(2) { display: none; }
    .fcms-row__meta { display: block !important; }
  }

  @media (max-width: 767px) {
    .fcms-toolbar__gap { display: none; }

    /* Rows: icon + title + menu, then scope and status. */
    .fcms-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
    }
    .fcms-row > :is(.fcms-row__subcategory, .fcms-row__type, .fcms-row__updated) { display: none; }
    .fcms-row > * { order: 2; }
    .fcms-row > .fcms-row__form { order: 0; flex: 1 1 calc(100% - 58px); }
    .fcms-row > .fcms-row__menu { order: 1; margin-left: auto; flex: none; }
    .fcms-row__status { flex-direction: row; align-items: center; }
    .fcms-row__more { width: 44px; height: 44px; }

    .fcms-head .page-head__title { font-size: 30px; }
    .fcms-form__manage { min-height: 44px; }
    .fcms-ready__actions { display: none; }
    .fcms-file .file-card__actions { flex-basis: 100%; }
  }

  /* The Form page (A-08's layout): Archive sits under the details, at the start of the column. */
  .fcms-page__archive { align-self: flex-start; color: var(--color-err-text); }
}