/* ============================================================================
   okwin.css — OKWIN design system layer (2026-07-28, Wave 3)
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   The UI had grown 9 stylesheets (~4.7k lines), of which polish.css alone was
   1786 lines of accumulated per-screen overrides. Layout decisions lived in
   whichever file happened to load last, so every visual change was a guess.

   This layer is the LAST stylesheet loaded and owns exactly one thing:
   the shared LAYOUT + COMPONENT language (containers, cards, buttons,
   pagination, tables, forms, badges, empty states, nav placement).

   DELIBERATELY NOT TOUCHED — per Camell, keep as-is:
     • liquidglass.css  — the glass material + all motion/animation
     • the glass menu bar treatment and its transitions
   We only reposition/redistribute; we never restyle the glass itself.

   Everything below reuses the existing tokens from style.css (--glass-*,
   --accent, --r-*, --s*, --ease*). No new colour system is introduced, so the
   theme is unchanged — only the composition is.
   ========================================================================== */

:root {
  /* Layout rhythm — one scale, used by every surface below. */
  --ok-gutter: clamp(14px, 3.2vw, 26px);
  --ok-gap: var(--s4);
  --ok-gap-lg: var(--s6);
  --ok-card-pad: clamp(14px, 2.4vw, 20px);
  --ok-radius: var(--r-md);
  --ok-radius-lg: var(--r-lg);

  /* Content widths. Single source of truth for how wide anything may get. */
  --ok-w-narrow: 720px; /* forms, single-column reading */
  --ok-w-page: 1180px; /* default working width */
  --ok-w-wide: 1560px; /* leader dashboards on big monitors */

  /* Elevation ladder — 3 steps only, so depth reads consistently. */
  --ok-e1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 0, 0, 0.18);
  --ok-e2: 0 2px 6px rgba(0, 0, 0, 0.28), 0 14px 38px rgba(0, 0, 0, 0.3);
  --ok-e3: 0 6px 14px rgba(0, 0, 0, 0.34), 0 28px 70px rgba(0, 0, 0, 0.44);

  --ok-line: rgba(255, 255, 255, 0.1);
  --ok-line-soft: rgba(255, 255, 255, 0.06);
  --ok-hairline: 1px solid var(--ok-line);
}

/* ==========================================================================
   0z. TEXT CONTRAST — fix "text toàn bộ mờ"
   --------------------------------------------------------------------------
   Secondary/tertiary text was #E8E8F8 / #CCD0E8 (liquidglass.css). Over the
   busy background + translucent glass panels those read as dim grey — Camell
   flagged everything as mờ. Bump them, and stop generic .muted from using the
   dimmest tier. okwin.css loads last on BOTH staff and leader pages, so this
   lands everywhere.
   ========================================================================== */
:root {
  --text: #ffffff;
  --text-2: #eef0fb;
  --text-3: #c6cce4;
  /* Balance/stretch (Camell: "kéo dãn cân đều tổng thể"). polish.css applies
     `max-width: var(--content-max) !important` to .container + the appbar inner;
     redefining the variable here (okwin.css loads last) widens every page's
     content column so it uses the space instead of bunching in the middle,
     while staying centred and readable. */
  --content-max: clamp(1120px, 87vw, 1600px);
}
.muted {
  color: var(--text-2);
}
.tiny.muted,
.small.muted,
.muted-2 {
  color: var(--text-3);
}

/* ==========================================================================
   0a. BACKGROUND — calm it down everywhere, not just on the staff page
   --------------------------------------------------------------------------
   ROOT CAUSE (found 29/07): polish.css sets the background on
   `body[data-app="staff|leader|admin"]` with `background-blend-mode: soft-light`
   and NO dark overlay. That selector is more specific than a plain `body {}`,
   so every earlier attempt to calm the background from okwin.css was silently
   overridden on the actual logged-in pages — which is why the leader dashboard
   stayed "gớm". Match the same specificity here (okwin.css also loads last) and
   kill the soft-light blend so the mesh stops glowing through the content.
   ========================================================================== */
body,
body[data-app="staff"],
body[data-app="leader"],
body[data-app="admin"] {
  background-color: #0b0f18;
  background-image:
    radial-gradient(
      1100px 640px at 86% -10%,
      rgba(96, 175, 255, 0.08),
      transparent 60%
    ),
    linear-gradient(rgba(10, 13, 24, 0.93), rgba(8, 11, 20, 0.965)),
    url(assets/main_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: normal;
}

/* ==========================================================================
   0. KPI STAT CARDS — redesigned 2026-07-28
   --------------------------------------------------------------------------
   The old cards read badly: `.kpi` was styled across FOUR files (cards.css 5
   rules, leader.css 29, liquidglass.css 10, polish.css 10 = 54 competing
   rules). The result was a tall box with a fixed min-height, the sub-line
   pinned to the bottom with `margin-top:auto`, and a hard `repeat(3, 1fr)`
   grid — so on a wide screen each card stretched into a mostly-empty slab
   with the number stranded at the top and the caption far below it.

   Fixes here, in one place, at higher specificity so it actually lands:
     • number + label sit TOGETHER as one unit (that is the reading order)
     • no min-height, no bottom-pinned sub-line → the card is as tall as its
       content, so nine cards no longer look like nine empty panels
     • auto-fit columns with a sane min width instead of a hard 3-up
     • a 3px status rail carries the good/warn/bad meaning, so colour is not
       doing the job alone at 11px
   ========================================================================== */

.kpi-grid,
#kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  gap: 0;
  align-items: stretch;
  /* ONE cohesive stats panel instead of nine floating boxes (Camell: "dẹp cái
     card box"). A single near-solid backing also gives every number/label a
     crisp surface — part of the "text mờ" fix. */
  background: rgba(16, 20, 30, 0.82);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--ok-radius-lg);
  box-shadow: var(--ok-e1);
  overflow: hidden;
}

.kpi-grid .kpi,
#kpi-grid .kpi {
  position: relative;
  min-height: 0;
  padding: 12px 16px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: transparent;
  border: 0;
  /* internal hairline dividers make it read as a table of stats, not tiles */
  border-right: 1px solid var(--ok-line-soft);
  border-bottom: 1px solid var(--ok-line-soft);
  box-shadow: none;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease);
}
/* Status rail — the semantic signal, readable before any text is parsed. */
.kpi-grid .kpi::before,
#kpi-grid .kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--text-3);
  opacity: 0.35;
}
.kpi-grid .kpi:hover,
#kpi-grid .kpi:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* Number: the primary object. Tabular so columns of digits line up. */
.kpi-grid .kpi .kpi__val,
#kpi-grid .kpi .kpi__val {
  font-size: clamp(1.45rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 0;
  min-height: 0;
  display: block;
}

/* Label: identifies the number. Bright so it is never the dim part. */
.kpi-grid .kpi .kpi__label,
#kpi-grid .kpi .kpi__label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sub: context. Uses the mid tier (not the dimmest) so it stays legible. */
.kpi-grid .kpi .kpi__sub,
#kpi-grid .kpi .kpi__sub {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-3);
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Semantic variants — rail + number colour together. */
.kpi-grid .kpi--good::before,
#kpi-grid .kpi--good::before {
  background: var(--success);
  opacity: 1;
}
.kpi-grid .kpi--good .kpi__val,
#kpi-grid .kpi--good .kpi__val {
  color: var(--success);
}
.kpi-grid .kpi--warn::before,
#kpi-grid .kpi--warn::before {
  background: var(--warn);
  opacity: 1;
}
.kpi-grid .kpi--warn .kpi__val,
#kpi-grid .kpi--warn .kpi__val {
  color: var(--warn);
}
.kpi-grid .kpi--bad::before,
#kpi-grid .kpi--bad::before {
  background: var(--danger);
  opacity: 1;
}
.kpi-grid .kpi--bad .kpi__val,
#kpi-grid .kpi--bad .kpi__val {
  color: var(--danger);
}
/* A zero is not an alarm — only colour the number when there is something
   to act on. Keeps a board of zeroes calm instead of a wall of red. */
.kpi-grid .kpi--bad.kpi--zero .kpi__val,
#kpi-grid .kpi--bad.kpi--zero .kpi__val {
  color: var(--text);
}
.kpi-grid .kpi--bad.kpi--zero::before,
#kpi-grid .kpi--bad.kpi--zero::before {
  background: var(--text-3);
  opacity: 0.35;
}
/* Needs attention → a soft pulse on the rail only. */
.kpi-grid .kpi--alert:not(.kpi--zero)::before,
#kpi-grid .kpi--alert:not(.kpi--zero)::before {
  animation: ok-rail-pulse 2.2s var(--ease) infinite;
}
@keyframes ok-rail-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ==========================================================================
   1. PAGE SHELL — where content sits, and how wide it may grow
   ========================================================================== */

.view {
  width: 100%;
  max-width: var(--ok-w-page);
  margin-inline: auto;
  padding-inline: var(--ok-gutter);
  padding-block: var(--ok-gap);
}
.view--narrow {
  max-width: var(--ok-w-narrow);
}
.view--wide {
  max-width: var(--ok-w-wide);
}

/* ──────────────────────────────────────────────────────────────────────────
   APP BAR — the sticky glass strip above every page.
   Replaces the old "one big <h1> floating over the content" header. It gives
   three fixed slots so a page never has to invent its own header layout:
     [ product / page breadcrumb ]  ......  [ page actions ]
   The glass material + blur come from the same tokens as liquidglass.css, so
   this reads as the same surface as the menu bar rather than a second style.
   ────────────────────────────────────────────────────────────────────────── */
.app-header,
.ok-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(15, 17, 21, 0.72);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--ok-line);
}
.app-header__inner,
.ok-appbar > .row,
.ok-appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  max-width: var(--ok-w-page);
  margin-inline: auto;
  padding-inline: var(--ok-gutter);
  min-height: var(--header-h);
}
.view--wide ~ .app-header .app-header__inner,
.app-header--wide .app-header__inner {
  max-width: var(--ok-w-wide);
}

/* Breadcrumb: product name, separator, current page. The page name is the only
   part that changes, so it is the only part that animates on tab switch. */
.ok-appbar__id {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.ok-appbar__sep {
  color: var(--text-3);
  font-weight: 400;
}
.ok-appbar__page {
  color: var(--text-2);
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ok-appbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-inline-start: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Empty action slot must not reserve space or push the breadcrumb around. */
.ok-appbar__actions:empty {
  display: none;
}

/* Page title swap animation — subtle, matches the glass motion language. */
.title-swap {
  animation: ok-title-in var(--t-mid) var(--ease-out);
}
@keyframes ok-title-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Main content column. Bottom padding clears the fixed mobile glass bar. */
.app-main {
  display: block;
  width: 100%;
  min-height: 0;
  padding-block-end: var(--ok-gap-lg);
}

.ok-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  max-width: var(--ok-w-page);
  margin-inline: auto;
  padding: var(--ok-gap) var(--ok-gutter) calc(var(--ok-gap-lg) + 12px);
  border-top: 1px solid var(--ok-line-soft);
  color: var(--text-3);
  font-size: 0.76rem;
}

/* Vertical rhythm: the single spacing rule the whole app obeys. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--ok-gap);
}
.stack--tight {
  gap: var(--s2);
}
.stack--loose {
  gap: var(--ok-gap-lg);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.row--between {
  justify-content: space-between;
}
.row--wrap {
  flex-wrap: wrap;
}
.row--end {
  justify-content: flex-end;
}
.row--top {
  align-items: flex-start;
}
.grow {
  flex: 1 1 auto;
  min-width: 0;
}
.spacer {
  flex: 1 1 auto;
}

/* Section header — a consistent title/action bar above every block. */
.ok-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-block-end: var(--s2);
  border-bottom: var(--ok-hairline);
  margin-block-end: var(--s1);
}
.ok-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
}
.ok-section__title h2,
.ok-section__title .h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.ok-section__count {
  font-size: 0.76rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ok-section__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* ==========================================================================
   2. CARDS — one card language, three densities
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--ok-card-pad);
  border-radius: var(--ok-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--ok-e1);
  /* Motion is inherited from the glass layer; we only animate composition. */
  transition:
    transform var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out);
}
/* Top light edge — the signature glass highlight, kept from the existing theme. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--glass-hi), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.card--tight {
  padding: calc(var(--ok-card-pad) * 0.68);
  gap: var(--s2);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
.card--quiet {
  background: var(--ok-line-soft);
  box-shadow: none;
}

/* Only interactive cards lift — a static card that moves is noise. */
.card--link,
.card[role="button"],
a.card {
  cursor: pointer;
}
.card--link:hover,
.card[role="button"]:hover,
a.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ok-e2);
  border-color: var(--glass-hi);
}
.card--link:active,
.card[role="button"]:active,
a.card:active {
  transform: translateY(0);
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.card__title {
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  min-width: 0;
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}
.card__foot {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding-block-start: var(--s2);
  border-top: 1px solid var(--ok-line-soft);
}

/* Auto-fitting card grid — replaces the ad-hoc inline grid-template-columns
   that were scattered through the markup. */
.ok-grid {
  display: grid;
  gap: var(--ok-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.ok-grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.ok-grid--lg {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

/* Metric tile — the small number blocks on dashboards. */
.ok-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) var(--s4);
  border-radius: var(--ok-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.ok-metric__value {
  font-size: clamp(1.28rem, 2.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ok-metric__label {
  font-size: 0.72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ok-metric--accent .ok-metric__value {
  color: var(--accent-2);
}
.ok-metric--good .ok-metric__value {
  color: var(--success);
}
.ok-metric--warn .ok-metric__value {
  color: var(--warn);
}
.ok-metric--bad .ok-metric__value {
  color: var(--danger);
}

/* ==========================================================================
   3. BUTTONS — one geometry, explicit variants
   ========================================================================== */

.btn {
  --_h: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--_h);
  padding-inline: 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-2);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}
.btn:hover {
  background: var(--glass-bg-2);
  border-color: var(--glass-hi);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.985);
}
.btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--sm {
  --_h: 30px;
  padding-inline: 11px;
  font-size: 0.8rem;
}
.btn--lg {
  --_h: 46px;
  padding-inline: 22px;
  font-size: 0.95rem;
}
.btn--block {
  display: flex;
  width: 100%;
}

.btn--primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 4px 14px var(--accent-soft);
}
.btn--primary:hover {
  box-shadow: 0 8px 22px var(--accent-soft);
  border-color: transparent;
}

.btn--ghost {
  background: transparent;
  border-color: var(--ok-line);
  color: var(--text-2);
}
.btn--ghost:hover {
  background: var(--glass-bg);
  color: var(--text);
}

.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn--quiet:hover {
  background: var(--glass-bg);
  color: var(--text);
}

.btn--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}
.btn--danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn--success {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}
.btn--success:hover {
  background: var(--success);
  color: #06210f;
}

.btn--icon {
  --_h: 36px;
  width: var(--_h);
  padding-inline: 0;
  border-radius: var(--r-pill);
}
.btn--icon.btn--sm {
  --_h: 30px;
}

/* Segmented control — replaces rows of look-alike toggle buttons. */
.ok-segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: var(--ok-line-soft);
  border: 1px solid var(--ok-line);
}
.ok-segment > button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 560;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.ok-segment > button:hover {
  color: var(--text);
}
.ok-segment > button[aria-selected="true"],
.ok-segment > button.is-active {
  background: var(--glass-bg-2);
  color: var(--text);
  box-shadow: var(--ok-e1);
}

/* Toolbar — the action strip that sits above lists/tables. */
.ok-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s2);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.ok-toolbar .grow {
  min-width: 160px;
}

/* ==========================================================================
   4. PAGINATION — a real component (was ad-hoc "load more" buttons)
   ========================================================================== */

.ok-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-block-start: var(--s3);
  margin-block-start: var(--s1);
  border-top: var(--ok-hairline);
}
.ok-pager__info {
  font-size: 0.78rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ok-pager__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ok-pager__page {
  min-width: 34px;
  height: 34px;
  padding-inline: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.ok-pager__page:hover {
  background: var(--glass-bg);
  color: var(--text);
}
.ok-pager__page[aria-current="page"],
.ok-pager__page.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 650;
}
.ok-pager__page[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}
.ok-pager__gap {
  color: var(--text-3);
  padding-inline: 2px;
  -webkit-user-select: none;
  user-select: none;
}

/* ==========================================================================
   5. TABLES — readable at any width, sticky header, no horizontal surprise
   ========================================================================== */

.ok-table-wrap,
.res-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--ok-radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.ok-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
}
.ok-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(20, 22, 28, 0.92);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  text-align: left;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px;
  border-bottom: var(--ok-hairline);
  white-space: nowrap;
}
.ok-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--ok-line-soft);
  vertical-align: middle;
}
.ok-table tbody tr:last-child td {
  border-bottom: 0;
}
.ok-table tbody tr {
  transition: background var(--t-fast) var(--ease);
}
.ok-table tbody tr:hover {
  background: var(--ok-line-soft);
}
.ok-table .num,
.th-center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ok-table .ok-cell-strong {
  font-weight: 600;
}

/* ==========================================================================
   6. FORMS — aligned controls, same height as buttons
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.input,
.textarea,
select.input {
  width: 100%;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}
.input:focus,
.textarea:focus,
select.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
.ok-form-grid {
  display: grid;
  gap: var(--ok-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* ==========================================================================
   7. BADGES / PILLS / STATUS
   ========================================================================== */

.pill,
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--ok-line-soft);
  border: 1px solid var(--ok-line);
  color: var(--text-2);
}
.pill--ok,
.badge--ok {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}
.pill--warn,
.badge--warn {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn);
}
.pill--bad,
.badge--bad {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}
.pill--info,
.badge--info {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-2);
}
/* "ours, but only by key match" — same family as pill--ok so the reader groups it
   with our own brands, outlined + dimmer so it still reads as needs-checking. */
.pill--maybe {
  background: transparent;
  border-color: rgba(48, 209, 88, 0.4);
  color: rgba(48, 209, 88, 0.85);
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   7b. CHECK-BRAND · SERP — favicons (logo), full hậu-đài URLs
   The table was replaced by a Google-style .serp-row list. These rules add the
   site logos (favicons) Camell asked for and let each hậu-đài chip show its
   FULL url without blowing the row width.
   -------------------------------------------------------------------------- */
/* brand logo in the "Bảng xếp hạng" header */
.cb-brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}
/* per-result favicon at the start of the meta line (like modern Google) */
.serp-row__favicon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
}
/* hậu-đài chip: favicon + label + FULL url. Let long urls wrap instead of being
   clipped — Camell wants the whole url visible. The dot marker is redundant once
   there is a favicon, so drop it. */
.hd-cta {
  max-width: 100%;
  align-items: center;
}
.hd-cta::before {
  display: none;
}
.hd-cta__ico {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  object-fit: contain;
  flex: 0 0 auto;
}
.hd-cta__dom {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Banner — inline notice above content. */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 12px 14px;
  border-radius: var(--ok-radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: 0.86rem;
  line-height: 1.5;
  border-left-width: 3px;
}
.banner--info {
  border-left-color: var(--accent);
}
.banner--warn {
  border-left-color: var(--warn);
}
.banner--bad,
.banner--danger {
  border-left-color: var(--danger);
}
.banner--ok,
.banner--success {
  border-left-color: var(--success);
}

/* ==========================================================================
   8. EMPTY / LOADING STATES — every list gets the same treatment
   ========================================================================== */

.ok-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: clamp(28px, 7vw, 56px) var(--s4);
  text-align: center;
  color: var(--text-3);
  border-radius: var(--ok-radius);
  border: 1px dashed var(--ok-line);
}
.ok-empty__icon {
  font-size: 1.9rem;
  opacity: 0.55;
}
.ok-empty__title {
  color: var(--text-2);
  font-weight: 600;
}
.ok-empty__hint {
  font-size: 0.82rem;
  max-width: 46ch;
}

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--ok-line-soft) 25%,
    var(--glass-bg-2) 37%,
    var(--ok-line-soft) 63%
  );
  background-size: 400% 100%;
  animation: ok-shimmer 1.4s var(--ease) infinite;
}
.skeleton--line {
  height: 12px;
}
.skeleton--card {
  height: 92px;
}
@keyframes ok-shimmer {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

/* ==========================================================================
   9. NAVIGATION PLACEMENT
   The glass material + motion stay in liquidglass.css / sidebar.css.
   Here we only fix WHERE things sit and how they reflow.
   ========================================================================== */

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  min-width: 0;
}
.sidebar-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-item__metric {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--ok-line-soft);
}
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.icon-tile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ok-line-soft);
  font-size: 0.95rem;
}

/* Mobile: a real bottom action bar instead of a cramped top row. */
@media (max-width: 720px) {
  .ok-section {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s2);
  }
  .ok-section__actions {
    width: 100%;
  }
  .ok-section__actions .btn {
    flex: 1 1 auto;
  }
  .ok-pager {
    justify-content: center;
  }
  .ok-pager__info {
    width: 100%;
    text-align: center;
    order: 2;
  }
  .view {
    padding-block: var(--s3);
  }
  /* Keep the last action row clear of the fixed glass bar. */
  .view > .stack:last-child {
    padding-block-end: 76px;
  }
}

/* ==========================================================================
   10. UTILITIES + ACCESSIBILITY
   ========================================================================== */

.hidden,
[hidden] {
  display: none !important;
}
.tiny {
  font-size: 0.74rem;
}
.small {
  font-size: 0.82rem;
}
.muted {
  color: var(--text-2);
}
.muted-2,
.muted--dim {
  color: var(--text-3);
}
.h1 {
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.h2 {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}
.ok-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ok-nums {
  font-variant-numeric: tabular-nums;
}

/* Respect the OS setting — the glass motion is decorative, never required. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}