/* Additions to Tabler for the console (P8.3). No inline styles anywhere: dynamic
   widths use the classes below. */
.brand { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .3px; }
.brand:hover { color: #fff; text-decoration: none; }
.topline { min-height: 3.25rem; }
.topline .container-xl { gap: .5rem; }
.custom-range input { width: 11.5rem; }

/* Charts drawn by console.js */
.chart-lg { height: 300px; }
.chart-md { height: 240px; }
.chart-sm { height: 180px; }
.chart-spark { height: 44px; margin-top: 6px; }
.chart-row { height: 22px; width: 96px; }
.chart-gauge { height: 150px; }

.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.plain { white-space: pre-wrap; word-break: break-word; }
.answer { font-size: 15px; line-height: 1.7; }
.w-rank { width: 45%; }
.facts th { width: 12%; color: var(--tblr-secondary); font-weight: 500; white-space: nowrap; }
.log-message { min-width: 280px; max-width: 560px; }
.log-table td { vertical-align: top; }
pre.stack { margin: 6px 0 0; padding: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
details > summary { cursor: pointer; color: var(--tblr-primary); }
.filters .form-label { margin-bottom: .25rem; }
.approval-focus { box-shadow: 0 0 0 2px var(--tblr-primary); }
.login-page { min-height: 100vh; }

/* progress widths in 5% steps: the CSP forbids style attributes */
.pw-0 { width: 0%; }
.pw-5 { width: 5%; }
.pw-10 { width: 10%; }
.pw-15 { width: 15%; }
.pw-20 { width: 20%; }
.pw-25 { width: 25%; }
.pw-30 { width: 30%; }
.pw-35 { width: 35%; }
.pw-40 { width: 40%; }
.pw-45 { width: 45%; }
.pw-50 { width: 50%; }
.pw-55 { width: 55%; }
.pw-60 { width: 60%; }
.pw-65 { width: 65%; }
.pw-70 { width: 70%; }
.pw-75 { width: 75%; }
.pw-80 { width: 80%; }
.pw-85 { width: 85%; }
.pw-90 { width: 90%; }
.pw-95 { width: 95%; }
.pw-100 { width: 100%; }

/* The product dropdown in the top bar */
.product-pick .form-select { min-width: 10rem; }

/* P10.3 F-11: abnormal containers on the ops page */
.containers tr.container-bad > td { background: rgba(214, 57, 57, .06); }
.containers .container-host.stale { background: rgba(214, 57, 57, .04); }

/* P8.5: the Ctrl+K panel (palette.js), the inbox and GitLab text shown as data */
.palette { width: min(40rem, 92vw); border: 0; border-radius: 8px; padding: 0;
           box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); }
.palette::backdrop { background: rgba(24, 36, 51, .45); }
.palette .list-group { max-height: 50vh; overflow-y: auto; }
.palette [hidden] { display: none !important; }
.inbox-group { font-size: .75rem; text-transform: none; letter-spacing: .02em; }
.inbox-actions form { display: inline; }
.ref { white-space: nowrap; }
.overdue { color: var(--tblr-red); font-weight: 600; }
.log-tail { max-height: 70vh; overflow: auto; }
.timeline-time { width: 3.5rem; color: var(--tblr-secondary); }

/* Phones (owner 2026-10-06: "手机版本布局都是乱的"). Desktop is unchanged. */
@media (max-width: 767.98px) {
  /* Top bar: the product on its own row; time range and search on one row; the switch
     shows its state and button only. */
  .topline .container-xl { gap: .375rem; padding-top: .375rem; padding-bottom: .375rem; }
  .topline .product-pick { flex: 1 1 100%; margin-right: 0 !important; }
  .topline .product-pick .form-select { width: 100%; }
  .topline .btn-group { flex-wrap: nowrap !important; }
  .topline [data-palette-open] kbd { display: none; }
  .topline .ms-auto { margin-left: 0 !important; flex: 1 1 100%; }
  .switch .switch-who { display: none; }

  /* Fact tables (label, value, label, value): one label and value per line. */
  .facts, .facts tbody { display: block; }
  .facts tr { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); }
  .facts th, .facts td { display: block; padding: .375rem .75rem; }
  .facts th { width: auto; }
  .facts td { overflow-wrap: anywhere; }

  /* List tables scroll sideways inside their card: the first column stays, and a shade
     on the right says there is more. */
  .table-responsive {
    background:
      linear-gradient(to left, var(--tblr-bg-surface) 30%, rgba(255, 255, 255, 0)) right center / 2rem 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) right center / .75rem 100% no-repeat scroll;
  }
  .card-table:not(.facts) th:first-child, .card-table:not(.facts) td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--tblr-bg-surface);
  }

  /* Long hashes, trace ids and links wrap instead of widening the page. */
  code, .font-monospace, .card-body a { overflow-wrap: anywhere; }
  .ref { white-space: normal; overflow-wrap: anywhere; }

  /* Cells of tables that scroll sideways stay on one line (times no longer break into a
     column of characters); long texts keep wrapping. */
  .table-responsive th, .table-responsive td { white-space: nowrap; }
  .table-responsive .plain, .table-responsive .log-message { white-space: pre-wrap; }
  .table-responsive .facts th, .table-responsive .facts td { white-space: normal; }

  /* Inbox rows: the title keeps the width; the buttons go to their own line. */
  .inbox-actions { flex: 1 1 100%; max-width: 100%; display: flex; flex-wrap: wrap; gap: .375rem;
                   justify-content: flex-end; }
  .inbox-actions form { display: inline-flex; }

  /* Forms laid out in a row: one field per line, full width. */
  form.row > .col, form.row > .col-auto, form.row > [class*="col-"] { flex: 1 1 100%; max-width: 100%; }
  form.row .form-label { width: 100%; }
  form.row > .col-auto > .btn { width: 100%; }

  /* Long lists keep the page short: they scroll inside their card. */
  .scroll-mobile { max-height: 60vh; overflow-y: auto; }
}