/* Marketing admin (/admin): hairline sections and counters in the app's report style */
@layer pages {
  .admin-section {
    margin-bottom: var(--space-12);

    > h2 {
      margin: 0 0 var(--space-4);
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
    }
  }

  /* A form placed under a table needs the same gap as a new section */
  .admin-section--form {
    margin-top: var(--space-12);
  }

  .sidebar__back {
    margin: var(--space-6) 0 0;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);

    a {
      color: var(--color-text-muted);
    }
  }

  .admin-run-status {
    font-weight: var(--font-semibold);
    white-space: nowrap;

    &.admin-run-status--succeeded { color: var(--color-success); }
    &.admin-run-status--failed,
    &.admin-run-status--timed-out { color: var(--color-error); }
    &.admin-run-status--running,
    &.admin-run-status--skipped { color: var(--color-text-muted); }
  }

  /* Calendar and meeting states: the word carries the meaning, colour only repeats success and problems */
  .admin-state {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    white-space: nowrap;
    color: var(--color-text-muted);

    &.admin-state--succeeded,
    &.admin-state--held,
    &.admin-state--done { color: var(--color-success); }
    &.admin-state--failed,
    &.admin-state--timed-out,
    &.admin-state--missed,
    &.admin-state--blocked { color: var(--color-error); }
  }

  .calendar-agenda {
    .calendar-agenda__intro {
      margin-bottom: var(--space-3);
    }

    .calendar-agenda__list {
      margin: 0 0 var(--space-3);
      padding: 0;
      list-style: none;
    }

    .calendar-agenda__item {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }

    .calendar-agenda__body {
      margin: 0;
      padding: var(--space-3) 0;
      white-space: pre-line;
    }

    .calendar-agenda__remove {
      min-height: 44px;
      padding: 0;
    }

    .calendar-agenda__form {
      display: flex;
      gap: var(--space-3);
      max-width: 44rem;

      .form__input {
        flex: 1;
        min-height: 44px;
      }
    }
  }

  .calendar-week {
    .calendar-week__header {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-2) var(--space-6);
      margin-bottom: var(--space-2);

      h2 {
        margin: 0;
        font-size: var(--text-xl);
        font-weight: var(--font-semibold);
      }
    }

    .calendar-week__dates {
      margin-left: var(--space-2);
      font-size: var(--text-base);
      font-weight: var(--font-normal);
      color: var(--color-text-muted);
    }

    .calendar-week__routine-note {
      font-size: var(--text-sm);
    }

    .calendar-week__subheading {
      margin: var(--space-6) 0 0;
      padding-bottom: var(--space-2);
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
    }
  }

  .calendar-nav {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-sm);

    a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      color: var(--color-text);
    }
  }

  /* One grid for tasks and days: lead column, content, state flush right */
  .calendar-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--color-text);
  }

  .calendar-row,
  .calendar-day {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .calendar-row__lead {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
  }

  .calendar-row__main a,
  .calendar-event__title a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .calendar-row__detail {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .calendar-row__state {
    justify-self: end;
    text-align: right;
  }

  .calendar-day {
    .calendar-day__events {
      grid-column: 2 / -1;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .calendar-day__empty {
      grid-column: 2 / -1;
      margin: 0;
      color: var(--color-text-light);
    }

    &.calendar-day--past .calendar-day__date {
      color: var(--color-text-muted);
    }
  }

  .calendar-event {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-1) 0;

    .calendar-event__time {
      font-variant-numeric: tabular-nums;
      color: var(--color-text-muted);
    }

    .calendar-event__department {
      margin-left: var(--space-3);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    &.calendar-event--meeting .calendar-event__title {
      font-weight: var(--font-semibold);
    }
  }

  /* Social: a day of posts, one tab per network */
  .social-day-nav {
    margin-bottom: var(--space-4);
  }

  .social-tab-state {
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
  }

  .social-post {
    .social-post__head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-2) var(--space-4);
      margin-bottom: var(--space-4);

      h2 {
        margin: 0;
        font-size: var(--text-xl);
        font-weight: var(--font-semibold);
      }

      p { margin: 0; }
    }

    .social-post__note {
      max-width: 44rem;
      margin: 0 0 var(--space-6);
      padding: var(--space-3) var(--space-4);
      border-left: 3px solid var(--color-text);
      background: var(--color-surface);
    }

    .social-post__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: var(--space-8);
      align-items: start;
    }

    .social-post__parts,
    .social-post__side {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }

    .social-post__image {
      margin: 0;

      img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--color-border);
      }

      figcaption {
        margin-top: var(--space-2);
      }
    }

    .social-post__status {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      padding-top: var(--space-4);
      border-top: 2px solid var(--color-text);
    }

    .social-post__form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      width: 100%;

      .form__group { width: 100%; margin: 0; }
    }
  }

  .social-copy {
    border-top: 2px solid var(--color-text);

    .social-copy__head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2) var(--space-4);
      padding: var(--space-2) 0;
    }

    .social-copy__label {
      margin: 0;
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
    }

    .social-copy__count {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      font-variant-numeric: tabular-nums;

      &.social-copy__count--over { color: var(--color-error); }
    }

    .social-copy__button {
      margin-left: auto;
      min-height: 44px;
    }

    .social-copy__text {
      padding: var(--space-4);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      font-size: var(--text-base);
      line-height: 1.55;
      background: var(--color-surface);
      border-radius: var(--radius-sm);
    }
  }

  @media (max-width: 900px) {
    .social-post .social-post__grid { grid-template-columns: 1fr; }
  }

  .meeting-decisions {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    border-top: 2px solid var(--color-text);

    li {
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--color-border);
    }
  }

  .meeting-minutes {
    max-width: 44rem;
  }

  @media (max-width: 640px) {
    .calendar-row,
    .calendar-day {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-1) var(--space-3);
    }

    .calendar-row__lead {
      grid-column: 1 / -1;
    }

    .calendar-row__lead:empty {
      display: none;
    }

    .calendar-day .calendar-day__events,
    .calendar-day .calendar-day__empty {
      grid-column: 1 / -1;
    }

    .calendar-event .calendar-event__department {
      display: none;
    }
  }

  .admin-quiet {
    margin: 0;
    color: var(--color-text-muted);
  }

  .admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin: 0;
    border-top: 2px solid var(--color-text);

    .admin-stats__item {
      padding: var(--space-4) var(--space-4) var(--space-4) 0;
      border-bottom: 1px solid var(--color-border);
    }

    dt {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    dd {
      margin: var(--space-1) 0 0;
      font-size: var(--text-3xl);
      font-weight: 750;
      line-height: 1.1;
    }
  }
}