/*
 * M8 · A-01 Admin dashboard, AM-01 (phone) and S-09 first-run checklist.
 *   .dash-tiles / .dash-tile      three compliance tiles (err / warn / surface), 46px numbers
 *   .dash-mtiles / .dash-mtile    AM-01 tiles as tappable rows + "Needs attention by Site" rows
 *   .dash-grid                    Site table (1.5fr) + Recently published (1fr)
 *   .setup-steps / .setup-step    S-09 four-step checklist with done states
 */
@layer pages {
  /* Link with a trailing arrow ("Review overdue →") */
  .dash-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-blue-deep); /* AA on the surface tile (#1d6aa1 is 4.3:1 there) */
  }
  .dash-link .icon { font-size: 15px; }
  .dash-link:hover { text-decoration: underline; }

  /* Tiles ------------------------------------------------------------------------------------- */
  .dash-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .dash-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .dash-tile--err { background: var(--color-err-soft); }
  .dash-tile--warn { background: var(--color-warn-soft); }

  .dash-tile__label {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--color-neutral-700);
  }
  .dash-tile--err .dash-tile__label,
  .dash-tile--err .dash-tile__value { color: var(--color-err-text); }
  .dash-tile--warn .dash-tile__label,
  .dash-tile--warn .dash-tile__value { color: var(--color-warn-text); }

  .dash-tile__value {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .dash-tile__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-neutral-800);
  }

  /* Site table + side column ------------------------------------------------------------------ */
  .dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  /* An Admin without view_compliance: Recently published only. */
  .dash-grid--side-only { grid-template-columns: minmax(0, 1fr); }

  .dash-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .dash-col--side { gap: 24px; }

  .dash-h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .dash-sites { --list-cols: minmax(0, 1.6fr) 100px 150px 160px; gap: 10px; }
  .dash-sites .list-row { min-height: 58px; }
  .dash-sites__name {
    font-size: 14.5px;
    font-weight: 700;
    min-width: 0;
  }

  .dash-none {
    font-size: 14px;
    color: var(--color-neutral-700);
  }

  .dash-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dash-block--tight { gap: 6px; }

  .dash-pub {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .dash-pub__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-hairline);
  }
  .dash-pub__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dash-pub__title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.55;
  }
  .dash-pub__item:hover .dash-pub__title { text-decoration: underline; }
  .dash-pub__meta {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--color-neutral-700);
  }
  .dash-pub__date {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-neutral-700);
  }

  /* AM-01 phone ------------------------------------------------------------------------------- */
  .dash-mtiles {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .dash-mtile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 24px;
    background: var(--color-surface);
    color: var(--color-text);
  }
  .dash-mtile:hover { color: inherit; }
  .dash-mtile--err { background: var(--color-err-soft); color: var(--color-err-text); }
  .dash-mtile--err:hover { color: var(--color-err-text); }
  .dash-mtile--warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
  .dash-mtile--warn:hover { color: var(--color-warn-text); }
  .dash-mtile > .icon { font-size: 18px; }

  .dash-mtile__value {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .dash-mtile__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dash-mtile__label { font-size: 15px; font-weight: 700; line-height: 1.55; }
  .dash-mtile__meta {
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dash-moverline { margin: 0; line-height: 1.55; }

  .dash-mtiles .list-row--compact { min-height: 64px; padding: 10px 16px; }
  .dash-mtiles .list-row--compact .list-row__title { line-height: 1.3; }
  .dash-mtiles .list-row--compact .list-row__main { gap: 3px; }

  /* S-09 first-run checklist ------------------------------------------------------------------- */
  .setup-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .setup-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 24px;
    background: var(--color-surface);
  }

  .setup-step__badge {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-bg);
    font-weight: 700;
  }
  .setup-step__badge--done {
    background: var(--color-accent-2-700);
    color: var(--color-bg);
    font-size: 18px;
  }

  .setup-step__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .setup-step__title { font-size: 16px; font-weight: 700; line-height: 1.55; }
  .setup-step__body { font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-700); }
  .setup-step.is-done .setup-step__title {
    color: var(--color-neutral-700);
    text-decoration: line-through;
  }

  .main:has(.setup-steps) .page-head__title { line-height: 1.08; }

  .setup-step__action.btn--sm { height: 40px; }
  .setup-step .btn--ghost.btn--sm { height: 36px; }

  /* Narrower columns keep room for the Site name; below 1200 the side column moves under the table. */
  @media (max-width: 1365px) {
    .dash-sites { --list-cols: minmax(0, 1.6fr) 80px 130px 130px; }
  }

  @media (max-width: 1199px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    /* The three actions move under the greeting instead of squeezing it. */
    .main:has(.dash-tiles, .dash-grid) .page-head { flex-wrap: wrap; }
  }

  @media (max-width: 1023px) {
    .dash-tiles { grid-template-columns: minmax(0, 1fr); }
    .dash-sites { --list-cols: minmax(0, 1fr) 80px 130px 130px; }
  }

  @media (max-width: 767px) {
    .main:has(.dash-mtiles) { gap: 14px; }
    .main:has(.dash-mtiles) .page-head__title { font-size: 28px; }
    .main:has(.dash-mtiles) .page-head__desc { font-size: 13.5px; }
    .main:has(.dash-mtiles) .page-head__text { gap: 14px; }
    .main:has(.dash-mtiles) .page-head__actions { display: none; }

    .setup-step { flex-wrap: wrap; padding: 16px 18px; gap: 12px 14px; }
    .setup-step__action,
    .setup-step .btn--ghost { margin-left: 54px; }
    .setup-step__action.btn--sm,
    .setup-step .btn--ghost.btn--sm { height: 44px; }
  }
}