/* Headx portal — sizing corrections.
   ---------------------------------------------------------------------------
   Loaded AFTER css/styles.css. Kept in its own file so re-running the design
   kit's build.py (which regenerates styles.css) cannot silently drop them.

   The kit was drawn against a 1440 frame with a 320px rail and a 76px topbar,
   which is oversized on a real screen — the same problem the marketing site
   had, and corrected the same way.

   The TYPE RAMP is now also corrected here (2026-09-08). It shipped as a
   30/25/20/16/15/14/13/12 scale; the whole ramp is re-based onto the one
   measured off Teramind, which is the density standard for this project. The
   token block below carries the measurements and the reasoning.

                        as drawn   now    typical admin UI
     --side-w             320px    260px   240-280
     --topbar-h            76px     60px    56-64
     sidebar logo       120x50     32px h   28-36 h
     tenant nav row        49px     42px    36-44
     admin nav row         44px     40px    36-44
     --fs-body             15px   12.25px  Teramind measured
   --------------------------------------------------------------------------- */

:root {
  --side-w: 260px;
  --side-w-admin: 260px;
  --topbar-h: 60px;

  /* ── Type ramp: Teramind-derived (2026-09-08) ────────────────────────────
     Measured off Teramind's own console with getComputedStyle, not guessed:
       root            14px, Inter
       nav / body      12.25px / 500 / 17.5px
       body regular    12.25px / 400 / 17.5px
       page heading    14px    / 600 / 21px
       table cell      11.5px  / 400
       table header    10.5px  / 500 / 15.75px
       meta            10.5px  / 500 / 15.75px
       small tag        9.8px  / 300 / 14.7px
       status badge     9.1px  / 500 / 11.375px

     Their base is 0.875rem on a 14px root, so the whole ramp lands on clean
     rem steps (0.65 / 0.7 / 0.75 / 0.82 / 0.875 / 1rem).

     Body, table, meta and badge sizes are Teramind's EXACT measured values —
     that is where the density actually shows.

     The DISPLAY tiers are re-based rather than copied. Teramind's page heading
     is 14px over 12.25px body: a 1.14x step, because their console has no
     large numerals at all. Headx dashboards do (a stat card is a number first),
     so the existing hierarchy RATIOS are preserved and re-based onto Teramind's
     body size — 25/15 = 1.67 for a page title becomes 12.25 x 1.67 = 20.5.
     That adopts their density without flattening a stat tile into its label.

     NOTE: this SUPERSEDES the previous "11px floor" correction below it. The
     Teramind ramp bottoms out at 9.1px for status badges. Those are short,
     high-contrast, uppercase labels, which is the one place a sub-11px size
     stays legible — do not reuse the low end for running text. */
  --fs-page: 20.5px;  --lh-page: 26px;     /* page title            (was 25) */
  --fs-stat: 20px;    --lh-stat: 24px;     /* stat numerals         (was 24) */
  --fs-h2:   16px;    --lh-h2:   21px;     /* card titles           (was 20) */
  --fs-h3:   14px;    --lh-h3:   19px;     /* sub-headings          (was 16) */
  --fs-body: 12.25px; --lh-body: 17.5px;   /* dominant body / table cells   */
  --fs-sm:   11.5px;  --lh-sm:   16.5px;
  --fs-xs:   10.5px;  --lh-xs:   15.75px;  /* table headers, meta           */
  --fs-2xs:   9.8px;  --lh-2xs:  14.7px;   /* small tags, axis labels       */
  --fs-3xs:   9.1px;  --lh-3xs:  13px;     /* status badges only            */

  /* Teramind runs Inter throughout; it is loaded alongside Poppins in the
     portal layouts. Revert this single line to fall back to Poppins. */
  --ff: Inter, Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ── Control heights, re-based with the type ────────────────────────────
     Shrinking the type without shrinking the boxes leaves a 12.25px label
     floating in a 42px button — which is exactly what the "Add employee"
     button looked like after the type rollout: correct text, kit-sized box.

     Same 0.8167 ratio, rounded to whole pixels. The kit's own comments give
     the usage counts these were drawn for:
       --h-control  50 -> 41   toolbar search / select / large button
       --h-btn      42 -> 34   standard button
       --h-btn-sm   36 -> 30   chip button / dropdown
       --h-field    52 -> 42   form input
       --h-row      52 -> 42   table row
       --h-row-head 53 -> 43   table header row

     34px is under the 44px touch minimum, which is deliberate and matches
     Teramind: this is a pointer-driven desktop admin console. The separate
     44px min-height rules further down this file still cover the controls
     that are genuinely tapped on a phone; do not remove them. */
  --h-control: 41px;
  --h-btn: 34px;
  --h-btn-sm: 30px;
  --h-field: 42px;
  --h-row: 42px;
  --h-row-head: 43px;
}

/* Button padding, gap and glyph scale with the box. The kit pins these in px
   beside the height token, so overriding the token alone leaves a 34px button
   carrying 18px of side padding drawn for a 42px one. */
.btn            { padding: 0 15px; gap: 8px; }
.btn--sm        { padding: 0 11px; gap: 6px; }
.btn--lg        { padding: 0 18px; }
.btn--xl        { height: 49px; padding: 0 20px; gap: 13px; }
.btn > .icon    { --icon-size: 16px; }

/* The employees toolbar button is pinned to a measured 196px width with a
   22px glyph — both drawn against the old 15px label. At 12.25px the label no
   longer fills that box, so the button read as an oversized slab. */
[data-screen="employees-monitoring"] .em-add {
  width: 160px;
  padding: 0 18px 0 12px;
  gap: 11px;
}
[data-screen="employees-monitoring"] .em-add .icon { --icon-size: 18px; }

/* styles.css steps the display sizes down again under 640px, using the OLD
   ramp's numbers (24/21/18) — all of which are now LARGER than the base ramp
   above, so without this the type would grow on small screens. Re-stated at
   the new scale. */
@media (max-width: 640px) {
  :root {
    --fs-page: 18px; --lh-page: 24px;
    --fs-stat: 17px;
    --fs-h2:   15px;
  }
}

/* The kit already steps the rail down at <=1200px; keep those tiers at or
   below the new base so the correction is never undone by a media query. */
@media (max-width: 1200px) {
  :root { --side-w: 244px; --side-w-admin: 244px; }
}

.side__brand img {
  width: auto;
  height: 32px;
}

/* Sidebar text + icons to the sizes real admin rails use.
   The kit set labels at --fs-body (15px) beside 24px icons, with a 13px
   uppercase group header and a 15-17px icon gap — all a step large for a
   navigation rail.

     label       15px -> 14px   (GitHub/Notion/Vercel 14, Linear 13)
     icon        24px -> 20px   (20 is the standard pairing with 14px text)
     group hdr   13px -> 11px   uppercase, with tracking to stay legible
     icon gap  15-17px -> 10px
     row height  49/44 -> 40px  (36-44 typical) */
.side__link {
  /* Sidebar nav typography, set to spec (2026-09-08).
     Inter is fetched alongside Poppins in the portal layouts — without that
     link this family silently fell back and the sidebar was never actually
     Inter.
     NOTE: the spec also carried color #d1d5db. That is a DARK-sidebar value;
     this rail is white (--s-side: #ffffff), where #d1d5db lands around 1.4:1
     contrast and is effectively invisible. The colour is deliberately left to
     --c-ink until the rail itself goes dark. */
  font-family: Inter, var(--ff);
  font-size: 12.25px;
  font-weight: 500;
  font-style: normal;
  line-height: 17.5px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.side--tenant .side__link,
.side--admin  .side__link { height: 40px; }

.side__icon { width: 20px; height: 20px; }

/* ── Table row-action buttons ────────────────────────────────────────────
   The kit draws these at 40x40 with a 20px glyph, which was in proportion to
   the old 15px body text. Against the Teramind-derived 12.25px row text they
   read as oversized tap targets on a dense table — three of them dominated the
   row they belong to.

   28px box / 16px glyph keeps the same ~1.75 box-to-glyph ratio the sidebar
   uses (20px glyph in a 40px row) while sitting correctly next to 12.25px
   text. `.icon` already reads --icon-size, so the glyph scales from one
   custom property rather than needing width/height overrides.
   Applied to .table__actions so every table's row actions match, not just
   the one page that surfaced it. */
.table__actions .icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.table__actions .icon-btn .icon { --icon-size: 16px; }

.side__group {
  font-size: var(--fs-xs);
  line-height: 16px;
  letter-spacing: 0.06em;
  margin: 14px 0 4px;
}

.side { --nav-gap: 10px; }
.side--admin { --nav-gap: 10px; }

/* The rail's own inset/gutter were measured against the 320px width; at 260
   they leave too little room for the labels. */
.side {
  --nav-inset: 16px;
  --nav-gutter: 16px;
}
.side--admin {
  --nav-inset: 14px;
  --nav-gutter: 14px;
}

/* The topbar's right padding was 40px against a 1440 frame. */
.topbar { padding-right: 24px; }

/* ---------------------------------------------------------------------------
   Type + icon sizes to universal standards.

   The kit's ramp is sound, but three screens hardcode status text below the
   11px readability floor, and a number of icon boxes carry fractional pixel
   sizes transcribed from Figma export bounds (the kit's own comments explain
   them: "a 19px box whose 1.4 stroke overflows to 20.4 painted pixels").
   Fractions are not a real size system, so the boxes are snapped to the 4px
   grid — 16 / 20 / 24 — with object-fit:contain so no glyph is distorted.
   --------------------------------------------------------------------------- */

/* --- text below the 11px floor ------------------------------------------- */
[data-screen="audio"] .audio-pc__status,
[data-screen="remote-desktop"] .rd-pc__state,
[data-screen="dashboard"] .dash-tip--apps .dash-tip__value { font-size: var(--fs-xs); }

/* --- interactive icons onto the 4px grid --------------------------------- */
[data-screen="activity-tracking"] .actrk__submit-icon,
[data-screen="status-dashboard"] .status-btn__icon--trash,
[data-screen="status-dashboard"] .icon[data-icon="reload"],
[data-screen="status-dashboard"] .status-table .icon[data-icon="trash"],
[data-screen="download-agent"] .dl-btn__icon,
[data-screen="remote-desktop"] .rd-pc__disc .icon,
[data-screen="announcements"] .ann-table .icon-btn--red .icon,
[data-screen="app-categories"] .apc-btn--delete .icon,
[data-screen="policies-configuration"] .pol-act--trash .icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

[data-screen="status-dashboard"] .status-btn__icon--plus,
[data-screen="download-agent"] .dl-step__icon,
[data-screen="announcements"] .ann-create__icon,
[data-screen="app-categories"] .apc-add__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

[data-screen="recording"] .rec-chip__glyph--type,
[data-screen="recording"] .rec-chip__glyph--cal,
[data-screen="recording"] .rec-chip__glyph--clock {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Topbar: 22px icons in a 35px hit box. 20px on the grid, 36px box — 36 is the
   smallest target that still clears the accessibility minimum. */
.topbar__icon { width: 20px; height: 20px; }
.topbar__icon-btn { width: 36px; height: 36px; }

/* ---------------------------------------------------------------------------
   Additions the kit does not ship, needed by the Laravel shell.
   --------------------------------------------------------------------------- */

/* The kit shows one stock portrait for every user. Initials instead — a real
   avatar would need a real upload, and a stock face for all admins is fiction. */
.topbar__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-green, #098b2d);
  color: #fff;
  font-size: var(--fs-sm, 14px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Platform dashboard: the kit's "Resource Usage" and "Recent Activities" cards
   had no backing query, so those slots carry Needs Attention / Quick Actions /
   a real agent-version list instead. Those need list styling the kit's chart
   components do not provide (.pd-versions there is an SVG chart, not a list).
   --------------------------------------------------------------------------- */

.pd-system__list { display: flex; flex-direction: column; }
.pd-system__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--s-hairline, #eceff3);
  font-size: var(--fs-body, 15px);
}
.pd-system__row:last-child { border-bottom: 0; }
.pd-system__row strong { font-weight: var(--fw-semibold, 600); }
.pd-system__row--warn strong { color: #b54708; }
.pd-system__row a { color: inherit; }
.pd-system__row a:hover { text-decoration: underline; }

.pd-versions__list { display: flex; flex-direction: column; gap: 10px; }
.pd-versions__row {
  display: grid;
  grid-template-columns: 78px 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm, 14px);
}
.pd-versions__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--s-hairline, #eceff3);
  overflow: hidden;
}
.pd-versions__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-green, #098b2d);
}
.pd-versions__n { text-align: right; font-variant-numeric: tabular-nums; }

.pd-quick__list { display: flex; flex-direction: column; gap: 8px; }
.pd-quick__item {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--s-hairline, #eceff3);
  border-radius: var(--r-sm, 8px);
  font-size: var(--fs-sm, 14px);
}
.pd-quick__item:hover { background: var(--s-app, #f6f8fa); }

.pd-empty {
  padding: 14px 0;
  color: var(--c-muted, #6b7280);
  font-size: var(--fs-sm, 14px);
}

/* The kit ships pd-tile__art but the three glyph tiles reference a class it
   never defines. */
.pd-tile__glyph { width: 22px; height: 22px; object-fit: contain; }

/* ---------------------------------------------------------------------------
   Classes injected by client-rendered tenant screens.

   Those pages build their own DOM with legacy class names. The JS is reused
   verbatim (see partials/_dashboard-script.blade.php), so the classes it emits
   are restyled here to match the kit rather than the JS being rewritten to
   emit kit classes — a rewrite of data-loading code that cannot be exercised
   in a browser from this machine.
   --------------------------------------------------------------------------- */

.dash-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn {
  padding: 4px 10px;
  border: 1px solid var(--s-hairline, #eceff3);
  border-radius: 999px;
  background: none;
  font: inherit;
  /* A filter chip is a control, not a caption: it sits on the body step like
     every other button. 9.8px is the small-TAG stop and made these unreadable
     on the dashboard. */
  font-size: var(--fs-body);
  color: var(--c-muted, #6b7280);
  cursor: pointer;
}
.filter-btn:hover { background: var(--s-app, #f6f8fa); }
.filter-btn.active {
  background: var(--c-green, #098b2d);
  border-color: var(--c-green, #098b2d);
  color: #fff;
}

.dash-sub {
  font-size: var(--fs-xs, 13px);
  font-weight: var(--fw-medium, 500);
  color: var(--c-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.usage-item,
.employee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--s-hairline, #eceff3);
  font-size: var(--fs-sm, 14px);
}
.usage-item:last-child,
.employee-item:last-child { border-bottom: 0; }

.usage-name,
.employee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-time,
.employee-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted, #6b7280);
}
.employee-info { min-width: 0; }
.employee-email {
  display: block;
  font-size: var(--fs-2xs, 12px);
  color: var(--c-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-data {
  padding: 18px 0;
  text-align: center;
  color: var(--c-muted, #6b7280);
  font-size: var(--fs-sm, 14px);
}
.loader { display: flex; justify-content: center; padding: 20px 0; }
.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--s-hairline, #eceff3);
  border-top-color: var(--c-green, #098b2d);
  border-radius: 50%;
  animation: portal-spin 0.7s linear infinite;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Row-action buttons the kit does not ship.

   The kit defines .icon-btn--blue and --amber only. Converted list screens need
   destructive and credential actions too, so the same treatment is extended
   rather than a new button vocabulary invented.
   --------------------------------------------------------------------------- */
/* .icon-btn--red / --green / --amber / --blue / --plain all ship with the kit.
   Only the credential action lacks a variant, and it reuses the kit's own
   tokens rather than introducing a colour. */
.icon-btn--key {
  --ib-bg: rgba(255, 244, 222, 0.7);
  --ib-ink: #a17317;
}

/* The kit ships view-list / view-grid (layout toggles) but no eye, and "view
   this record" is not a layout toggle. Drawn to the kit's action-icon pattern:
   20x20 box, 1.5 stroke, round caps/joins — same as trash.svg and key.svg.
   Icons are masked with currentColor, so the stroke colour in the file is
   irrelevant. */
.icon[data-icon="eye"] { --icon: url(../assets/icons/eye.svg); }

/* Reject / deactivate. The kit binds 106 icons but has no cross or slashed
   circle; drawn to the same pattern so the UI stays on one icon system
   instead of mixing in FontAwesome glyphs. */
.icon[data-icon="x-circle"] { --icon: url(../assets/icons/x-circle.svg); }
.icon[data-icon="ban"]      { --icon: url(../assets/icons/ban.svg); }

.icon-btn--green {
  color: #0d7a71;
  background: rgba(13, 122, 113, 0.10);
}
.icon-btn--green:hover { background: rgba(13, 122, 113, 0.20); }

/* Bulk-select bar above a list table. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 16px;
  border: 1px solid var(--s-hairline, #eceff3);
  border-radius: var(--r-sm, 8px);
  background: var(--s-app, #f6f8fa);
  font-size: var(--fs-sm, 14px);
}
.bulk-bar__count { font-weight: var(--fw-semibold, 600); }
.bulk-bar__clear { margin-left: auto; color: var(--c-muted, #6b7280); }
.bulk-bar__clear:hover { text-decoration: underline; }

/* A <button> inside .table__actions must match the <a> siblings exactly. */
.table__actions button.icon-btn { border: 0; cursor: pointer; font: inherit; }
.table__actions form { display: inline-flex; }

/* ---------------------------------------------------------------------------
   Bootstrap-shaped modal, no Bootstrap.

   Shared partials (e.g. the uninstall-password dialog) carry Bootstrap 4 modal
   markup, and their JS already falls back to toggling .show + display:block
   when jQuery-bootstrap is absent — which is the path the portal shell takes.
   These rules make that fallback render as a real dialog.
   --------------------------------------------------------------------------- */
.app .modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.45);
}
.app .modal.show { display: block; }
.app .modal-dialog {
  max-width: 520px;
  margin: 8vh auto;
}
.app .modal-dialog-centered { margin: 12vh auto; }
.app .modal-content {
  background: var(--s-card, #fff);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}
.app .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}
.app .modal-title { font-size: var(--fs-h2, 18px); font-weight: var(--fw-semibold, 600); margin: 0; }
.app .modal-body { padding: 18px; }
.app .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--s-hairline, #eceff3);
}
/* showMetadata() sets display:flex rather than block. */
.app .modal--flex { align-items: flex-start; justify-content: center; }
.app .modal--flex[style*="flex"] { display: flex !important; }

.meta-pre {
  margin: 0;
  padding: 12px;
  border-radius: var(--r-sm, 8px);
  background: var(--s-app, #f6f8fa);
  font-size: var(--fs-2xs, 12px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow: auto;
}

.url-code {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--fs-2xs, 12px);
  color: var(--c-muted, #6b7280);
  word-break: break-all;
}

/* Extend buttons sit in a row inside the renewals table. */
.rn-ext { display: flex; gap: 4px; flex-wrap: wrap; }

.app .modal .close {
  background: none;
  border: 0;
  /* The multiplication-sign glyph, sized like an icon rather than text. 20px
     is the icon grid and the ramp's display step, so it stops showing up as an
     off-ramp size on every screen that carries a modal. */
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Employee row: initials disc beside the name/email stack. */
.em-row { display: flex; align-items: center; gap: 10px; }

/* Screenshot gallery. The kit's grid is bound to fixed sample tiles; this is
   the same visual treatment driven by however many captures come back. */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.sg-figure {
  margin: 0;
  border: 1px solid var(--s-hairline, #eceff3);
  border-radius: var(--r-sm, 8px);
  overflow: hidden;
  background: var(--s-card, #fff);
}
.sg-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--s-app, #f6f8fa);
}
.sg-thumb--missing { display: block; }

/* Alpine pages: hide x-show/x-cloak elements until Alpine boots, otherwise
   every branch flashes on first paint. */
[x-cloak] { display: none !important; }

/* Working hours */
.wh-wrap { max-width: 640px; }
.wh-tz { margin-bottom: 18px; }
.wh-days { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.wh-day {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm, 14px);
  cursor: pointer;
}
.wh-day input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-green, #098b2d);
}
.wh-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.wh-flash { margin-bottom: 0; }

/* Clipboard: flagged rows tinted, content preview truncated so a full card
   number never sits on screen at full width. */
.cb-row--flagged { background: rgba(217, 45, 32, 0.04); }
.cb-content {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: var(--fs-2xs, 12px);
}

/* Chart.js needs a sized parent: maintainAspectRatio is false. */
.sd-chart { position: relative; height: 300px; }

/* Recordings: one expandable card per agent. */
.rec-agent { margin-bottom: 12px; }
.rec-agent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rec-agent__head:hover { background: var(--s-app, #f6f8fa); }
.rec-agent__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-agent__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.rec-agent__chev { transition: transform var(--dur, 220ms) var(--ease, ease); }

.rec-section { margin-bottom: 20px; }
.rec-section:last-child { margin-bottom: 0; }
.rec-section__icon { vertical-align: -3px; margin-right: 6px; }
.rec-file { font-family: 'SFMono-Regular', Consolas, monospace; font-size: var(--fs-2xs, 12px); }

.rec-player__box {
  position: relative;
  max-width: min(900px, 92vw);
  width: 100%;
  padding: 20px;
  border-radius: var(--r-md, 12px);
  background: var(--s-card, #fff);
}
.rec-player__title {
  margin-bottom: 12px;
  padding-right: 46px;
  font-size: var(--fs-h3, 16px);
  font-weight: var(--fw-semibold, 600);
  word-break: break-all;
}
.rec-player__media { width: 100%; max-height: 70vh; border-radius: var(--r-sm, 8px); background: #000; }
.rec-player .hx-lightbox__close { background: rgba(0, 0, 0, 0.55); }

/* Download agent */
.dl-code {
  display: inline-block;
  padding: 10px 18px;
  border: 2px dashed var(--c-green, #098b2d);
  border-radius: var(--r-sm, 8px);
  background: rgba(9, 139, 45, 0.06);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: var(--fs-h2, 18px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 2px;
  word-break: break-all;
}
.dl-head-icon { vertical-align: -3px; margin-right: 6px; }
.dl-desc { font-size: var(--fs-sm, 14px); margin-bottom: 8px; }
.dl-warn { color: #b54708; }
.dl-list { display: flex; flex-direction: column; gap: 9px; font-size: var(--fs-sm, 14px); }
.dl-list li { position: relative; padding-left: 16px; }
.dl-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-green, #098b2d);
}
.dl-cmd {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--r-xs, 6px);
  background: var(--s-app, #f6f8fa);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: var(--fs-2xs, 12px);
  word-break: break-all;
}

/* Ranked list bar under a table cell's name. */
.rk-bar { display: block; margin-top: 6px; height: 6px; }

/* Quick-link cards on the reports page. */
.ql-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.ql-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--s-hairline, #eceff3);
  border-radius: var(--r-sm, 8px);
}
.ql-card:hover { background: var(--s-app, #f6f8fa); }
.ql-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r-xs, 6px);
  background: rgba(9, 139, 45, 0.10);
  color: var(--c-green, #098b2d);
}

/* Activity monitoring table: timestamps never wrap, long window titles and
   executable paths truncate rather than blow the column out. */
.au-time { white-space: nowrap; font-size: var(--fs-2xs, 12px); color: var(--c-muted, #6b7280); }
.au-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 320px; }

.sg-figure[role="button"] { cursor: pointer; }
.sg-figure[role="button"]:focus-visible { outline: 2px solid var(--c-green, #098b2d); outline-offset: 2px; }
.sg-thumb-wrap { position: relative; display: block; }
.sg-flag { position: absolute; top: 8px; left: 8px; }

.sg-prompt { text-align: center; padding: 44px 20px; }
.sg-prompt__icon {
  --icon-size: 40px;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  color: var(--c-muted, #6b7280);
  opacity: 0.5;
}
.sg-prompt__title {
  font-size: var(--fs-h2, 18px);
  font-weight: var(--fw-semibold, 600);
  margin-bottom: 4px;
}

/* Full-image overlay. Kept out of .modal deliberately: it is a media viewer,
   not a dialog, and openHxLightbox() sets display:flex directly. */
.hx-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.9);
}
.hx-lightbox__img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-sm, 8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.hx-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}
.hx-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.hx-lightbox__info {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 10px 22px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--fs-xs, 13px);
  text-align: center;
}
.sg-cap {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Impersonation banner. The legacy tenant layout pins a 44px bar and pushes
   .page-container / .page-sidebar down by it; the portal equivalents are the
   fixed rail and the sticky topbar. */
#impersonation-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99999;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
  color: #fff;
  font-size: var(--fs-sm, 14px);
}
#impersonation-bar button {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  cursor: pointer;
}
#impersonation-bar button:hover { background: rgba(255, 255, 255, 0.26); }

.app.is-impersonating .side { top: 44px; height: calc(100vh - 44px); }
.app.is-impersonating .topbar { top: 44px; }
.app.is-impersonating main { padding-top: 44px; }

/* Laravel session flash. The kit has no equivalent component. */
.portal-flash {
  margin-bottom: var(--gap, 20px);
  padding: 12px 16px;
  border-radius: var(--r-sm, 8px);
  border-left: 3px solid transparent;
  font-size: var(--fs-body, 15px);
  line-height: var(--lh-body, 24px);
}
.portal-flash--ok   { background: #e9f6ec; border-left-color: #098b2d; color: #14532d; }
.portal-flash--err  { background: #fdecec; border-left-color: #d92d20; color: #7a1c14; }
.portal-flash--warn { background: #fff6e6; border-left-color: #b54708; color: #7a3d06; }

/* ─────────────────────────────────────────────────────────────────────────
   Collapsible sidebar groups (Aug 2026)

   The kit rail was a flat single-level list, which could not express the
   app's real nav: 23 top-level entries with 34 sub-pages beneath them. These
   rules add the second level while reusing the kit's own .side__link metrics,
   so a parent row sits on exactly the same baseline as a plain link.
   ───────────────────────────────────────────────────────────────────────── */

/* Parent rows are <button>, which the kit reset flattens — restore the
   link box so they line up with their siblings. */
.side--tenant .side__link--parent,
.side--admin .side__link--parent{
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  /* Deliberately NO font declarations here.
     A parent row carries .side__link too, so its typography is already set
     above. The original `font: inherit` reset family/size/weight/line-height
     to the RAIL's inherited Poppins 15/24 and silently undid it — and
     `font-size: inherit` is the same trap, because `inherit` resolves against
     the ANCESTOR, not against the other rule on this element. Leaving font
     alone lets .side__link win, which is what makes a parent row sit on the
     same baseline as a plain link. */
  color: var(--c-muted);
  text-align: left;
}
.side--tenant .side__link--parent .side__label,
.side--admin .side__link--parent .side__label{ flex: 1 1 auto; }

/* Chevron: a CSS triangle, so no extra asset and it inherits currentColor. */
.side--tenant .side__chev,
.side--admin .side__chev{
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transition: transform var(--dur, .18s) var(--ease, ease);
}
.side--tenant .side__item.is-open > .side__link--parent .side__chev,
.side--admin .side__item.is-open > .side__link--parent .side__chev{ transform: rotate(180deg); }
.side--tenant .side__item.is-open > .side__link--parent,
.side--admin .side__item.is-open > .side__link--parent{ color: var(--c-ink); }

/* Child list. Indented to the parent's label, with a hairline rail so the
   grouping reads at a glance while scanning. */
.side--tenant .side__sub,
.side--admin .side__sub{
  list-style: none;
  margin: 2px 0 4px;
  padding: 0 0 0 calc(var(--nav-pad, 14px) + 20px + var(--nav-gap, 10px));
  border-left: 1px solid var(--c-line, #e6e8ee);
  margin-left: calc(var(--nav-pad, 14px) + 9px);
}
.side--tenant .side__sub[hidden],
.side--admin .side__sub[hidden]{ display: none; }

.side--tenant .side__sublink,
.side--admin .side__sublink{
  display: block;
  padding: 6px 8px 6px 10px;
  margin-right: var(--nav-gutter, 12px);
  /* Matches .side__link so every rail row shares one type treatment. */
  font-family: Inter, var(--ff);
  font-size: 12.25px;
  font-weight: 500;
  line-height: 17.5px;
  letter-spacing: 0;
  color: var(--c-muted);
  border-radius: 6px;
  text-decoration: none;
  transition: background-color var(--dur, .18s) var(--ease, ease), color var(--dur, .18s) var(--ease, ease);
}
.side--tenant .side__sublink:hover,
.side--admin .side__sublink:hover{ background: var(--s-app, #f5f7fa); color: var(--c-ink); }

/* Active child mirrors the top-level active treatment so "where am I" reads
   the same at both levels. */
.side--tenant .side__sublink[aria-current="page"],
.side--admin .side__sublink[aria-current="page"]{
  background: var(--s-app, #f5f7fa);
  color: var(--c-green-600, #1f7a48);
  font-weight: var(--fw-medium, 500);
}

/* The two notification sub-pages that are children-of-a-child in the legacy
   rail; kept one level deeper rather than promoted, so the hierarchy matches. */
.side--tenant .side__sublink.is-nested,
.side--admin .side__sublink.is-nested{ padding-left: 22px; }
.side--tenant .side__sublink.is-danger,
.side--admin .side__sublink.is-danger{ color: #c0392b; }

/* Icon bindings for rail entries the flat kit never had.
   A slug with no rule here renders an INVISIBLE icon, not a missing one — the
   mask simply resolves to nothing. Add the rule whenever you add a nav entry. */
.side--tenant .side__icon[data-icon="search"]   { --side-icon: url(../assets/icons/nav/search.svg); }
.side--tenant .side__icon[data-icon="settings"] { --side-icon: url(../assets/icons/nav/settings.svg); }

/* Icons drawn Aug 2026 to break up shared artwork. The kit ships three
   byte-identical files (admins / agent-manager / employees-monitoring) and two
   more (activity-monitoring / activity-tracking), so six rail rows were sharing
   two glyphs; timesheet and remote-desktop were near-identical document marks;
   and two rows had no icon at all. Semantics follow the legacy rail's
   FontAwesome choices so no row changes meaning. */
.side--tenant .side__icon[data-icon="agents-laptop"]            { --side-icon: url(../assets/icons/nav/agents-laptop.svg); }
.side--tenant .side__icon[data-icon="activity-eye"]             { --side-icon: url(../assets/icons/nav/activity-eye.svg); }
.side--tenant .side__icon[data-icon="timesheet-calendar"]       { --side-icon: url(../assets/icons/nav/timesheet-calendar.svg); }
.side--tenant .side__icon[data-icon="remote-desktop-screen"]    { --side-icon: url(../assets/icons/nav/remote-desktop-screen.svg); }
.side--tenant .side__icon[data-icon="recordings-film"]          { --side-icon: url(../assets/icons/nav/recordings-film.svg); }
.side--tenant .side__icon[data-icon="keystrokes-keyboard"]      { --side-icon: url(../assets/icons/nav/keystrokes-keyboard.svg); }
.side--tenant .side__icon[data-icon="running-apps-windows"]     { --side-icon: url(../assets/icons/nav/running-apps-windows.svg); }
.side--tenant .side__icon[data-icon="employee-monitor-shield"]  { --side-icon: url(../assets/icons/nav/employee-monitor-shield.svg); }
.side--tenant .side__icon[data-icon="analytics-line"]           { --side-icon: url(../assets/icons/nav/analytics-line.svg); }
.side--tenant .side__icon[data-icon="configuration-sliders"]    { --side-icon: url(../assets/icons/nav/configuration-sliders.svg); }

/* ==========================================================================
   AUTH — universal sizing correction (login / signup)

   screens/auth.css in styles.css says it plainly at the top: "Both frames are
   1920x942". Every px in that block is a 1920 measurement, so on the 1366/1440
   screens customers actually sign in on it lands 25-40% oversized — 50px
   greeting, 32px card title, 52px inputs, a 58px button, 15px labels on a
   29px line-height.

   Re-based to the standard ramp used everywhere else in this project:
   h1 28-30 / h2 22-24 / body 15-16 / label 14 / small 13 / micro 11 floor,
   controls 40-44 tall, icons on the 4px grid, whole numbers only.

   Lives here and not in styles.css because styles.css is the kit's generated
   bundle and gets re-synced from Desktop/igma — anything written into it is
   lost on the next sync. overrides.css loads after it.
   ========================================================================== */

/* -- frame ----------------------------------------------------------------- */

/* The two-column frame is DESKTOP ONLY and must stay inside this query.

   @media adds no specificity, so an unconditional rule here beats the kit's
   `@media (max-width: 1180px) { .auth__inner { grid-template-columns:
   minmax(0,1fr) } }` at EVERY width — including a phone. Declared flat, this
   left the form column resolving to 0px on a 375px screen (460px of art alone
   already overflows it): the card rendered as a ~12px strip, one word per
   line, with no usable inputs. */
@media (min-width: 1181px) {
  .auth__inner {
    padding: 40px clamp(20px, 3vw, 56px);
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: clamp(28px, 4vw, 80px);
  }
}

/* Padding is safe at any width; only the column track was desktop-only. */
@media (max-width: 1180px) {
  .auth__inner {
    padding: 40px clamp(16px, 4vw, 32px);
    gap: 24px;
  }
}

/* -- hero ------------------------------------------------------------------ */
.auth-hero { min-height: 520px; }

.auth-hero__hi {
  margin-top: 40px;
  gap: 10px;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: 0.5px;
}
.auth-hero__hi img { width: 30px; height: 30px; }

.auth-hero__headline {
  margin-top: 14px;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.2;
}

.auth-hero__panel {
  margin-top: 90px;
  width: min(500px, 100%);
  min-height: 200px;
  border-radius: 18px;
  padding: 28px 210px 26px 26px;
}

.auth-hero__marks { margin-bottom: 12px; }
.auth-hero__marks img { height: 24px; }

.auth-hero__quote {
  font-size: 15px;
  line-height: 23px;
  max-width: 270px;
}

.auth-hero__agent {
  right: -56px;
  width: 250px;
  height: 354px;
}

/* -- card ------------------------------------------------------------------ */
.auth-card { border-radius: 12px; padding: 5px; }
.auth-card__inner { border-radius: 10px; padding: 28px 24px 26px; }

.auth-card__title { font-size: 24px; line-height: 1.2; }

.auth-card__sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.2px;
}

/* -- fields ---------------------------------------------------------------- */
.auth-form { margin-top: 20px; }
.auth-row { gap: 14px; }
.auth-field { margin-bottom: 14px; }

.auth-field__label {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 6px;
}

.auth-field__box { height: 42px; }

.auth-field__input { font-size: 15px; padding: 0 12px; }

/* The visible icon stays 18x13, but the hit area grows to the 40px touch
   target used everywhere else. right:2px keeps the icon's optical centre where
   it was (24px box at right:10px centres at 22px; 40px at right:2px also 22px). */
.auth-field__eye {
  width: 40px;
  height: 40px;
  right: 2px;
  display: grid;
  place-items: center;
}
.auth-field__eye img { width: 18px; height: 13px; }
.auth-field--eye .auth-field__input { padding-right: 42px; }

.auth-phone__cc { font-size: 15px; padding: 0 10px 0 12px; }

/* -- consent / meta -------------------------------------------------------- */
.auth-consent {
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 13px;
  line-height: 20px;
}
.auth-consent input { width: 16px; height: 16px; border-radius: 4px; }
/* The box stays 16px, but the label row it sits in becomes a 40px-tall target
   so "Remember me" is comfortably tappable on a phone. */
.auth-consent label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  cursor: pointer;
}
.auth-consent input:checked::after { width: 8px; height: 8px; }
/* Sits in the same 40px row as "Remember me"; fill it so both halves of the
   row are the same tappable height. */
.auth-consent__forgot {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* -- button ---------------------------------------------------------------- */
.auth-submit {
  height: 44px;
  gap: 10px;
  font-size: 15px;
  letter-spacing: 0.3px;
}
.auth-submit img { width: 18px; height: 8px; }

/* -- divider + social (signup) --------------------------------------------- */
.auth-or { margin: 18px 0 16px; font-size: 13px; letter-spacing: 0.3px; }
.auth-social { gap: 14px; }
.auth-social__btn { height: 40px; border-radius: 10px; font-size: 13px; gap: 10px; }
.auth-social__btn img { width: 16px; height: 16px; }

/* -- footer link ----------------------------------------------------------- */
.auth-swap {
  margin-top: 18px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
}

/* -- responsive ------------------------------------------------------------
   Restated because the kit's own breakpoints hardcode the 1920-frame card
   width; an unconditional rule above would not reach inside a media block. */
@media (max-width: 1180px) {
  .auth__inner { padding-top: 32px; }
  .auth-card { width: min(460px, 100%); }
}

@media (max-width: 560px) {
  .auth-card__inner { padding: 24px 18px 22px; }
  .auth-card__title { font-size: 22px; }
}

/* -- auth: the three classes the kit's auth block does not ship -------------

   .form-error was already being emitted by /login and had NO rule anywhere in
   either stylesheet, so a failed validation printed inherited 15px grey body
   text on the dark card — legible, but not readable as an error. */
.form-error {
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #ff8a8a;                 /* red that still passes on the #021422 card */
}

/* Flash from the platform guard's failed-login redirect. Generic by design —
   it must not reveal whether the address exists. */
.auth-alert {
  margin-top: 14px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 138, 138, 0.35);
  border-radius: 8px;
  background: rgba(255, 138, 138, 0.08);
  font-size: 13px;
  line-height: 19px;
  color: #ff8a8a;
}

/* Product lockup above the hero greeting (platform console sign-in). */
.auth-hero__brand { margin-top: 32px; }
.auth-hero__brand + .auth-hero__hi { margin-top: 22px; }

/* Admin-rail icon bindings for the entries added when the nine orphaned pages
   were brought into the navigation. A slug with no rule here renders an
   INVISIBLE icon, not a missing one — the mask simply resolves to nothing.
   Add the rule whenever you add a rail entry. */
.side--admin .side__icon[data-icon="search"]           { --side-icon: url(../assets/icons/nav/search.svg); }
.side--admin .side__icon[data-icon="employees-monitoring"] { --side-icon: url(../assets/icons/nav/employees-monitoring.svg); }
.side--admin .side__icon[data-icon="platform-users"]   { --side-icon: url(../assets/icons/nav/platform-users.svg); }
.side--admin .side__icon[data-icon="dlp-alerts"]       { --side-icon: url(../assets/icons/nav/dlp-alerts.svg); }
.side--admin .side__icon[data-icon="ueba-alerts"]      { --side-icon: url(../assets/icons/nav/ueba-alerts.svg); }
.side--admin .side__icon[data-icon="support-headset"]  { --side-icon: url(../assets/icons/nav/support-headset.svg); }
.side--admin .side__icon[data-icon="agent-versions"]   { --side-icon: url(../assets/icons/nav/agent-versions.svg); }
.side--admin .side__icon[data-icon="two-factor"]       { --side-icon: url(../assets/icons/nav/two-factor.svg); }

/* The kit ships admins.svg, agent-manager.svg and employees-monitoring.svg as
   BYTE-IDENTICAL files, so Admins and Agent Manager sat under the same glyph.
   Point Agent Manager at the laptop mark drawn for the tenant rail. */
.side--admin .side__icon[data-icon="agent-manager"]    { --side-icon: url(../assets/icons/nav/agents-laptop.svg); }

/* Table cell that links through to a record. The kit styles .table__name as
   plain text only, so every rebuilt screen that turned a linked company name
   into a <span> silently lost the click-through to that company. */
.table__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur, .18s) var(--ease, ease), border-color var(--dur, .18s) var(--ease, ease);
}
.table__link:hover,
.table__link:focus-visible {
  color: var(--c-green-600, #1f7a48);
  border-bottom-color: currentColor;
}

/* Gradient sub-headline in the auth hero. The kit only ships
   .auth-hero__headline, which forces the text onto one line with
   white-space:nowrap — fine for "Please sign in to your Headx", wrong for the
   longer lines the password and verification pages carry. */
.auth-hero__lead {
  margin-top: 14px;
  font-family: "SF Pro Display", "Segoe UI", var(--ff);
  font-weight: 700;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.25;
  background: linear-gradient(90deg, #398c09 17%, #0da2c7 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 22ch;
}

/* Stacked action buttons + status notes used by the verification and
   payment-result pages. */
.auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.auth-note {
  margin-top: 14px;
  padding: 9px 12px;
  border: 1px solid rgba(45, 230, 96, 0.28);
  border-radius: 8px;
  background: rgba(45, 230, 96, 0.08);
  font-size: 13px;
  line-height: 19px;
  color: #9ff0b6;
}
.auth-lede { margin-top: 14px; font-size: 14px; line-height: 21px; color: #acaeb4; font-weight: 300; }
.auth-link { display: inline-block; margin-top: 12px; font-size: 13px; color: #acaeb4; text-decoration: none; }
.auth-link:hover { color: #fff; }
.auth-ghost {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  background: none;
  font-family: var(--ff); font-size: 15px; font-weight: 500;
  color: #d6d8de; cursor: pointer; text-decoration: none;
}
.auth-ghost:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; }

/* Result mark for the payment outcome page. */
.auth-result { display: grid; place-items: center; width: 62px; height: 62px; margin: 4px auto 14px; border-radius: 50%; font-size: 26px; }
.auth-result--ok   { background: rgba(45, 230, 96, 0.12); color: #4fdc7c; }
.auth-result--fail { background: rgba(255, 138, 138, 0.12); color: #ff8a8a; }

/* Inline checkbox + label pair, and the required-field marker, used by the
   rebuilt config forms. The kit ships neither. */
.check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  /* A checkbox row is a control — body step, like every other one. */
  font-size: var(--fs-body, 12.25px);
  color: var(--c-ink, #1c1c21);
}
.check-row input { margin: 0; }
.req { color: var(--c-red-2, #e73b3b); }

/* The kit hardcodes three status labels below the 11px floor. They were raised
   in styles.css once before and the next kit re-sync silently reverted them —
   which is the whole reason corrections live in this file instead. */
[data-screen="audio"] .audio-pc__status,
[data-screen="remote-desktop"] .rd-pc__state,
[data-screen="dashboard"] .dash-tip--apps .dash-tip__value { font-size: var(--fs-xs); }

/* ---- forms inside modals ---------------------------------------------------
   The rebuilt kit-native pages (config/departments, config/locations) dropped
   the bs-compat opt-in — correctly, their page markup is kit markup now — but
   their dialogs still speak the legacy .form-group/.form-control vocabulary,
   which legacy-compat.css only styles under .bs-compat. Result: inside the
   modal, labels rendered INLINE beside shrink-wrapped inputs.

   Styled here at the .modal scope, unscoped from bs-compat, so any kit-native
   page that keeps a legacy-markup dialog gets a correct form. Same metrics as
   the compat layer: block label 14px, 42px full-width control. */
.app .modal .form-group { margin-bottom: 16px; }
.app .modal .form-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-body, 12.25px);
  line-height: var(--lh-body, 17.5px);
  font-weight: var(--fw-medium, 500);
  color: var(--c-ink, #1c1c21);
}
.app .modal .form-control {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--s-line, #d9d9d9);
  border-radius: var(--r-sm, 8px);
  background: var(--s-card, #fff);
  font-family: inherit;
  font-size: var(--fs-body, 12.25px);
  color: var(--c-ink, #1c1c21);
  outline: none;
}
.app .modal textarea.form-control { height: auto; min-height: 90px; padding: 10px 12px; }
.app .modal .form-control:focus {
  border-color: var(--c-green-600, #128736);
  box-shadow: 0 0 0 3px rgba(18, 135, 54, .12);
}
/* The label wrapping a checkbox (.check-row) stays inline-flex — a block label
   would put "Active" under its own checkbox. .check-row is already defined;
   this only exempts it from the block rule above. */
.app .modal .form-group > label.check-row { display: inline-flex; margin-bottom: 0; }

/* ==========================================================================
   STANDARD PAGE CHROME — measured from /employees, the approved reference.

   The employees screen ships per-screen kit CSS; pages without their own
   screen block fell back to different base values (30px/600 titles, 14px
   muted 67px table rows). The user approved the employees look as the
   project-wide standard, so its measured values are applied to the shared
   classes here: title 25px/500 with a 31px gap to the subtitle, body cells
   15px near-black on 60px rows.

   A kit screen block that intentionally restyles these (its selectors carry
   [data-screen=...], higher specificity) still wins — this sets the DEFAULT.

   ROW HEIGHTS (2026-09-09): the 60/53 measured here were drawn around 15px
   cell text. They are now pointed at --h-row / --h-row-head, which carry the
   re-based values, so a row shrinks with its own type instead of leaving a
   12.25px cell floating in a box built for 15px.
   ========================================================================== */
.app .page-title {
  /* Was a pinned 25px/32px. Pointed at the token so the Teramind-derived
     ramp actually reaches the one heading every page renders — a hardcode
     here silently cancels a token rollout. The ratio to body text is
     unchanged (1.67x), so the hierarchy /employees established is intact. */
  font-size: var(--fs-page);
  line-height: var(--lh-page);
  font-weight: var(--fw-medium, 500);
  color: var(--c-ink, #1c1c21);
  margin: 7px 0 31px;
}
.app .adm-head .page-title { margin-bottom: 31px; }
/* Subtitle sits below the title's 31px gap, same as employees — the margins
   collapse so the air between the two matches the reference exactly. */

.app .table tbody td,
.app .table--roomy tbody td {
  font-size: var(--fs-body, 15px);
  color: var(--c-ink-4, #0a0a0a);
  height: var(--h-row);
}
.app .table thead th { height: var(--h-row-head); }

/* The kit search input keeps its icon clearance even when a page is on the
   compat layer — without this, a broad compat input rule can zero the
   padding and the magnifier draws over the placeholder text. */
.app .search .search__input { padding: 0 16px 0 40px; }

/* Lightbox prev/next. Arrow keys drive the same thing; these give the control
   a visible affordance so it is discoverable without a keyboard. */
.hx-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.hx-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.hx-lightbox__nav--prev { left: 24px; }
.hx-lightbox__nav--next { right: 24px; }
@media (max-width: 640px) {
  .hx-lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
  .hx-lightbox__nav--prev { left: 8px; }
  .hx-lightbox__nav--next { right: 8px; }
}

/* ---- /remote: the three pieces the kit's remote-desktop block does not ship
   The kit mock has no destructive action, no footnote and no single/grid
   switch; this app has all three. Scoped to the screen so they cannot leak. */
[data-screen="remote-desktop"] .rd-btn--danger {
  border-color: #f5c2c8;
  color: #d41014;
  background: #fff;
}
[data-screen="remote-desktop"] .rd-btn--danger:hover:not(:disabled) { background: #fff0f0; }
/* Disabled without becoming invisible.

   These buttons are disabled until a PC is picked — which is the FIRST thing
   anyone sees on this page. At opacity .5 on an already-pale #f5f6f9 control,
   the labels were barely legible, so the page read as broken rather than as
   "pick a PC first". Communicate the state with muted ink and the cursor, and
   keep the text readable. */
[data-screen="remote-desktop"] .rd-btn:disabled {
  opacity: 1;
  color: var(--c-muted, #636674);
  background: var(--s-control, #f5f6f9);
  border-color: var(--s-control-line, #eef0f4);
  cursor: not-allowed;
}
[data-screen="remote-desktop"] .rd-btn--primary:disabled {
  color: #fff;
  background: color-mix(in srgb, var(--c-green-600, #128736) 55%, #fff);
  border-color: color-mix(in srgb, var(--c-green-600, #128736) 55%, #fff);
}
[data-screen="remote-desktop"] .rd-btn--danger:disabled {
  color: color-mix(in srgb, var(--c-red-deep, #d41014) 55%, #fff);
  border-color: color-mix(in srgb, var(--c-red-deep, #d41014) 22%, #fff);
  background: #fff;
}

/* The kit pins this card to 162px, measured against a single non-wrapping row
   of 11px buttons. At 14px the row wraps, and the fourth button (Shutdown) was
   clipped clean out of the card. */
[data-screen="remote-desktop"] .rd-control {
  height: auto;
  padding-bottom: 18px;
}

[data-screen="remote-desktop"] .rd-control__note {
  margin-top: 10px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-muted, #636674);
}
[data-screen="remote-desktop"] .rd-control__note a { color: var(--c-green-600, #128736); }

/* Single / Grid switch, sized like the kit's other segmented controls. */
.view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--s-line, #d9d9d9); border-radius: var(--r-sm, 8px); overflow: hidden; background: #fff; }
.view-toggle button {
  border: 0;
  background: none;
  padding: 0 16px;
  height: 40px;
  font-family: inherit;
  font-size: var(--fs-sm, 14px);
  font-weight: var(--fw-medium, 500);
  color: var(--c-muted, #636674);
  cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--s-line, #d9d9d9); }
.view-toggle button.active { background: var(--t-green, #e2fce8); color: var(--c-green-deep, #10712a); }

/* ==========================================================================
   Stat tile — the app-wide standard

   White card, thin coloured left accent, small uppercase label. Promoted here
   from agents/status so every screen shares one definition instead of copying
   it into page CSS. The kit also ships filled-gradient tiles
   (.stat--gradient / .stat--rd-*) and they look right in the isolated mock,
   but next to the white cards every other screen uses they read as a
   different product — so this is the house tile.
   ========================================================================== */
.stat-tile {
  background: #fff;
  border: 1px solid var(--s-line-soft, #eceef0);
  border-left-width: 3px;
  border-radius: var(--r-md, 12px);
  padding: 16px 18px;
  box-shadow: var(--sh-card, 0 1px 3px rgba(16, 24, 40, .04), 0 1px 2px rgba(16, 24, 40, .03));
}
.stat-tile--green { border-left-color: var(--c-green, #239b44); }
.stat-tile--red   { border-left-color: var(--c-red-2, #e73b3b); }
.stat-tile--blue  { border-left-color: var(--c-blue, #1e7ac0); }
.stat-tile--amber { border-left-color: var(--c-amber, #eba108); }
.stat-tile--purple{ border-left-color: var(--c-purple, #7a41d3); }
/* Matched to the kit's own .stat__label / .stat__value / .stat__sub, which is
   what every other screen's tiles render as — label quiet and small, value
   loud. These carry .app so they outrank `.bs-compat h2` (0,1,1) on any page
   still using the compat layer; a bare .stat-tile__label lost that tie and the
   label came out 20px ink-black, louder than its own value. */
.app .stat-tile__label {
  margin: 0 0 6px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-muted, #636674);
}
.app .stat-tile__value {
  margin: 0;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-4, #0a0a0a);
}
.app .stat-tile__sub {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-muted, #636674);
}

/* /remote control pane: the grouping label and the live-state ring the
   original page had (the kit mock shows neither, but both carry real state). */
[data-screen="remote-desktop"] .rd-control__group {
  margin: 14px 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted, #636674);
}
[data-screen="remote-desktop"] .rd-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  font-size: var(--fs-sm);
  color: var(--c-muted, #636674);
}
[data-screen="remote-desktop"] .rd-status__ring {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-muted-3, #808290);
  flex: none;
}
[data-screen="remote-desktop"] .rd-status.is-live { color: var(--c-green-deep, #10712a); }
[data-screen="remote-desktop"] .rd-status.is-live .rd-status__ring {
  background: var(--c-green, #239b44);
  box-shadow: 0 0 0 3px rgba(35, 155, 68, .18);
}

/* ==========================================================================
   Kit filled stat tiles -> the house white tile

   The kit ships .stat--gradient (saturated fill) and .stat--tint (pastel fill)
   and 19 screens use them. In the isolated mock they look fine; in the product
   they sit beside the white .stat-tile every other screen uses and read as a
   different app — which is exactly what got flagged on /remote.

   Neutralised here rather than by rewriting 19 pages of markup: the kit already
   exposes --stat-accent per tone, so the tile keeps its colour CODING (blue /
   green / red / amber / purple) while adopting the house surface. Zero markup
   risk, and any screen that legitimately wants a filled tile can opt back in
   with .stat--keep-fill.
   ========================================================================== */
.app .stat--gradient:not(.stat--keep-fill),
.app .stat--tint:not(.stat--keep-fill) {
  background: #fff;
  border: 1px solid var(--s-line-soft, #eceef0);
  border-left: 3px solid var(--stat-accent, var(--c-green, #239b44));
  box-shadow: var(--sh-card, 0 1px 3px rgba(16, 24, 40, .04), 0 1px 2px rgba(16, 24, 40, .03));
  color: var(--c-ink-4, #0a0a0a);
}
/* The filled variants painted their text and icon for a coloured ground. */
.app .stat--gradient:not(.stat--keep-fill) .stat__label,
.app .stat--tint:not(.stat--keep-fill) .stat__label { color: var(--c-muted, #636674); }
.app .stat--gradient:not(.stat--keep-fill) .stat__value,
.app .stat--tint:not(.stat--keep-fill) .stat__value { color: var(--c-ink-4, #0a0a0a); }
.app .stat--gradient:not(.stat--keep-fill) .stat__sub,
.app .stat--tint:not(.stat--keep-fill) .stat__sub,
.app .stat--gradient:not(.stat--keep-fill) .stat__period,
.app .stat--tint:not(.stat--keep-fill) .stat__period { color: var(--c-muted, #636674); }
.app .stat--gradient:not(.stat--keep-fill) .stat__trend,
.app .stat--tint:not(.stat--keep-fill) .stat__trend {
  background: none;
  color: var(--stat-accent, var(--c-green, #239b44));
}
/* Icon chip keeps the tone so the tile is still scannable by colour. */
.app .stat--gradient:not(.stat--keep-fill) .stat__icon,
.app .stat--tint:not(.stat--keep-fill) .stat__icon {
  background: color-mix(in srgb, var(--stat-accent, #239b44) 12%, #fff);
  color: var(--stat-accent, var(--c-green, #239b44));
}

/* ==========================================================================
   Responsive: horizontal overflow

   Measured at 375px across 20 representative portal pages. Two things pushed
   the page sideways; both are fixed here rather than in ~20 templates.
   ========================================================================== */

/* 1. Wide tables. portal.js drops any unwrapped <table> into one of these, so
      the table scrolls itself instead of widening the page. On a viewport that
      fits the table this is inert — no scrollbar, no layout change. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* The table must be free to exceed the wrapper, or it just squashes instead. */
.table-scroll > table { min-width: max-content; }
/* Below the drawer breakpoint a squashed table is worse than a scrolled one. */
@media (max-width: 900px) {
  .app .table th,
  .app .table td { white-space: nowrap; }
}

/* 2. Long unbreakable strings (file paths, URLs, emails) in a nowrap flex row.
      A flex item defaults to min-width:auto, so the path refused to shrink and
      shoved its sibling off-screen — /superadmin/health did this with the
      storage path. Let the row wrap and let the string break. */
.app .pd-system__row { flex-wrap: wrap; }
.app .pd-system__row > * { min-width: 0; }
.app .table__mail,
.app .pd-system__row code,
.app [data-path] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Filter bars wrap at any width.

   The kit only wraps .ts-filters below an 820px VIEWPORT, but the sidebar is
   still in the flow down to 900px — so at a 1024px laptop the content column
   is ~707px and the row overflowed with no way to reach the last control.
   The number of filters also varies per page. A filter bar that wraps when it
   runs out of room is right at every width; where there is room it still sits
   on one line, so nothing changes on a wide screen. */
.app .ts-filters,
.app .btn-row.ts-filters { flex-wrap: wrap; row-gap: 10px; }

/* A native <input type="date"> renders dd-mm-yyyy plus its own picker button.
   The kit's 105px --date width was drawn for a compact text field, so the real
   control truncated to "26-" and the chosen date was unreadable.

   The kit also reserves padding-right:40px on .ts-filters__select for the
   select chevron — but a date input draws no chevron (content: none), so that
   was 40px of dead space clipping the value. Measured minimum with the padding
   trimmed is 184px for dd-mm-yyyy at the standard 16px. */
.app .ts-filters__field--date { width: 184px; }
.app .ts-filters__field--date .ts-filters__select {
  padding-left: 14px;
  padding-right: 12px;
}

/* "All departments" needs 186px against the kit's 181px --dept width (the
   40px chevron reserve again), so the label lost its last letters. */
.app .ts-filters__field--dept { width: 196px; }

/* ==========================================================================
   /remote — re-base the kit's controls to the universal size standard

   The remote-desktop kit screen is drawn at 1920, where 31px controls with
   11px labels look right. Shipped verbatim they sit next to 40-50px controls
   with 14px text on every other screen, which is why this page read as
   noticeably smaller and cramped than the rest of the portal.

   Floor is 40px tall / 14px text, per the standard. Widths become content-led
   so "All departments" stops truncating inside a 115px box.
   ========================================================================== */
[data-screen="remote-desktop"] .rd-select {
  width: auto;
  min-width: 172px;
  height: 40px;
  padding: 0 34px 0 12px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
[data-screen="remote-desktop"] .rd-select--wide { width: auto; min-width: 190px; }

/* Carries .rd-search to match the kit's own
   [data-screen="remote-desktop"] .rd-search .search__input (0,3,0), which
   otherwise keeps the field at the 11px --fs-3xs it was drawn with. */
[data-screen="remote-desktop"] .rd-search .search__input {
  height: 40px;
  font-size: var(--fs-body);
}
[data-screen="remote-desktop"] .rd-search { height: 40px; }

[data-screen="remote-desktop"] .rd-btn {
  min-height: 40px;
  /* The kit pins each button to a fixed px width measured against its own 11px
     label; at 14px "Screenshot" no longer fits, so let them size to content. */
  width: auto;
  min-width: 94px;
  padding: 0 16px;
  font-size: var(--fs-body);
}

/* The fullscreen toggle was a 19px hit area — under any touch-target floor. */
[data-screen="remote-desktop"] .rd-session__full {
  min-width: 40px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
}

/* The two view-toggle buttons are the page's own; bring their text up to the
   same 14px so the row does not mix three type sizes. */
[data-screen="remote-desktop"] .view-toggle button { font-size: var(--fs-body); }

/* The picker card is ~250px wide, so "Department" + a 172px select no longer
   fit on one line once the select was sized to hold "All departments".
   Wrap the row and give the select the full card width. */
[data-screen="remote-desktop"] .rd-dept {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 6px;
  height: auto;            /* the kit pins 31px, which a 40px control spills out of */
}
[data-screen="remote-desktop"] .rd-dept__label { font-size: var(--fs-body); }
/* The flex child is the wrap, not the select — sizing the select alone left
   the wrap at its content width and the control escaped the card. */
[data-screen="remote-desktop"] .rd-dept .rd-select-wrap {
  flex: 1 1 100%;
  display: block;
}
[data-screen="remote-desktop"] .rd-dept .rd-select {
  width: 100%;
  min-width: 0;
}

/* The kit paints the remote primary action in --c-blue-action. Every other
   primary action in this product is house green, so Connect was the only blue
   CTA in the portal. */
[data-screen="remote-desktop"] .rd-btn--primary {
  background-color: var(--c-green-600, #128736);
  border-color: var(--c-green-600, #128736);
}
[data-screen="remote-desktop"] .rd-btn--primary:not(:disabled):hover {
  background-color: var(--c-green-deep, #10712a);
  border-color: var(--c-green-deep, #10712a);
}

/* Content type on /remote, re-based to the standard ramp.

   The kit drew the picker list and card titles at 11-12px, which is fine at
   1920 but ships as the smallest running text in the portal: the PC hostname
   is the primary label of a list row and belongs at the same 15px an
   /employees table cell uses, not 12px. Same selector shape as the kit's, and
   this file loads after it, so equal specificity resolves here. */
[data-screen="remote-desktop"] .rd-picker__title,
[data-screen="remote-desktop"] .rd-control__title { font-size: var(--fs-h3); }
[data-screen="remote-desktop"] .rd-pc__host  { font-size: var(--fs-body); }
[data-screen="remote-desktop"] .rd-pc__owner { font-size: var(--fs-sm); }
[data-screen="remote-desktop"] .rd-pc__state { font-size: var(--fs-xs); }
[data-screen="remote-desktop"] .rd-control__group { font-size: var(--fs-xs); }

/* The page's own small text (activity log rows, stage hints). */
[data-screen="remote-desktop"] .preview-stage .stage-overlay .hint { font-size: var(--fs-sm); }
[data-screen="remote-desktop"] .agent-status,
[data-screen="remote-desktop"] .activity-log,
[data-screen="remote-desktop"] .activity-log div { font-size: var(--fs-sm); }

/* ==========================================================================
   Responsive sweep — 149 portal routes measured at 375/768/1024/1440

   Everything below is a real failure the probe caught, fixed centrally so one
   rule covers every page sharing the pattern.
   ========================================================================== */

/* 1. h5/h6 were never given a size anywhere in the portal, so they fell back
      to the UA default (0.67em ~ 10.1px) — under the 11px floor, on section
      titles like "Monthly Billing" and "Recent Companies". 12 pages. */
.app h5 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--c-ink-4, #0a0a0a); }
.app h6 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--c-ink-4, #0a0a0a); }

/* 2. A Bootstrap col-md-2 holding two buttons side by side has no room for
      them between 768 and ~1200. Wrap instead of pushing the page sideways. */
.bs-compat [class*="col-"].d-flex { flex-wrap: wrap; row-gap: 8px; }

/* 3. Tab strips: at narrow widths the tabs simply ran off the page. Let the
      strip scroll itself, which is the standard behaviour for tabs. */
.app .nav-tabs,
.app .comm-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.app .nav-tabs > .nav-item,
.app .comm-tabs > .comm-tab { flex: 0 0 auto; }

/* 4. Grids whose minimum column is wider than a phone. minmax(360px, 1fr)
      cannot go below 360px, so it overflowed a 360px viewport by its padding;
      min() lets the column collapse to the container instead. */
.app .retention-grid { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }

/* 5. Grid/flex children default to min-width:auto, so a long unbreakable
      string (a deploy command, a file path) refuses to shrink and drags the
      whole row past the viewport. */
.app .step-grid > *,
.app .pref-row > *,
.app .r-filter-bar > * { min-width: 0; }
.app .step-grid .body,
.app .step-grid code,
.app .step-grid pre { overflow-wrap: anywhere; }

/* 6. Preference rows: label and controls on one non-wrapping line. */
.app .pref-row { flex-wrap: wrap; row-gap: 10px; }
.app .pref-controls { flex-wrap: wrap; justify-content: flex-start; }

/* The channel chips inside a preference row are their own flex line and were
   485px wide on a 360px viewport. */
.app .channel-chips { flex-wrap: wrap; min-width: 0; }

/* flex-wrap alone does nothing when the item is free to size to its content:
   .pref-controls sat at 644px inside a 270px .pref-row, and the chip row at
   485px inside that. Constrain each to its line so the wrap can engage. */
.app .pref-row > * { max-width: 100%; }
.app .pref-controls { flex: 1 1 100%; max-width: 100%; }
.app .channel-chips { max-width: 100%; }
.app .save-bar { max-width: 100%; }

/* The kit pins each action button to a hardcoded px width by :nth-child
   (94/103/103/90/95), measured against its own 11px labels — at 14px the
   labels no longer fit and "Screenshot" / "Full screen" / "Shutdown" clipped.
   The kit already relaxes these below its own breakpoint; do it at every
   width and let the row wrap instead. */
[data-screen="remote-desktop"] .rd-control__actions {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
[data-screen="remote-desktop"] .rd-control__actions > :nth-child(n) {
  width: auto;
  flex: 0 1 auto;
}

/* The action row is a GRID, not flex.

   The kit pins each button to a hardcoded px width by :nth-child, sized for
   11px labels; at 14px they no longer fit and the row wrapped with Shutdown
   stranded alone. Flex was worse — it stretches whatever lands on the last
   line, blowing a destructive action up to full width. auto-fit keeps every
   button the same size and lets the last row keep that size too. */
[data-screen="remote-desktop"] .rd-control__group + .rd-control__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
}
[data-screen="remote-desktop"] .rd-control__group + .rd-control__actions > * {
  width: auto;
  justify-content: center;
}

/* Text that must be allowed to wrap.
   - .hint on the USB whitelist empty state is a full sentence set to nowrap:
     704px of text in a 360px column, so most of it was simply unreachable.
   - Stat labels ("Contacted", "Applications") clip once their tile narrows.
   - .detail-value holds identifiers (CIN, GSTIN) with no spaces to break on. */
.app .hint { white-space: normal; }
.app .stat__label,
.app .stat-label,
.app .stat-tile__label { white-space: normal; overflow-wrap: anywhere; }
.app .detail-value { overflow-wrap: anywhere; }

/* ==========================================================================
   Touch targets at phone/tablet widths

   Measured across 149 portal pages at 375px: 73 had interactive controls under
   the 40px floor — Bootstrap-era form controls at 36px, the *-platform and
   *-reseller button families at 34px, pagination at 34-38px.

   Scoped to the drawer breakpoint on purpose. Above 900px this is a mouse and
   the compact density is deliberate; below it, the same control is a thumb
   target. Raising them globally would inflate every desktop table row.

   min-height (not height) so a control that is already taller keeps its size.
   ========================================================================== */
@media (max-width: 900px) {
  .app .bs-compat .form-control,
  .app .bs-compat .form-select,
  .app .bs-compat select,
  .app .bs-compat input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .bs-compat .form-control,
  .bs-compat .form-select { min-height: 44px; }

  .bs-compat .btn,
  .bs-compat .btn-sm,
  .bs-compat .btn--sm,
  .bs-compat .btn-platform,
  .bs-compat .btn-platform-sm,
  .bs-compat .btn-danger-sm,
  .bs-compat .btn-reseller,
  .bs-compat .btn-reseller-sm,
  .bs-compat .btn-reseller-light,
  .bs-compat .btn-cancel,
  .bs-compat .filter-btn,
  .bs-compat .btn-close { min-height: 44px; }

  /* Pagination: small square controls are the classic mis-tap. */
  .app .page-link,
  .app .page-btn,
  .bs-compat .page-link,
  .bs-compat .page-btn { min-height: 44px; min-width: 44px; }

  /* Standalone action links. inline-BLOCK, because vertical padding on an
     inline element does not grow its layout box — the links stayed 21px with
     padding alone. inline-block still lets long link text wrap in a cell. */
  .app .p-link,
  .app .r-link,
  .app .table__link,
  .app .reset-link,
  .bs-compat .p-link,
  .bs-compat .r-link { display: inline-block; padding-block: 11px; }

  /* A wrapping <label> is the real target for these checkboxes; the 16px box
     itself never was. */
  .app .wh-day,
  .app .check-row,
  .bs-compat .form-check { min-height: 44px; display: flex; align-items: center; }

  .app .stepper,
  .app .preset-pill { min-height: 44px; min-width: 44px; }
}

/* Second pass: the kit's own controls, which the .bs-compat-scoped rules above
   never reached (unclassed <select> at 39px on 9 pages, .filter-btn on the kit
   dashboard, .pager__btn, .severity-select at 28px). Same reasoning and same
   breakpoint — below 900px every interactive control is a thumb target. */
@media (max-width: 900px) {
  .app button,
  .app select,
  .app textarea,
  .app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  .app .btn,
  .app a.btn { min-height: 44px; }
}

/* Third pass: the cases the two rules above deliberately did not cover.

   Bare <a> was excluded on purpose — a link inside a sentence cannot be 44px
   without breaking the line. But a link styled AS a control, and a link that is
   a table cell's whole content, are thumb targets like any other. Those are
   named explicitly here rather than by raising every anchor.

   A checkbox stays 16px (a 44px checkbox looks broken); the LABEL wrapping it
   becomes the target instead, which is what a person actually taps. */
@media (max-width: 900px) {
  .app .pager__btn,
  .app a.btn-ghost,
  .app .reset-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* A cell's link is the row's action on a phone. inline-block so long names
     still wrap. */
  .app td > a,
  .app td > a.table__link { display: inline-block; padding-block: 11px; }

  /* :has() is the only way to reach "a label that contains a checkbox" without
     touching markup on ~6 pages. Supported everywhere this portal runs. */
  .app label:has(input[type="checkbox"]),
  .app label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Fourth pass: the last individually-scattered touch targets.

   Each was measured on a real page rather than guessed. The recurring lesson
   is that these elements carry INLINE styles — the /policies row action sets
   `padding:6px 10px; display:inline-flex` inline, which beats any stylesheet
   padding or display. min-height is not set inline anywhere, so that is the
   lever that actually works here. */
@media (max-width: 900px) {
  /* Row action links (edit / view icons inside a table cell). */
  .app td a { min-height: 44px; }

  /* Links that are the entire content of their container — a CTA, the
     "Show retired" toggle, a contact address, an attention-list row. Not
     prose links, which stay as they are. */
  .app .cta > a,
  .app .retired-bar > a,
  .app .profile__mail a,
  .app .pd-system__row a,
  .app .back-link,
  .app .as-back,
  .app .var-chip { min-height: 44px; display: inline-flex; align-items: center; }

  /* An interactive chip at 11px is at the size floor as well as under the
     touch floor. */
  .app .var-chip { font-size: var(--fs-sm); }

  /* Bare checkboxes with no label big enough to act as the target: a table's
     select-all / row ticks, and the is_active group on the employee form.
     The box stays 16px — a 44px checkbox looks broken — and only the HIT area
     grows, via a transparent overlay. Scoped to these containers so the kit's
     custom checkboxes (.check__box, .wh-day__box) and the auth consent tick,
     all of which use ::after for their own glyph, are never touched. */
  .app .checkbox-group { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .app td > input[type="checkbox"],
  .app th > input[type="checkbox"],
  .app .checkbox-group > input[type="checkbox"] { position: relative; }
  .app td > input[type="checkbox"]::after,
  .app th > input[type="checkbox"]::after,
  .app .checkbox-group > input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: -14px;
  }
}

/* The is_active checkbox already has <label for="is_active"> beside it — the
   label is the real target, and it was ~20px tall. Sizing the .checkbox-group
   container did nothing for it; the LABEL is what a person taps. */
@media (max-width: 900px) {
  .app .checkbox-group label,
  .bs-compat .checkbox-group label { min-height: 44px; display: inline-flex; align-items: center; }
}

/* The policy form's button row.

   Cancel is an <a class="btn-cancel-pol"> and Save a <button class="btn-save-pol">,
   in an unclassed display:block parent. Save picked up the 44px touch
   min-height and Cancel did not, so on a wrapped line the taller box ran 9px
   into the one above. Make the row a real flex row and give both the same
   height, rather than relying on inline-block line boxes. */
.app div:has(> .btn-save-pol) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.app .btn-cancel-pol,
.app .btn-save-pol {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   KIT SCREEN BLOCKS — re-based onto the Teramind ramp (2026-09-08)

   styles.css reaches for a token 257 times but hardcodes a px font-size 77
   more, inside its per-screen blocks. Those hardcodes are what a token-level
   change cannot reach: a rollout that only edits :root leaves every screen
   block still painting the old 1440-frame sizes, and the portal ends up
   half-converted — which is exactly how the sidebar ended up with four
   different label sizes.

   Every one is restated below at the same 12.25/15 = 0.8167 ratio the ramp
   itself uses, snapped to a half-pixel, and pointed at a token wherever the
   scaled value lands on one. Selectors are copied VERBATIM from styles.css so
   specificity ties and this file — which loads second — wins. Do not
   "simplify" a selector here; a shorter one loses the tie silently.

   Excluded on purpose:
     .auth-*   the sign-in pages have their own correction section above,
               written against a 1920 frame, and are not app chrome.
     the three sub-floor status labels + .rd-session__full, already restated.
   ========================================================================== */
.plan__price { font-size: 26px; line-height: 32.5px; }
.btn--primary { font-size: var(--fs-body); }
.btn--light { font-size: var(--fs-body); }
.card__text { font-size: 14.5px; line-height: 23px; }
.overflow-btn { font-size: var(--fs-body); }
.stat--row .stat__value { font-size: 16.5px; }
.stat--admin .stat__value { font-size: 14.5px; }
.table--dark-head thead th { font-size: 14.5px; }
.table__rank { font-size: 14.5px; }
[data-screen="activity-monitoring"] .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="activity-monitoring"] .am-kpi .stat__value { font-size: 16.5px; }
[data-screen="activity-tracking"] .page-title { font-size: var(--fs-page); }
[data-screen="activity-tracking"] .actrk__empty-title { font-size: 14.5px; }
[data-screen="activity-tracking"] .page-title { font-size: var(--fs-page); }
[data-screen="admin-dashboard"] .pd-growth .chart__tick { font-size: var(--fs-xs); }
[data-screen="admin-dashboard"] .pd-growth__tip-label, [data-screen="admin-dashboard"] .pd-growth__tip-value { font-size: var(--fs-xs); }
[data-screen="admin-dashboard"] .pd-donut .donut__value { font-size: var(--fs-page); line-height: 24.5px; }
[data-screen="admin-dashboard"] .pd-versions .chart__tick { font-size: var(--fs-xs); }
[data-screen="announcements"] .ann-head__title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="app-categories"] .apc-head .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="app-categories"] .apc-head .page-title { font-size: var(--fs-page); }
[data-screen="audio"] .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="audio"] .audio-stage__title { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="clipboard"] .clip-empty__title { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="dashboard"] .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="download-agent"] .dl-hero__text { font-size: 13px; line-height: 19.5px; }
[data-screen="download-agent"] .dl-hero__enroll-label { font-size: 13px; line-height: var(--lh-h2); }
[data-screen="download-agent"] .dl-code { font-size: 14.5px; line-height: 17px; }
[data-screen="download-agent"] .dl-agent__text { font-size: 13px; line-height: var(--lh-h2); }
[data-screen="download-agent"] .dl-btn { font-size: 13px; line-height: 19.5px; }
[data-screen="download-agent"] .dl-step__text { font-size: 13px; line-height: 23px; }
[data-screen="download-agent"] .dl-table thead th { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="download-agent"] .dl-table__num { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="download-agent"] .dl-table__step { font-size: 13px; line-height: var(--lh-sm); }
[data-screen="installation"] .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="installation"] .install-donut .donut__value { font-size: 32.5px; line-height: 36px; }
[data-screen="installation"] .install-table__more { font-size: 16.5px; }
[data-screen="mass-deployment"] .page-title { font-size: var(--fs-page); }
[data-screen="mass-deployment"] .md-guide__title, [data-screen="mass-deployment"] .md-guide__section { font-size: 17px; }
[data-screen="mass-deployment"] .md-note__title, [data-screen="mass-deployment"] .md-panel__title, [data-screen="mass-deployment"] .md-code__title, [data-screen="mass-deployment"] .md-steps__title { font-size: 14.5px; }
[data-screen="policies-configuration"] .page-title { font-size: var(--fs-page); }
[data-screen="recording"] .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="recording"] .rec-preview__play { font-size: 18px; }
[data-screen="recording"] .rec-btn__glyph { font-size: 14.5px; }
[data-screen="recording"] .rec-btn__glyph--down { font-size: 13px; }
[data-screen="recording"] .rec-btn__glyph--more { font-size: 16.5px; }
[data-screen="remote-desktop"] .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="remote-desktop"] .rd-gauge__value { font-size: 14.5px; }
[data-screen="remote-desktop"] .rd-details__pill { font-size: 9px; line-height: 12px; }
[data-screen="remote-desktop"] .rd-details__owner { font-size: 9px; line-height: 15.5px; }
[data-screen="reports-analytics"] .ra-table tbody td.ra-table__rank { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="reports-analytics"] .ra-table tbody td.ra-table__count { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="reports-analytics"] .ra-table tbody td.ra-table__time { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="reports-analytics"] .page-title { font-size: var(--fs-page); }
[data-screen="screenshot-gallery"] .sg-head .page-title { font-size: var(--fs-page); line-height: var(--lh-page); }
[data-screen="screenshot-gallery"] .sg-empty .empty__title { font-size: 14.5px; line-height: var(--lh-sm); }
[data-screen="screenshot-gallery"] .sg-head .page-title { font-size: var(--fs-page); }
[data-screen="status-dashboard"] .status-btn { font-size: var(--fs-body); }
[data-screen="webcam"] .page-title { font-size: var(--fs-page); }
[data-screen="white-label"] .wl-preview__logo { font-size: 17px; line-height: var(--lh-h2); }
[data-screen="working-hours"] .wh__note { font-size: 13px; line-height: 19.5px; }

/* Buttons carry the body size, full stop. The kit drew .btn at var(--fs-body)
   but then pushed .btn--primary to 17px and .btn--light to 18px, so the two
   loudest buttons on a screen sat a tier above their own labels. Scaling those
   outliers proportionally only preserves the anomaly, so they are pinned to
   the body token instead — which is also what Teramind's buttons measure. */

/* Table headers, Teramind's own treatment: one tier BELOW the cell text, at
   medium weight rather than semibold, with a little tracking so the smaller
   size still scans as a header rather than as quieter data.
   Carries .app so it clears `.bs-compat .table th` on the compat pages. */
.app .table thead th,
.app .table--roomy thead th {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.02em;
}

/* Controls sit on the body step — including the quiet ones.
   The kit puts .btn--ghost and the topbar search input on --fs-sm, one step
   below body. That was proportionate against a 15px body; against 12.25px it
   reads as a different, smaller control sitting next to a normal one. Ghost
   is a VISUAL weight (no fill), not a size tier. */
.btn--ghost { font-size: var(--fs-body); }
.topbar__search-input { font-size: var(--fs-body); }

/* ── /policies: metrics drawn against the 1440 frame ──────────────────────
   Three pins on this screen were measured off the Figma frame and survived
   the ramp rollout because they are sizes, not font-sizes. */

/* A fractional row height is not a real size system, and 58.4px was set for
   single-line cells; the row now carries a name, a description, a meta line
   and a wrapping chip list, so it should grow to its content with the shared
   row height as the floor. */
[data-screen="policies-configuration"] .pol-table tbody td {
  height: auto;
  min-height: var(--h-row);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* The button was pinned to 187px around a 161px label measured at the old
   15px type. At 12.25px that leaves a slab of empty fill, the same way
   .em-add did on /employees. Let it size to its content. */
[data-screen="policies-configuration"] .pol-new {
  width: auto;
  padding: 0 16px;
}

/* The kit's page title on this screen is pinned to the stat token rather than
   the page token, so it rendered a step off every other page's heading. */
[data-screen="policies-configuration"] .page-title {
  font-size: var(--fs-page);
  line-height: var(--lh-page);
}

/* ══════════════════════════════════════════════════════════════════════
   KIT BOXES — re-based onto the Teramind scale (2026-09-09)

   The type ramp moved; these boxes did not. /config/shifts showed it
   plainly: a 48px icon disc and a 160px min-height card wrapped around a
   12.25px label and a 20.5px numeral, so each tile was mostly empty.

   Same 0.8167 ratio as the type, rounded to whole pixels; icon discs are
   snapped to the 4px grid the icon standard already uses. Selectors are
   copied VERBATIM from styles.css so specificity ties and this file —
   which loads second — wins.

   Excluded: the auth screens, which keep their own 1920-frame scale.
   ══════════════════════════════════════════════════════════════════════ */
[data-screen="working-hours"] .wh { min-height: 515px; }
[data-screen="activity-monitoring"] .am-panel--line, [data-screen="activity-monitoring"] .am-panel--bars { min-height: 283px; }
[data-screen="activity-monitoring"] .am-panel--table { min-height: 283px; }
[data-screen="dashboard"] .dash-card--team { min-height: 283px; }
[data-screen="dashboard"] .dash-card--attendance { min-height: 283px; }
[data-screen="dashboard"] .dash-card--apps { min-height: 278px; }
[data-screen="dashboard"] .dash-card--sites { min-height: 278px; }
[data-screen="dashboard"] .dash-card--productivity { min-height: 274px; }
[data-screen="activity-tracking"] .actrk__empty { min-height: 247px; }
[data-screen="clipboard"] .clip-empty { min-height: 247px; }
[data-screen="download-agent"] .dl-hero { min-height: 205px; }
[data-screen="download-agent"] .dl-agent { min-height: 198px; }
[data-screen="my-profile"] .profile__hero { min-height: 149px; }
.stat { min-height: 131px; }
[data-screen="reports-analytics"] .ra-overview { min-height: 122px; }
.textarea { min-height: 98px; }
[data-screen="activity-monitoring"] .am-kpi { min-height: 97px; }
[data-screen="audio"] .stat--audio { min-height: 89px; }
[data-screen="remote-desktop"] .stat--rd { min-height: 89px; }
[data-screen="reports-analytics"] .ra-report { min-height: 85px; }
.stat--row { min-height: 83px; }
.stat--admin { min-height: 83px; }
[data-screen="recording"] .rec-intro { min-height: 78px; }
[data-screen="working-hours"] .wh__note { min-height: 76px; }
[data-screen="audio"] .audio-stage__disc { width: 92px; height: 92px; }
[data-screen="activity-tracking"] .actrk__empty-icon { width: 64px; height: 64px; }
[data-screen="clipboard"] .clip-empty__disc { width: 64px; height: 64px; }
[data-screen="remote-desktop"] .rd-details__disc { width: 52px; height: 52px; }
.empty__icon { width: 44px; height: 44px; }
.topbar__avatar { width: 36px; height: 36px; }
.stat__icon { width: 40px; height: 40px; }
.stat--row .stat__icon { width: 36px; height: 36px; }
.stat--admin .stat__icon { width: 36px; height: 36px; }
[data-screen="admin-dashboard"] .pd-res__disc { width: 36px; height: 36px; }
.icon-btn { width: 32px; height: 32px; }

/* The stat card's own inner rhythm, which no width/height rule expresses:
   a 22px gap under a 48px disc was proportionate to 15px type and is not to
   12.25px. Together with the disc and min-height above this is what actually
   closes the empty space on /config/shifts. */
.stat { padding: 11px 12px; }
.stat__label { margin-top: 14px; }
.stat__value { margin-top: 6px; }

/* The glyph inside the disc scales with it: a 40px disc wants 20px, which is
   already the .icon default, but .stat__icon .icon was never told so and
   inherited whatever the screen block set. */
.stat__icon .icon { --icon-size: 20px; }
.stat--row .stat__icon .icon,
.stat--admin .stat__icon .icon { --icon-size: 18px; }

/* Tenant topbar without the search field.
   The kit hung `margin-left: auto` on .topbar__search, so deleting the field
   left the action icons sitting against the greeting instead of the right
   edge. Scoped to .topbar--no-search so the superadmin bar, which keeps its
   global search, is untouched. */
.topbar--no-search .topbar__actions { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════════
   CONTROLS BELOW THE BODY STEP — swept 2026-09-09

   Found by rendering all 33 tenant screens and measuring every control:
   the kit puts several interactive elements on --fs-sm (11.5px) or lower,
   which was proportionate to 15px body text and is a visible step down
   against 12.25px. A control is read AND operated, so it sits on the body
   step; only badges, pills, hints, meta and table headers go smaller.
   ══════════════════════════════════════════════════════════════════════ */

/* Typed into — the clearest case of all. */
.search__input { font-size: var(--fs-body); }
[data-screen="audio"] .audio-picker__search .search__input { font-size: var(--fs-body); }

/* Button variants. --sm/--outline/--danger are WEIGHTS and shapes, not a
   size tier; the kit only shrank them to stay in proportion with 15px text. */
.btn--sm       { font-size: var(--fs-body); }
.btn--sm.btn--primary { font-size: var(--fs-body); }
.btn--outline  { font-size: var(--fs-body); }
.btn--danger   { font-size: var(--fs-body); }
.pager__btn    { font-size: var(--fs-body); }

/* Segmented controls and range pickers on the notification screens. */
.scope-seg__btn { font-size: var(--fs-body); }
.nh-range       { font-size: var(--fs-body); }

/* Legacy gradient/secondary buttons on the support screen. */
.bs-compat .btn-gradient,
.bs-compat .btn-secondary { font-size: var(--fs-body, 12.25px); }

/* A stat numeral is a display size; 16.5/14.5 are not on the ramp. Pull the
   two row/admin variants onto the stat token. */
.stat--row .stat__value,
.stat--admin .stat__value,
[data-screen="activity-monitoring"] .am-kpi .stat__value { font-size: var(--fs-stat); }

/* The profile hero avatar was still drawn at its 1440-frame size. */
[data-screen="my-profile"] .profile__hero .avatar,
[data-screen="my-profile"] .avatar { width: 108px; height: 108px; }

/* Empty-state blocks inside a table cell must wrap.
   The kit sets `.table td { white-space: nowrap }`, which is right for data
   but wrong for the "No shifts yet — add your first shift…" paragraph that
   lives in a full-width cell: it has `max-width: 42ch` and cannot use it while
   nowrap applies, so it stretched to 708px and pushed the table 9px past its
   wrapper. Same defect, same fix as the policies chip cell. */
.app .table td .empty,
.app .table td .empty__text,
.app .table td .empty__title { white-space: normal; }

/* /policies row actions: glyphs sized to the 28px box.
   The kit gives these a 19px glyph and the trash a 20px one, drawn for the
   40px button it also shipped. Against the 28px row-action box the type
   rollout standardised on, a 19-20px glyph plus its padding measures 34px and
   spills 6px out of its own button — visible on any row that actually has
   actions, which is why the empty-table render never showed it. */
[data-screen="policies-configuration"] .pol-act--link  .icon,
[data-screen="policies-configuration"] .pol-act--edit  .icon,
[data-screen="policies-configuration"] .pol-act--trash .icon {
  --icon-size: 16px;
  width: 16px;
  height: 16px;
}