/**
 * v5.0.43 Teaching Activity card.
 * The card occupies only the fourth Teaching Overview grid cell.
 */

.had-teaching-activity-card {
  --had-ta-cyan: var(--had-cyan, #22d3ee);
  --had-ta-gold: #f2b84b;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 13px 10px;
  border: 1px solid color-mix(in srgb, var(--had-ta-cyan) 43%, #173d51);
  border-radius: 7px;
  background:
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--had-ta-cyan) 12%, transparent), transparent 34%),
    linear-gradient(150deg, rgba(7, 31, 46, .98), rgba(3, 18, 29, .96));
  color: #cfe2ea;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.had-ta-header {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid #164155;
}

.had-ta-header > div { min-width: 0; }
.had-ta-header > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--had-ta-cyan);
  font: 700 7px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.had-ta-header h3 {
  margin: 0;
  color: #eef8fb;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.had-ta-mode,
.had-ta-header label {
  flex: 0 0 auto;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border: 1px solid #1d5067;
  background: rgba(3, 22, 34, .86);
  color: #89adbc;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.had-ta-header select {
  max-width: 125px;
  height: 23px;
  padding: 0 20px 0 4px;
  border: 0;
  outline: 0;
  background: #061b28;
  color: var(--had-ta-cyan);
  font: inherit;
  text-transform: uppercase;
}

.had-ta-header select:focus-visible { outline: 2px solid var(--had-ta-gold); outline-offset: 1px; }

.had-ta-visual {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  display: grid;
  align-items: stretch;
  padding: 8px 0 5px;
}

.had-ta-empty {
  align-self: center;
  margin: 0;
  color: #7999a7;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

.had-ta-footer {
  flex: 0 0 auto;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding-top: 5px;
  border-top: 1px solid #164155;
  color: #688a99;
  font: 700 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.had-ta-footer > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.had-ta-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--had-ta-cyan); box-shadow: 0 0 8px rgba(34, 211, 238, .75); }
.had-ta-footer button {
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid #8b692a;
  background: rgba(242, 184, 75, .08);
  color: var(--had-ta-gold);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.had-ta-footer button:hover,
.had-ta-footer button:focus-visible { border-color: var(--had-ta-gold); outline: none; }
.had-ta-footer button[hidden] { display: none !important; }

/* Institution × Year and Topics × Year matrices. */
.had-ta-matrix {
  min-width: 0;
  min-height: 0;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(70px, 1.5fr) repeat(var(--had-ta-columns), minmax(17px, .55fr));
  gap: 3px;
  align-items: center;
}

.had-ta-corner,
.had-ta-year,
.had-ta-row-label,
.had-ta-cell { min-width: 0; }

.had-ta-year {
  color: #789baa;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}

.had-ta-row-label {
  overflow: hidden;
  padding-right: 4px;
  color: #a4bdc8;
  font: 700 7px/1.15 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.had-ta-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1.18;
  max-height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #123e51;
  border-radius: 2px;
  background: rgba(5, 27, 40, .9);
  color: #496e7f;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  cursor: pointer;
}

.had-ta-cell.has-data {
  border-color: var(--had-ta-cyan);
  background: rgba(34, 211, 238, var(--had-ta-alpha, .28));
  color: #e9fbfd;
  box-shadow: inset 0 0 10px rgba(34, 211, 238, .18);
}

.had-ta-cell:hover,
.had-ta-cell:focus-visible,
.had-ta-cell.is-selected {
  z-index: 3;
  border-color: var(--had-ta-gold);
  background: color-mix(in srgb, var(--had-ta-gold) 27%, #062130);
  color: #fff6de;
  outline: none;
  box-shadow: 0 0 0 1px rgba(242, 184, 75, .22), 0 0 12px rgba(242, 184, 75, .22);
}

.had-ta-cell::after {
  content: attr(data-tooltip);
  pointer-events: none;
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 190px;
  padding: 6px 7px;
  border: 1px solid #347188;
  background: #031722;
  color: #dcecf2;
  font: 500 8px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 3px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

.had-ta-cell:hover::after,
.had-ta-cell:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Timeline. */
.had-ta-timeline {
  min-width: 0;
  align-self: center;
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 15px 3px 8px;
  scrollbar-width: thin;
  scrollbar-color: #24718b transparent;
}

.had-ta-timeline button {
  flex: 1 0 42px;
  min-width: 42px;
  position: relative;
  padding: 15px 2px 0;
  border: 0;
  border-top: 1px solid #285569;
  background: transparent;
  color: #789baa;
  text-align: center;
  cursor: pointer;
}
.had-ta-timeline button i {
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border: 2px solid var(--had-ta-cyan);
  border-radius: 50%;
  background: #061b28;
}
.had-ta-timeline time { display: block; color: var(--had-ta-cyan); font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.had-ta-timeline span { display: block; overflow: hidden; margin-top: 5px; font-size: 7px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.had-ta-timeline button:hover,
.had-ta-timeline button:focus-visible,
.had-ta-timeline button.is-selected { color: var(--had-ta-gold); outline: none; }
.had-ta-timeline button:hover i,
.had-ta-timeline button:focus-visible i,
.had-ta-timeline button.is-selected i { border-color: var(--had-ta-gold); background: var(--had-ta-gold); }

/* Annual lollipop and cumulative series. */
.had-ta-lollipops {
  min-height: 0;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px 4px 0;
  border-bottom: 1px solid #21495c;
}
.had-ta-lollipops button {
  min-width: 0;
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 6px;
  border: 0;
  background: transparent;
  color: #789baa;
  cursor: pointer;
}
.had-ta-lollipops b { position: absolute; bottom: calc(15px + var(--had-ta-value)); color: var(--had-ta-gold); font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.had-ta-lollipops i {
  position: absolute;
  bottom: 14px;
  width: 2px;
  height: var(--had-ta-value);
  min-height: 4px;
  background: linear-gradient(to top, rgba(34, 211, 238, .2), var(--had-ta-cyan));
}
.had-ta-lollipops i::before { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border: 2px solid var(--had-ta-cyan); border-radius: 50%; background: #061b28; }
.had-ta-lollipops time { font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.had-ta-lollipops button:hover,
.had-ta-lollipops button:focus-visible,
.had-ta-lollipops button.is-selected { color: var(--had-ta-gold); outline: none; }
.had-ta-lollipops button:hover i,
.had-ta-lollipops button:focus-visible i,
.had-ta-lollipops button.is-selected i { background: var(--had-ta-gold); }
.had-ta-lollipops button:hover i::before,
.had-ta-lollipops button:focus-visible i::before,
.had-ta-lollipops button.is-selected i::before { border-color: var(--had-ta-gold); }
.had-ta-lollipops.is-cumulative i { background: linear-gradient(to top, rgba(167, 139, 250, .2), #a78bfa); }
.had-ta-axis-note { align-self: end; margin: 0; color: #648696; font: 700 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; text-transform: uppercase; }

/* Barcode. */
.had-ta-barcode { min-width: 0; align-self: center; }
.had-ta-barcode-track { position: relative; height: 76px; margin: 0 7px; border-top: 1px solid #21495c; border-bottom: 1px solid #21495c; background: repeating-linear-gradient(90deg, transparent 0 19%, rgba(27, 75, 94, .35) 19% 19.4%); }
.had-ta-barcode-track button {
  position: absolute;
  left: var(--had-ta-pos);
  top: 8px;
  width: 4px;
  height: 36px;
  padding: 0;
  border: 0;
  background: var(--had-ta-cyan);
  box-shadow: 0 0 8px rgba(34, 211, 238, .45);
  transform: translateX(-50%);
  cursor: pointer;
}
.had-ta-barcode-track button:nth-child(3n+2) { top: 27px; }
.had-ta-barcode-track button:nth-child(3n+3) { top: 46px; }
.had-ta-barcode-track button:hover,
.had-ta-barcode-track button:focus-visible,
.had-ta-barcode-track button.is-selected { width: 7px; background: var(--had-ta-gold); outline: 1px solid #fff2cf; box-shadow: 0 0 11px rgba(242, 184, 75, .55); }
.had-ta-barcode-axis { display: flex; justify-content: space-between; padding-top: 5px; color: #789baa; font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Institution distribution. */
.had-ta-bars { min-width: 0; align-self: center; display: grid; gap: 5px; }
.had-ta-bars button {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(80px, 1.2fr) minmax(50px, 1fr) 16px;
  align-items: center;
  gap: 6px;
  padding: 2px 3px;
  border: 1px solid transparent;
  background: transparent;
  color: #a4bdc8;
  text-align: left;
  cursor: pointer;
}
.had-ta-bars button > span { overflow: hidden; font: 700 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.had-ta-bars button > i { height: 5px; background: #103648; }
.had-ta-bars button > i > b { display: block; height: 100%; background: linear-gradient(90deg, var(--had-ta-cyan), #a78bfa); }
.had-ta-bars em { color: var(--had-ta-cyan); font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; font-style: normal; text-align: right; }
.had-ta-bars button:hover,
.had-ta-bars button:focus-visible,
.had-ta-bars button.is-selected { border-color: var(--had-ta-gold); color: #fff1cf; outline: none; }
.had-ta-bars button:hover > i > b,
.had-ta-bars button:focus-visible > i > b,
.had-ta-bars button.is-selected > i > b { background: var(--had-ta-gold); }

/* Mini dashboard. */
.had-ta-dashboard {
  min-width: 0;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.had-ta-dashboard > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 7px 9px; border: 1px solid #17475d; background: rgba(3, 22, 34, .68); }
.had-ta-dashboard b { overflow: hidden; color: var(--had-ta-cyan); font: 500 clamp(13px, 1.05vw, 18px)/1.05 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.had-ta-dashboard span { margin-top: 5px; color: #6c8e9d; font: 700 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }

@media (max-width: 1180px) {
  .had-ta-matrix { grid-template-columns: minmax(62px, 1.35fr) repeat(var(--had-ta-columns), minmax(15px, .52fr)); gap: 2px; }
  .had-ta-row-label { font-size: 6.5px; }
  .had-ta-header select { max-width: 104px; }
}

@media (max-width: 900px) {
  .had-teaching-activity-card { min-height: 190px; }
  .had-ta-visual { min-height: 112px; }
}

@media (max-width: 600px) {
  .had-teaching-activity-card { min-height: 220px; }
  .had-ta-visual { min-height: 135px; overflow-x: auto; }
  .had-ta-matrix { min-width: 330px; }
  .had-ta-header select { max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .had-ta-cell::after { transition: none; }
  .had-ta-timeline,
  .had-ta-lollipops { scroll-behavior: auto; }
}