/*
 * ICPC Operations Console - styles of the shell's brand and of the modules added with it
 * (results, certificates, dashboards). app.css holds the Cloudscape component layer and
 * the original pages; this file only adds what those components do not cover. Light mode,
 * Cloudscape design tokens only (tokens.css): no new colours or sizes.
 *
 * Each module keeps its rules in its own section below.
 */

/* ---- Brand: the ICPC Bolivia mark and the application name ---- */
.cs-topnav__logo--image {
  width: auto;
  height: 24px;
  border: 0;
  border-radius: 0;
}

.cs-topnav__title-short {
  display: none;
}

@media (max-width: 688px) {
  .cs-topnav__title-full {
    display: none;
  }

  .cs-topnav__title-short {
    display: inline;
  }
}

.login__logo-image {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

/* ---- Dashboard and overviews ---- */

/* Dashboard (dashboard.html): the Invitations / Certificates / Results panels are three
   columns on wide screens; each keeps two counters per row. */
.console-dashboard .dashboard-panels > * {
  min-width: 0;
}

/* Recent activity: what was done ends in an ellipsis (full text in the cell's title); the
   outcome ("9 rows: 8 added, 1 updated, ...") wraps instead, nothing of it is lost. */
.recent-activity .recent-activity__what {
  --cs-cell-max-width: var(--dashboard-team-max-width);
}

/* Invitations list (console/invitation_list.html): name and institution like the teams table;
   the email status column keeps its flags under the status, as there. */
.invitation-table .invitation-table__name {
  --cs-cell-max-width: var(--team-table-name-width);
}

.invitation-table .invitation-table__institution {
  --cs-cell-max-width: var(--team-table-institution-width);
}

.invitation-table .invitation-table__email .status-flags {
  max-width: var(--cs-table-wrap-min-width);
}

.invitation-table .invitation-table__email > .cs-table__cell {
  white-space: normal;
  min-width: var(--team-table-email-min-width);
}

.invitation-table .invitation-table__email .cs-status {
  white-space: nowrap;
}

/* Column fit: every column needs about 1240px of content width. Below that Size, then
   Version, are left out (both stay on the team page, shown in the split panel). Content
   width = viewport - 48px gutters (- 281px with the navigation open). */
@media (max-width: 1620px) {
  html:not(.cs-nav-closed) .invitation-table .invitation-table__size { display: none; }
}

@media (max-width: 1520px) {
  html:not(.cs-nav-closed) .invitation-table .invitation-table__version { display: none; }
}

@media (max-width: 1340px) {
  .invitation-table .invitation-table__size { display: none; }
}

@media (max-width: 1240px) {
  .invitation-table .invitation-table__version { display: none; }
}

/* Invitation templates (console/invitation_template.html): the how-to list. */
.invitation-template__steps {
  margin: 0;
  padding-inline-start: var(--space-l);
}

.invitation-template__steps > li + li {
  margin-top: var(--space-xs);
}

/* Import History (console/imports.html): file names end in an ellipsis. */
.import-history .import-history__file {
  --cs-cell-max-width: var(--team-table-institution-width);
}

/* ---- Competitions and participants ---- */

/* Competitions table (years.html): long names and places end in an ellipsis. */
.years-table .years-table__name,
.years-table .years-table__location {
  --cs-cell-max-width: var(--team-table-name-width);
}

/* Participants (console/participants.html): long texts end in an ellipsis (full text in the
   cell's title); the institution filter is wider than the other selects (long names). */
.participant-table .participant-table__name,
.participant-table .participant-table__team {
  --cs-cell-max-width: var(--team-table-name-width);
}

.participant-table .participant-table__institution,
.participant-table .participant-table__email {
  --cs-cell-max-width: var(--team-table-institution-width);
}

.cs-table__filter .participants__institution-filter {
  flex: 0 1 calc(1.5 * var(--cs-select-filter-width));
  min-width: 0;
}

.participants__institution-filter .cs-select {
  min-width: 0;
}

/* ---- Results & Rankings ---- */

/* Awards table: the row's action links stay on one line, as in the competitions table. */
.awards-table__actions .cs-space-between {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* The awards a team receives: badges that wrap, xxs apart. */
.results-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
}

/* Preview: the problems of a row that will not be imported, one per line. */
.results-preview__problems,
.results-without__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Import form: the example file keeps its line breaks and scrolls sideways on phones. */
.results-format__example {
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-body-s);
  white-space: pre;
}

/* ---- Certificate templates ---- */

/* The variables table of a template's page: names never break; long sample values (the
   contestants list) wrap anywhere instead of widening the container. */
.certificate-template__variables > tbody > tr > td:first-child {
  white-space: nowrap;
}

.certificate-template__variables > tbody > tr > td:last-child {
  overflow-wrap: anywhere;
}

/* ---- Certificates: generation, list, export ---- */

/* Overview: next steps (the status text and its buttons on one row, stacked on a phone). */
.cert-steps__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
}

.cert-steps.cs-columns--borders-horizontal {
  row-gap: var(--space-scaled-xs);
}

.cert-steps.cs-columns--borders-horizontal > * + * {
  padding-top: var(--space-scaled-xs);
}

@media (max-width: 688px) {
  .cert-steps__item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cert-empty,
.cert-note {
  margin: 0;
}

.cert-note {
  margin-top: var(--space-s);
  color: var(--color-text-body-secondary);
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
}

.cert-kinds__what,
.cert-kinds__templates {
  --cs-cell-max-width: 16rem;
}

/* Generation run: the progress meter, and the step form's fallback button. With JavaScript
   the step posts itself (htmx); "Continue" shows only when a request failed. */
.cert-progress__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

.cert-progress__meter {
  inline-size: min(100%, 24rem);
  block-size: var(--space-s);
  accent-color: var(--color-background-progress-bar-value-default);
}

.cert-step__continue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

.cert-step__stalled-text {
  margin: 0;
}

html.js .cert-step:not(.cert-step--stalled) .cert-step__continue,
html:not(.js) .cert-step__running,
html:not(.js) .cert-step__stalled-text,
.cert-step--stalled .cert-step__running,
.cert-step:not(.cert-step--stalled) .cert-step__stalled-text {
  display: none;
}

.cert-failure {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.cert-failure .log-excerpt {
  max-height: calc(var(--line-height-body-s) * 15);
}

/* List: the selection form wraps the table (its header holds the GET filter form), and its
   bar carries the selection's download buttons. */
.cert-list__selection {
  display: contents;
}

.cert-list__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-l);
}

.cert-table__recipient {
  --cs-cell-max-width: 18rem;
}

.cert-table__team,
.cert-table__institution,
.cert-table__template {
  --cs-cell-max-width: 14rem;
}

.cert-table__open {
  margin-inline-start: var(--space-xxs);
  font-size: var(--font-size-body-s);
}

@media (max-width: 1440px) {
  html:not(.cs-nav-closed) .cert-table__institution,
  html:not(.cs-nav-closed) .cert-table__template {
    display: none;
  }
}

@media (max-width: 1160px) {
  .cert-table__institution,
  .cert-table__template,
  .cert-table__generated {
    display: none;
  }
}

/* ---- Certificate emails ---- */

/* Long certificate labels ("Ana Quispe (Contestant), Team name - Gold medal") end in an
   ellipsis like the history table's Team column; the full text is in the cell's title. */
.certificate-history-table .certificate-history__certificate,
.certificate-send .certificate-send__label {
  --cs-cell-max-width: var(--history-table-team-width);
}

/* The kind / award choice of the send page: selects and Apply on one wrapping row. */
.certificate-send__filters {
  flex-wrap: wrap;
  align-items: center;
}

.certificate-send__selected {
  margin: 0;
}