/* ===========================================================================
   Squadli UI layer — design tokens + component styles.
   Loaded AFTER adminlte.min.css so it wins without !important where possible.
   Dark mode piggybacks on AdminLTE's existing `body.dark-mode` class, so the
   built-in toggle keeps working untouched.
   =========================================================================== */

:root {
  /* Brand */
  --sq-primary:        #6366F1;
  --sq-primary-600:    #4F46E5;
  --sq-primary-050:    #EEF2FF;
  --sq-accent:         #059669;
  --sq-accent-050:     #ECFDF5;

  /* Surfaces — low-chroma neutrals. A saturated tint across a full-screen
     background is fatiguing over a long session; these keep the hue cue while
     dropping most of the chroma. */
  --sq-bg:             #F4F6F8;
  --sq-card:           #FFFFFF;
  --sq-border:         #E3E8EF;
  --sq-muted:          #F1F4F8;   /* subtle fill: hovers, modal footer, chips */

  /* Text */
  --sq-fg:             #1B2333;
  --sq-muted-fg:       #5A6678;

  /* Status */
  --sq-danger:         #DC2626;
  --sq-warning:        #B45309;
  --sq-ring:           #6366F1;

  /* Dense dashboard spacing scale */
  --sq-space-1: 8px;  --sq-space-2: 12px; --sq-space-3: 16px;
  --sq-space-4: 24px; --sq-space-5: 32px;

  --sq-chrome-h: calc(3.5rem + 1px);
  --sq-radius: 10px;
  --sq-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sq-shadow-lg: 0 4px 6px -2px rgba(16,24,40,.05), 0 12px 16px -4px rgba(16,24,40,.10);
  --sq-transition: 160ms cubic-bezier(.4,0,.2,1);
}

body.dark-mode {
  /* Neutral dark rather than deep navy: less blue cast, and surfaces lifted off
     pure black to reduce halation around light text. */
  --sq-bg:        #16181D;
  --sq-card:      #1F2228;
  --sq-border:    #31363F;
  --sq-muted:     #272B33;
  --sq-fg:        #E6E8EC;
  --sq-muted-fg:  #9BA3AF;
  --sq-warning:   #F59E0B;   /* the light-mode amber drops under 3:1 on dark surfaces */
  --sq-primary-050: #312E81;
  --sq-accent-050:  #064E3B;
  --sq-shadow:    0 1px 2px rgba(0,0,0,.4);
  --sq-shadow-lg: 0 12px 16px -4px rgba(0,0,0,.5);
}

/* --- Focus: never remove, always visible (WCAG 2.2) ---------------------- */
.sq-scope a:focus-visible,
.sq-scope button:focus-visible,
.sq-scope input:focus-visible,
.sq-scope select:focus-visible,
.sq-scope textarea:focus-visible,
.sq-stat:focus-visible {
  outline: 2px solid var(--sq-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===========================  STAT TILES  ================================ */
/* Replaces the 7 unrelated saturated fills. One neutral card; colour is
   carried by a small icon chip and used semantically, not decoratively.     */

.sq-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sq-space-2);
}
/* Default auto-fit suits a handful of tiles that fit one row. A page whose
   count would strand an orphan (seven tiles land 6 + 1) opts into a fixed
   column count instead, so the last row reads as deliberate. */
.sq-stat-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 1100px) {
  .sq-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.sq-stat {
  display: flex;
  align-items: center;
  gap: var(--sq-space-2);
  padding: var(--sq-space-3);
  background: var(--sq-card);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow);
  transition: box-shadow var(--sq-transition), transform var(--sq-transition);
  min-height: 88px;
}
a.sq-stat { text-decoration: none; cursor: pointer; }
a.sq-stat:hover { box-shadow: var(--sq-shadow-lg); transform: translateY(-1px); }

.sq-stat__chip {
  flex: 0 0 auto;
  width: 44px; height: 44px;              /* 44px min touch target */
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--sq-primary-050);
  color: var(--sq-primary-600);
  font-size: 20px; line-height: 1;
}
.sq-stat__body { min-width: 0; }

/* Value dominates the label — the old cards had this inverted. */
.sq-stat__value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sq-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.sq-stat__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sq-muted-fg);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Semantic variants — meaning, not decoration */
.sq-stat--accent  .sq-stat__chip { background: var(--sq-accent-050);  color: var(--sq-accent); }
.sq-stat--muted   .sq-stat__chip { background: var(--sq-border);      color: var(--sq-muted-fg); }

/* ===========================  CARDS  ===================================== */
.sq-card {
  background: var(--sq-card);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow);
  overflow: hidden;
}
.sq-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sq-space-2);
  padding: var(--sq-space-2) var(--sq-space-3);
  border-bottom: 1px solid var(--sq-border);
}
.sq-card__title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--sq-fg);
}
.sq-card__body { padding: var(--sq-space-3); }

/* ===========================  TOOLBAR  =================================== */
/* The old filter row was a tall empty bar with one floated select. */
.sq-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sq-space-2);
  margin-bottom: var(--sq-space-3);
}
.sq-toolbar__spacer { flex: 1 1 auto; }
.sq-toolbar label { margin: 0; font-size: 13px; color: var(--sq-muted-fg); font-weight: 500; }
.sq-toolbar select.form-control {
  width: auto; min-width: 170px; min-height: 44px;
  border-radius: 8px; border-color: var(--sq-border);
  color: var(--sq-fg); background-color: var(--sq-card);
}

/* Page title */
.sq-page-title {
  font-size: 22px; font-weight: 700; color: var(--sq-fg);
  margin: 0; letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  .sq-stat, a.sq-stat:hover { transition: none; transform: none; }
}

/* ===========================  SIDEBAR NAV  ===============================
   The sidebar stays dark in both themes (deliberate: it reads as chrome, not
   content, and keeps the brand anchor stable when the user flips dark mode).
   ======================================================================== */

.main-sidebar.sidebar-dark-primary { background: #131A2B; }
body.dark-mode .main-sidebar.sidebar-dark-primary { background: #0B1120; }

/* Brand row and the navbar are one continuous band across the top, so they
   share an explicit height instead of each falling out of its own padding. */
.main-header.navbar { min-height: var(--sq-chrome-h); padding: 0 12px; }
.main-sidebar .brand-link {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--sq-chrome-h);
  padding: 0 16px;
  /* AdminLTE repaints this #343a40 under every layout-*-navbar-fixed variant
     at 4-5 class specificity, which is what made the logo band a different
     grey from the sidebar under it. !important is the only sane answer. */
  background-color: transparent !important;
  border-bottom: 1px solid rgba(148,163,184,.14);
  transition: background var(--sq-transition);
}
.main-sidebar .brand-link:hover { background: rgba(148,163,184,.08); }
.main-sidebar .brand-link .brand-image-sq {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 8px; object-fit: contain;
}
.main-sidebar .brand-link .brand-text {
  font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: #F1F5F9;
  margin: 0;
}

/* User panel: avatar, name and role read as one block. */
.main-sidebar .user-panel {
  align-items: center; gap: 10px;
  padding: 0 16px 14px !important;
  border-bottom: 1px solid rgba(148,163,184,.14);
}
.main-sidebar .user-panel .image { padding: 0; }
.main-sidebar .user-panel .info { padding: 0; line-height: 1.25; }
/* Over-qualified on purpose: AdminLTE ships `.user-panel img{height:auto;
   width:2.1rem}`, which out-specifies a lone `.sq-avatar`. With height:auto a
   portrait photo stays taller than it is wide, and border-radius:50% then draws
   an ellipse rather than a circle. Equal width and height plus object-fit make
   the frame square and crop the photo into it. */
.main-sidebar .user-panel .sq-avatar,
.sq-avatar {
  width: 36px; height: 36px; object-fit: cover; object-position: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(148,163,184,.28);
  transition: box-shadow var(--sq-transition);
}
.main-sidebar .user-panel a:hover .sq-avatar { box-shadow: 0 0 0 2px var(--sq-primary); }
.main-sidebar .user-panel .info a {
  color: #E2E8F0; font-weight: 600; font-size: 14px; letter-spacing: -.01em;
}
.main-sidebar .user-panel .info a:hover { color: #fff; }
.sq-userpanel__role {
  display: block; font-size: 11px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: #8E9BB0;
}

/* ==========================  HEADER ICON BUTTONS  ======================== */
/* The hamburger was a bare <i> with no hit target, and dark mode was a
   Bootstrap switch whose label ate a third of the bar. Both are now the same
   40px square control. */
.sq-chrome-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--sq-muted-fg);
  font-size: 16px; line-height: 1; cursor: pointer; text-decoration: none;
  transition: background var(--sq-transition), color var(--sq-transition),
              border-color var(--sq-transition);
}
.sq-chrome-btn:hover,
.sq-chrome-btn:focus { background: var(--sq-muted); color: var(--sq-fg); text-decoration: none; }
.sq-chrome-btn:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.sq-chrome-btn--danger:hover { color: var(--sq-danger); }
/* The sun/moon swaps on click; a short rotation makes the swap legible. */
.sq-chrome-btn[aria-pressed] i { transition: transform 220ms cubic-bezier(.2,.9,.3,1); }
.sq-chrome-btn[aria-pressed]:hover i { transform: rotate(-18deg); }
.sq-chrome-actions { display: flex; align-items: center; gap: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sq-chrome-btn i, .main-sidebar .brand-link { transition: none; }
}

/* Section headings give 10 flat links a scannable structure. */
.sq-nav__section {
  margin: 18px 0 6px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8E9BB0;   /* lifted from #64748B: that was 3.96:1 on the sidebar, below the 4.5:1 minimum */
}
.sq-nav__section:first-child { margin-top: 8px; }

.nav-sidebar .nav-item { margin: 0 8px 2px; }

.nav-sidebar .nav-link {
  display: flex; align-items: center; gap: 12px;
  min-height: 42px;                       /* comfortable pointer + touch target */
  padding: 8px 12px;
  border-radius: 8px;
  color: #94A3B8;
  font-size: 14px; font-weight: 500;
  position: relative;
  transition: background var(--sq-transition), color var(--sq-transition);
}
.nav-sidebar .nav-link .nav-icon {
  width: 18px; font-size: 15px; text-align: center; flex: 0 0 auto; margin: 0;
}
.nav-sidebar .nav-link p { margin: 0; }

.nav-sidebar .nav-link:hover { background: rgba(148,163,184,.10); color: #E2E8F0; }

/* Active: tint + a left accent bar, so state is not carried by colour alone. */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link[aria-current="page"] {
  background: rgba(99,102,241,.16);
  color: #fff;
  font-weight: 600;
}
.nav-sidebar .nav-link.active::before,
.nav-sidebar .nav-link[aria-current="page"]::before {
  content: "";
  position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--sq-primary);
}
.nav-sidebar .nav-link.active .nav-icon { color: #A5B4FC; }

.nav-sidebar .nav-link:focus-visible {
  outline: 2px solid #A5B4FC; outline-offset: -2px;
}

/* Not-yet-built destinations: shown, but honestly marked and non-clickable
   rather than looking live and going nowhere. */
.nav-sidebar .nav-link.is-disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.sq-nav__soon {
  margin-left: auto;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(148,163,184,.18); color: #CBD5E1;
}

/* Collapsed (sidebar-mini) state: hide section labels and badges. */
.sidebar-collapse .sq-nav__section,
.sidebar-collapse .sq-nav__soon { display: none; }

/* Skip link — keyboard users shouldn't tab the whole nav to reach content. */
.sq-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--sq-primary-600); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600;
}
.sq-skip:focus { left: 0; color: #fff; }

/* ===========================  CHART EMPTY STATE  ========================= */
.sq-chart { position: relative; min-height: 200px; }
.sq-chart__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 16px;
  text-align: center;
  color: var(--sq-muted-fg);
  font-size: 14px;
}

/* ===========================  DATA TABLE  ================================ */
.sq-table-card { background: var(--sq-card); border: 1px solid var(--sq-border);
                 border-radius: var(--sq-radius); box-shadow: var(--sq-shadow); overflow: hidden; }

.sq-table-head {
  display: flex; align-items: center; gap: var(--sq-space-2); flex-wrap: wrap;
  padding: var(--sq-space-3); border-bottom: 1px solid var(--sq-border);
}
.sq-table-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--sq-fg); }
.sq-count {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--sq-primary-050); color: var(--sq-primary-600);
}

/* Search */
.sq-search { position: relative; margin-left: auto; }
.sq-search input {
  width: 260px; max-width: 100%; min-height: 40px;
  padding: 8px 34px 8px 36px;
  font: inherit; font-size: 14px;
  color: var(--sq-fg); background: var(--sq-card);
  border: 1px solid var(--sq-border); border-radius: 8px;
}
.sq-search input::placeholder { color: var(--sq-muted-fg); }
.sq-search input:focus { outline: none; border-color: var(--sq-primary);
                         box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.sq-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
                   color: var(--sq-muted-fg); pointer-events: none; font-size: 13px; }
.sq-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                    color: var(--sq-muted-fg); text-decoration: none; font-size: 15px; line-height: 1;
                    width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; }
.sq-search__clear:hover { background: var(--sq-muted); color: var(--sq-fg); }

/* Table */
/* The wrap must be width-constrained or it shrink-to-fits the table and the
   whole page scrolls sideways instead of just the table. */
.sq-table-wrap { overflow-x: auto; width: 100%; max-width: 100%; min-width: 0;
                 -webkit-overflow-scrolling: touch; }
.sq-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.sq-table thead th {
  background: var(--sq-muted);
  padding: 10px var(--sq-space-3);
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sq-muted-fg);
  border-bottom: 1px solid var(--sq-border);
}
.sq-table tbody td { padding: 10px var(--sq-space-3); border-bottom: 1px solid var(--sq-border);
                     color: var(--sq-fg); vertical-align: middle; }
.sq-table tbody tr:last-child td { border-bottom: 0; }
.sq-table tbody tr { transition: background var(--sq-transition); }
.sq-table tbody tr:hover { background: var(--sq-primary-050); }

/* Identity cell: avatar + name + email in one column instead of three */
.sq-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sq-person img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--sq-muted); border: 1px solid var(--sq-border);
}
.sq-person__name { font-weight: 600; color: var(--sq-fg); line-height: 1.25;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-person__sub  { font-size: 12.5px; color: var(--sq-muted-fg); line-height: 1.25;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badges */
.sq-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.sq-badge--paid    { background: var(--sq-accent-050);  color: #047857; border-color: #A7F3D0; }
.sq-badge--free    { background: var(--sq-muted);       color: var(--sq-muted-fg); border-color: var(--sq-border); }
.sq-badge--leader  { background: var(--sq-primary-050); color: var(--sq-primary-600); border-color: #C7D2FE; }
.sq-badge--pending { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
body.dark-mode .sq-badge--paid    { background: #064E3B; color: #6EE7B7; border-color: #065F46; }
body.dark-mode .sq-badge--pending { background: #78350F; color: #FCD34D; border-color: #92400E; }
body.dark-mode .sq-badge--leader  { background: #312E81; color: #A5B4FC; border-color: #3730A3; }

/* Row actions: destructive styled as quiet-until-hover, not a permanent red slab */
.sq-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sq-iconbtn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--sq-border); background: var(--sq-card);
  color: var(--sq-muted-fg); font-size: 13px; cursor: pointer;
  transition: all var(--sq-transition); text-decoration: none;
}
.sq-iconbtn:hover { background: var(--sq-muted); color: var(--sq-fg); }
.sq-iconbtn--danger:hover { background: #FEF2F2; border-color: #FECACA; color: var(--sq-danger); }
body.dark-mode .sq-iconbtn--danger:hover { background: #450A0A; border-color: #7F1D1D; color: #FCA5A5; }
.sq-iconbtn:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }

.sq-table select.form-control { min-height: 38px; min-width: 168px; border-radius: 8px;
                                border-color: var(--sq-border); font-size: 13.5px;
                                color: var(--sq-fg); background-color: var(--sq-card); }

/* Empty state */
.sq-empty { padding: 48px 24px; text-align: center; color: var(--sq-muted-fg); }
.sq-empty__icon { font-size: 26px; opacity: .5; margin-bottom: 10px; }
.sq-empty__title { font-size: 15px; font-weight: 600; color: var(--sq-fg); margin-bottom: 4px; }
.sq-empty p { font-size: 14px; margin: 0 auto; max-width: 42ch; }
.sq-empty .btn, .sq-empty .link { margin-top: var(--sq-space-3); }
.sq-empty .link { display: inline-block; color: var(--sq-primary); font-weight: 500; }
.sq-empty .link:hover { color: var(--sq-primary-600); text-decoration: underline; }
.sq-empty p .link { margin-top: 0; }

.sq-table-foot { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--sq-space-2); flex-wrap: wrap;
                 padding: var(--sq-space-2) var(--sq-space-3); border-top: 1px solid var(--sq-border); }
.sq-table-foot .pagination { margin: 0; }

@media (max-width: 640px) {
  .sq-search input { width: 100%; }
  .sq-search { margin-left: 0; width: 100%; }
}

/* Allow the table wrapper to actually shrink inside AdminLTE's layout so a wide
   table scrolls in its own .sq-table-wrap box rather than dragging the whole
   page sideways.

   Deliberately NOT `overflow-x: hidden` here: overflow-x:hidden computes
   overflow-y to `auto`, which makes .content-wrapper the nearest scroll
   container for `position: sticky`. Since it never actually scrolls, every
   sticky descendant silently stopped sticking. min-width/max-width below do
   the containment job without that side effect. */
.content-wrapper, .content-wrapper .content, .content-wrapper .container-fluid { min-width: 0; max-width: 100%; }
.sq-table-card { min-width: 0; }

/* Sticky header only where there is vertical room for it to help. Inside a
   horizontally-scrolling wrapper on small screens it escapes the clip and
   widens the page. */
@media (min-width: 992px) {
  .sq-table thead th { position: sticky; top: 0; z-index: 1; }
}

/* Below the sidebar breakpoint, stop the document itself from scrolling
   sideways. The wide table keeps its own horizontal scroll inside
   .sq-table-wrap; this only prevents the whole page from dragging with it.
   Scoped to small screens so desktop overlays/tooltips are unaffected. */
@media (max-width: 991.98px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ===========================  SELECT CONTROL  ===========================
   Native selects render differently per-OS and looked unfinished next to the
   rest of the UI. Strip the native chrome and draw our own chevron.
   ======================================================================== */
.sq-select { position: relative; display: inline-flex; align-items: center; }
.sq-select select,
.sq-table select.form-control,
.sq-toolbar select.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: none;                 /* kill Bootstrap's baked-in caret */
  padding: 8px 34px 8px 12px;
  min-height: 40px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--sq-fg); background-color: var(--sq-card);
  border: 1px solid var(--sq-border); border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--sq-transition), box-shadow var(--sq-transition);
}
.sq-select select:hover,
.sq-table select.form-control:hover { border-color: #94A3B8; }
.sq-select select:focus-visible,
.sq-table select.form-control:focus-visible,
.sq-toolbar select.form-control:focus-visible {
  outline: none; border-color: var(--sq-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.sq-select__chevron {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--sq-muted-fg); font-size: 11px;
}

/* Period filter: label and control read as one unit instead of loose text
   floating beside a browser dropdown. */
.sq-filter {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--sq-border); border-radius: 9px;
  background: var(--sq-card); overflow: hidden;
}
.sq-filter__label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px 0 12px; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sq-muted-fg); background: var(--sq-muted);
  border-right: 1px solid var(--sq-border);
  white-space: nowrap;
}
.sq-filter select {
  border: 0; border-radius: 0; background: transparent; min-height: 42px;
  padding-right: 32px;
}
.sq-filter select:focus-visible { box-shadow: none; outline: 2px solid var(--sq-ring); outline-offset: -2px; }
.sq-filter:focus-within { border-color: var(--sq-primary); box-shadow: 0 0 0 3px rgba(99,102,241,.2); }

/* Row-level upgrade control: quieter, sized to its content */
.sq-table .sq-select select { min-height: 34px; font-size: 13px; padding: 5px 30px 5px 10px; }
.sq-table .sq-select__chevron { right: 10px; font-size: 10px; }
.sq-cell-muted { color: var(--sq-muted-fg); }

/* ===================  COMPACT EMPTY CHART STATE  ======================== */
/* An empty chart previously reserved the full plot height, leaving a large
   void that unbalanced the row. Collapse it instead. */
.sq-chart.is-empty { min-height: 0; }
.sq-chart__empty {
  position: static; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 22px 16px; margin: 0;
  text-align: center; color: var(--sq-muted-fg); font-size: 13.5px;
  background: var(--sq-muted); border: 1px dashed var(--sq-border);
  border-radius: 8px;
}
.sq-chart__empty::before {
  content: "\f080";                       /* Font Awesome bar-chart */
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: 16px; opacity: .45;
}

/* ===========================  CHART ROW  ================================
   Bootstrap columns leave cards at their natural height, so a collapsed empty
   chart sits beside a full-height one and the row reads as broken. A grid with
   stretched items keeps every card the same height regardless of content.
   ======================================================================== */
.sq-chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sq-space-2);
  align-items: stretch;
}
.sq-chart-row > .card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.sq-chart-row > .card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

/* The sidebar should never scroll sideways. */
.main-sidebar, .main-sidebar .sidebar { overflow-x: hidden; }

/* Secondary status shouldn't compete with the row's primary content. A filled
   amber badge repeated down every row dominated the table; an outline treatment
   keeps it findable without shouting. */
.sq-badge--pending {
  background: transparent; color: #B45309; border-color: #FCD34D;
}
body.dark-mode .sq-badge--pending {
  background: transparent; color: #FCD34D; border-color: #92400E;
}
.sq-badge--pending::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}

/* Role badge is also secondary metadata, not a call to action. */
.sq-badge--leader { background: transparent; border-color: #C7D2FE; color: var(--sq-primary-600); }
body.dark-mode .sq-badge--leader { background: transparent; border-color: #3730A3; color: #A5B4FC; }

/* Search: make it obvious the magnifier submits. */
.sq-search__submit {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 6px;
  color: var(--sq-muted-fg); cursor: pointer; font-size: 13px;
}
.sq-search__submit:hover { background: var(--sq-muted); color: var(--sq-fg); }
.sq-search__submit:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 1px; }
.sq-search__hint {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--sq-muted-fg);
}

/* AdminLTE paints its own body/content background, so set ours explicitly or
   the tokens above never show through. */
body, body.dark-mode,
.content-wrapper, body.dark-mode .content-wrapper,
.content-wrapper .content { background-color: var(--sq-bg) !important; }
.main-footer, body.dark-mode .main-footer {
  background-color: var(--sq-bg) !important;
  border-top: 1px solid var(--sq-border);
  color: var(--sq-muted-fg);
}
.main-header.navbar, body.dark-mode .main-header.navbar {
  background-color: var(--sq-card) !important;
  border-bottom: 1px solid var(--sq-border);
}
.content-header .m-0, .content-header h1 { color: var(--sq-fg); }
/* Scoped to the admin layout: these retint AdminLTE's cards, which only exist
   inside .content-wrapper. Unscoped, they also painted a surface onto the
   login page's own `.card` — which has no padding of its own, because it was
   never meant to be a surface. */
.content-wrapper .card, body.dark-mode .content-wrapper .card {
  background-color: var(--sq-card); border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius); box-shadow: var(--sq-shadow);
}
.content-wrapper .card-header, body.dark-mode .content-wrapper .card-header {
  background-color: transparent; border-bottom: 1px solid var(--sq-border);
}
.card-title { color: var(--sq-fg); }

/* ===========================  MODAL DIALOG  ============================= */
.sq-modal { position: fixed; inset: 0; z-index: 2050; display: none; }
.sq-modal[open], .sq-modal.is-open { display: block; }
.sq-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 18, 24, .55);
  backdrop-filter: blur(2px);
  animation: sqFade 140ms ease-out;
}
.sq-modal__panel {
  position: relative; z-index: 1;
  width: min(440px, calc(100vw - 32px));
  margin: 12vh auto 0;
  background: var(--sq-card);
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.35);
  animation: sqPop 160ms cubic-bezier(.2,.9,.3,1);
  overflow: hidden;
}
@keyframes sqFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sqPop  { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .sq-modal__backdrop, .sq-modal__panel { animation: none; }
}

.sq-modal__body { display: flex; gap: 14px; padding: 20px; }
.sq-modal__icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: var(--sq-primary-050); color: var(--sq-primary-600);
}
.sq-modal--danger .sq-modal__icon { background: #FEF2F2; color: var(--sq-danger); }
body.dark-mode .sq-modal--danger .sq-modal__icon { background: #45141400; border: 1px solid #7F1D1D; color: #FCA5A5; }

.sq-modal__title { margin: 2px 0 6px; font-size: 16.5px; font-weight: 600; color: var(--sq-fg); }
.sq-modal__text  { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sq-muted-fg); }
.sq-modal__text strong { color: var(--sq-fg); font-weight: 600; }

.sq-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; background: var(--sq-muted);
  border-top: 1px solid var(--sq-border);
}
.sq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  min-height: 40px; padding: 9px 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  border: 1px solid var(--sq-border); background: var(--sq-card); color: var(--sq-fg);
  transition: background var(--sq-transition), border-color var(--sq-transition);
}
.sq-btn:hover { background: var(--sq-muted); }
.sq-btn--primary { background: var(--sq-primary-600); border-color: var(--sq-primary-600); color: #fff; }
.sq-btn--primary:hover { background: #4338CA; }
.sq-btn--danger  { background: var(--sq-danger); border-color: var(--sq-danger); color: #fff; }
.sq-btn--danger:hover { background: #B91C1C; }
.sq-btn:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.sq-btn--sm { min-height: 34px; padding: 6px 12px; font-size: 13px; gap: 6px; }
a.sq-btn:hover { text-decoration: none; }
a.sq-btn--primary:hover, a.sq-btn--danger:hover { color: #fff; }

/* ======================  MODAL CHOICE LIST  ============================= */
/* Used where a confirm needs the user to pick one option (plan upgrade). */
.sq-choice { display: grid; gap: 8px; margin-top: 14px; }
.sq-choice__item {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--sq-border); border-radius: 9px;
  background: var(--sq-card);
  transition: border-color var(--sq-transition), background var(--sq-transition);
}
.sq-choice__item:hover { background: var(--sq-muted); }
.sq-choice__item input { margin: 2px 0 0; accent-color: var(--sq-primary-600); flex: 0 0 auto; }
.sq-choice__item:focus-within { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.sq-choice__item:has(input:checked) {
  border-color: var(--sq-primary); background: var(--sq-primary-050);
}
.sq-choice__label { display: block; font-size: 14px; font-weight: 600; color: var(--sq-fg); }
.sq-choice__hint  { display: block; font-size: 12.5px; color: var(--sq-muted-fg); margin-top: 2px; }
.sq-btn--danger:focus-visible { outline-color: var(--sq-danger); }

body.sq-modal-open { overflow: hidden; }

/* ======================  INFINITE SCROLL FOOTER  ======================== */
.sq-scroll-foot { display: flex; flex-direction: column; align-items: center; gap: 10px;
                  padding: var(--sq-space-3); border-top: 1px solid var(--sq-border); }
.sq-scroll-status { font-size: 13px; color: var(--sq-muted-fg); }
.sq-sentinel { display: flex; align-items: center; justify-content: center; height: 30px; }
.sq-sentinel::after {
  content: ""; width: 18px; height: 18px; opacity: 0;
  border: 2px solid var(--sq-border); border-top-color: var(--sq-primary);
  border-radius: 50%;
}
.sq-sentinel.is-loading::after { opacity: 1; animation: sqSpin .7s linear infinite; }
@keyframes sqSpin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .sq-sentinel.is-loading::after { animation-duration: 2s; } }

/* ======================  FORMS  ========================================= */
/* Labels are always visible: a placeholder disappears the moment typing
   starts, which leaves no way back to "what was this field?". */
.sq-form { max-width: 640px; }
.sq-form--wide { max-width: 880px; }
.sq-field { margin-bottom: var(--sq-space-3); }
.sq-field__label {
  display: block; margin-bottom: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--sq-fg);
}
.sq-field__req { color: var(--sq-danger); margin-left: 2px; }
/* Every text-like input, rather than a list of types that goes stale the first
   time a form needs one that is not on it (password did exactly that). */
.sq-input, .sq-form select, .sq-form textarea,
.sq-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="color"]) {
  display: block; width: 100%;
  min-height: 40px; padding: 9px 12px;
  font: inherit; font-size: 14px; color: var(--sq-fg);
  background: var(--sq-card); border: 1px solid var(--sq-border);
  border-radius: 8px; box-shadow: none;
  transition: border-color var(--sq-transition), box-shadow var(--sq-transition);
}
.sq-form textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.sq-form input[type="file"] { padding: 8px 10px; }
.sq-input:focus, .sq-form select:focus, .sq-form textarea:focus,
.sq-form input:focus {
  outline: none; border-color: var(--sq-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}
.sq-field__hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--sq-muted-fg); }
/* Error sits next to the field it belongs to, not only in a summary at the top. */
.sq-field__error { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--sq-danger); }
.sq-field--invalid .sq-input, .sq-field--invalid input, .sq-field--invalid textarea {
  border-color: var(--sq-danger);
}
.sq-form__actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: var(--sq-space-3);
}
.sq-form__note { font-size: 13px; color: var(--sq-muted-fg); }
.sq-form__note--ok { color: var(--sq-accent); font-weight: 600; }

/* ======================  TABLE EXTRAS  ================================== */
/* Square, not the round avatar `.sq-person img` gives — artwork, not a face.
   Specificity has to match that rule to win it. */
.sq-thumb, .sq-person img.sq-thumb {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  background: var(--sq-muted); border: 1px solid var(--sq-border); padding: 2px;
}
.sq-points { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Long free-text cell: readable measure, no table blow-out. */
.sq-longtext { max-width: 42ch; white-space: normal; line-height: 1.5; }
.sq-longtext summary { cursor: pointer; }
.sq-longtext summary::marker { color: var(--sq-primary); }
.sq-longtext__more { color: var(--sq-primary-600); font-weight: 600; }
.sq-longtext details[open] .sq-longtext__more { display: none; }
.sq-nowrap { white-space: nowrap; }

/* Bootstrap pagination, restyled to the token palette. */
.sq-table-foot .page-link {
  color: var(--sq-fg); background: var(--sq-card);
  border-color: var(--sq-border); font-size: 13.5px;
  min-width: 36px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sq-table-foot .page-link:hover { background: var(--sq-muted); color: var(--sq-fg); }
.sq-table-foot .page-item.active .page-link {
  background: var(--sq-primary-600); border-color: var(--sq-primary-600); color: #fff;
}
.sq-table-foot .page-item.disabled .page-link { color: var(--sq-muted-fg); background: var(--sq-muted); }
.sq-table-foot .page-link:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; box-shadow: none; }
.sq-table-foot__count { font-size: 13px; color: var(--sq-muted-fg); }

/* Current-image preview beside its replace control. */
.sq-imagefield { display: flex; align-items: flex-start; gap: var(--sq-space-2); flex-wrap: wrap; }
.sq-thumb--lg { width: 72px; height: 72px; }

/* ======================  TOASTS  ======================================== */
/* toastr 2.1.4 handles the live region and dismissal; only its 2012-era
   skin is replaced here. Type is carried by an icon chip and a left rule,
   not by a saturated fill behind the text — the same rule the stat tiles
   follow, and it keeps the text contrast fixed in both themes. */
#toast-container > div {
  opacity: 1;
  width: 340px; max-width: calc(100vw - 32px);
  padding: 13px 15px 13px 46px;
  border: 1px solid var(--sq-border);
  border-left: 3px solid var(--sq-muted-fg);
  border-radius: var(--sq-radius);
  background-color: var(--sq-card);
  box-shadow: var(--sq-shadow-lg);
  color: var(--sq-fg);
  font-size: 14px; line-height: 1.5;
}
#toast-container > div:hover { box-shadow: var(--sq-shadow-lg); opacity: 1; }
#toast-container > div::before {
  position: absolute; left: 15px; top: 14px;
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: 15px; line-height: 1.2;
}
/* AdminLTE repaints these at `#toast-container .toast-*`, so the surface has to
   be re-stated per type to out-specify it rather than once on the container. */
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info {
  background-color: var(--sq-card); color: var(--sq-fg);
  /* toastr ships its icon sprites per type at !important, so they have to be
     cleared per type too — a rule on the container loses on specificity. */
  background-image: none !important;
}
#toast-container > .toast-success  { border-left-color: var(--sq-accent); }
#toast-container > .toast-success::before  { content: "\f058"; color: var(--sq-accent); }
#toast-container > .toast-error    { border-left-color: var(--sq-danger); }
#toast-container > .toast-error::before    { content: "\f06a"; color: var(--sq-danger); }
#toast-container > .toast-warning  { border-left-color: var(--sq-warning); }
#toast-container > .toast-warning::before  { content: "\f071"; color: var(--sq-warning); }
#toast-container > .toast-info     { border-left-color: var(--sq-primary); }
#toast-container > .toast-info::before     { content: "\f05a"; color: var(--sq-primary); }

#toast-container .toast-title { font-weight: 600; margin-bottom: 2px; }
#toast-container .toast-message { color: var(--sq-fg); }
#toast-container .toast-message a { color: var(--sq-primary-600); }
#toast-container .toast-close-button {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0;
  font-size: 17px; font-weight: 400; line-height: 22px;
  color: var(--sq-muted-fg); text-shadow: none; opacity: 1;
  border-radius: 6px;
}
#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus { background: var(--sq-muted); color: var(--sq-fg); opacity: 1; }
#toast-container .toast-close-button:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 1px; }
#toast-container .toast-progress {
  height: 3px; opacity: 1; background: var(--sq-primary);
  border-radius: 0 0 var(--sq-radius) var(--sq-radius);
}
#toast-container > .toast-success .toast-progress { background: var(--sq-accent); }
#toast-container > .toast-error   .toast-progress { background: var(--sq-danger); }
#toast-container > .toast-warning .toast-progress { background: var(--sq-warning); }

/* ===========================================================================
   Legacy AdminLTE compat layer
   ---------------------------------------------------------------------------
   The admin (role 0) screens were converted to the .sq-* components above. The
   team-leader (role 1) screens — teams, members, invitations, behaviours,
   awards, settings, profile, benchmark, consolidated results — still ship raw
   AdminLTE markup (.card.card-secondary, .bg-gradient-*, .table), which nothing
   here styled, so they kept the stock grey chrome and the four-colour button
   set under the new dark shell.

   Rather than rewrite ~25 blades, this maps the AdminLTE classes onto the same
   tokens. Scoped to .content-wrapper so the sidebar and navbar are untouched.
   Converted pages don't use these class names, so nothing here reaches them.
   =========================================================================== */

/* --- Cards: kill .card-secondary's grey header bar ----------------------- */
.content-wrapper .card {
  background: var(--sq-card);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow);
  color: var(--sq-fg);
  margin-bottom: var(--sq-space-4);
}
.content-wrapper .card.card-secondary,
.content-wrapper .card.card-gray,
.content-wrapper .card.card-outline { border-top: 1px solid var(--sq-border); }

.content-wrapper .card > .card-header,
.content-wrapper .card.card-secondary:not(.card-outline) > .card-header,
.content-wrapper .card.card-primary:not(.card-outline) > .card-header,
.content-wrapper .card.card-info:not(.card-outline) > .card-header,
.content-wrapper .card.card-success:not(.card-outline) > .card-header,
.content-wrapper .card.card-warning:not(.card-outline) > .card-header,
.content-wrapper .card.card-danger:not(.card-outline) > .card-header,
.content-wrapper .card.card-gray:not(.card-outline) > .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--sq-border);
  padding: var(--sq-space-2) var(--sq-space-3);
  display: flex; align-items: center; gap: var(--sq-space-2); flex-wrap: wrap;
  min-height: 0;
}
.content-wrapper .card > .card-header .card-title,
.content-wrapper .card.card-secondary:not(.card-outline) > .card-header .card-title {
  float: none; margin: 0;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--sq-fg);
}
/* Header-level actions (Pending Invites, etc.) sit right, not floated. */
.content-wrapper .card > .card-header .card-tools,
.content-wrapper .card > .card-header > .btn,
.content-wrapper .card > .card-header > a.btn { margin-left: auto; float: none; }

.content-wrapper .card > .card-body { padding: var(--sq-space-3); }
.content-wrapper .card > .card-footer {
  background: var(--sq-muted);
  border-top: 1px solid var(--sq-border);
  padding: var(--sq-space-2) var(--sq-space-3);
}
/* List rows are themselves .card — flatten so they read as rows, not stacked
   floating panels. */
.content-wrapper .card .card {
  box-shadow: none;
  background: var(--sq-muted);
  margin-bottom: var(--sq-space-2);
  transition: border-color var(--sq-transition), background var(--sq-transition);
}
.content-wrapper .card .card:hover { border-color: var(--sq-primary); }

/* --- Buttons -------------------------------------------------------------
   One filled call-to-action per toolbar. Everything else is a quiet outline,
   and destructive stays quiet until you're actually on it.
   !important is required only because AdminLTE sets .bg-gradient-* backgrounds
   with !important; the rest wins on cascade order alone. ------------------ */
.content-wrapper .btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 1.3;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background var(--sq-transition), border-color var(--sq-transition),
              color var(--sq-transition);
}
.content-wrapper .btn:focus-visible {
  outline: 2px solid var(--sq-ring); outline-offset: 2px; box-shadow: none;
}
.content-wrapper .btn.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 13px; }

/* Create / confirm — the one filled CTA. */
.content-wrapper .btn.bg-gradient-success,
.content-wrapper .btn.btn-success {
  background: var(--sq-accent) !important;
  border-color: var(--sq-accent); color: #fff !important;
}
.content-wrapper .btn.bg-gradient-success:hover,
.content-wrapper .btn.btn-success:hover { background: #047857 !important; }

/* Submit inside a form/modal — brand indigo. */
.content-wrapper .btn.btn-primary {
  background: var(--sq-primary); border-color: var(--sq-primary); color: #fff;
}
.content-wrapper .btn.btn-primary:hover {
  background: var(--sq-primary-600); border-color: var(--sq-primary-600); color: #fff;
}

/* Search / filter / Edit / View — supporting actions, quiet outline. */
.content-wrapper .btn.bg-gradient-primary,
.content-wrapper .btn.btn-info,
.content-wrapper .btn.bg-gradient-info,
.content-wrapper .btn.btn-secondary,
.content-wrapper .btn.btn-default {
  background: var(--sq-card) !important;
  border-color: var(--sq-border);
  color: var(--sq-fg) !important;
}
.content-wrapper .btn.bg-gradient-primary:hover,
.content-wrapper .btn.btn-info:hover,
.content-wrapper .btn.bg-gradient-info:hover,
.content-wrapper .btn.btn-secondary:hover,
.content-wrapper .btn.btn-default:hover {
  background: var(--sq-muted) !important; border-color: var(--sq-muted-fg);
  color: var(--sq-fg) !important;
}

/* Upgrade / Resend — amber, but outlined so it can't outshout the CTA. */
.content-wrapper .btn.btn-warning,
.content-wrapper .btn.bg-gradient-warning {
  background: transparent !important;
  border-color: var(--sq-warning);
  color: var(--sq-warning) !important;
}
.content-wrapper .btn.btn-warning:hover,
.content-wrapper .btn.bg-gradient-warning:hover {
  background: var(--sq-warning) !important; color: #fff !important;
}

/* Destructive — quiet until hovered, so Delete never reads as the CTA. */
.content-wrapper .btn.btn-danger,
.content-wrapper .btn.bg-gradient-danger {
  background: transparent !important;
  border-color: var(--sq-border);
  color: var(--sq-danger) !important;
}
.content-wrapper .btn.btn-danger:hover,
.content-wrapper .btn.bg-gradient-danger:hover {
  background: var(--sq-danger) !important; border-color: var(--sq-danger);
  color: #fff !important;
}
/* Modal dismiss is marked up as .btn-danger throughout — it cancels, it doesn't
   destroy, so it must not read red. */
.content-wrapper .modal-footer .btn-danger[data-dismiss="modal"],
.modal-footer .btn-danger[data-dismiss="modal"] {
  background: transparent !important;
  border-color: var(--sq-border);
  color: var(--sq-muted-fg) !important;
}
.content-wrapper .modal-footer .btn-danger[data-dismiss="modal"]:hover,
.modal-footer .btn-danger[data-dismiss="modal"]:hover {
  background: var(--sq-muted) !important; color: var(--sq-fg) !important;
}

/* Icon-only actions in list rows (the inline-styled eye / trash). */
.content-wrapper .card .btn > i.fa { color: inherit !important; }

/* --- Form controls ------------------------------------------------------- */
.content-wrapper .form-control,
.content-wrapper .custom-select,
.content-wrapper select.form-control {
  min-height: 38px;
  background: var(--sq-card);
  border: 1px solid var(--sq-border);
  border-radius: 8px;
  color: var(--sq-fg);
  font-size: 14px;
  box-shadow: none;
}
.content-wrapper .form-control::placeholder { color: var(--sq-muted-fg); opacity: 1; }
.content-wrapper .form-control:focus,
.content-wrapper .custom-select:focus {
  background: var(--sq-card); color: var(--sq-fg);
  border-color: var(--sq-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.content-wrapper label { color: var(--sq-fg); font-size: 13px; font-weight: 600; }

/* --- Tables -------------------------------------------------------------- */
.content-wrapper .card .table { color: var(--sq-fg); margin-bottom: 0; }
.content-wrapper .card .table thead th {
  background: var(--sq-muted);
  border: 0; border-bottom: 1px solid var(--sq-border);
  padding: 10px var(--sq-space-3);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sq-muted-fg); white-space: nowrap;
}
.content-wrapper .card .table tbody td {
  padding: 12px var(--sq-space-3);
  border-top: 0; border-bottom: 1px solid var(--sq-border);
  vertical-align: middle; font-size: 14px;
}
.content-wrapper .card .table tbody tr:last-child td { border-bottom: 0; }
.content-wrapper .card .table-hover tbody tr:hover { background: var(--sq-muted); color: var(--sq-fg); }

/* --- Modals -------------------------------------------------------------- */
.modal-content {
  background: var(--sq-card); color: var(--sq-fg);
  border: 1px solid var(--sq-border); border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--sq-border); }
/* Modal headers carry .bg-info throughout — a full-bleed blue bar that reads as
   an alert rather than a title. Neutralise it; the title alone does the job. */
.modal-header, .modal-header.bg-info, .modal-header.bg-primary,
.modal-header.bg-success, .modal-header.bg-warning, .modal-header.bg-danger {
  background-color: transparent !important; color: var(--sq-fg) !important;
}
.modal-header .modal-title { font-size: 16px; font-weight: 600; }
.modal-footer { background: var(--sq-muted); gap: var(--sq-space-1); }
/* In a modal the one button that isn't a dismiss IS the primary action,
   whatever legacy colour class it happens to wear. */
.modal-footer .btn:not([data-dismiss]):not(.btn-warning) {
  background: var(--sq-primary) !important;
  border-color: var(--sq-primary);
  color: #fff !important;
}
.modal-footer .btn:not([data-dismiss]):not(.btn-warning):hover {
  background: var(--sq-primary-600) !important; border-color: var(--sq-primary-600);
}
/* Bootstrap 4 leaves bare checkboxes at ~13px — under the 24px target minimum. */
.content-wrapper input[type="checkbox"]:not(.icheck-input),
.modal input[type="checkbox"]:not(.icheck-input) {
  width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px;
  accent-color: var(--sq-primary); cursor: pointer;
}
.modal-header .close { color: var(--sq-muted-fg); text-shadow: none; opacity: 1; }
.modal-header .close:hover { color: var(--sq-fg); }

/* --- Pagination ---------------------------------------------------------- */
.content-wrapper .pagination .page-link {
  background: var(--sq-card); border-color: var(--sq-border); color: var(--sq-fg);
}
.content-wrapper .pagination .page-item.active .page-link {
  background: var(--sq-primary); border-color: var(--sq-primary); color: #fff;
}
.content-wrapper .pagination .page-item.disabled .page-link {
  background: var(--sq-muted); border-color: var(--sq-border); color: var(--sq-muted-fg);
}

/* --- intro.js onboarding tour -------------------------------------------
   introjs.min.css ships a white tooltip; under the dark shell it flared, and
   its default transparent overlay left the highlighted control unreadable
   behind the tooltip. Requires the introjs <link> to sit ABOVE this file in
   master.blade.php. ------------------------------------------------------- */
.introjs-tooltip {
  background: var(--sq-card); color: var(--sq-fg);
  border: 1px solid var(--sq-border); border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-lg);
  min-width: 280px; max-width: 340px;
}
/* The colour is NOT redundant with .introjs-tooltip's. intro.js is loaded
   unpinned from unpkg, and a current release sets `.introjs-tooltiptext
   { color: #212121 }` — same specificity, earlier sheet, but nothing here
   opposed it, so the tour text rendered #212121 on our #1F2228 tooltip:
   a contrast ratio of 1.03:1. The text was invisible in dark mode. */
.introjs-tooltiptext { font-size: 14px; line-height: 1.5; padding: var(--sq-space-3); color: var(--sq-fg); }
.introjs-tooltipbuttons { border-top: 1px solid var(--sq-border); padding: var(--sq-space-2); }
.introjs-button {
  background: var(--sq-card); border: 1px solid var(--sq-border); border-radius: 8px;
  color: var(--sq-fg); text-shadow: none; font-size: 13px; padding: 6px 12px;
}
.introjs-button:hover, .introjs-button:focus { background: var(--sq-muted); color: var(--sq-fg); }
.introjs-button:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.introjs-nextbutton {
  background: var(--sq-primary); border-color: var(--sq-primary); color: #fff;
}
.introjs-nextbutton:hover, .introjs-nextbutton:focus {
  background: var(--sq-primary-600); border-color: var(--sq-primary-600); color: #fff;
}
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
  background: var(--sq-muted); border-color: var(--sq-border); color: var(--sq-muted-fg);
}
.introjs-skipbutton { color: var(--sq-muted-fg); }
.introjs-skipbutton:hover { color: var(--sq-fg); }
.introjs-arrow.top { border-bottom-color: var(--sq-card); }
.introjs-arrow.bottom { border-top-color: var(--sq-card); }
.introjs-arrow.left { border-right-color: var(--sq-card); }
.introjs-arrow.right { border-left-color: var(--sq-card); }
.introjs-bullets ul li a { background: var(--sq-border); }
.introjs-bullets ul li a.active { background: var(--sq-primary); }
.introjs-overlay { background: rgba(0,0,0,.6); opacity: 1 !important; }
.introjs-helperLayer {
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--sq-primary), 0 0 0 9999px rgba(0,0,0,.6);
}
/* introjs hard-codes a white background on this label — invisible-on-white text
   under the dark shell. Also bumps the 10px checkbox to a real target. */
.introjs-dontShowAgain { padding: 0 var(--sq-space-3) var(--sq-space-2); }
.introjs-tooltip .introjs-dontShowAgain label {
  background-color: transparent; color: var(--sq-muted-fg);
  font-weight: 500; cursor: pointer;
}
.introjs-tooltip .introjs-dontShowAgain input {
  width: 16px; height: 16px; margin-bottom: 0; vertical-align: -3px; accent-color: var(--sq-primary);
}

/* Settings quick actions — four peers, so they read as one set rather than
   four different severities. */
.sq-quick-actions {
  display: grid; gap: var(--sq-space-2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sq-quick-actions .btn {
  justify-content: flex-start;
  display: inline-flex; align-items: center; gap: var(--sq-space-1);
  text-align: left;
}
.sq-quick-actions .btn i { width: 16px; text-align: center; color: var(--sq-muted-fg); }
.sq-quick-actions .btn:hover i { color: var(--sq-primary); }

/* --- info-box tiles (leader + admin dashboards) --------------------------
   The stat tiles carried five arbitrary AdminLTE fills — bg-gray, bg-navy,
   bg-teal, bg-indigo, bg-info — none of which encoded anything, so the colour
   read as decoration and the block fought the converted .sq-stat tiles beside
   it. Flatten every tile to the card surface and move the accent into the icon
   chip, where an .info-box--* modifier can actually mean something.
   bg-* wins with !important in AdminLTE, hence the !important here. -------- */
.content-wrapper .info-box {
  background-color: var(--sq-card) !important;
  color: var(--sq-fg) !important;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow);
  padding: var(--sq-space-2);
  gap: var(--sq-space-2);
}
/* `disabled` is used here purely as a style hook, not a real state — the
   summary tiles are live content and must not read as greyed out. */
.content-wrapper .info-box.disabled { opacity: 1; filter: none; }

.content-wrapper .info-box .info-box-icon {
  width: 48px; min-width: 48px; height: 48px; align-self: center;
  border-radius: 10px; font-size: 20px;
  background: var(--sq-muted) !important;
  color: var(--sq-muted-fg) !important;
}
.content-wrapper .info-box .info-box-content { line-height: 1.45; padding: 0; }
.content-wrapper .info-box .info-box-text {
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--sq-muted-fg); white-space: normal;
}
.content-wrapper .info-box .info-box-text b { font-weight: 600; }
.content-wrapper .info-box .info-box-number {
  font-size: 24px; font-weight: 700; color: var(--sq-fg); line-height: 1.2;
}
.content-wrapper .info-box .info-box-text b,
.content-wrapper .info-box .info-box-content .info-box-text > b { color: var(--sq-fg); }

/* Semantic accents — the chip is the only place colour is allowed to differ. */
.content-wrapper .info-box--positive .info-box-icon {
  background: var(--sq-accent-050) !important; color: var(--sq-accent) !important;
}
.content-wrapper .info-box--negative .info-box-icon {
  background: rgba(220,38,38,.12) !important; color: var(--sq-danger) !important;
}
.content-wrapper .info-box--award .info-box-icon {
  background: var(--sq-primary-050) !important; color: var(--sq-primary) !important;
}
body.dark-mode .content-wrapper .info-box--positive .info-box-icon { color: #34D399 !important; }
body.dark-mode .content-wrapper .info-box--negative .info-box-icon { color: #F87171 !important; }
body.dark-mode .content-wrapper .info-box--award    .info-box-icon { color: #A5B4FC !important; }

/* ===========================================================================
   Give feedback — the product's core action, previously a broken-image form
   buried under ten charts at the bottom of the member detail page.
   =========================================================================== */
.sq-feedback { max-width: 780px; margin: 0 auto; padding-bottom: 96px; }

.sq-alert {
  display: flex; gap: var(--sq-space-2); align-items: flex-start;
  max-width: 780px; margin: 0 auto var(--sq-space-3);
  padding: var(--sq-space-2) var(--sq-space-3);
  border: 1px solid var(--sq-border); border-left-width: 3px;
  border-radius: var(--sq-radius); background: var(--sq-card);
}
.sq-alert p { margin: 2px 0 0; font-size: 14px; color: var(--sq-muted-fg); }
.sq-alert:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.sq-alert--error { border-left-color: var(--sq-danger); }
.sq-alert--error > i { color: var(--sq-danger); font-size: 16px; margin-top: 2px; }

.sq-step { margin-bottom: var(--sq-space-3); }
.sq-step__head {
  display: flex; align-items: center; gap: var(--sq-space-2);
  padding: var(--sq-space-2) var(--sq-space-3);
  border-bottom: 1px solid var(--sq-border);
}
.sq-step__num {
  flex: none; width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--sq-muted); color: var(--sq-muted-fg);
  font-size: 12px; font-weight: 700;
}
.sq-step__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--sq-fg); }
.sq-step__req {
  margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sq-muted-fg);
}
.sq-step__body { padding: var(--sq-space-3); }
.sq-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.sq-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--sq-fg); margin-bottom: 6px; }
.sq-field__help { margin: 6px 0 0; font-size: 13px; color: var(--sq-muted-fg); }
.sq-field { width: 100%; }

/* Behaviour / visibility cards — a real radio, visibly selected, keyboard-reachable. */
.sq-choice-grid { display: grid; gap: var(--sq-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sq-choice-grid--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sq-choice { position: relative; margin: 0; cursor: pointer; }
.sq-choice input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.sq-choice__body {
  display: block; height: 100%;
  padding: var(--sq-space-2) var(--sq-space-3);
  border: 1px solid var(--sq-border); border-radius: var(--sq-radius);
  background: var(--sq-card);
  transition: border-color var(--sq-transition), background var(--sq-transition);
}
.sq-choice:hover .sq-choice__body { border-color: var(--sq-muted-fg); }
.sq-choice input:checked + .sq-choice__body {
  border-color: var(--sq-primary);
  background: var(--sq-primary-050);
  box-shadow: inset 0 0 0 1px var(--sq-primary);
}
.sq-choice input:focus-visible + .sq-choice__body { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.sq-choice__dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 7px; vertical-align: 1px; }
.sq-choice__name { display: block; font-size: 14px; font-weight: 600; color: var(--sq-fg); }
.sq-choice__name i { width: 14px; margin-right: 4px; color: var(--sq-muted-fg); }
.sq-choice__desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--sq-muted-fg); }

/* Emotion chips — name and signed points, because a face alone never told you
   whether you were about to hand out -1 or -3. */
.sq-emotion-group {
  margin: var(--sq-space-3) 0 var(--sq-space-1);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sq-muted-fg);
}
.sq-emotion-group:first-of-type { margin-top: var(--sq-space-2); }
.sq-emotion-row { display: flex; flex-wrap: wrap; gap: var(--sq-space-1); }
.sq-emotion { position: relative; margin: 0; cursor: pointer; }
.sq-emotion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sq-emotion__name,
.sq-emotion__pts {
  display: inline-block; min-height: 36px; line-height: 34px;
  border: 1px solid var(--sq-border); background: var(--sq-card);
  font-size: 13px; transition: border-color var(--sq-transition), background var(--sq-transition);
}
.sq-emotion__name {
  padding: 0 4px 0 12px; border-right: 0;
  border-radius: 999px 0 0 999px; font-weight: 500; color: var(--sq-fg);
}
.sq-emotion__pts {
  padding: 0 12px 0 6px; border-left: 0;
  border-radius: 0 999px 999px 0;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.sq-emotion--pos   .sq-emotion__pts { color: var(--sq-accent); }
.sq-emotion--neg   .sq-emotion__pts { color: var(--sq-danger); }
.sq-emotion--award .sq-emotion__pts { color: var(--sq-primary); }
body.dark-mode .sq-emotion--pos .sq-emotion__pts { color: #34D399; }
body.dark-mode .sq-emotion--neg .sq-emotion__pts { color: #F87171; }
body.dark-mode .sq-emotion--award .sq-emotion__pts { color: #A5B4FC; }

.sq-emotion:hover .sq-emotion__name,
.sq-emotion:hover .sq-emotion__pts { border-color: var(--sq-muted-fg); }
/* Selection is carried by fill + weight, never by hue alone. */
.sq-emotion input:checked ~ .sq-emotion__name,
.sq-emotion input:checked ~ .sq-emotion__pts {
  border-color: var(--sq-primary); background: var(--sq-primary-050); color: var(--sq-fg);
}
.sq-emotion input:checked ~ .sq-emotion__name { font-weight: 700; box-shadow: inset 1px 0 0 var(--sq-primary), inset 0 1px 0 var(--sq-primary), inset 0 -1px 0 var(--sq-primary); }
.sq-emotion input:checked ~ .sq-emotion__pts  { box-shadow: inset -1px 0 0 var(--sq-primary), inset 0 1px 0 var(--sq-primary), inset 0 -1px 0 var(--sq-primary); }
.sq-emotion input:focus-visible ~ .sq-emotion__name { outline: 2px solid var(--sq-ring); outline-offset: 2px; }

.sq-linkbtn {
  margin-top: var(--sq-space-2); padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--sq-primary); cursor: pointer; text-decoration: underline;
}
.sq-linkbtn:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; border-radius: 4px; }

.sq-details { margin-top: var(--sq-space-3); border-top: 1px solid var(--sq-border); padding-top: var(--sq-space-2); }
.sq-details > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--sq-fg);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.sq-details > summary::-webkit-details-marker { display: none; }
.sq-details > summary::before { content: "\f067"; font: 900 11px/1 "Font Awesome 5 Free"; color: var(--sq-muted-fg); }
.sq-details[open] > summary::before { content: "\f068"; }
.sq-details > summary:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; border-radius: 4px; }
.sq-details__hint { font-weight: 500; color: var(--sq-muted-fg); }
.sq-emotion-row--award { margin-top: var(--sq-space-2); }

/* Send bar — the submit was previously below a five-section scroll. */
.sq-sendbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sq-space-3); flex-wrap: wrap;
  margin-top: var(--sq-space-3);
  padding: var(--sq-space-2) var(--sq-space-3);
  background: var(--sq-card);
  border: 1px solid var(--sq-border); border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-lg);
}
.sq-sendbar__summary { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--sq-muted-fg); }
.sq-sendbar__actions { display: flex; gap: var(--sq-space-1); margin-left: auto; }
/* Until the required pieces are there, the CTA stays quiet rather than lying
   about being ready. The button is never disabled — the server still owns
   validation, and a disabled control gives no reason for being disabled. */
.content-wrapper .sq-sendbar .btn.bg-gradient-success {
  background: var(--sq-muted) !important; color: var(--sq-muted-fg) !important;
  border-color: var(--sq-border);
}
.content-wrapper .sq-sendbar .btn.bg-gradient-success.is-ready {
  background: var(--sq-accent) !important; color: #fff !important; border-color: var(--sq-accent);
}

@media (max-width: 640px) {
  .sq-sendbar__summary { flex-basis: 100%; }
  .sq-sendbar__actions { margin-left: 0; width: 100%; }
  .sq-sendbar__actions .btn { flex: 1; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Single-task pages constrain the form; the page header has to line up with it
   or the h1 floats off on its own. */
.content-wrapper .container-fluid.sq-narrow { max-width: calc(780px + var(--sq-space-3) * 2); margin: 0 auto; }

/* --- Member roster -------------------------------------------------------
   Was a two-up card grid: ~230px of vertical space per person, a 80px goal
   knob that only ever read "0", and Delete given the same visual weight as
   View — while the leader's actual job, giving feedback, had no entry point
   at all. A table fits the whole team on one screen and puts the job first. */
.sq-roster__rank { width: 56px; text-align: center; }
.sq-rank {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px; background: var(--sq-muted); color: var(--sq-muted-fg);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sq-rank--top { background: var(--sq-primary-050); color: var(--sq-primary); }
body.dark-mode .sq-rank--top { color: #C7D2FE; }

.sq-num { text-align: right; }
.sq-points { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sq-muted-fg); }
.sq-points--pos { color: var(--sq-accent); }
.sq-points--neg { color: var(--sq-danger); }
body.dark-mode .sq-points--pos { color: #34D399; }
body.dark-mode .sq-points--neg { color: #F87171; }

.sq-meter { display: flex; align-items: center; gap: var(--sq-space-1); min-width: 120px; }
.sq-meter__track {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--sq-muted); overflow: hidden;
}
.sq-meter__fill { display: block; height: 100%; border-radius: 999px; background: var(--sq-primary); }
.sq-meter__value {
  flex: none; min-width: 36px; text-align: right;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--sq-muted-fg);
}

.sq-roster .sq-actions { justify-content: flex-end; }
.sq-roster td:last-child { text-align: right; }

@media (max-width: 900px) {
  /* Goals is the first thing worth losing when space runs out. */
  .sq-roster th:nth-child(4), .sq-roster td:nth-child(4) { display: none; }
}
.sq-roster th:nth-child(4), .sq-roster td:nth-child(4) { width: 180px; }
.sq-roster th:nth-child(3), .sq-roster td:nth-child(3) { width: 90px; }

/* Period-over-period tiles — replaces a bar chart that shared one axis across
   a percentage, an ordinal rank and a point count. */
.sq-delta-grid { display: grid; gap: var(--sq-space-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sq-delta { padding: var(--sq-space-2) var(--sq-space-3); background: var(--sq-muted); border-radius: var(--sq-radius); }
.sq-delta__label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sq-muted-fg); }
.sq-delta__value { margin: 4px 0 2px; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--sq-fg); font-variant-numeric: tabular-nums; }
.sq-delta__change { margin: 0; font-size: 12px; line-height: 1.4; color: var(--sq-muted-fg); }
.sq-delta__change i { margin-right: 3px; }
.sq-delta__change.is-better { color: var(--sq-accent); }
.sq-delta__change.is-worse  { color: var(--sq-danger); }
body.dark-mode .sq-delta__change.is-better { color: #34D399; }
body.dark-mode .sq-delta__change.is-worse  { color: #F87171; }

.sq-cta {
  display: flex; align-items: center; gap: var(--sq-space-3); flex-wrap: wrap;
  padding: var(--sq-space-3); margin-bottom: var(--sq-space-3);
}
.sq-cta__title { margin: 0 0 2px; font-size: 16px; font-weight: 600; color: var(--sq-fg); }
.sq-cta__text p { margin: 0; font-size: 14px; color: var(--sq-muted-fg); }
.sq-cta .btn { margin-left: auto; }
.sq-cta .btn i { margin-right: 6px; }
@media (max-width: 560px) { .sq-cta .btn { margin-left: 0; width: 100%; } }
.sq-topitem__name { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--sq-fg); }

/* ===========================================================================
   Setup pages — Awards, Teams, Invitations.
   These were card grids of broken images with Edit and Delete given equal
   weight, and none of them told you the one thing you came to find out:
   which awards get used, how each team is configured, how long an invite has
   been sitting there.
   =========================================================================== */

/* One line under the page title saying what the thing on this page IS. */
.sq-lede {
  margin: 0 0 var(--sq-space-3);
  max-width: 68ch;
  font-size: 14px; line-height: 1.55; color: var(--sq-muted-fg);
}

.sq-toolbar__search { display: flex; align-items: center; gap: var(--sq-space-1); }
.sq-toolbar__search .form-control { width: 240px; }
.sq-toolbar__cta { margin-left: auto; }
.sq-toolbar__cta i { margin-right: 6px; }

.sq-cell-strong { font-weight: 600; color: var(--sq-fg); font-variant-numeric: tabular-nums; }

/* Award identity chip — stands in for art that is optional and often absent. */
.sq-awardchip {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--sq-primary-050); color: var(--sq-primary); font-size: 15px;
}
body.dark-mode .sq-awardchip { color: #A5B4FC; }

.sq-awards th:nth-child(2), .sq-awards td:nth-child(2),
.sq-awards th:nth-child(3), .sq-awards td:nth-child(3) { width: 120px; }
.sq-awards td:last-child, .sq-awards th:last-child { text-align: right; }
.sq-awards .sq-actions { justify-content: flex-end; }

.sq-pagehead {
  display: flex; align-items: flex-start; gap: var(--sq-space-3);
  flex-wrap: wrap; margin-bottom: var(--sq-space-3);
}
.sq-pagehead .sq-lede { margin: 0; flex: 1 1 320px; }
.sq-pagehead__cta { margin-left: auto; flex: none; }
.sq-pagehead__cta i { margin-right: 6px; }
.sq-toolbar:empty { display: none; }
@media (max-width: 560px) { .sq-pagehead__cta { margin-left: 0; width: 100%; } }

.sq-section__title {
  margin: var(--sq-space-4) 0 var(--sq-space-2);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sq-muted-fg);
}
.sq-section__title:first-of-type { margin-top: 0; }

.sq-teamchip {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--sq-muted); color: var(--sq-muted-fg); font-size: 15px;
}

/* Feedback permissions, previously visible only inside the Edit form. On/off is
   carried by the tick/dash icon and the text weight, not by colour alone. */
.sq-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.sq-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--sq-border); background: var(--sq-card);
  font-size: 12px; color: var(--sq-muted-fg); white-space: nowrap;
}
.sq-flag i { font-size: 9px; }
.sq-flag.is-on {
  border-color: var(--sq-accent); color: var(--sq-accent);
  background: var(--sq-accent-050); font-weight: 600;
}
body.dark-mode .sq-flag.is-on { color: #6EE7B7; background: rgba(5,150,105,.14); }

.sq-copy.is-copied { border-color: var(--sq-accent); color: var(--sq-accent) !important; }
.sq-copy i { margin-right: 5px; }

.sq-alert--info { border-left-color: var(--sq-primary); }
.sq-alert--info > i { color: var(--sq-primary); font-size: 16px; margin-top: 2px; }
.sq-alert--wide { max-width: none; align-items: center; }
.sq-alert--wide .btn { margin-left: auto; }

.sq-empty--tight { padding: var(--sq-space-4) var(--sq-space-3); }
.sq-teams td:last-child, .sq-teams th:last-child { text-align: right; }
.sq-teams .sq-actions { justify-content: flex-end; }
.sq-teams .sq-person__name .sq-badge { margin-left: 6px; vertical-align: 1px; }

.sq-invitechip {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--sq-muted); color: var(--sq-muted-fg); font-size: 14px;
}
/* Age is the reason you are on this page; a stale invite says so in words and
   an icon, not by colour alone. */
.sq-age { font-size: 13px; color: var(--sq-muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sq-age.is-stale { color: var(--sq-warning); font-weight: 600; }
.sq-age i { margin-right: 4px; font-size: 11px; }

.sq-alert--warn { border-left-color: var(--sq-warning); }
.sq-alert--warn > i { color: var(--sq-warning); font-size: 16px; margin-top: 2px; }

.sq-invites td:last-child, .sq-invites th:last-child { text-align: right; }
.sq-invites .sq-actions { justify-content: flex-end; }
.sq-invites th:nth-child(3), .sq-invites td:nth-child(3) { width: 120px; }
.sq-toolbar__search select.form-control { width: auto; min-width: 150px; }

/* Award art picker — a labelled choice grid rather than bare images whose only
   name lived in a title tooltip. Survives the art being absent. */
.sq-artgrid { display: grid; gap: var(--sq-space-2); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sq-art { position: relative; margin: 0; cursor: pointer; }
.sq-art input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sq-art__body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 84px; height: 100%; padding: var(--sq-space-2);
  border: 1px solid var(--sq-border); border-radius: var(--sq-radius);
  background: var(--sq-card); text-align: center;
  transition: border-color var(--sq-transition), background var(--sq-transition);
}
.sq-art__body img { max-height: 56px; width: auto; }
.sq-art__name { font-size: 13px; font-weight: 500; color: var(--sq-fg); line-height: 1.3; }
.sq-art:hover .sq-art__body { border-color: var(--sq-muted-fg); }
.sq-art input:checked + .sq-art__body {
  border-color: var(--sq-primary); background: var(--sq-primary-050);
  box-shadow: inset 0 0 0 1px var(--sq-primary);
}
.sq-art input:checked + .sq-art__body .sq-art__name { font-weight: 700; }
.sq-art input:focus-visible + .sq-art__body { outline: 2px solid var(--sq-ring); outline-offset: 2px; }

/* Inline radio pair with the input before its label, and a target you can hit. */
.sq-radiorow { display: flex; flex-wrap: wrap; gap: var(--sq-space-3); }
.sq-radio { display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; font-weight: 500; }
.sq-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--sq-primary); cursor: pointer; }
.sq-radio span { font-size: 14px; color: var(--sq-fg); }
.sq-radio input:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }

/* --- API tokens ---------------------------------------------------------- */
.sq-tokenchip {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--sq-muted); color: var(--sq-muted-fg); font-size: 14px;
}
.sq-tokens tr.is-expired .sq-person__name { color: var(--sq-muted-fg); }
.sq-tokens td:last-child, .sq-tokens th:last-child { text-align: right; }
.sq-inlineform { display: inline; }

.sq-alert--success { border-left-color: var(--sq-accent); }
.sq-alert--success > i { color: var(--sq-accent); font-size: 16px; margin-top: 2px; }
.sq-token-reveal__body { flex: 1; min-width: 0; }

/* The token value is shown exactly once, so it has to be readable and
   selectable, not truncated into a decorative pill. */
.sq-tokenbox {
  display: flex; align-items: center; gap: var(--sq-space-2);
  margin-top: var(--sq-space-2); padding: var(--sq-space-2);
  background: var(--sq-muted); border: 1px solid var(--sq-border); border-radius: 8px;
}
.sq-tokenbox code {
  flex: 1; min-width: 0;
  font-size: 12px; line-height: 1.5; color: var(--sq-fg);
  word-break: break-all; user-select: all; background: none; padding: 0;
}
.sq-tokenbox .btn { flex: none; }

/* ===========================================================================
   Edit form pages — update behaviour / award / team / member, and profile.
   These are reached straight from lists that were already rebuilt, so they had
   to stop looking like a different application. One shape for all of them:
   a bounded column, real labels, and a footer where Save and Cancel differ.
   =========================================================================== */
/* Two fields side by side. Everything else here reuses the .sq-form component
   defined above rather than redefining it. */
.sq-formgrid { display: grid; gap: var(--sq-space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sq-formgrid .sq-field { margin-bottom: 0; }

/* Save is the primary and Cancel a quiet way out; they used to be identical. */
.sq-form__actions--end { justify-content: flex-end; padding-top: var(--sq-space-3); border-top: 1px solid var(--sq-border); }

/* Native colour input beats a hex text field: it is a real picker, keyboard
   operable, and cannot be typed into an invalid state. The hex stays visible
   beside it because that is what gets stored and pasted. */
.sq-colorfield { display: flex; align-items: center; gap: var(--sq-space-2); }
.sq-colorfield input[type="color"] {
  flex: none; width: 46px; height: 40px; padding: 3px;
  background: var(--sq-card); border: 1px solid var(--sq-border);
  border-radius: 8px; cursor: pointer;
}
.sq-colorfield input[type="color"]:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.sq-colorfield input[type="text"] { width: 120px; font-variant-numeric: tabular-nums; }

/* Current image, with the file input beside it rather than a bare "Old Image"
   label above an orphaned thumbnail. */
.sq-imagefield { display: flex; align-items: center; gap: var(--sq-space-3); flex-wrap: wrap; }
.sq-imagefield__preview {
  flex: none; width: 64px; height: 64px; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--sq-muted); color: var(--sq-muted-fg); font-size: 20px;
  border: 1px solid var(--sq-border);
}
.sq-imagefield__preview img { width: 100%; height: 100%; object-fit: cover; }
.sq-imagefield__input { flex: 1 1 220px; min-width: 0; }

/* Settings expressed as explained choices rather than bare checkboxes whose
   consequences lived only in the developer's head. */
.sq-switchlist { display: grid; gap: var(--sq-space-2); }
.sq-switch { position: relative; margin: 0; cursor: pointer; }
.sq-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sq-switch__body {
  display: flex; gap: var(--sq-space-2); align-items: flex-start;
  padding: var(--sq-space-2) var(--sq-space-3);
  border: 1px solid var(--sq-border); border-radius: var(--sq-radius);
  background: var(--sq-card);
  transition: border-color var(--sq-transition), background var(--sq-transition);
}
.sq-switch:hover .sq-switch__body { border-color: var(--sq-muted-fg); }
.sq-switch input:checked + .sq-switch__body {
  border-color: var(--sq-primary); background: var(--sq-primary-050);
  box-shadow: inset 0 0 0 1px var(--sq-primary);
}
.sq-switch input:focus-visible + .sq-switch__body { outline: 2px solid var(--sq-ring); outline-offset: 2px; }
.sq-switch__mark {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px;
  border: 1px solid var(--sq-border); background: var(--sq-card);
  display: grid; place-items: center; color: transparent; font-size: 10px;
}
.sq-switch input:checked + .sq-switch__body .sq-switch__mark {
  background: var(--sq-primary); border-color: var(--sq-primary); color: #fff;
}
.sq-switch__name { display: block; font-size: 14px; font-weight: 600; color: var(--sq-fg); }
.sq-switch__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--sq-muted-fg); }

/* Behaviour colour, shown in the list because it is what identifies the
   behaviour everywhere else it appears. */
.sq-swatch {
  display: block; flex: none; width: 36px; height: 36px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
}
.sq-behaviours th:nth-child(2), .sq-behaviours td:nth-child(2) { width: 120px; }
.sq-behaviours td:last-child, .sq-behaviours th:last-child { text-align: right; }
.sq-behaviours .sq-actions { justify-content: flex-end; }

/* ===========================================================================
   Ranked "Top N" lists — emotions, awards, behaviours.
   These were grids of 100px images with the count buried inside a blue
   progress bar and the NAME shown nowhere at all, so with the artwork missing
   every card was an identical blank square. A ranked comparison wants the
   category and the value written down, sorted, with the bar as reinforcement.
   =========================================================================== */
.sq-ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: rank; }

.sq-rankrow {
  display: grid; align-items: center; gap: var(--sq-space-2);
  grid-template-columns: 20px minmax(0, 1.1fr) minmax(0, 1fr) auto;
  padding: 7px var(--sq-space-2);
  border-radius: 8px;
  transition: background var(--sq-transition);
}
.sq-rankrow:hover { background: var(--sq-muted); }
.sq-rankrow__pos {
  font-size: 11px; font-weight: 700; color: var(--sq-muted-fg);
  font-variant-numeric: tabular-nums; text-align: right;
}
.sq-rankrow__name {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--sq-fg);
}
.sq-rankrow__name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-rankrow__dot { flex: none; width: 9px; height: 9px; border-radius: 999px; }

/* Unit cells: one per occurrence. A max-scaled bar drew every row full width
   whenever all the counts matched, which is most lists in a young team. */
.sq-cells { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.sq-cells > span { width: 10px; height: 10px; border-radius: 3px; }

/* Kept for lists whose counts have outgrown one cell each. */
.sq-rankrow__bar { height: 6px; border-radius: 999px; background: var(--sq-muted); overflow: hidden; }
.sq-rankrow__bar > span { display: block; height: 100%; border-radius: 999px; }

.sq-rankrow__val { display: flex; align-items: baseline; gap: 7px; justify-content: flex-end; }
.sq-rankrow__count { font-size: 14px; font-weight: 700; color: var(--sq-fg); font-variant-numeric: tabular-nums; }
.sq-rankrow__share { font-size: 12px; color: var(--sq-muted-fg); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }

/* The mix across the whole card, so proportion survives even when every row
   holds the same count. */
.sq-mixbar {
  display: flex; gap: 2px; height: 8px;
  margin: 0 var(--sq-space-2) var(--sq-space-3);
  border-radius: 999px; overflow: hidden; background: var(--sq-muted);
}
.sq-mixbar > span { display: block; min-width: 3px; }

/* Comments were behind a "See Details" button that opened one modal PER ITEM —
   up to thirty modals rendered into a dashboard nobody had opened yet. A native
   disclosure keeps them in place, needs no JavaScript, and is keyboard operable
   for free. */
.sq-rankitem > summary { list-style: none; cursor: pointer; }
.sq-rankitem > summary::-webkit-details-marker { display: none; }
.sq-rankitem > summary:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: -2px; border-radius: 8px; }
.sq-rankitem[open] > summary .sq-rankrow { background: var(--sq-muted); }
.sq-rankrow__more {
  flex: none; font-size: 11px; color: var(--sq-muted-fg);
  display: inline-flex; align-items: center; gap: 4px;
}
.sq-rankitem[open] .sq-rankrow__more i { transform: rotate(180deg); }
.sq-rankrow__more i { transition: transform var(--sq-transition); }

.sq-comments {
  margin: 0 0 var(--sq-space-2);
  padding: var(--sq-space-2) var(--sq-space-3) var(--sq-space-2) 42px;
  list-style: none;
}
.sq-comments li {
  position: relative; padding: 5px 0;
  font-size: 13px; line-height: 1.5; color: var(--sq-muted-fg);
}
.sq-comments li::before {
  content: ""; position: absolute; left: -14px; top: 12px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--sq-border);
}

/* Period-summary cards: two metrics that are NOT the same unit, so they get
   their own labels rather than two unlabelled gauges showing the same digits. */
.sq-summary { display: grid; gap: var(--sq-space-2); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sq-summary__card {
  padding: var(--sq-space-3);
  background: var(--sq-card); border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius); box-shadow: var(--sq-shadow);
}
.sq-summary__head { display: flex; align-items: baseline; gap: var(--sq-space-1); margin-bottom: var(--sq-space-3); }
.sq-summary__count { font-size: 26px; font-weight: 700; line-height: 1; color: var(--sq-fg); font-variant-numeric: tabular-nums; }
.sq-summary__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sq-muted-fg); }
.sq-metric + .sq-metric { margin-top: var(--sq-space-3); }
.sq-metric__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sq-space-2); }
.sq-metric__name { font-size: 13px; font-weight: 600; color: var(--sq-fg); }
.sq-metric__value { font-size: 15px; font-weight: 700; color: var(--sq-fg); font-variant-numeric: tabular-nums; }
.sq-metric__bar { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--sq-muted); overflow: hidden; }
.sq-metric__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--sq-primary); }
.sq-metric__hint { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--sq-muted-fg); }

/* Paired list cards: the card body centres its content vertically, which is
   right for a chart but leaves the shorter of two ranked lists floating half
   way down while its partner starts at the top. Lists start at the top. */
.sq-chart-row > .card > .card-body:has(.sq-ranklist),
.sq-chart-row > .card > .card-body:has(.sq-delta-grid),
.sq-chart-row > .card > .card-body:has(.sq-empty) { justify-content: flex-start; }

/* --- Standings -----------------------------------------------------------
   Top 3 and Lowest 3 were two stacked cards using different column widths for
   the same thing, each a row of 60px profile photos that were usually missing.
   One card, two columns, initials instead of broken images. */
.sq-standings { display: grid; gap: var(--sq-space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sq-standings__title {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 var(--sq-space-2);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sq-muted-fg);
}
.sq-standings__title i { font-size: 12px; }
.sq-standings__title--pos i { color: var(--sq-accent); }
.sq-standings__title--neg i { color: var(--sq-danger); }
body.dark-mode .sq-standings__title--pos i { color: #34D399; }
body.dark-mode .sq-standings__title--neg i { color: #F87171; }

.sq-standings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sq-standings__empty { margin: 0; font-size: 13px; color: var(--sq-muted-fg); }

.sq-standing {
  display: flex; align-items: center; gap: var(--sq-space-2);
  padding: 8px var(--sq-space-2);
  border-radius: 8px; color: inherit; text-decoration: none;
  transition: background var(--sq-transition);
}
.sq-standing:hover { background: var(--sq-muted); color: inherit; }
.sq-standing:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: -2px; }
.sq-standing__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--sq-fg);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-standing__pts { font-size: 14px; font-weight: 700; color: var(--sq-muted-fg); font-variant-numeric: tabular-nums; }
.sq-standing__pts.is-pos { color: var(--sq-accent); }
.sq-standing__pts.is-neg { color: var(--sq-danger); }
body.dark-mode .sq-standing__pts.is-pos { color: #34D399; }
body.dark-mode .sq-standing__pts.is-neg { color: #F87171; }

/* Initials stand in for a photo that is optional and frequently absent. */
.sq-initials {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--sq-primary-050); color: var(--sq-primary);
  font-size: 13px; font-weight: 700;
}
body.dark-mode .sq-initials { color: #C7D2FE; }

/* ===========================================================================
   Member cards, per-behaviour ranking and head-to-head compare.
   =========================================================================== */

/* Two buttons in the page head instead of one. */
.sq-pagehead__actions { display: flex; gap: var(--sq-space-1); flex-wrap: wrap; }
.sq-pagehead__actions .btn i { margin-right: 6px; }

/* List / cards switch ------------------------------------------------------
   Segmented control: the two options sit in one track so they read as one
   choice rather than two unrelated buttons. */
.sq-viewtoggle {
  display: inline-flex; margin-bottom: var(--sq-space-2);
  background: var(--sq-muted); border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius); padding: 3px; gap: 3px;
}
.sq-viewtoggle__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: calc(var(--sq-radius) - 4px);
  font-size: 13px; font-weight: 600; color: var(--sq-muted-fg);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--sq-transition), color var(--sq-transition);
}
.sq-viewtoggle__btn:hover { color: var(--sq-fg); }
.sq-viewtoggle__btn.is-active { background: var(--sq-card); color: var(--sq-fg); box-shadow: var(--sq-shadow); }
.sq-viewtoggle__btn:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 1px; }
body.dark-mode .sq-viewtoggle { background: #0F172A; border-color: #1E293B; }
body.dark-mode .sq-viewtoggle__btn.is-active { background: #1E293B; color: #E2E8F0; }

/* Member cards -------------------------------------------------------------
   auto-fill rather than a fixed column count: a team of three should not leave
   two empty columns, and a team of thirty should use the width it has. */
.sq-cardgrid {
  display: grid; gap: var(--sq-space-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sq-membercard {
  display: flex; flex-direction: column; gap: var(--sq-space-2);
  padding: var(--sq-space-3);
  background: var(--sq-card); border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius); box-shadow: var(--sq-shadow);
}
.sq-membercard__head { display: flex; align-items: flex-start; gap: var(--sq-space-2); }
.sq-membercard__head img { flex: none; width: 56px; height: 56px; border-radius: 999px; object-fit: cover; }
.sq-membercard__who { min-width: 0; flex: 1; }
.sq-membercard__name { margin: 0; font-size: 16px; font-weight: 700; color: var(--sq-fg);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-membercard__role { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--sq-muted-fg); }
.sq-membercard__mail { margin: 0; font-size: 12px; color: var(--sq-muted-fg);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-membercard__head .sq-rank { flex: none; }

.sq-membercard__stats { display: grid; grid-template-columns: auto 1fr; gap: var(--sq-space-1) var(--sq-space-3); margin: 0; }
.sq-membercard__stats > div { display: contents; }
.sq-membercard__stats dt { font-size: 12px; font-weight: 600; color: var(--sq-muted-fg); text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.sq-membercard__stats dd { margin: 0; align-self: center; }

.sq-membercard__teams { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sq-membercard__teamlabel { font-size: 12px; font-weight: 600; color: var(--sq-muted-fg); text-transform: uppercase; letter-spacing: .04em; }
.sq-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--sq-primary-050); color: var(--sq-primary-600);
  border: 1px solid transparent; font-size: 12px; font-weight: 600;
}
body.dark-mode .sq-chip { background: #1E1B4B; color: #A5B4FC; border-color: #312E81; }

.sq-membercard__foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: var(--sq-space-1); border-top: 1px solid var(--sq-border); }
body.dark-mode .sq-membercard { background: #111827; border-color: #1F2937; }
body.dark-mode .sq-membercard__foot { border-top-color: #1F2937; }

/* Per-behaviour ranking ----------------------------------------------------
   The +/- split sits next to the count because a high count is not
   automatically a good one, and the two are only meaningful together. */
.sq-split { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 600; }
.sq-split__pos { color: var(--sq-accent); }
.sq-split__neg { color: var(--sq-danger); }
.sq-split__sep { color: var(--sq-muted-fg); font-weight: 400; }
body.dark-mode .sq-split__pos { color: #34D399; }
body.dark-mode .sq-split__neg { color: #F87171; }

.sq-compare-pick { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--sq-muted-fg); cursor: pointer; }
.sq-compare-pick input { margin: 0; }

/* Sticks to the bottom so the action stays reachable without scrolling back
   up after picking someone near the end of the list. */
.sq-compare-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sq-space-2);
  margin-top: var(--sq-space-2); padding: var(--sq-space-2);
  background: var(--sq-card); border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius); box-shadow: var(--sq-shadow-lg);
  font-size: 13px; font-weight: 600; color: var(--sq-muted-fg);
}
body.dark-mode .sq-compare-bar { background: #111827; border-color: #1F2937; }

/* Head-to-head -------------------------------------------------------------- */
.sq-compare-picker { display: grid; gap: var(--sq-space-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.sq-compare-picker .form-group { margin-bottom: 0; }

.sq-compare th[scope="col"] { vertical-align: bottom; }
.sq-compare th[scope="row"] { font-size: 13px; font-weight: 600; color: var(--sq-muted-fg); white-space: nowrap; }
.sq-compare td { font-variant-numeric: tabular-nums; }
.sq-compare td.is-lead .sq-compare__val { font-weight: 700; color: var(--sq-fg); }
.sq-compare__flag { margin-left: 6px; color: var(--sq-accent); }
body.dark-mode .sq-compare td.is-lead .sq-compare__val { color: #E2E8F0; }
body.dark-mode .sq-compare__flag { color: #34D399; }

.sq-person--stacked { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
.sq-person--stacked img { width: 48px; height: 48px; }

.sq-taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sq-taglist li { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sq-swatch--sm { width: 10px; height: 10px; }

/* The tour's "hide all guides" button. Set apart from Back/Next so it never
   gets clicked by someone reaching for the primary action. */

/* ===========================================================================
   MOBILE  (<768px)
   Every list in this app was a table with a 720px min-width sitting in a
   ~325px window. It scrolled, but nothing said so, and the right-hand column
   — always the actions: Open, Settings, Give feedback, Delete — was the part
   that fell off the edge. So on a phone the lists were read-only by accident.

   Below 768px each row becomes its own card: first cell is the heading, every
   other cell is a label/value pair taken from the <thead> (data-label is
   filled in by sqLabelTables() in squadli-ui.js), and the actions sit at the
   bottom at a thumb-sized height. Nothing scrolls sideways, nothing is hidden.

   .sq-compare opts out: it is a measure-by-person matrix, not a list, and
   stacking it would destroy the comparison. It keeps its horizontal scroll.
   =========================================================================== */
@media (max-width: 767.98px) {

  .sq-table:not(.sq-compare) { display: block; min-width: 0; }
  .sq-table:not(.sq-compare) thead { display: none; }
  .sq-table:not(.sq-compare) tbody,
  .sq-table:not(.sq-compare) tbody tr,
  .sq-table:not(.sq-compare) tbody td { display: block; width: auto; }

  .sq-table:not(.sq-compare) tbody tr {
    margin-bottom: var(--sq-space-2);
    padding: var(--sq-space-2) 0;
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius);
    background: var(--sq-card);
  }
  .sq-table:not(.sq-compare) tbody tr:hover { background: var(--sq-card); }

  .sq-table:not(.sq-compare) tbody td {
    padding: 6px var(--sq-space-3);
    border-bottom: 0;
    text-align: left;
    width: auto !important;   /* beats the per-column widths set for desktop */
  }

  /* Label/value pair. The label is the column header it lost. */
  .sq-table:not(.sq-compare) tbody td[data-label] {
    display: grid;
    grid-template-columns: minmax(84px, 38%) 1fr;
    gap: var(--sq-space-2);
    align-items: center;
    /* A grid item stretches by default, which turned every badge, chip and
       button into a full-width block. Anything that genuinely wants the width
       asks for it below. */
    justify-items: start;
  }
  .sq-table:not(.sq-compare) tbody td[data-label] > .sq-meter,
  .sq-table:not(.sq-compare) tbody td[data-label] > .form-control { width: 100%; }
  .sq-table:not(.sq-compare) tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--sq-muted-fg);
  }

  /* First cell is who/what the row is about — it reads as the card title, so
     it keeps the full width and drops its label. */
  .sq-table:not(.sq-compare) tbody td:first-child {
    display: block;
    padding-bottom: var(--sq-space-2);
    margin-bottom: 2px;
    border-bottom: 1px solid var(--sq-border);
  }
  .sq-table:not(.sq-compare) tbody td:first-child::before { content: none; }

  /* Columns hidden for want of width on desktop are worth showing again once
     each row has a whole card to itself. */
  .sq-roster tbody td:nth-child(4) { display: grid; }

  /* The roster's first cell is the rank chip, not a title, so it gets no rule
     under it — the member's name on the next line is the real heading. */
  .sq-roster tbody td:first-child { border-bottom: 0; padding-bottom: 0; }

  /* Long values (emails, invite URLs) must wrap inside their column rather
     than push the card wide. */
  /* Everything in the cell stacks under the value column; a cell with two
     badges in it (Account: "Team leader" + "Unverified") must not drop its
     second one back under the label. */
  .sq-table:not(.sq-compare) tbody td[data-label] > * { min-width: 0; grid-column: 2; }
  .sq-table:not(.sq-compare) .sq-person { min-width: 0; }
  .sq-table:not(.sq-compare) .sq-person__name,
  .sq-table:not(.sq-compare) .sq-person__sub { overflow-wrap: anywhere; }

  /* Actions: left-aligned, wrapped, thumb-sized. */
  .sq-table:not(.sq-compare) .sq-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--sq-space-1);
  }
  .sq-table:not(.sq-compare) .sq-actions .btn,
  .sq-table:not(.sq-compare) .sq-actions .sq-iconbtn,
  .sq-table:not(.sq-compare) .btn.btn-sm {
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sq-table:not(.sq-compare) .sq-actions .sq-iconbtn { min-width: 40px; }

  .sq-table:not(.sq-compare) select.form-control { width: 100%; min-width: 0; }
  .sq-table:not(.sq-compare) .sq-meter { min-width: 0; }

  /* The comparison matrix does not stack — it is measure-by-person, and
     splitting the two people apart is the one thing it must not do. Instead it
     is tightened until three columns fit, so it needs no sideways scroll. */
  .sq-compare { min-width: 0; font-size: 13px; }
  .sq-compare th, .sq-compare td { padding: 8px 10px; }
  .sq-compare thead img { width: 36px; height: 36px; }
  .sq-compare .sq-person__sub { display: none; }

  /* Toolbars: the search box was a fixed 240px next to a 150px select and a
     button, in a flex row that could not wrap, so Search fell off the edge. */
  .sq-toolbar__search { flex-wrap: wrap; width: 100%; }
  .sq-toolbar__search .form-control,
  .sq-toolbar__search select.form-control { width: 100%; min-width: 0; flex: 1 1 100%; }
  .sq-toolbar__search .btn { flex: 1 1 100%; }
  .sq-toolbar > * { min-width: 0; }
  .sq-toolbar__cta { margin-left: 0; width: 100%; }

  /* intro.js renders the tooltip INSIDE .introjs-tooltipReferenceLayer, which it
     positions over the highlighted element — so `left` on the tooltip is
     relative to the highlight, not to the screen. The dashboard guide's first
     step points at #profile-section, which on a phone is in the off-canvas
     sidebar at left:-250px, and the tooltip went off the left edge with it,
     taking the Next button with it and stranding the tour.

     Fixing the tooltip to the viewport as a bottom sheet is the only position
     that does not depend on where the highlight landed. */
  .introjs-tooltip {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: none !important;
  }
  /* An arrow pointing at something off-screen points at nothing. */
  .introjs-arrow { display: none; }
  .introjs-tooltipbuttons { flex-wrap: wrap; }
}

/* Coarse pointers get a real target on the chrome controls too: these were
   24-34px squares sized for a mouse. */
@media (pointer: coarse) {
  .sq-chrome-btn, .sq-iconbtn { min-width: 40px; min-height: 40px; }
  .sq-btn--sm { min-height: 40px; }
}