/*
  TFH Event Requests (pages 4118 Event Requests and 4119 New Event Detail)
  Loaded site-wide by a <link> in Sites > Rock RMS > Page Header Content. Bump ?v= on every change.
  Server path: Themes/RockNextGen/Styles/tfh-event-requests.css
  These pages use stock RockNextGen / Obsidian markup on purpose (no TFH brand styling). Colors come from Rock's
  --color-* tokens so dark mode works.
*/

/* ---------- Status panel (block 9013) ---------- */

/* Progress tracker spacing (replaces the mockup's inline style) */
.tfh-er-tracker {
  width: 100%;
  max-width: 1200px;
  margin: 4px auto 20px;
}

/* Dark mode: Rock colors the current step with --color-primary, which is TFH slate (#36454f) and nearly invisible
   on a dark background. Use the strongest interface color instead (it inverts to near-white in dark mode). */
html[theme="dark"] .tfh-er-tracker .progress-tracker-icon.current {
  border-color: var(--color-interface-strongest);
}
html[theme="dark"] .tfh-er-tracker .current + .progress-tracker-details .progress-tracker-title,
html[theme="dark"] .tfh-er-tracker .current + .progress-tracker-details .progress-tracker-subtitle {
  color: var(--color-interface-strongest);
}
@media (prefers-color-scheme: dark) {
  html:not([theme="light"]) .tfh-er-tracker .progress-tracker-icon.current {
    border-color: var(--color-interface-strongest);
  }
  html:not([theme="light"]) .tfh-er-tracker .current + .progress-tracker-details .progress-tracker-title,
  html:not([theme="light"]) .tfh-er-tracker .current + .progress-tracker-details .progress-tracker-subtitle {
    color: var(--color-interface-strongest);
  }
}

/* A step that asked for changes: ringed like "current", in the danger color.
   Not given Rock's .current class, so the dark-mode rule above can't recolor it. */
.tfh-er-icon-attention {
  color: var(--color-danger-strong);
  background: var(--color-interface-softest);
  border: 2px solid var(--color-danger-strong);
  border-radius: 50%;
}

.tfh-er-step-attention .progress-tracker-title,
.tfh-er-step-attention .progress-tracker-subtitle {
  color: var(--color-danger-strong);
}

/* Header labels: Rock gives the title 24px of side padding but the labels none, so they touch the panel edge */
.tfh-er-status .panel-labels {
  padding-right: var(--spacing-large);
}

/* "Event Request" section header between the status panel and the request form */
.tfh-er-section-header {
  margin-top: var(--spacing-large);
}

/* ---------- Department Requests (block 9014) ----------
   Rock 18.6's .displaycard is itself the card row. These add what 18.6 doesn't ship:
   a stacked list, an icon tile, and a content area for the status labels. */

.tfh-er-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.tfh-er-card-content {
  display: flex;
  flex: 1 1 0;
  align-items: center;
}

.tfh-er-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xsmall);
}

.tfh-er-icon-tile {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--rounded-small);
  background-color: var(--color-interface-softer);
  color: var(--color-interface-strong);
}

.tfh-er-icon-tile i {
  font-size: var(--font-size-h5);
  line-height: 1;
}

.tfh-er-icon-tile-success { background-color: var(--color-success-soft); color: var(--color-success-strong); }
.tfh-er-icon-tile-warning { background-color: var(--color-warning-soft); color: var(--color-warning-strong); }
.tfh-er-icon-tile-danger  { background-color: var(--color-danger-soft);  color: var(--color-danger-strong); }
.tfh-er-icon-tile-info    { background-color: var(--color-info-soft);    color: var(--color-info-strong); }

/* ---------- Activity timeline (block 9015) ---------- */

.tfh-er-tl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tfh-er-tl li {
  position: relative;
  display: flex;
  gap: var(--spacing-small);
  padding-bottom: 22px;
}

/* vertical line joining the avatars */
.tfh-er-tl li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  background: var(--color-interface-soft);
}

.tfh-er-tl li:last-child {
  padding-bottom: 0;
}

.tfh-er-tl li:last-child::before {
  display: none;
}

.tfh-er-tl .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tfh-er-tl-body {
  flex: 1;
  min-width: 0;
  padding-top: 5px;
}

.tfh-er-tl-note {
  margin-top: 6px;
  padding: 8px 12px;
  border-left: 3px solid var(--color-interface-soft);
  color: var(--color-interface-strong);
  font-size: var(--font-size-small);
  white-space: pre-line;
}

.tfh-er-tl-when {
  padding-top: 6px;
  font-size: var(--font-size-xsmall);
  color: var(--color-interface-medium);
  white-space: nowrap;
}

/* ---------- Dashboard (block 9016, page 4118) ----------
   Grid markup is Rock's Obsidian grid (.grid-obsidian ...). Column widths live here instead of inline styles. */

/* My Requests columns */
.tfh-er-col-event  { flex: 1 1 26%; min-width: 200px; }   /* below 200px the name wraps letter by letter */
.tfh-er-col-date   { flex: 0 0 230px; }
.tfh-er-col-status { flex: 1 1 17%; }
.tfh-er-col-depts  { flex: 1 1 44%; }
.tfh-er-col-go     { flex: 0 0 64px; min-width: unset; justify-content: center; padding-right: var(--spacing-medium); }

/* Department Approvals columns */
.tfh-er-col-evdate    { flex: 1 1 14%; }
.tfh-er-col-dept      { flex: 1 1 14%; }
.tfh-er-col-by        { flex: 1 1 15%; }
.tfh-er-col-submitted { flex: 1 1 10%; }
.tfh-er-col-dstatus   { flex: 1 1 14%; }
.tfh-er-col-review    { flex: 0 0 112px; min-width: unset; justify-content: center; padding-right: var(--spacing-medium); }

/* Event name cell: icon tile + name link + campus */
.tfh-er-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  min-width: 0;
}

.tfh-er-name-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--rounded-small);
  background-color: var(--color-interface-softer);
  color: var(--color-interface-strong);
}

.tfh-er-name-text {
  min-width: 0;
}

.tfh-er-name-title {
  font-weight: var(--font-weight-semibold);
}

/* Department labels: one per line */
.tfh-er-depts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-tiny);
}

.tfh-er-filter-select {
  width: 200px;
}

.tfh-er-empty {
  padding: var(--spacing-large);
  text-align: center;
}

/* KPI row sits above the tabs */
.tfh-er-tabs {
  margin-top: var(--spacing-large);
}

/* ---------- Phones (below 768px) ----------
   Custom properties can't be used in media query conditions, so the breakpoint is a literal. */
@media (max-width: 767px) {

  /* Status header: title on its own line (no truncation), labels wrap underneath, left-aligned */
  .tfh-er-status .panel-header {
    flex-wrap: wrap;
    height: auto;
    padding-top: var(--spacing-small);
  }
  .tfh-er-status .panel-title {
    flex: 1 1 100%;
    white-space: normal;
  }
  .tfh-er-status .panel-labels {
    display: flex;          /* Rock's labels box is display:block + text-align:right */
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--spacing-tiny);
    margin: 0;
    padding: var(--spacing-xsmall) var(--spacing-large) var(--spacing-small);
  }

  /* Department cards: Rock stacks the card on phones; keep the text left-aligned instead of centered */
  .tfh-er-cards .displaycard {
    align-items: flex-start;
    text-align: left;
  }

  /* Activity: time moves under the sentence instead of taking a third of the width */
  .tfh-er-tl li {
    flex-wrap: wrap;
    row-gap: 0;   /* keep the time tight under its sentence */
  }
  .tfh-er-tl-when {
    order: 3;
    flex: 1 1 100%;
    padding-top: 0;
    padding-left: 44px;   /* lines up with the sentence, past the 32px avatar and gap */
  }

  /* Dashboard KPIs: 2 x 2 instead of 4 full-width rows */
  .tfh-er-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-small);
  }
  .tfh-er-kpis .kpi {
    margin: 0;
    min-width: 0;
  }

  /* Tabs wrap instead of scrolling sideways and clipping the badge */
  .tfh-er-tabs .toolbar-nav {
    flex-wrap: wrap;
  }

  /* Grid rows become stacked cards: no column headers, every cell full width */
  .tfh-er-grid .grid-column-header-row {
    display: none;
  }
  /* Rock draws each cell's own background and bottom border; on a stacked row that shows as bands,
     so the row takes over the background and the single divider. */
  .tfh-er-grid .grid-row {
    flex-wrap: wrap;
    height: auto;
    gap: var(--spacing-xsmall);
    padding: var(--spacing-small) 0;
    background-color: var(--color-interface-softest);
    border-bottom: 1px solid var(--color-interface-soft);
  }
  .tfh-er-grid .grid-row > .grid-cell {
    flex: 1 1 100%;
    min-width: 0;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    background-color: transparent;
  }
  .tfh-er-grid .grid-row > .tfh-er-col-go {
    display: none;   /* the whole row opens the request */
  }
  .tfh-er-grid .grid-row > .tfh-er-col-review {
    justify-content: flex-start;
  }
  .tfh-er-grid .tfh-er-depts {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tfh-er-filter-select {
    width: 100%;
  }
}