/* ==========================================================================
   Course Matrix - applies to every program's matrix view.
   View machine names vary (child_life_matrices, bcba_matrix, hr_matrices,
   business_administration_and_management, ...), so the scope keys off the
   row class every matrix view sets: .view:has(.course-matrix-row)
   Desktop: tidy schedule grid. Mobile (<768px): one card per course with a
   Fall / Winter / Spring / Summer strip.

   Intended to REPLACE the Asset Injector "00_course_matrix" CSS. The few
   !important flags are there to beat that file and the site-wide
   `td { padding: 5px 10px !important }` injector if they are still loaded.
   ========================================================================== */

.view:has(.course-matrix-row) {
  --cm-navy: #003660;
  --cm-gold: #ffcd34;
  --cm-text: #15385e;
  --cm-link: #005aa3;
  --cm-line: #dfe5ea;
  --cm-muted: #8a99a8;
  --cm-head-bg: #f1f4f7;
  --cm-on-bg: #e6f0f8;
  --cm-on-line: #b9d3ea;
  margin-bottom: 2rem;
}

/* Title bar ("PaCE Child Life Courses", "Required Courses", "Optional", ...) */
.view:has(.course-matrix-row) .view-header {
  margin-left: 0;
  padding: 12px 16px;
  background: var(--cm-navy);
  color: var(--cm-gold);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.view:has(.course-matrix-row) .table-responsive {
  margin-bottom: 0;
  border: 1px solid var(--cm-line);
  border-top: 0;
}

.view:has(.course-matrix-row) table {
  width: 100%;
  margin: 0; /* theme adds 10px side margins, which forces a scrollbar */
  border: 0 !important; /* some program pages inject `table { border: 3px solid }` */
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--cm-text);
}

/* Column widths (header cells drive table-layout: fixed) */
.view:has(.course-matrix-row) th.views-field-field-url {
  width: 44%;
}
.view:has(.course-matrix-row) th.views-field-field-units {
  width: 8%;
}
.view:has(.course-matrix-row) th.views-field-field-fall,
.view:has(.course-matrix-row) th.views-field-field-winter,
.view:has(.course-matrix-row) th.views-field-field-spring,
.view:has(.course-matrix-row) th.views-field-field-summer {
  width: 12%;
}

/* Header row */
.view:has(.course-matrix-row) thead th {
  padding: 10px 12px !important;
  background: var(--cm-head-bg);
  border: 0;
  border-bottom: 2px solid var(--cm-gold);
  color: var(--cm-navy) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  vertical-align: bottom;
}

/* Body cells. !important beats the site-wide injected `td { padding: 5px 10px !important }` */
.view:has(.course-matrix-row) tbody td {
  height: auto;
  padding: 12px !important;
  border: 0;
  border-bottom: 1px solid var(--cm-line);
  font-size: 16px;
  line-height: 1.35;
  vertical-align: middle;
}
.view:has(.course-matrix-row) tbody tr:last-child td {
  border-bottom: 0;
}

.view:has(.course-matrix-row) tbody tr.course-matrix-row:nth-child(odd) {
  background: #fff !important;
}
.view:has(.course-matrix-row) tbody tr.course-matrix-row:nth-child(even) {
  background: #f7f9fb !important;
}
.view:has(.course-matrix-row) tbody tr.course-matrix-row:hover {
  background: #eef4fa !important;
}

/* Course link */
.view:has(.course-matrix-row) td.views-field-field-url a {
  color: var(--cm-link);
  font-weight: 600;
  text-decoration: none;
}
.view:has(.course-matrix-row) td.views-field-field-url a:hover,
.view:has(.course-matrix-row) td.views-field-field-url a:focus {
  color: var(--cm-navy);
  text-decoration: underline;
}

/* Units + seasons centered */
.view:has(.course-matrix-row) .views-field-field-units,
.view:has(.course-matrix-row) .views-field-field-fall,
.view:has(.course-matrix-row) .views-field-field-winter,
.view:has(.course-matrix-row) .views-field-field-spring,
.view:has(.course-matrix-row) .views-field-field-summer {
  text-align: center;
}

/* Offered term: inset tint block (a gradient so it sits on top of the
   striped/hover row colour and works with border-collapse) */
.view:has(.course-matrix-row) td.views-field-field-fall:not(:empty),
.view:has(.course-matrix-row) td.views-field-field-winter:not(:empty),
.view:has(.course-matrix-row) td.views-field-field-spring:not(:empty),
.view:has(.course-matrix-row) td.views-field-field-summer:not(:empty) {
  background: linear-gradient(var(--cm-on-bg), var(--cm-on-bg)) center / calc(100% - 8px) calc(100% - 10px) no-repeat;
  color: var(--cm-navy);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Not offered: muted dash so the grid scans cleanly */
.view:has(.course-matrix-row) td.views-field-field-fall:empty::after,
.view:has(.course-matrix-row) td.views-field-field-winter:empty::after,
.view:has(.course-matrix-row) td.views-field-field-spring:empty::after,
.view:has(.course-matrix-row) td.views-field-field-summer:empty::after {
  content: "\2014";
  color: #c5ced6;
}

.view:has(.course-matrix-row) .format-icon {
  height: 1.1em !important;
  margin-right: 5px !important;
}

/* Medium screens: tighter cells so nothing wraps awkwardly */
@media (min-width: 768px) and (max-width: 991px) {
  .view:has(.course-matrix-row) th.views-field-field-url {
    width: 40%;
  }
  .view:has(.course-matrix-row) tbody td {
    padding: 10px 8px !important;
    font-size: 15px;
  }
  .view:has(.course-matrix-row) td.views-field-field-fall:not(:empty),
  .view:has(.course-matrix-row) td.views-field-field-winter:not(:empty),
  .view:has(.course-matrix-row) td.views-field-field-spring:not(:empty),
  .view:has(.course-matrix-row) td.views-field-field-summer:not(:empty) {
    font-size: 13px;
    white-space: normal;
  }
}

/* ==========================================================================
   Mobile: cards
   ========================================================================== */
@media (max-width: 767px) {
	 /* ucsbweb floats view paragraphs left, and the next column paragraph
     (z-index: 2, unfloated below 768px) then overlaps the matrix and eats
     every click on the course links. Put the matrix back in normal flow. */
  .field--name-field-blades .paragraph--type--view:has(.course-matrix-row) {
    float: none;
  }
  
  .view:has(.course-matrix-row) .view-header {
    margin-bottom: 12px;
  }

  .view:has(.course-matrix-row) .table-responsive {
    border: 0;
    overflow: visible;
  }

  .view:has(.course-matrix-row) table,
  .view:has(.course-matrix-row) tbody {
    display: block;
    width: 100%;
    border-collapse: separate;
  }

  .view:has(.course-matrix-row) thead {
    display: none;
  }

  .view:has(.course-matrix-row) tbody tr.course-matrix-row:nth-child(n) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
    padding: 14px;
    background: #fff !important;
    border: 1px solid var(--cm-line);
    border-left: 4px solid var(--cm-navy);
    box-shadow: 0 1px 2px rgba(0, 54, 96, 0.06);
  }

  .view:has(.course-matrix-row) tbody td {
    display: block;
    width: auto;
    padding: 0 !important;
    border: 0;
    white-space: normal !important; /* Bootstrap nowraps .table-responsive cells */
  }

  /* Title spans the card */
  .view:has(.course-matrix-row) td.views-field-field-url {
    grid-column: 1 / -1;
    font-size: 17px;
    line-height: 1.3;
  }

  /* "4 units" line */
  .view:has(.course-matrix-row) td.views-field-field-units {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    color: #5b6e80;
    font-size: 14px;
    text-align: left;
  }
  .view:has(.course-matrix-row) td.views-field-field-units::before {
    content: "Units: ";
    font-weight: 700;
  }

  /* Season tiles */
  .view:has(.course-matrix-row) td.views-field-field-fall,
  .view:has(.course-matrix-row) td.views-field-field-winter,
  .view:has(.course-matrix-row) td.views-field-field-spring,
  .view:has(.course-matrix-row) td.views-field-field-summer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 54px;
    padding: 6px 4px !important;
    background: #f4f6f8;
    box-shadow: none;
    font-size: 13px;
    white-space: normal;
  }
  .view:has(.course-matrix-row) td.views-field-field-fall:not(:empty),
  .view:has(.course-matrix-row) td.views-field-field-winter:not(:empty),
  .view:has(.course-matrix-row) td.views-field-field-spring:not(:empty),
  .view:has(.course-matrix-row) td.views-field-field-summer:not(:empty) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    background: var(--cm-on-bg);
    box-shadow: inset 0 0 0 1px var(--cm-on-line);
    font-size: 13px;
  }

  /* Season labels (no data-label attrs, so key off the column class) */
  .view:has(.course-matrix-row) td.views-field-field-fall::before,
  .view:has(.course-matrix-row) td.views-field-field-winter::before,
  .view:has(.course-matrix-row) td.views-field-field-spring::before,
  .view:has(.course-matrix-row) td.views-field-field-summer::before {
    flex-basis: 100%;
    margin-bottom: 4px;
    color: var(--cm-navy);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
  }
  .view:has(.course-matrix-row) td.views-field-field-fall::before { content: "Fall"; }
  .view:has(.course-matrix-row) td.views-field-field-winter::before { content: "Winter"; }
  .view:has(.course-matrix-row) td.views-field-field-spring::before { content: "Spring"; }
  .view:has(.course-matrix-row) td.views-field-field-summer::before { content: "Summer"; }

  .view:has(.course-matrix-row) td.views-field-field-fall:empty::before,
  .view:has(.course-matrix-row) td.views-field-field-winter:empty::before,
  .view:has(.course-matrix-row) td.views-field-field-spring:empty::before,
  .view:has(.course-matrix-row) td.views-field-field-summer:empty::before {
    color: var(--cm-muted);
  }

  /* Draggableviews weight column: keep hidden (reorder on desktop) */
  .view:has(.course-matrix-row) tbody td.views-field-draggableviews {
    display: none;
  }
}

/* Very narrow phones: 2 x 2 season grid */
@media (max-width: 359px) {
  .view:has(.course-matrix-row) tbody tr.course-matrix-row:nth-child(n) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Long matrices (pairs with course-matrix.js)

   Standard, based on a sample of 35 matrices across 12 program pages
   (31 have 6 or fewer courses; the long ones have 8, 8, 12 and 13):
   - Desktop: only matrices with 9+ courses scroll. Shorter ones always show
     in full, so a box never scrolls just to hide one row. Only the course
     rows scroll (capped at 22.5em = ~8.5 one-line rows at the table's
     18px), so the header row stays put and the scrollbar starts below it.
     A half-visible row at the bottom signals there is more.
   - Mobile: matrices with 7+ courses show 5 cards (about one phone screen)
     and a "Show all N courses" button.
   The JS labels a scrolling matrix as a region, adds a "scroll for more"
   hint and sets .cm-overflowing, but only when the rows actually overflow.
   ========================================================================== */
@media (min-width: 768px) {
  /* Split the table so tbody can scroll on its own: each row becomes its own
     fixed-layout table, so header and body widths must match exactly. They
     are !important because old injectors size the Course header by ID
     (`th#view-field-url-table-column { width: 50% }`). */
  .view:has(tbody tr.course-matrix-row:nth-child(9)) thead,
  .view:has(tbody tr.course-matrix-row:nth-child(9)) tbody {
    display: block;
  }
  .view:has(tbody tr.course-matrix-row:nth-child(9)) thead tr,
  .view:has(tbody tr.course-matrix-row:nth-child(9)) tbody tr.course-matrix-row {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .view:has(tbody tr.course-matrix-row:nth-child(9)) .views-field-field-url {
    width: 44% !important;
  }
  .view:has(tbody tr.course-matrix-row:nth-child(9)) .views-field-field-units {
    width: 8% !important;
  }
  .view:has(tbody tr.course-matrix-row:nth-child(9)) .views-field-field-fall,
  .view:has(tbody tr.course-matrix-row:nth-child(9)) .views-field-field-winter,
  .view:has(tbody tr.course-matrix-row:nth-child(9)) .views-field-field-spring,
  .view:has(tbody tr.course-matrix-row:nth-child(9)) .views-field-field-summer {
    width: 12% !important;
  }

  /* Header background and gold rule live on thead so they also cover the
     scrollbar gutter reserved below. */
  .view:has(tbody tr.course-matrix-row:nth-child(9)) thead {
    overflow: hidden;
    background: var(--cm-head-bg);
    box-shadow: inset 0 -2px 0 var(--cm-gold);
  }
  .view:has(tbody tr.course-matrix-row:nth-child(9)) thead th {
    border-bottom: 0;
  }

  .view:has(tbody tr.course-matrix-row:nth-child(9)) tbody {
    /* em, not rem: the theme pins <html> at 10px. 70vh keeps the whole box
       on screen when zoomed in. */
    max-height: min(22.5em, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Same scrollbar as the Student Info Center post-its. */
    scrollbar-color: #ffc108 #08527e;
  }

  /* Only while the rows actually overflow: give the header a gutter the same
     width as the scrollbar so the columns stay aligned. No overflow, no
     gutter. */
  .view:has(tbody tr.course-matrix-row:nth-child(9)).cm-overflowing thead {
    scrollbar-color: #ffc108 #08527e;
    scrollbar-gutter: stable;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .view:has(tbody tr.course-matrix-row:nth-child(9)) .views-field-field-url {
    width: 40% !important;
  }
}


.view:has(.course-matrix-row) .cm-scroll-hint {
  margin: 6px 0 0;
  color: #5b6e80;
  font-size: 14px;
}

.view:has(.course-matrix-row) .cm-toggle {
  display: none;
}

@media (max-width: 767px) {
  .view:has(.course-matrix-row) .cm-scroll-hint {
    display: none;
  }

  .view:has(.course-matrix-row).cm-collapsed tbody tr.course-matrix-row:nth-child(n+6) {
    display: none;
  }

  .view:has(.course-matrix-row) .cm-toggle {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid var(--cm-navy);
    color: var(--cm-navy);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
  .view:has(.course-matrix-row) .cm-toggle:hover {
    background: var(--cm-on-bg);
  }
  .view:has(.course-matrix-row) .cm-toggle:focus-visible {
    outline: 3px solid var(--cm-gold);
    outline-offset: 2px;
  }
}