/*
 * Portal training list: E-03 / E-04 for Employees (To do · Overdue · Completed), D-14 for
 * Directors (S-02 empty, M-04 phone) under the D-22 strip "Assigned to me · Created by me".
 * Shared pieces come from components/ (list rows, segmented, chips, notices, empty states); this
 * file adds the page layout (the pill strip is components/train-tabs.css). The player is pages/portal-player.css.
 */
@layer pages {
  /* Lists ------------------------------------------------------------------------------------ */
  .training-list {
    --list-cols: minmax(0, 2.4fr) 140px 170px 150px 190px;
    --list-cols-mobile: minmax(0, 1fr) auto;
  }
  /* E-03 / E-04 */
  .training-list--staff { --list-cols: minmax(0, 1.8fr) 150px 130px 150px 150px; }

  .training-row { min-height: 70px; }
  .training-row--staff { min-height: 62px; }
  .training-row:hover { box-shadow: 0 0 0 2px var(--color-divider); }
  .training-row:has(.training-row__link:focus-visible) { box-shadow: var(--ring); }

  .training-row__link {
    color: inherit;
    text-decoration: none;
  }
  .training-row__link:hover { color: inherit; }
  .training-row__link:focus-visible { outline: none; }
  /* The title link covers the whole row; buttons and file links stay clickable above it. */
  .training-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .training-row__due {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .training-row__rel {
    font-size: 12.5px;
    color: var(--color-neutral-700);
  }
  .training-row__rel--warn { color: var(--color-warn-text); font-weight: 700; }
  .training-row__rel--err { color: var(--color-err-text); font-weight: 700; }

  .training-row__cta {
    position: relative;
    z-index: 1;
    height: 40px;
  }

  /* E-03 row: a 36px tile with the training icon, then the bold title. */
  .training-row__name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .training-row__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-thumb);
    background: var(--petal-ops-bg);
    color: var(--petal-ops-fg);
    font-size: 17px;
  }
  .training-row--done .training-row__icon {
    background: var(--color-accent-2-100);
    color: var(--color-accent-2-800);
  }
  .training-row__title { font-weight: 700; }
  .training-row__action { display: flex; }
  .training-row--staff .training-row__cta { height: 38px; }

  /* E-04 "Your files": blue links above the row link. */
  .training-row__files {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
  }
  .training-row__file {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-blue-deep);
    font-weight: 700;
  }
  .training-row__file .icon { font-size: 15px; }
  .training-row__file:hover { text-decoration: underline; }

  .training-note {
    margin: 0;
    color: var(--color-neutral-700);
    font-size: 12.5px;
    line-height: 1.45;
  }

  .training-overdue__item { display: block; }
  /* D-14's "View Overdue" is the one 38px notice action (other notices use 36px). */
  .training-overdue .notice__action .btn { height: 38px; }

  .training-tabs { align-self: flex-start; }

  /* Tablet: the lists drop their second column (D-14 Assigned; E-03 / E-04 Assigned by). */
  @media (max-width: 1199px) and (min-width: 768px) {
    .training-list { --list-cols: minmax(0, 2fr) 150px 140px 180px; }
    .training-list--staff { --list-cols: minmax(0, 1.8fr) 130px 150px 130px; }
    .training-list > :is(.list-header, .list-row) > :nth-child(2) { display: none; }
  }

  /* Phones (M-04) ------------------------------------------------------------------------- */
  @media (max-width: 767px) {
    .training-head { display: none; }

    /* M-04: tabs, overdue notice and list sit 14px apart (the shell's 16px is M-01's). */
    .main:has(.training-list, .training-tabs, .training-strip) { gap: 14px; }

    /* This page's pill strips fill the width with 44px targets and come first (M-04: the tabs
       sit above the overdue notice). */
    .training-strip {
      order: -2;
      align-self: stretch;
      display: flex;
    }
    .training-strip .train-tabs__tab {
      flex: 1;
      justify-content: center;
      height: 44px;
      padding: 0 8px;
    }

    /* M-04: the segmented control fills the width; rows are 14px apart. */
    .training-tabs {
      order: -1;
      align-self: stretch;
      display: flex;
      width: 100%;
    }
    .training-tabs .segmented__item {
      flex: 1;
      justify-content: center;
      gap: 4px;
      min-height: 44px;
      padding: 9px 0;
    }
    .training-tabs .segmented__count { font-weight: 700; }
    .training-tabs .segmented__dot { display: none; }

    .training-overdue .notice__action { display: none; }

    .training-list { gap: 14px; }

    .training-row {
      min-height: 64px;
      padding: 10px 16px;
      gap: 12px;
    }
    .training-row .list-row__main { gap: 3px; }
    .training-row .list-row__title { line-height: 1.3; }
    .training-row__title { font-size: 15px; line-height: 1.3; }
    .training-row__status .chip--neutral .icon { display: none; }
    /* E-04 "Certificate": a 44px target. */
    .training-row__file { min-height: 44px; }
  }
}