/* The Admin section: Activity and Logs.
 *
 * Numbers from the handoff ADMIN, sections 3 and 5. Two lists that look alike
 * on purpose - same shell, same hairlines - and differ where the reader does:
 * Activity is sentences in Inter, Logs is key=value in mono.
 */

/* The sub-tab pair. Pills, not the nav rail: the rail is for top-level
   sections and Admin is one section with two views. */
.sub-tabs {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  margin-bottom: 20px;
  border: 1px solid var(--c-neutral-2);
  border-radius: 100px;
}

.sub-tab {
  padding: 7px 18px;
  border-radius: 100px;
  text-decoration: none;
  font: var(--t-body-small-400);
  color: var(--c-neutral-10);
}

.sub-tab-on {
  background: var(--c-neutral-2);
  color: var(--c-white);
}

/* The filter row is this section's own. The meetings list has a `.filters`
   with four columns, and putting five fields into it is what made this screen
   fall apart: the last two wrapped underneath and took the layout with them. */
.admin-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 210px 210px 180px;
  column-gap: 16px;
  row-gap: 12px;
  padding-bottom: 20px;
}

.admin-filters-logs {
  grid-template-columns: minmax(0, 1fr) 170px 180px;
}

/* The field labels only. Written as `.admin-filters label` once, which also
   caught the level chips - they are labels too - and made each of them a
   block box, so the gap between the word and its count disappeared. */
.admin-filters .field > label {
  display: block;
  font: var(--t-body-small-400);
  color: var(--c-neutral-9);
  margin-bottom: 6px;
}

.field-chips {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .admin-filters,
  .admin-filters-logs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Activity columns, and the log ones under them. Both keep the middle column
   flexible and everything else fixed, so a long message cannot push the
   timestamp off the row. */
/* Both grids keep the middle column flexible and everything else fixed, so a
   long message cannot push the timestamp off the row. */
.admin-grid {
  display: grid;
  grid-template-columns: 82px 196px minmax(0, 1fr) 118px 260px;
  column-gap: 16px;
  align-items: center;
}

.log-grid {
  display: grid;
  grid-template-columns: 170px 74px 130px minmax(0, 1fr) 110px;
  column-gap: 16px;
  align-items: baseline;
}

.admin-row {
  padding: 8px 20px;
  border-bottom: 1px solid var(--c-neutral-2);
}

.log-row {
  padding: 9px 20px;
  border-bottom: 1px solid var(--c-neutral-2);
}

/* The column names, on their own hairline above the list. */
.admin-head {
  padding: 0 20px 8px;
  border-bottom: 1px solid var(--c-neutral-2);
  font: var(--t-body-small-400);
  color: var(--c-neutral-9);
}

.day-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 8px;
  font: var(--t-body-small-400);
  color: var(--c-neutral-11);
}

/* The rule runs from the date to the count, which is what carries the eye
   across an otherwise empty band. */
.day-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-neutral-2);
}

.day-count {
  color: var(--c-neutral-9);
  order: 3;
}


.admin-time,
.log-at {
  font: var(--t-code-300);
  color: var(--c-neutral-10);
}

.admin-what {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-white);
}

/* The dot follows the event's category, never the log level: a meeting that
   ended is not a warning. */
.cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 6px;
  background: var(--c-neutral-8);
}

/* The names are the ones `Category::as_str` writes. They were invented here
   once and matched nothing, so every dot on the real screen fell back to grey
   while the sample data looked right - which is how a colour scheme can be
   wrong and pass a reading of the code. */
.cat-created { background: var(--c-blue, #4c7dff); }
.cat-started { background: var(--c-green, #2bbf8a); }
/* Finishing normally is not the colour of failure, and not the colour of
   something new either: a meeting that ended is the quiet one. */
.cat-ended { background: var(--c-neutral-8); }
.cat-broken { background: var(--c-red, #e5484d); }
.cat-administration { background: var(--c-violet, #7c5cff); }

.admin-details {
  color: var(--c-neutral-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-details strong {
  color: var(--c-white);
}

.admin-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-who-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-neutral-13);
}

.admin-who-note {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-guest {
  font-style: normal;
}

.badge-admin-module {
  border-color: var(--c-violet, #7c5cff);
  color: var(--c-violet-light, #8b7dff);
}

/* The level is a word in its colour, not a badge: a pill outline repeated a
   thousand times down a column reads as a dotted texture. */
.log-level {
  font: var(--t-code-400);
}

.log-error { color: var(--c-red, #e5484d); }
.log-warn { color: var(--c-orange, #f5a524); }
.log-info { color: var(--c-violet-light, #8b7dff); }
.log-debug { color: var(--c-neutral-8); }

.log-module {
  font: var(--t-code-300);
  color: var(--c-neutral-11);
}

.log-message {
  font: var(--t-code-300);
  color: var(--c-neutral-13);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Off by default: scanning a thousand rows needs a fixed row height. */
.log-wrap .log-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: visible;
}

.log-trace a {
  font: var(--t-code-300);
  color: var(--c-neutral-8);
}

.level-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--c-neutral-3);
  border-radius: 100px;
  white-space: nowrap;
  font: var(--t-body-small-400);
  color: var(--c-neutral-11);
  cursor: pointer;
  opacity: 0.45;
}

/* Named for this screen rather than reusing `.chip`, which is the design
   system's filter chip with a remove button on it. Borrowing a component's
   class name and then redefining half of it is how this row ended up with
   native checkboxes in it. */

/* The tick is the pill, not a box beside it. Left in the document for the
   keyboard and for a form with no script; drawn nowhere. */
.level-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.level-chip:has(input:checked) {
  opacity: 1;
}

.level-chip:has(input:focus-visible) {
  outline: 2px solid var(--c-violet-light, #8b7dff);
  outline-offset: 2px;
}

.level-chip em {
  font-style: normal;
  color: var(--c-neutral-9);
}

.level-chip-error { border-color: var(--c-red, #e5484d); color: var(--c-red, #e5484d); }
.level-chip-warn { border-color: var(--c-orange, #f5a524); color: var(--c-orange, #f5a524); }
.level-chip-info { border-color: var(--c-violet-light, #8b7dff); color: var(--c-violet-light, #8b7dff); }
.level-chip-debug { border-color: var(--c-neutral-3); color: var(--c-neutral-8); }