/*
 * A-30 / D-25 training page (shared by the Admin console and the Director's Site training): the
 * tabs Progress · Certificates N · Content, the Progress list, and the Certificates tab — pills
 * and filters, one row per person, and the side panel with the uploaded file, the signature and
 * "Download all certificates (.zip)". The Content tab's sections are in admin-training-editor.css.
 */
@layer pages {
  .tcms-head__more { align-self: center; }

  /* Tabs -------------------------------------------------------------------------------------- */
  .tcms-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--color-divider);
  }
  .tcms-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 3px; /* label and count read as one text: "Certificates 3" */
    margin-bottom: -1.5px;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .tcms-tabs__tab:hover { color: var(--color-text); }
  .tcms-tabs__tab.is-active {
    border-bottom-color: var(--color-blue);
    color: var(--color-text);
    font-weight: 700;
  }

  /* A link that covers its whole row (the row's other cells stay readable text). */
  .tcms-row-link { text-decoration: none; }
  .tcms-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-row);
  }
  .list-row:has(> * .tcms-row-link:hover) { box-shadow: 0 0 0 2px var(--color-divider); }
  .list-row.is-selected:has(> * .tcms-row-link:hover) { box-shadow: 0 0 0 2px var(--color-blue); }

  /* Person rows (Progress and Certificates) ----------------------------------------------------- */
  .tcms-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .tcms-person__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .tcms-person__name,
  .tcms-person__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tcms-person__name { color: var(--color-text); font-weight: 700; }
  a.tcms-person__name:hover { color: var(--color-text); }
  .tcms-person__meta { color: var(--color-neutral-700); font-size: 12.5px; }
  .tcms-person__site { display: none; } /* shown where the Site column is dropped */
  .tcms-person .avatar { width: 34px; height: 34px; font-size: 12.5px; }

  /* The job role tag (components/job-tag.css) shortens inside its column. */
  .tcms-person-row__role { align-items: center; }

  .tcms-person-row__site,
  .tcms-person-row__due,
  .tcms-person-row__done {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Progress ---------------------------------------------------------------------------------- */
  .tcms-progress-bar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .tcms-progress-bar__report { margin-left: auto; }

  .tcms-progress { --list-cols: minmax(0, 1.6fr) 160px 120px 130px 190px; }
  .tcms-progress--site { --list-cols: minmax(0, 1.6fr) 160px 130px 120px 130px 190px; }
  /* D-25: an open row's menu (Change due date, Cancel assignment; review fix 13) in a last column. */
  .tcms-progress--actions { --list-cols: minmax(0, 1.6fr) 160px 140px 130px 190px 40px; }
  .tcms-person-row__end { position: relative; z-index: 1; }
  .tcms-person-row__end:has(.menu__panel:not([hidden])) { z-index: 5; }

  /* The status, and "v1" for someone on another version than the active one (review fix 10). */
  .tcms-person-row__status {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
  }
  .tcms-version-tag {
    padding: 2px 8px;
    font-size: 11.5px;
  }

  /* Certificates ------------------------------------------------------------------------------ */
  .tcms-certs-bar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 0 auto;
  }

  .tcms-certs-frame { display: block; }
  .tcms-certs-frame[aria-busy="true"] .tcms-cert-panel { opacity: 0.6; transition: opacity 120ms ease; }

  .tcms-certs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }
  .tcms-certs__main { min-width: 0; }

  /* Person · Job role · (Site) · Status · Certificate · Uploaded, beside the 380px panel: 656px
     for the row at 1440. The fixed columns are as wide as their widest content ("Assistant
     Teacher", "In progress"); the person gets the most of the rest, the certificate at least the
     width of "Not uploaded" (a long file name shortens). The last header, "Uploaded", is wider
     than its dates and runs into the row's 20px padding. */
  .tcms-certs-list { --list-cols: minmax(0, 1.4fr) 140px 104px minmax(0, 1.3fr) 60px; }
  .tcms-certs-list--site { --list-cols: minmax(0, 1.8fr) 120px 78px 86px minmax(84px, 1fr) 56px; }

  .tcms-cert-cell { display: flex; min-width: 0; }
  .tcms-cert-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--color-blue-deep); /* AA on the surface rows */
    font-weight: 700;
  }
  .tcms-cert-link:hover { color: var(--color-blue-deep); text-decoration: underline; }
  .tcms-cert-link .icon { flex: none; font-size: 15px; }
  .tcms-cert-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Side panel */
  .tcms-cert-panel { min-width: 0; }
  .tcms-cert-panel__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .tcms-cert-panel__kv { margin-top: -6px; }

  .tcms-cert {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-row);
    background: var(--color-bg);
  }
  .tcms-cert .tcms-file { background: var(--color-surface); }
  .tcms-cert .tcms-file__icon { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
  .tcms-cert .tcms-file__actions .btn { padding: 0 14px; }

  .tcms-cert__image,
  .tcms-cert__pdf.pdf-preview__well {
    display: block;
    height: auto;
    aspect-ratio: 1.3;
    overflow: hidden;
    border-radius: 14px;
    background: #fffdf8;
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
  }
  /* The shared PDF well covers its frame with this until the viewer has painted the page (the
     pdf-preview controller), so the viewer's dark background never shows; here it is the paper tone. */
  .tcms-cert__pdf.pdf-preview__well { --pdf-preview-stripes: #fffdf8; }
  /* The frame paints over the well's inset ring: draw the ring above the frame. */
  .tcms-cert__pdf.pdf-preview__well::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
    pointer-events: none;
  }
  .tcms-cert__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .tcms-signature {
    height: 80px;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 6px 16px;
    border-radius: var(--radius-row);
    background: var(--color-neutral-100);
  }
  .tcms-signature__image {
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
  }

  /* 1200–1439: beside the panel the Certificates row has 416–655px. The job role tag column goes
     (the role already shows under the name) and, in the console, the Site moves under the name
     too; at 1200 the person keeps 148px (a 15-letter name) and the certificate 84px. The console's
     Progress list drops the tag column as well: six columns need 1060px. */
  @media (min-width: 1200px) and (max-width: 1439px) {
    .tcms-certs-list,
    .tcms-certs-list--site { --list-cols: minmax(148px, 2fr) 86px minmax(84px, 1fr) 56px; }
    .tcms-certs-list > :is(.list-header, .list-row) > :nth-child(2),
    .tcms-certs-list--site > :is(.list-header, .list-row) > :nth-child(3) { display: none; }
    .tcms-certs-list .tcms-person__site { display: inline; }

    .tcms-progress--site { --list-cols: minmax(0, 1.6fr) 110px 110px 110px 164px; }
    .tcms-progress--site > :is(.list-header, .list-row) > :nth-child(2) { display: none; }
  }

  /* Laptop and tablet: the panel moves above the list, which gets the full width. */
  @media (max-width: 1199px) {
    .tcms-certs { grid-template-columns: minmax(0, 1fr); }
    .tcms-certs > .tcms-cert-panel { order: -1; }
    .tcms-cert__image,
    .tcms-cert__pdf.pdf-preview__well { aspect-ratio: 2.2; }
    /* The job role tag column goes: the role already shows under the name. */
    .tcms-progress { --list-cols: minmax(0, 1.6fr) 120px 130px 180px; }
    .tcms-progress--site { --list-cols: minmax(0, 1.6fr) 104px 110px 110px 164px; }
    .tcms-progress--actions { --list-cols: minmax(0, 1.6fr) 140px 130px 180px 40px; }
    .tcms-certs-list { --list-cols: minmax(0, 1.4fr) 104px minmax(0, 1.3fr) 60px; }
    .tcms-certs-list--site { --list-cols: minmax(0, 1.4fr) 100px 104px minmax(0, 1.2fr) 60px; }
    :is(.tcms-progress, .tcms-certs-list) > :is(.list-header, .list-row) > :nth-child(2) { display: none; }
  }

  /* Tablet: the Site moves under the name too ("Lead Teacher · Riverside"). */
  @media (max-width: 1023px) {
    .tcms-progress--site { --list-cols: minmax(0, 1.6fr) 110px 110px 164px; }
    .tcms-certs-list--site { --list-cols: minmax(0, 1.4fr) 104px minmax(0, 1.2fr) 60px; }
    :is(.tcms-progress--site, .tcms-certs-list--site) > :is(.list-header, .list-row) > :nth-child(3) { display: none; }
    .tcms-person__site { display: inline; }
  }

  @media (max-width: 767px) {
    .tcms-tabs { overflow-x: auto; scrollbar-width: none; }
    .tcms-tabs::-webkit-scrollbar { display: none; }
    .tcms-tabs__tab { min-height: 44px; }

    .tcms-certs-bar__filters { margin-left: 0; }
    .tcms-progress-bar__report { margin-left: 0; }

    /* Compact cards: the person, then status and the dates / the certificate. */
    .tcms-progress,
    .tcms-progress--site,
    .tcms-certs-list,
    .tcms-certs-list--site { --list-cols-mobile: minmax(0, 1fr) auto; }
    .tcms-person-row > .tcms-person { grid-area: 1 / 1; }
    .tcms-person-row > :has(> .chip) { grid-area: 1 / 2; justify-self: end; }
    .tcms-person-row > .tcms-person-row__due { grid-area: 2 / 1; color: var(--color-neutral-700); }
    .tcms-person-row > .tcms-person-row__due::before { content: "Due "; }
    .tcms-person-row > .tcms-person-row__done { grid-area: 2 / 2; justify-self: end; }
    .tcms-person-row > .tcms-cert-cell { grid-area: 2 / 1; min-height: 24px; align-items: center; }
    .tcms-progress--actions { --list-cols-mobile: minmax(0, 1fr) auto 40px; }
    .tcms-person-row > .tcms-person-row__end { grid-area: 1 / 3; }
  }
}