/* =========================================================
   TRIAGE TABLE V2
   Owner of queue/table-specific UI authority.
   ========================================================= */

/* =========================================================
   FOCUS PAGINATION V3
   One row. Controls left. Summary right.
   Replaces legacy .triage-pagination cemetery selectors.
   ========================================================= */

.focus-pagination-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* `wrap`, not the implicit `nowrap` default this rule never overrode:
     this row now holds three groups (Rows-per-page, Prev/page-numbers/
     Next, Showing text), not the two it was designed for, and real
     3-digit page counts (~100 pages for load-v2's ~1000 rows) can put up
     to 11 page/Prev/Next buttons in `.focus-pagination-v3__controls`
     alone. With `nowrap`, that combined width exceeding the row forced
     visual overlap instead of a second line. `row-gap` gives wrapped
     lines the same breathing room `gap` already gives same-line items. */
  flex-wrap: wrap;
  gap: 14px;
  row-gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 4px 0;
  border-top: 1px solid rgba(124, 154, 132, 0.12);
}

.focus-pagination-v3__controls {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* `wrap`: at very high page counts even this sub-group alone (Prev +
     up to 9 page-number buttons + "..." + Next) can exceed a narrow
     queue column's width — let it drop to a second internal line rather
     than overflow/overlap its neighbors. */
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 6px;
  min-width: 0;
}

.focus-pagination-v3__summary {
  order: 2;
  margin-left: auto;
  white-space: nowrap;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(151, 181, 163, 0.72);
}

.focus-pagination-v3__button {
  min-width: 34px;
  height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid rgba(124, 154, 132, 0.16);
  background: rgba(12, 31, 26, 0.58);
  color: rgba(221, 241, 230, 0.82);
  box-shadow: none;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.focus-pagination-v3__button:hover:not(:disabled) {
  border-color: rgba(143, 255, 201, 0.24);
  background: rgba(18, 43, 35, 0.72);
  color: rgba(238, 252, 245, 0.94);
}

.focus-pagination-v3__button--active {
  border-color: rgba(143, 255, 201, 0.28);
  background: rgba(26, 62, 49, 0.84);
  color: rgba(242, 255, 248, 0.96);
}

.focus-pagination-v3__button:disabled {
  opacity: 0.38;
  cursor: default;
}

body[data-theme="daylight"] .focus-pagination-v3 {
  border-top-color: rgba(48, 60, 52, 0.10);
}

body[data-theme="daylight"] .focus-pagination-v3__summary {
  color: rgba(43, 54, 47, 0.62);
}

body[data-theme="daylight"] .focus-pagination-v3__button {
  background: rgba(246, 244, 238, 0.94);
  border-color: rgba(52, 64, 56, 0.16);
  color: rgba(18, 28, 22, 0.88);
}

body[data-theme="daylight"] .focus-pagination-v3__button:hover:not(:disabled) {
  background: rgba(228, 232, 223, 0.96);
  border-color: rgba(78, 96, 82, 0.24);
  color: rgba(18, 28, 22, 0.94);
}

body[data-theme="daylight"] .focus-pagination-v3__button--active {
  background: linear-gradient(180deg, rgba(246,241,232,0.98), rgba(226,233,224,0.94));
  border-color: rgba(31,41,55,0.22);
  color: rgba(18,23,34,0.92);
}

@media (max-width: 760px) {
  .focus-pagination-v3 {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .focus-pagination-v3__summary {
    margin-left: 0;
  }

  .focus-pagination-v3__controls {
    flex-wrap: wrap;
  }
}

/* =========================================================
   FOCUS CONTROLS V3
   Owns Focus timeline / baseline / load controls.
   Replaces inline Rust styles.
   ========================================================= */

.focus-controls-v3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 0 0 auto;
}

.focus-controls-v3__divider {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: rgba(143, 255, 201, 0.10);
}

.focus-controls-v3__button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(124, 154, 132, 0.14);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(210, 224, 216, 0.62);
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
}

.focus-controls-v3__button:hover:not(.focus-controls-v3__button--disabled) {
  border-color: rgba(143, 255, 201, 0.18);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 240, 235, 0.84);
}

.focus-controls-v3__button--active {
  border-color: rgba(143, 255, 201, 0.20);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(238, 248, 242, 0.90);
}

.focus-controls-v3__button--disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

body[data-theme="daylight"] .focus-controls-v3__divider {
  background: rgba(48, 60, 52, 0.12);
}

body[data-theme="daylight"] .focus-controls-v3__button {
  border-color: rgba(52, 64, 56, 0.14);
  background: rgba(255, 255, 255, 0.62);
  color: rgba(30, 39, 33, 0.70);
}

body[data-theme="daylight"] .focus-controls-v3__button:hover:not(.focus-controls-v3__button--disabled) {
  border-color: rgba(78, 96, 82, 0.22);
  background: rgba(246, 244, 238, 0.94);
  color: rgba(18, 28, 22, 0.88);
}

body[data-theme="daylight"] .focus-controls-v3__button--active {
  border-color: rgba(31, 41, 55, 0.18);
  background: linear-gradient(180deg, rgba(246,241,232,0.96), rgba(226,233,224,0.90));
  color: rgba(18, 23, 34, 0.88);
}

@media (max-width: 760px) {
  .focus-controls-v3 {
    flex-wrap: wrap;
  }
}

/* Focus loading stability: reserve loaded table + pagination geometry. */
.triage-loading--stable {
  min-height: 548px;
}

.focus-pagination-v3--loading {
  pointer-events: none;
}

.focus-pagination-v3__skeleton-button {
  width: 34px;
  height: 32px;
  border-radius: 9px;
}

.focus-pagination-v3__skeleton-summary {
  width: 170px;
  height: 14px;
  border-radius: 8px;
}

/* Console pagination clarity + stable baseline */
.console-v3 .focus-pagination-v3 {
  min-height: 45px;
  align-items: center;
}

.console-v3 .focus-pagination-v3__button--active {
  border-color: rgba(45, 91, 70, 0.42) !important;
  background: linear-gradient(180deg, rgba(219, 232, 221, 0.98), rgba(192, 215, 198, 0.96)) !important;
  color: rgba(12, 26, 18, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 0 0 1px rgba(45, 91, 70, 0.10) !important;
}

/* Console table row geometry stabilization */
.console-v3 .focus-table .triage-table__row {
  height: 76px;
}

.console-v3 .focus-table td {
  height: 76px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.console-v3 .focus-table .triage-table__title {
  min-height: 38px;
  line-height: 1.18;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Console V3 stability authority: flat pagination, natural table height.
   No fixed-height floor (that's what caused the old dead-space void below
   a short page) and no scroll well of its own — pagination is the
   control that bounds row count; the wrap just grows to fit whatever
   pagination renders, inside the page's single scroll. */
.console-v3 .triage-table-card__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.console-v3 .triage-table-wrap {
  overflow: hidden;
}

.console-v3 .focus-table {
  height: auto;
}

.console-v3 .focus-pagination-v3 {
  flex: 0 0 45px;
  min-height: 45px;
  margin-top: 0;
  align-items: center;
}

.console-v3 .focus-pagination-v3__button--active {
  border-color: rgba(55, 72, 61, 0.28) !important;
  background: rgba(232, 236, 228, 0.92) !important;
  color: rgba(18, 26, 21, 0.92) !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-theme="night"] .console-v3 .focus-pagination-v3__button--active {
  border-color: rgba(143, 255, 201, 0.24) !important;
  background: rgba(255, 255, 255, 0.085) !important;
  color: rgba(238, 248, 242, 0.92) !important;
}

/* Focus timeline selected state — visible, flat, no casino pill */
.console-v3 .focus-controls-v3__button--active {
  border-color: rgba(143, 255, 201, 0.34);
  background: rgba(143, 255, 201, 0.115);
  color: rgba(242, 252, 247, 0.96);
  box-shadow: inset 0 -2px 0 rgba(143, 255, 201, 0.42);
}

body[data-theme="daylight"] .console-v3 .focus-controls-v3__button--active {
  border-color: rgba(46, 72, 56, 0.36);
  background: rgba(213, 225, 211, 0.96);
  color: rgba(13, 25, 18, 0.96);
  box-shadow: inset 0 -2px 0 rgba(46, 72, 56, 0.38);
}