/* =========================================================================
   osTicket agent console theme — Global Pathways Academy
   =========================================================================

   PRESENTATION LAYER for the staff control panel, focused on the ticket
   queue landing page (scp/tickets.php — which IS the agent dashboard;
   scp/index.php merely requires it). Loaded LAST from
   include/staff/header.inc.php so it wins every tie against scp.css,
   dropdown.css and the vendor sheets. Upstream scp.css stays pristine;
   reverting this whole redesign is deleting one <link>.

   No PHP logic, form attribute, or JS hook changes ride along with this
   file. The only template edits on this branch are label/wrapper additions,
   verified attribute-identical with tools/attr-inventory.sh.

   Design source — assets/default/css/theme.css (the client portal theme,
   itself copied from gp.academy's compiled stylesheet). The custom
   properties below are copied verbatim from there — theme.css never loads
   in the agent panel, so the tokens are restated, not re-invented. If the
   brand is ever re-tuned, change theme.css first and mirror here.

   Width. theme.css declares the column scale and states that nothing else
   may set a container width. The agent console uses the fourth declared
   rung, --gp-w-console: 100rem (1600px) — added to theme.css in the same
   pass as this file. The shell is fluid below the rung:
       width: min(100% - 2 gutters, var(--gp-w-console))
   so the queue uses a 4K display and scales to a phone with no horizontal
   scrolling (asserted by tools/preview/check.mjs).

   Known-value fallbacks. Queue columns are agent-configurable, and cells
   carry no semantic classes — only inline background-color styles from the
   stock priority palette (include/i18n/en_US/priority.yaml) and stable
   stock ids (queue.yaml, queue_column.yaml). Priority pills/stripes and
   responsive column drops are therefore KEYED TO THOSE STOCK VALUES and
   guarded with :has(), so an unrecognised custom column set simply falls
   back to plain text and an in-form horizontal scroll — never to broken
   layout.

   Scope discipline. Selectors for the queue itself hang off form#tickets
   and the queue templates' own hooks. Chrome shared with the rest of the
   agent/admin panel (#header, #nav, #sub_nav, buttons, dropdowns) is
   restyled deliberately — the interim mixed state on other scp pages is
   accepted; do not chase it from here.
   ========================================================================= */

/* --- Brand face ---------------------------------------------------------
   Self-hosted General Sans (GDPR: no visitor IP ever reaches a font CDN —
   see docs/PROJECT-CONTEXT.md). Same files the client portal uses. */

@font-face {
  font-family: 'General Sans';
  src: url('../../assets/default/font/GeneralSans-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../../assets/default/font/GeneralSans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../../assets/default/font/GeneralSans-400-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../../assets/default/font/GeneralSans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../../assets/default/font/GeneralSans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand (copied verbatim from assets/default/css/theme.css) ------------ */
  --gp-brand:        #4f6b5c;
  --gp-brand-strong: #3e5649;
  --gp-brand-tint:   #eef3f0;
  --gp-brand-edge:   #cfdcd4;
  --gp-navy:         #2a4275;   /* blue-deep — staff-facing accents */
  --gp-navy-strong:  #1f3259;
  --gp-navy-tint:    #eef1f7;
  --gp-navy-edge:    #cdd6e6;

  --gp-ink:       #1b2230;
  --gp-ink-2:     #4d5563;
  --gp-ink-3:     #6a7080;
  --gp-line:      rgba(27, 34, 48, 0.12);
  --gp-line-soft: rgba(27, 34, 48, 0.07);
  --gp-page:      #fbfaf6;
  --gp-surface:   #ffffff;
  --gp-surface-2: #f4efe7;
  --gp-beige:     #ece7dd;

  --gp-ok:        #3e5649;
  --gp-ok-bg:     #edf3ee;
  --gp-ok-edge:   #cfdcd3;
  --gp-warn:      #8a5300;
  --gp-warn-bg:   #faf3e2;
  --gp-warn-edge: #e7d3a8;
  --gp-err:       #a52121;
  --gp-err-bg:    #fbf0ef;
  --gp-err-edge:  #ecc9c9;
  --gp-info:      #2a4275;
  --gp-info-bg:   #eef2f9;
  --gp-info-edge: #c9d6ea;

  --gp-sans: "General Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gp-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
             Menlo, Consolas, monospace;

  /* Column scale — see theme.css. The console rung is the only one this
     panel uses; the shell below is the only place it is consumed. */
  --gp-w-console: 100rem;   /* 1600px */

  --gp-r:      14px;
  --gp-r-sm:   10px;
  --gp-r-pill: 999px;

  --gp-t-color: 120ms ease-out;
  --gp-t-move:  160ms cubic-bezier(0.23, 1, 0.32, 1);

  /* Console-local metrics */
  --gp-scp-gutter: 32px;
  --gp-ctl-h:      34px;    /* secondary controls */
  --gp-ctl-h-lg:   40px;    /* the search pair */
}

/* =========================================================================
   1. Base
   ========================================================================= */

/* scp.css sets html to 14px, which quietly shrinks every rem — the 100rem
   console rung would render at 1400px. Restore the standard root; body keeps
   the panel's 14px so em-based sizing is unchanged. */
html {
  font-size: 100%;
  background: var(--gp-page);
}
body {
  background: var(--gp-page);
  color: var(--gp-ink);
  font-family: var(--gp-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button {
  font-family: var(--gp-sans);
}
a { color: var(--gp-navy); }
h2 {
  color: var(--gp-ink);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* =========================================================================
   2. Shell — the headline change: fluid to the console rung
   ========================================================================= */

#container {
  width: min(100% - (var(--gp-scp-gutter) * 2), var(--gp-w-console));
  margin: 16px auto 24px;
}
/* Upstream pins the sub-nav strip to the old fixed shell. */
.jb-overflowmenu { width: auto; }

/* When ticket.js pins the queue bar it goes viewport-wide; keep its content
   aligned with the shell underneath it. */
.sticky.bar.fixed {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 24px -12px rgba(27, 34, 48, 0.35);
  border-bottom: 1px solid var(--gp-line);
}
.sticky.bar.fixed .content {
  max-width: min(100% , var(--gp-w-console));
  margin: auto;
}

/* The content sheet: one white card, same treatment as the portal's. */
#content {
  clear: both;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  padding: 22px 24px 28px;
  margin-top: 12px;
}

#footer {
  color: var(--gp-ink-3);
  font-size: 12.5px;
  padding: 14px 10px 6px;
}

/* =========================================================================
   3. Site bar (#header) — white on a hairline; real hit targets
   ========================================================================= */

#header {
  height: auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-bottom: 0;
  border-radius: var(--gp-r) var(--gp-r) 0 0;
  box-shadow: none;
  padding: 8px 18px;
}
#header #logo {
  order: -1;              /* markup puts #info first; the brand reads first */
  height: auto;
  padding: 4px 0;
  display: flex;
  align-items: center;
}
#header #logo img { max-height: 40px; }

/* The account cluster. The "|" separators are template text nodes — they
   inherit the muted paragraph colour and read as hairline dividers. */
#header p#info {
  float: none;
  order: 1;
  margin: 0 0 0 auto;
  max-width: none;
  width: auto;
  background: none;
  border: 0;
  padding: 0;
  text-align: right;
  color: var(--gp-ink-3);
  font-size: 13.5px;
}
#header p#info strong { font-weight: 500; color: var(--gp-ink); }
/* Everything in the cluster shares one 30px line box, so bare text, the
   pill links and hover states all centre on the same axis. The template's
   literal pipe separators are wrapped (.gp-sep) and dropped here — the
   pills' own rhythm separates the links. */
#header p#info { line-height: 30px; }
#header p#info .gp-sep { display: none; }
#header p#info a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  color: var(--gp-ink-2);
  text-decoration: none;
  padding: 0 11px;
  margin: 0;
  border-radius: var(--gp-r-pill);
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
#header p#info a:hover {
  background: var(--gp-surface-2);
  color: var(--gp-ink);
}
/* Admin Panel (agent side) / Agent Panel (admin side) reads navy. */
#header p#info a[href$="scp/admin.php"],
#header p#info a[href$="scp/index.php"] {
  color: var(--gp-navy);
  font-weight: 500;
}
#header p#info a[href$="scp/admin.php"]:hover,
#header p#info a[href$="scp/index.php"]:hover {
  background: var(--gp-navy-tint);
  color: var(--gp-navy-strong);
}

/* =========================================================================
   4. Primary nav (#nav) — flat tabs, navy underline on the active one
   ========================================================================= */

#nav {
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-top: 1px solid var(--gp-line-soft);
  border-radius: 0 0 var(--gp-r) var(--gp-r);
  height: auto;
  line-height: normal;
  padding: 0 12px;
  margin: 0;
}
#nav .active, #nav .inactive {
  min-width: 0;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  text-align: left;
  vertical-align: bottom;
}
#nav > li + li { margin-left: 2px; }
#nav li.active, #nav li.inactive:hover {
  box-shadow: none;
  border-color: transparent;
  background: none;
}
#nav .active > a, #nav .inactive > a {
  display: block;
  padding: 14px 14px 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--gp-ink-2);
  border-bottom: 2px solid transparent;
  transition: color var(--gp-t-color), border-color var(--gp-t-color);
}
#nav .inactive > a:hover { color: var(--gp-ink); }
#nav .active > a {
  color: var(--gp-navy);
  font-weight: 500;
  border-bottom-color: var(--gp-navy);
}

/* The hover menus keep their upstream positioning; only the skin changes. */
#nav li.inactive > ul,
#nav li > ul {                 /* the .inactive half matches upstream's own
                                  specificity; the bare half future-proofs */
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  box-shadow: 0 14px 34px -18px rgba(27, 34, 48, 0.45);
  padding: 6px;
  margin-top: -2px;
}
#nav li > ul li { border: 0; }
/* Upstream reserves 34px of padding for a gif sprite in each row. Keyed to
   the submenu itself, not to .inactive — the template only emits submenus
   for inactive tabs today, but the sprite must never come back. */
#nav li > ul li a,
#nav .inactive li a {
  display: block;
  background-image: none !important;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gp-ink-2);
  border-radius: 7px;
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
#nav li > ul li a:hover,
#nav .inactive li a:hover {
  background: var(--gp-navy-tint);
  color: var(--gp-navy);
}

/* =========================================================================
   5. Queue tabs (#sub_nav) — every queue laid out flat, counts always on
   =========================================================================
   No dropdowns. scp-theme.js reverts the jb.overflowmenu enhancement to the
   raw server markup and triggers the app's own lazy count fetch at load, so
   the strip is: each top-level queue as a pill, its sub-queues (and the
   agent's personal queues) as pills beside it, a compact "+" per group for
   adding a personal queue, and New Ticket as the one primary action.
   Customization story: agents add/remove their own pills via "+" (personal
   queues); admins shape the shared pills in Queue settings (edit / add sub
   queue) and the admin panel. The saved-searches "Search" tab is hidden by
   request — re-enable by deleting one rule below. */

/* The <nav> is the card — every page, whether or not the overflow widget
   ever touched it. Styling the <ul> as well drew a second border inside the
   first (the widget's destroy() strips .jb-overflowmenu from the nav, which
   used to flip a "plain nav" rule on). */
#customQ_nav,
nav.jb-overflowmenu,
nav:has(> #sub_nav) {
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  margin-top: 12px;
  padding: 6px 10px;
  height: auto;
  line-height: normal;
}
#sub_nav {
  background: none;
  border: 0;
  border-radius: 0;
  height: auto;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
/* If the enhancement ever runs before the script reverts it, neutralise its
   geometry so nothing jumps. */
.jb-overflowmenu .jb-overflowmenu-helper-postion { position: static !important; }
.jb-overflowmenu .jb-overflowmenu-menu-primary {
  margin: 0;
  height: auto !important;
  padding: 8px 4px;
}
.jb-overflowmenu .jb-overflowmenu-container { display: none !important; }

#sub_nav > li,
#sub_nav li.item,
.jb-overflowmenu .jb-overflowmenu-menu-primary li.item {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 4px;
  padding: 0;
  margin: 0;
  border: 0 !important;
  background: none;
}
/* A breath between queue groups (see .gp-qgroup below once hoisted). */
#sub_nav > li.top-queue + li.top-queue { margin-left: 10px; }
/* Long queue names must not fight the strip's wrap. */
#sub_nav > li > a { max-width: 100%; }
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
  padding: 0;
  border: 0;
  background: none;
}

/* The pill voice — one rule for top-level links and flattened children. */
#sub_nav > li > a,
#sub_nav li.item > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 13px;
  border-radius: var(--gp-r-pill);
  border: 1px solid transparent;
  background-image: none !important;   /* the old gif tab icons */
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gp-ink);                /* the strip is warm — labels carry */
  text-decoration: none;
  max-width: none;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
#sub_nav > li > a:hover,
#sub_nav li.item > a:hover {
  background: rgba(255, 255, 255, 0.75);
  color: var(--gp-ink);
}
#sub_nav a.active,
#sub_nav li.active > a,
#sub_nav li.child.active > a {
  background: var(--gp-surface);
  color: var(--gp-ink);
  border-color: var(--gp-line);
  box-shadow: 0 1px 2px rgba(27, 34, 48, 0.07);
  font-weight: 500;
}
/* No dropdowns — no carets. */
#sub_nav li a .icon-sort-down { display: none; }

/* Children are hoisted into the strip as real <li> siblings by
   scp-theme.js (see flattenQueueNav), so there is no dropdown left to
   fight — these rules only cover the fallback where the script has not
   run yet, and style the hoisted pills. */
#customQ_nav li.item .customQ-dropdown { display: none !important; }

/* A hoisted child is the same pill as its parent, one step quieter. */
#sub_nav > li.gp-qchild > a { font-weight: 450; color: var(--gp-ink-2); }
#sub_nav > li.gp-qgroup + li.gp-qchild { margin-left: 0; }
/* The group's own pill leads its run of children. */
#sub_nav > li.gp-qgroup { margin-left: 14px; }
#sub_nav > li.gp-qgroup:first-child { margin-left: 0; }

/* --- group menus ---------------------------------------------------------
   The queue you are in shows its children inline; every other group keeps
   them behind a caret. The label still navigates to the group's own queue —
   only the caret opens the menu, the same anatomy as the action pills. */
#sub_nav > li.gp-qgroup { position: relative; }
#sub_nav .gp-qcaret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--gp-r-pill);
  background: none;
  color: var(--gp-ink-3);
  cursor: pointer;
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
#sub_nav .gp-qcaret:hover,
#sub_nav li.gp-open > .gp-qcaret {
  background: rgba(255, 255, 255, 0.75);
  color: var(--gp-ink);
}
#sub_nav .gp-qcaret i { margin: 0; font-size: 11px; }
#sub_nav .gp-qcaret:focus-visible {
  outline: 2px solid var(--gp-navy);
  outline-offset: 2px;
}

#sub_nav .gp-qmenu {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  min-width: 232px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  box-shadow: 0 18px 40px -20px rgba(27, 34, 48, 0.45),
              0 2px 6px rgba(27, 34, 48, 0.06);
}
#sub_nav li.gp-open > .gp-qmenu { display: block; }
#sub_nav .gp-qmenu > li {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 7px;
}
#sub_nav .gp-qmenu > li:hover { background: var(--gp-navy-tint); }
#sub_nav .gp-qmenu > li > a {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 7px;
  font-weight: 450;
  color: var(--gp-ink);
  white-space: nowrap;
}
#sub_nav .gp-qmenu > li:hover > a,
#sub_nav .gp-qmenu > li > a.active { color: var(--gp-navy); background: none; }
#sub_nav .gp-qmenu > li > span.queue-count {
  order: 2;                    /* the count trails its queue down the column */
  margin-left: 10px;
  background: var(--gp-surface-2);
  border-color: transparent;
}
/* "Add personal queue" reads as a labelled row, not a bare green plus. */
#sub_nav .gp-qmenu > li.gp-qadd-row {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--gp-line-soft);
  border-radius: 0 0 7px 7px;
}
#sub_nav .gp-qmenu > li.gp-qadd-row > a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 450;
  font-size: 13px;
  color: var(--gp-brand) !important;
}
#sub_nav .gp-qmenu > li.gp-qadd-row > a span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  padding: 0;
}
#sub_nav .gp-qmenu > li.gp-qadd-row i { color: var(--gp-brand); margin: 0; }

/* Ticket counts — tabular chips, on the tab pills and the flattened
   children alike. scp-theme.js reveals every #queue-count-bucket when the
   counts ajax lands (upstream leaves .hidden on and only shows the first). */
#sub_nav .queue-count,
#sub_nav li > span.queue-count,
#sub_nav li:not(.personalQ) > span.queue-count,
#sub_nav li:hover > span.queue-count {
  float: none;
  order: 2;
  font-weight: 500;
  font-family: var(--gp-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--gp-ink-2);
  background: var(--gp-surface);       /* white reads on the warm strip */
  border: 1px solid var(--gp-line-soft);
  border-radius: var(--gp-r-pill);
  padding: 1px 7px;
  margin: 0;
}
#sub_nav #queue-count-bucket {
  display: inline-flex;
  align-items: center;
}
#sub_nav #queue-count-bucket.hidden { display: none; }
#sub_nav #queue-count-bucket .queue-count { background: none; padding: 0; }
#sub_nav #queue-count-bucket:not(.hidden) {
  background: var(--gp-surface);
  border: 1px solid var(--gp-line-soft);
  border-radius: var(--gp-r-pill);
  padding: 1px 7px;
}
#sub_nav li.active > a .queue-count,
#sub_nav li.active > a #queue-count-bucket:not(.hidden) { color: var(--gp-navy); }
#sub_nav li.active > a #queue-count-bucket:not(.hidden) { background: var(--gp-navy-tint); }
/* The stock Overdue queue (id 4 since install — include/i18n/en_US/
   queue.yaml). A renumbered custom queue just keeps the neutral chip. */
#sub_nav .queue-count[data-queue-id="4"],
#sub_nav li:not(.personalQ) > span.queue-count[data-queue-id="4"] {
  color: var(--gp-err);
  background: var(--gp-err-bg);
}
/* Wrapper spans hide the literal parentheses the template prints. */
#sub_nav .gp-paren { display: none; }

/* New Ticket — the one primary action on the strip. */
#sub_nav a#new-ticket {
  background: var(--gp-navy);
  color: #fff;
  border-color: var(--gp-navy);
  margin-left: auto;
}
#sub_nav a#new-ticket:hover {
  background: var(--gp-navy-strong);
  border-color: var(--gp-navy-strong);
  color: #fff;
}
#sub_nav > li:has(> a#new-ticket) { margin-left: auto; }

/* The saved-searches "Search" tab is hidden by request — the search bar
   and Advanced search cover it. Delete this rule to bring it back
   (saved searches are unreachable while it stands). */
#sub_nav > li.item.primary-only:has(> a.Ticket) { display: none; }

/* =========================================================================
   6. Message banners — semantic tokens, no sprite icons
   ========================================================================= */

#msg_notice, .success-banner, .notice-banner,
#msg_warning, .warning-banner,
#msg_error, .error-banner,
#msg_info, .info-banner,
#notice_bar, #warning_bar, #error_bar {
  height: auto;
  line-height: 1.5;
  padding: 10px 16px;
  border-radius: var(--gp-r-sm);
  background-image: none;
  margin-bottom: 12px;
}
#msg_notice, .success-banner, .notice-banner, #notice_bar {
  background-color: var(--gp-ok-bg);
  border: 1px solid var(--gp-ok-edge);
  color: var(--gp-ok);
}
#msg_warning, .warning-banner, #warning_bar {
  background-color: var(--gp-warn-bg);
  border: 1px solid var(--gp-warn-edge);
  color: var(--gp-warn);
}
#msg_error, .error-banner, #error_bar {
  background-color: var(--gp-err-bg);
  border: 1px solid var(--gp-err-edge);
  color: var(--gp-err);
}
#msg_info, .info-banner {
  background-color: var(--gp-info-bg);
  border: 1px solid var(--gp-info-edge);
  color: var(--gp-info);
}

/* =========================================================================
   7. Controls — one pill voice for every button on the panel
   ========================================================================= */

.action-button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
button[type="submit"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  height: var(--gp-ctl-h);
  min-height: var(--gp-ctl-h);
  line-height: 1;
  padding: 0 14px;
  margin: 0 4px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  box-shadow: none;
  background: var(--gp-surface);
  color: var(--gp-ink-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color), opacity var(--gp-t-color);
}
input[type="button"], input[type="reset"],
input[type="submit"], button[type="submit"] {
  display: inline-block;      /* replaced elements can't flex their text */
  line-height: calc(var(--gp-ctl-h) - 2px);
  padding: 0 16px;
}
.button:hover, .button:active,
.action-button:hover, .action-button:active,
input[type="button"]:hover, input[type="button"]:active,
input[type="reset"]:hover, input[type="reset"]:active {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
  box-shadow: none;
}
button[type="submit"], input[type="submit"], .primary.button {
  background: var(--gp-navy);
  border-color: var(--gp-navy);
  color: #fff;
  box-shadow: none;
}
button[type="submit"]:hover, input[type="submit"]:hover,
input[type="submit"]:active, .primary.button:hover {
  background: var(--gp-navy-strong);
  border-color: var(--gp-navy-strong);
  color: #fff;
  box-shadow: none;
}
.action-button:focus-visible, .button:focus-visible,
input[type="submit"]:focus-visible, button[type="submit"]:focus-visible {
  outline: 2px solid var(--gp-navy);
  outline-offset: 2px;
}
.action-button.muted { box-shadow: none; }
.action-button i.icon-caret-down {
  float: none;
  order: 2;
  opacity: 0.55;
}
/* Destructive actions state their nature before they're pressed. */
.red.button, .action-button.danger, a#tickets-delete {
  background: var(--gp-surface);
  border-color: var(--gp-err-edge);
  color: var(--gp-err);
}
.red.button:hover, .action-button.danger:hover, a#tickets-delete:hover {
  background: var(--gp-err);
  border-color: var(--gp-err);
  color: #fff;
  box-shadow: none;
}
/* Anchors styled as action buttons carry their own inner <a>; keep it
   inheriting the pill's colour.
   scp.css floats `.action-button span, .action-button a` LEFT — and since
   the icon <i> is not floated, every label was pulled in front of its own
   icon ("Change Status⚑"). Unfloat them and make the inner anchor its own
   icon+label row. */
.action-button a, .action-button > span {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  /* The wrapper span opens the dropdown; the anchor inside runs the action.
     Left at its own size the anchor was a 13px target inside a 34px pill, so
     most of the pill silently did the other thing. Fill the pill — the caret
     stays outside it and keeps opening the menu. */
  align-self: stretch;
  flex: 1 1 auto;
  justify-content: center;
}
/* …and let it reach into the pill's own padding, so the whole pill runs the
   action rather than a ring of dead space around the icon. Where a caret
   shares the pill, only the left side extends — the caret keeps its side. */
.action-button > a {
  margin-left: -14px;
  padding-left: 14px;
}
.action-button:not(:has(> i.icon-caret-down)) > a {
  margin-right: -14px;
  padding-right: 14px;
}
.action-button a, .action-button a:hover {
  color: inherit;
  text-decoration: none;
}
/* Font Awesome 3's em box sits high against General Sans; nudge glyphs
   onto the text's cap-band centre (same correction the portal uses). */
.action-button i[class*="icon-"],
.button i[class*="icon-"],
.gp-refresh i[class*="icon-"],
.configureQ i[class*="icon-"] {
  position: relative;
  top: 0.06em;
  margin-right: 0;
}
.help-tip { color: var(--gp-ink-3); }

/* Native selects panel-wide: scp.css pins them to 24px, which clips any
   padded text. One modern control voice instead. */
select {
  height: 32px;
  line-height: normal;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  background: var(--gp-surface);
  color: var(--gp-ink);
  padding: 0 8px;
  font-size: 13px;
}
select:focus {
  outline: 0;
  border-color: var(--gp-navy);
  box-shadow: 0 0 0 3px rgba(42, 66, 117, 0.14);
}

/* Dropdown panels (jquery.dropdown + the hover menus). */
.action-dropdown, .noclick-dropdown {
  margin-top: 6px;
}
.action-dropdown ul, .noclick-dropdown ul {
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  box-shadow: 0 14px 34px -18px rgba(27, 34, 48, 0.45);
  padding: 6px;
  min-width: 170px;
}
.action-dropdown ul li > a, .noclick-dropdown ul li > a {
  color: var(--gp-ink-2);
  border-radius: 7px;
  padding: 7px 10px;
  line-height: 1.3;
}
.action-dropdown ul li > a:hover,
.action-dropdown ul li.active > a:hover,
.noclick-dropdown ul li > a:hover,
.noclick-dropdown ul li.active > a:hover {
  background-color: var(--gp-navy-tint);
  color: var(--gp-navy) !important;   /* upstream: white!important on #08C */
}
.action-dropdown ul li.active > a {
  background-color: var(--gp-navy-tint);
  color: var(--gp-navy);
}
.action-dropdown ul li.danger > a:hover,
.customQ-dropdown ul li.danger > a:hover,
.noclick-dropdown ul li.danger > a:hover {
  background-color: var(--gp-err-bg);
  color: var(--gp-err) !important;
}

/* =========================================================================
   8. The find bar — #basic_search
   ========================================================================= */

/* Upstream paints #basic_search as a grey inset band (#f4f4f4, an inset
   shadow, a dotted rule and negative margins). The find bar is part of the
   content card here, so all of that comes off. */
#basic_search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  margin: 0 0 16px;
  padding: 0;
}
#basic_search > div:not(.pull-right) { min-width: 0; flex: 1 1 auto; }
#basic_search form {
  order: -1;                /* markup puts the filters first */
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* on a phone, Advanced search wraps below */
  flex: 1 1 340px;
  min-width: 0;             /* shrink below the input's intrinsic width */
  gap: 10px;
}
#basic_search form .valign-helper { display: none; }
#basic_search .input.attached {
  display: flex;
  height: var(--gp-ctl-h-lg);
  flex: 1 1 240px;
  min-width: 0;             /* the input's size="30" must not set a floor */
  max-width: 560px;
  margin: 0;
}
#basic_search .input.attached input {
  flex: 1;
  min-width: 0;
  height: 100%;
  font-size: 14px;
  color: var(--gp-ink);
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-right: 0;
  border-radius: var(--gp-r-sm) 0 0 var(--gp-r-sm);
  padding: 0 14px;
  transition: border-color var(--gp-t-color), box-shadow var(--gp-t-color);
}
/* The focus ring belongs to the whole search control, not just the text box
   — the submit button is fused to it and was being left outside the glow. */
#basic_search .input.attached {
  border-radius: var(--gp-r-sm);
  transition: box-shadow var(--gp-t-color);
}
#basic_search .input.attached:focus-within {
  box-shadow: 0 0 0 3px rgba(42, 66, 117, 0.14);
}
#basic_search .input.attached:focus-within input { border-color: var(--gp-navy); }
#basic_search .input.attached:focus-within .button.attached {
  border-color: var(--gp-navy);
}
#basic_search .input.attached input:focus {
  outline: 0;
  border-color: var(--gp-navy);
  box-shadow: none;
}
#basic_search .input.attached.focus { outline: none; }
#basic_search .button.attached {
  height: var(--gp-ctl-h-lg);
  min-height: var(--gp-ctl-h-lg);
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--gp-navy);
  border-radius: 0 var(--gp-r-sm) var(--gp-r-sm) 0;
  background: var(--gp-navy);
  color: #fff;
  box-shadow: none !important;   /* upstream: none!important too — keep */
  font-size: 13.5px;
}
#basic_search .button.attached:hover {
  background: var(--gp-navy-strong);
  border-color: var(--gp-navy-strong);
  color: #fff;
}
/* "Advanced search" — the bare bracketed link becomes a real secondary
   button. Targets the element, so it holds before the label pass lands. */
#basic_search form > a {
  display: inline-flex;
  align-items: center;
  height: var(--gp-ctl-h);
  padding: 0 14px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  color: var(--gp-ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
#basic_search form > a:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
}

/* Quick filter and Sort read as controls, not grey noise. The template
   already prints "Label: Choice", so this is pure skin. */
#basic_search > .pull-right {
  float: none;
  order: 1;
  height: auto !important;    /* the template inlines height:25px */
  flex: 0 1 auto;             /* must not GROW, or margin-left:auto has no
                                 free space left to push it right; may still
                                 shrink so it fits a phone */
  min-width: 0;
  flex-wrap: wrap;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
#basic_search > .pull-right .valign-helper { display: none; }
#basic_search span.action-button.muted {
  margin: 0;
  color: var(--gp-ink-2);   /* the quick-filter/sort SPANS only — the
                               dashboard's Refresh is a real submit and
                               keeps the primary voice */
}

/* =========================================================================
   9. The queue bar — name, refresh, settings, mass actions
   ========================================================================= */

.sticky.bar .content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  /* scp.js measures the bar once and writes an inline width on .content;
     with this card's padding that overflowed the shell by 34px (and went
     stale on every resize). Inline styles lose to !important. */
  width: auto !important;
}
.sticky.bar:not(.fixed) .content {
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  padding: 12px 16px;
}
.sticky.bar .content .pull-left,
.sticky.bar .content .pull-right {
  float: none;
}
.sticky.bar .content .flush-left {
  display: flex;
  align-items: center;
  gap: 4px;
  order: -1;   /* the ticket view emits .flush-right BEFORE .flush-left;
                  the title always reads first regardless */
}
.sticky.bar .content .flush-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.sticky.bar h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.sticky.bar h2 a {
  color: var(--gp-ink);
  text-decoration: none;
}
.sticky.bar h2 a:hover { color: var(--gp-navy); }
.sticky.bar h2 .icon-refresh,
.sticky.bar h2 .icon-filter {
  font-size: 0.7em;
  color: var(--gp-ink-3);
  vertical-align: 0.15em;
  margin-right: 5px;
}

/* The labelled Refresh button the template pass adds beside the name. */
.gp-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--gp-ctl-h);
  padding: 0 13px;
  margin-left: 10px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  color: var(--gp-ink-2) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  vertical-align: middle;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
.gp-refresh:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy) !important;
}

/* Queue settings — the bare cog becomes a labelled button with a caret.
   The hover-dropdown contract (.configureQ > .noclick-dropdown) survives. */
.configureQ {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--gp-ctl-h);
  padding: 0 13px;
  margin: 0;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  color: var(--gp-ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
.configureQ:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
}
.configureQ > .noclick-dropdown {
  top: 100%;
  margin-top: 2px;
  margin-left: -13px;
  padding-top: 8px;       /* hover corridor between button and menu */
}
/* The caret the label pass adds after the label. */
.configureQ .gp-caret { opacity: 0.55; font-size: 0.85em; }

/* --- One order for both toolbars ---------------------------------------
   The queue lists its actions in DOM order; the ticket view relies on
   float:right, which reverses them — and floats do nothing in a flex row,
   so the two pages disagreed about where Assign or Transfer lived. State
   changes lead, then the page's own verbs, then utilities. */
.sticky.bar .flush-right > * { order: 6; }
.sticky.bar .flush-right .gp-sel-hint,
.sticky.bar .flush-right .gp-selcount-bar { order: 0; }
.sticky.bar .flush-right span.action-button:has(> a[href="#statuses"]) { order: 1; }
.sticky.bar .flush-right span.action-button:has(> a#tickets-assign),
.sticky.bar .flush-right span.action-button:has(> a#ticket-assign) { order: 2; }
.sticky.bar .flush-right a#tickets-transfer,
.sticky.bar .flush-right a#ticket-transfer { order: 3; }
/* Referrals routes the ticket like Transfer does, so it sits beside it. */
.sticky.bar .flush-right a[href$="/referrals"] { order: 4; }
.sticky.bar .flush-right a#tickets-merge { order: 5; }
.sticky.bar .flush-right a#tickets-link { order: 6; }
.sticky.bar .flush-right a[href="#post-reply"] { order: 5; }
.sticky.bar .flush-right a#post-note { order: 6; }
.sticky.bar .flush-right span.action-button:has(> a#ticket-print) { order: 7; }
.sticky.bar .flush-right a[href*="a=edit"] { order: 8; }
.sticky.bar .flush-right span.action-button[data-dropdown="#action-dropdown-more"],
.sticky.bar .flush-right span.action-button:has(> a.tasks-action[href="#moreoptions"]) { order: 9; }
.sticky.bar .flush-right a#tickets-delete,
.sticky.bar .flush-right span.action-button:has(> a#tasks-delete) { order: 10; }

/* --- Mass actions: honest disabled state, pure CSS ----------------------
   tickets-actions.tmpl.php already no-ops on an empty selection
   (checkbox_checker($form, 1) bails) — this only makes that visible.
   The bar sits OUTSIDE form#tickets, so the shared ancestor is #content.
   No JS: pjax swaps #pjax-container wholesale, so a scripted class would
   desync from the real checkbox state on every reload. */
/* Only MASS-action controls grey out, and only on pages that actually have
   a mass-selection form (form#tickets with .ckb boxes — the queue). The
   ticket detail view has no #tickets form, so its toolbar — including the
   Change Status trigger, which carries .tickets-action even there — never
   freezes. */
#content:has(form#tickets input.ckb):not(:has(form#tickets input.ckb:checked))
  .sticky.bar .flush-right
  :is(a.action-button.tickets-action, span.action-button:has(> a.tickets-action)) {
  opacity: 0.45;
  pointer-events: none;
}
/* The hint the label pass adds; swapped for the live count in the table
   foot once something is checked. */
.gp-sel-hint {
  font-size: 12.5px;
  color: var(--gp-ink-3);
  margin-right: 6px;
  white-space: nowrap;
}
#content:has(#tickets .ckb:checked) .gp-sel-hint { display: none; }

/* =========================================================================
   10. The queue table
   ========================================================================= */

/* The template hardcodes width="940" on the table; the attribute stays (a
   label-scope decision) and CSS overrides it. */
#tickets table.list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  background: var(--gp-surface);
  margin: 0;
  font-size: 13.5px;
}

/* Uppercase tracked micro-labels for column headers; no gif sort arrows. */
#tickets table.list thead th {
  background: var(--gp-surface-2);
  border: 0;
  border-bottom: 1px solid var(--gp-line);
  padding: 10px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
  white-space: nowrap;
}
#tickets table.list thead th:first-child { border-top-left-radius: var(--gp-r); }
#tickets table.list thead th:last-child { border-top-right-radius: var(--gp-r); }
#tickets table.list thead th a {
  background: none;
  padding-right: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#tickets table.list thead th a:hover { color: var(--gp-ink); }
#tickets table.list thead th a.asc::after,
#tickets table.list thead th a.desc::after {
  font-size: 8px;
  line-height: 1;
  color: var(--gp-navy);
}
#tickets table.list thead th a.asc::after { content: "\25B2"; }
#tickets table.list thead th a.desc::after { content: "\25BC"; }

/* Rows: quiet grid, hover state, checked tint. No zebra — the hairlines
   carry the rhythm. */
/* The row owns its background — every cell is transparent, including the
   priority cell whose inline background-color would otherwise stay white
   in a hovered or checked row. */
#tickets table.list tbody tr { background: var(--gp-surface); }
#tickets table.list tbody td {
  background: none !important;
  border: 0;
  border-bottom: 1px solid var(--gp-line-soft);
  padding: 11px 12px;
  vertical-align: middle;
}
#tickets table.list tbody tr { transition: background var(--gp-t-color); }
#tickets table.list tbody tr:hover,
#tickets table.list tbody tr.highlight { background: var(--gp-surface-2); }
#tickets table.list tbody tr:has(.ckb:checked),
#tickets table.list tbody tr:has(.ckb:checked):hover { background: var(--gp-navy-tint); }
/* Checkboxes are a primary control on a queue — 15px was a poor target.
   The whole cell is clickable (scp-theme.js toggles from anywhere in it). */
#content table.list input[type="checkbox"] { margin: 0; vertical-align: middle; }
/* The cell is the hit target, not just the 18px box. */
#content table.list tbody td:has(> input[type="checkbox"]),
#content table.list thead th:has(> input[type="checkbox"]) {
  cursor: pointer;
  padding-left: 14px;
  padding-right: 10px;
  width: 42px;
}
#tickets table.list tbody td a {
  display: inline;
  color: var(--gp-ink);
  text-decoration: none;
}
#tickets table.list tbody td a:hover {
  color: var(--gp-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ticket numbers read as record locators; dates align down the column. */
#tickets tbody td a.preview,
#tickets tbody td time {
  font-family: var(--gp-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 12.5px;
  color: var(--gp-ink-2);
}
/* date:full renders plain text — key the stock Last Updated / Date Created
   columns off their stable ids and positions (guarded, so a rearranged
   custom queue simply keeps proportional text). */
#tickets table.list:has(thead th[data-id="10"]:nth-child(3)) tbody td:nth-child(3),
#tickets table.list:has(thead th[data-id="2"]:nth-child(3)) tbody td:nth-child(3) {
  font-family: var(--gp-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 12.5px;
  color: var(--gp-ink-2);
  white-space: nowrap;
}

/* Thread-count / attachment / collaborator annotations in the subject. */
#tickets tbody td .pull-right.faded,
#tickets tbody td small.faded { color: var(--gp-ink-3); }

/* --- upstream sprite decorations ---------------------------------------
   .Icon spans are 1990s gif sprites (ticket source, assignee kind, locks).
   Replace the sprite with a Font Awesome glyph so they scale, inherit
   colour, and survive a dark row tint. */
#content .Icon {
  background-image: none !important;
  padding-left: 0;
  min-height: 0;
}
#content .Icon[class*="Ticket"]::before,
#content .Icon.staffAssigned::before,
#content .Icon.teamAssigned::before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 0.9em;
  color: var(--gp-ink-3);
  margin-right: 6px;
  display: inline-block;
}
#content .Icon.webTicket::before    { content: "\f0ac"; }  /* globe */
#content .Icon.emailTicket::before  { content: "\f0e0"; }  /* envelope */
#content .Icon.phoneTicket::before  { content: "\f095"; }  /* phone */
#content .Icon.apiTicket::before,
#content .Icon.otherTicket::before  { content: "\f0ec"; }  /* exchange */
#content .Icon.staffAssigned::before { content: "\f007"; } /* user */
#content .Icon.teamAssigned::before  { content: "\f0c0"; } /* group */
#content .Icon.lockedTicket::before  { content: "\f023"; color: var(--gp-warn); }

/* On the tasks queue the overdue/locked classes ride on the title LINK
   (not an empty span): keep the link, swap the gif for a dot. */
#content a.Icon.overdueTicket,
#content a.Icon.lockedTicket {
  background-image: none;
  padding-left: 0;
  min-height: 0;
}
#content a.Icon.overdueTicket::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gp-err);
  margin-right: 6px;
  vertical-align: 0.05em;
}
#content a.Icon.lockedTicket::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gp-warn);
  margin-right: 6px;
  vertical-align: 0.05em;
}
/* Overdue: the OverdueFlagDecoration span becomes an unmissable dot.
   Upstream .Icon carries sprite metrics (padding-left:20px, min-height:16px)
   that must be zeroed or the dot renders as a blob. */
#tickets .Icon.overdueTicket {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-height: 0;
  padding: 0;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--gp-err) !important;
  vertical-align: 0.05em;
}

/* --- Priority: a stripe that scans, a pill that names --------------------
   Cells carry only inline background-color styles; the stock palette
   (priority.yaml) is the contract:  Low #DDFFDD · Normal #FFFFF0(A, an
   upstream typo browsers drop — the attribute text still matches) ·
   High/Emergency #FEE7E7 (upstream ships them identical).  Custom colours
   fall back to the admin's own cell tint, untouched. */

/* A stripe means "this one is urgent". Low priority gets none — a pale
   tick beside the checkbox read as a rendering artefact, not a signal. */
#tickets tbody tr:has(td[style*="#FEE7E7" i]) td:first-child {
  box-shadow: inset 3px 0 0 var(--gp-err);
}

/* The cell stops shouting; the pill inside names the level. */
#tickets tbody td[style*="#FEE7E7" i],
#tickets tbody td[style*="#DDFFDD" i],
#tickets tbody td[style*="#FFFFF0" i] {
  background-color: transparent !important;
}
#tickets tbody td[style*="#FEE7E7" i] > div,
#tickets tbody td[style*="#DDFFDD" i] > div,
#tickets tbody td[style*="#FFFFF0" i] > div {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--gp-r-pill);
  border: 1px solid;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
#tickets tbody td[style*="#FEE7E7" i] > div {
  background: var(--gp-err-bg) !important;
  border-color: var(--gp-err-edge);
  color: var(--gp-err);
}
#tickets tbody td[style*="#DDFFDD" i] > div {
  background: var(--gp-ok-bg) !important;
  border-color: var(--gp-ok-edge);
  color: var(--gp-ok);
}
#tickets tbody td[style*="#FFFFF0" i] > div {
  background: var(--gp-surface-2) !important;
  border-color: var(--gp-line);
  color: var(--gp-ink-2);
}

/* --- Table foot: select controls and the live selection count ----------- */
#tickets table.list tfoot td {
  background: var(--gp-surface-2);
  border: 0;
  border-top: 1px solid var(--gp-line);
  border-radius: 0 0 var(--gp-r) var(--gp-r);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--gp-ink-3);
}
#tickets tfoot a {
  color: var(--gp-navy);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 7px;
}
#tickets tfoot a:hover { background: var(--gp-navy-tint); }

/* CSS counter over the checked boxes — the display element must follow
   them in document order, which is why the count lives in the foot. */
#tickets { counter-reset: gp-checked; }
#tickets .ckb:checked { counter-increment: gp-checked; }
.gp-selcount { display: none; }
#tickets:has(.ckb:checked) .gp-selcount {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 11px;
  border-radius: var(--gp-r-pill);
  background: var(--gp-navy-tint);
  color: var(--gp-navy);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.gp-selcount-n::after { content: counter(gp-checked) "\00a0"; }

/* =========================================================================
   11. Pager & export
   ========================================================================= */

#tickets > div:last-of-type,
#tickets > div:last-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--gp-ink-3);
}
#tickets > div .faded.pull-right {
  float: none;
  order: 9;
  margin-left: auto;
  font-family: var(--gp-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* Page numbers as buttons; the current page is the filled one. */
#tickets > div > a:not(#queue-export) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--gp-r-sm);
  color: var(--gp-ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
#tickets > div > a:not(#queue-export) b { font-weight: 400; }
#tickets > div > a:not(#queue-export):hover {
  background: var(--gp-surface-2);
  color: var(--gp-ink);
}
/* class.pagenate.php span-wraps its historical [ ] so the theme can drop
   them; the client portal keeps rendering them. */
.gp-bracket { display: none; }
#tickets > div > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--gp-r-sm);
  background: var(--gp-navy);
  color: #fff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Export says what it produces (label pass); meanwhile it reads as a
   secondary button either way. */
#tickets a#queue-export {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  margin-left: 8px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  color: var(--gp-ink-2);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
#tickets a#queue-export:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
}

/* =========================================================================
   12. Responsive — 2560 down to 320 with no horizontal scroll
   ========================================================================= */

/* Custom column sets that don't match the stock drops below scroll inside
   the form instead of pushing the page sideways. */
@media (min-width: 721px) and (max-width: 1240px) {
  #tickets, #tasks, #users-list, #orgs-list { display: block; overflow-x: auto; }
}
/* Any other list or stats table (admin pages, embeds) scrolls in place on a
   phone rather than pushing the page sideways. */
@media (max-width: 720px) {
  #content form:not(#tickets):not(#tasks):not(#users-list):not(#orgs-list):has(table.list) {
    display: block;
    overflow-x: auto;
  }
  #content .tab_content:has(> table.dashboard-stats) { overflow-x: auto; }
  /* jquery.dialog centres by writing an inline pixel `left`, computed for a
     desktop-width dialog — on a phone that lands off-screen (left:-130px for
     a 650px panel in a 390px viewport). Pin it to the gutters instead. */
  .dialog, #popup {
    left: 12px !important;
    right: 12px;
    width: auto !important;
    max-width: none;
    padding: 18px 16px;
  }

  /* Two-column layout tables (profile, several admin forms) stack rather
     than forcing the document sideways. */
  #content table.two-column,
  #content table.two-column > tbody,
  #content table.two-column > tbody > tr,
  #content table.two-column > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  /* The ticket view's metadata halves stack, and the label column gives
     its width back to the values (an email has nowhere to break). */
  table.ticket_info > tbody > tr { display: flex; flex-direction: column; }
  table.ticket_info > tbody > tr > td { width: 100%; }
  table.ticket_info table th,
  .ticket_info th {
    width: 96px;
    padding-right: 6px;
    font-size: 12px;
  }
  table.ticket_info.custom-data td:first-child { width: 96px; }
}

/* Columns drop in priority order, keyed to the STOCK column layout and
   guarded so a rearranged queue is left alone: From (User Name, id 4,
   5th cell counting the checkbox), then Last Updated (id 10, 3rd cell). */
@media (min-width: 721px) and (max-width: 1240px) {
  #tickets table.list:has(thead th[data-id="4"]:nth-child(5)) th:nth-child(5),
  #tickets table.list:has(thead th[data-id="4"]:nth-child(5)) tbody td:nth-child(5) {
    display: none;
  }
}
@media (min-width: 721px) and (max-width: 1040px) {
  #tickets table.list:has(thead th[data-id="10"]:nth-child(3)) th:nth-child(3),
  #tickets table.list:has(thead th[data-id="10"]:nth-child(3)) tbody td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 900px) {
  :root { --gp-scp-gutter: 18px; }
  #content { padding: 16px 14px 22px; }
}

/* Below 860px button labels collapse to icons; the text stays for screen
   readers (visually hidden, not display:none). Tooltips are still there. */
@media (max-width: 860px) {
  .gp-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* The two identity-bearing labels stay visible. */
  #basic_search .button.attached .gp-btn-label,
  .configureQ .gp-btn-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
    overflow: visible;
  }
  /* The primary nav and the queue-tab strip scroll sideways rather than
     wrapping or clipping. (Hover menus are a pointer affordance; nothing is
     lost — every destination has a landing page, and in production the
     jb-overflowmenu JS additionally folds extra queues into a menu.) */
  #nav {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #nav .active, #nav .inactive { flex: none; }
  /* The queue strip wraps (flat pills), so no sideways scroll needed. */
}

@media (max-width: 720px) {
  /* A dozen queue pills stacked six rows deep would push the queue itself
     off the screen; the strip scrolls sideways as one row instead. */
  #customQ_nav,
  nav.jb-overflowmenu,
  nav:has(> #sub_nav) {          /* tasks / users / orgs / dashboard emit a
                                    plain <nav> with no overflow menu */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #sub_nav {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }
  #sub_nav > li { flex: none; }
  #sub_nav > li:has(> a#new-ticket) { margin-left: 14px; }
  /* A popover inside a horizontal scroller would be clipped, so on a phone
     every group lays its children out inline and the caret goes away. */
  #sub_nav .gp-qcaret { display: none; }
  #sub_nav .gp-qmenu {
    display: flex;
    position: static;
    min-width: 0;
    padding: 0;
    gap: 4px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  #sub_nav .gp-qmenu > li { width: auto; }
  #sub_nav .gp-qmenu > li > a {
    padding: 7px 13px;
    border-radius: var(--gp-r-pill);
  }
  #sub_nav .gp-qmenu > li > span.queue-count { order: 2; margin: 0 0 0 -6px; }
  #sub_nav .gp-qmenu > li.gp-qadd-row { display: none; }

  /* Each row becomes a card. Every cell is shown again — the mid-width
     column drops only apply where the table is still a grid. */
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list,
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list thead,
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody,
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tfoot,
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tr,
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list { border: 0; background: none; }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list thead { display: none; }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody tr {
    position: relative;
    background: var(--gp-surface);
    border: 1px solid var(--gp-line);
    border-radius: var(--gp-r-sm);
    margin-bottom: 8px;
    padding: 12px 14px 12px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
  }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody td {
    width: auto;
    border: 0;
    padding: 0;
    background: none !important;
  }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody tr:hover td { background: none !important; }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody tr:hover,
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody tr:has(.ckb:checked) {
    background: var(--gp-navy-tint);
  }
  /* The checkbox pins top-left; the priority stripe moves to the card. */
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody td:has(> .ckb) {
    position: absolute;
    left: 12px;
    top: 14px;
    width: auto;
    box-shadow: none !important;
  }
  #content #tickets tbody tr:has(td[style*="#FEE7E7" i]) {
    box-shadow: inset 3px 0 0 var(--gp-err);
  }
  /* Subject (stock position) takes the full card width and may wrap. */
  #content #tickets table.list:has(thead th[data-id="1"]:nth-child(2)) tbody td:nth-child(2) {
    flex: 0 0 auto;
    font-weight: 500;
  }
  #content #tickets table.list:has(thead th[data-id="10"]:nth-child(3)) tbody td:nth-child(3) {
    flex: 0 0 auto;
    margin-left: auto;
  }
  #content #tickets table.list:has(thead th[data-id="3"]:nth-child(4)) tbody td:nth-child(4) {
    flex: 1 1 100%;
    font-weight: 500;
    white-space: normal;
  }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tbody td[style] > div { white-space: normal; }
  /* The column renderer stamps a server-computed max-width on truncated
     cells (max-width:275px for a subject). In a card that is wider than the
     card itself, so the subject clipped instead of wrapping. */
  #content table.list .truncate {
    display: inline;          /* an inline-BLOCK cannot share a line with the
                                 overdue dot, so it dropped beneath it */
    white-space: normal;
    overflow: visible;
  }
  #content :is(#tickets, #tasks, #users-list, #orgs-list) table.list tfoot td { border-radius: var(--gp-r-sm); }

  /* The queue bar and find bar stack. */
  .sticky.bar .content .flush-right {
    margin-left: 0;
    width: 100%;
  }
  #basic_search > .pull-right {
    margin-left: 0;
    flex-wrap: wrap;
  }
  #basic_search .input.attached { max-width: none; }
}

@media (max-width: 480px) {
  #header { padding: 8px 12px; }
  #header p#info { font-size: 12.5px; }
  #header p#info a { padding: 6px 7px; }
}

/* =========================================================================
   13. Motion preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .action-button, .button, #nav a, #sub_nav a, #tickets tbody td,
  .gp-refresh, .configureQ, #basic_search .input.attached input {
    transition: none;
  }
}

/* =========================================================================
   14. The rest of the agent panel — one treatment for every list page
   =========================================================================
   Tickets got the first pass; tasks (scp/tasks.php), the user directory
   (scp/users.php), organizations (scp/orgs.php) and the dashboard reuse the
   same idioms with small markup deltas (mapped in git history):
     - tasks:      form#tasks,      table.list, ckb[name="tids[]"]
     - users:      form#users-list, table.list, ckb.mass (nameless)
     - orgs:       form#orgs-list,  table.list, ckb.mass (nameless)
     - dashboard:  one bare form, table.dashboard-stats, Raphael SVG chart
   Admin-panel lists share table.list and inherit this for free (accepted).
   ========================================================================= */

/* --- every list table gets the card treatment --------------------------- */
#content table.list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  background: var(--gp-surface);
  margin: 0 0 6px;
  font-size: 13.5px;
}
#content table.list caption {
  background: var(--gp-surface-2);
  border: 0;
  border-bottom: 1px solid var(--gp-line);
  padding: 10px 14px;
  font-weight: 500;
}
#content table.list thead th {
  background: var(--gp-surface-2);
  border: 0;
  border-bottom: 1px solid var(--gp-line);
  padding: 10px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
  white-space: nowrap;
}
#content table.list thead th:first-child { border-top-left-radius: var(--gp-r); }
#content table.list thead th:last-child { border-top-right-radius: var(--gp-r); }
#content table.list thead th a {
  background: none;
  padding-right: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#content table.list thead th a:hover { color: var(--gp-ink); }
#content table.list thead th a.asc::after,
#content table.list thead th a.desc::after {
  font-size: 8px;
  line-height: 1;
  color: var(--gp-navy);
}
#content table.list thead th a.asc::after { content: "\25B2"; }
#content table.list thead th a.desc::after { content: "\25BC"; }
#content table.list tbody tr {
  background: var(--gp-surface);
  transition: background var(--gp-t-color);
}
#content table.list tbody td {
  background: none !important;
  border: 0;
  border-bottom: 1px solid var(--gp-line-soft);
  padding: 11px 12px;
  vertical-align: middle;
}
#content table.list tbody tr:hover,
#content table.list tbody tr.highlight { background: var(--gp-surface-2); }
#content table.list tbody tr:has(input.ckb:checked),
#content table.list tbody tr:has(input.ckb:checked):hover { background: var(--gp-navy-tint); }

#content table.list tbody td a {
  display: inline;          /* scp.css makes every <a> inline-block, which
                               stops a long subject from sharing a line with
                               its overdue dot or count */
  color: var(--gp-ink);
  text-decoration: none;
}
#content table.list tbody td a:hover {
  color: var(--gp-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#content table.list tfoot td {
  background: var(--gp-surface-2);
  border: 0;
  border-top: 1px solid var(--gp-line);
  border-radius: 0 0 var(--gp-r) var(--gp-r);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--gp-ink-3);
}
#content table.list tfoot a {
  color: var(--gp-navy);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 7px;
}
#content table.list tfoot a:hover { background: var(--gp-navy-tint); }
/* Rows that a click can open (scp-theme.js follows the row's own link). */
#content table.list tbody tr:has(td a[href]) { cursor: pointer; }

/* The column renderer stamps a server-computed max-width on truncated cells
   (max-width:275px for a subject), sized for upstream's fixed 940px table.
   The console's table is fluid, so that cap clipped subjects while the
   column still had room — let the cell decide, and keep the ellipsis.
   The cell becomes a row so the truncating text shares its line with any
   decoration in front of it (an overdue dot, a lock) rather than being
   pushed underneath by a full-width inline-block. */
#content table.list td > div:has(> .truncate) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#content table.list .truncate {
  max-width: 100% !important;
  min-width: 0;
  flex: 0 1 auto;
}

/* Decoration wrappers in list cells are floated by upstream, which drops
   the subject onto the next line beside them. They are single glyphs — let
   them sit inline with the text they annotate. */
#content table.list td span.pull-left {
  float: none;
  display: inline;
}

/* Record numbers in list tables read as record locators — tickets and
   tasks only; on the user directory the preview link is a person's name. */
:is(#tickets, #tasks) table.list td a.preview {
  font-family: var(--gp-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 12.5px;
  color: var(--gp-ink-2);
}

/* Selection counting works on every mass-select form. */
#content form#tasks,
#content form#users-list,
#content form#orgs-list { counter-reset: gp-checked; }
#content form input.ckb:checked { counter-increment: gp-checked; }

/* Mass actions on the tasks queue grey out exactly like the tickets queue
   (same honesty: their JS no-ops on an empty selection). */
#content:has(form#tasks input.ckb):not(:has(form#tasks input.ckb:checked))
  .sticky.bar .flush-right
  :is(a.action-button.tasks-action, span.action-button:has(> a.tasks-action)) {
  opacity: 0.45;
  pointer-events: none;
}
#content:has(form input.ckb:checked) .gp-sel-hint { display: none; }
#content form:has(input.ckb:checked) .gp-selcount { display: inline-flex; }

/* The JS-painted count chip in the action bar. */
.gp-selcount-bar {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--gp-r-pill);
  background: var(--gp-navy-tint);
  color: var(--gp-navy);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- pagers and exports, wherever they render --------------------------
   The pager row is identified by the current-page marker pagenate now
   emits (b > .gp-bracket) — one selector covers tickets, tasks, users,
   orgs and the org-view embed without knowing each wrapper. */
#content form > div:has(> b > .gp-bracket),
#content div:has(> b > .gp-bracket) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--gp-ink-3);
}
#content div:has(> b > .gp-bracket) > .faded.pull-right {
  float: none;
  order: 9;
  margin-left: auto;
  font-family: var(--gp-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
#content div:has(> b > .gp-bracket) > a:not(.export-csv):not(.no-pjax):not(.export) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--gp-r-sm);
  color: var(--gp-ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
#content div:has(> b > .gp-bracket) > a:not(.export-csv):not(.no-pjax):not(.export) b { font-weight: 400; }
#content div:has(> b > .gp-bracket) > a:not(.export-csv):not(.no-pjax):not(.export):hover {
  background: var(--gp-surface-2);
  color: var(--gp-ink);
}
#content div:has(> b > .gp-bracket) > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--gp-r-sm);
  background: var(--gp-navy);
  color: #fff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Export controls: tasks' a.export-csv, users/orgs' bare export links, the
   dashboard's button.link.button — all read as the same secondary pill. */
#content a.export-csv,
#content div:has(> b > .gp-bracket) a[href*="a=export"],
#content button.link.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  margin-left: 8px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  color: var(--gp-ink-2);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
#content a.export-csv:hover,
#content div:has(> b > .gp-bracket) a[href*="a=export"]:hover,
#content button.link.button:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
}

/* --- page heading bars off the queues ----------------------------------
   users/orgs put a bare h2 + a button cluster in the sticky bar; the More
   span carries a /*DELME*\/ inline vertical-align the templates drop. */
.sticky.bar .content > .pull-right:not(.flush-right) {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.sticky.bar .content .green.button {
  background: var(--gp-brand);
  border-color: var(--gp-brand);
  color: #fff;
}
.sticky.bar .content .green.button:hover {
  background: var(--gp-brand-strong);
  border-color: var(--gp-brand-strong);
  color: #fff;
  box-shadow: none;
}

/* --- flat tabs, everywhere ul.tabs renders ------------------------------
   (ticket thread/response tabs, dashboard statistics, dialogs) */
ul.tabs {
  height: auto;
  padding: 0 4px;
  background: none;
  border-bottom: 1px solid var(--gp-line);
  box-shadow: none;
}
ul.tabs li,
ul.tabs li:not(.active) {
  min-width: 0;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  bottom: 0;
  font-weight: 400;
}
ul.tabs li.active {
  background: none;
  border: 0;
  border-top: 0;
  box-shadow: none;
  bottom: 0;
}
ul.tabs.clean li.active { background: none; }
ul.tabs li a {
  display: block;
  padding: 11px 14px 9px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gp-ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--gp-t-color), border-color var(--gp-t-color);
}
ul.tabs li a:hover { color: var(--gp-ink); }
ul.tabs li.active a {
  font-weight: 500;
  color: var(--gp-navy);
  border-bottom-color: var(--gp-navy);
}
ul.tabs li.error a, ul.tabs li a.error { color: var(--gp-err); }

/* --- dashboard ----------------------------------------------------------
   css/dashboard.css loads INSIDE #content, after this file — chart rules
   here carry #content for specificity. The chart ink itself is Raphael
   SVG with JS-injected colours and stays as shipped. */
#content #line-chart-here {
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
}
#content #line-chart-legend span.label {
  border-radius: var(--gp-r-pill);
  font-size: 11.5px;
}
#content table.dashboard-stats {
  border-bottom: 1px solid var(--gp-line);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
#content table.dashboard-stats tbody:first-child th {
  white-space: nowrap;
  border-bottom: 1px solid var(--gp-line);
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
#content table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) {
  background: var(--gp-surface);
}
#content table.dashboard-stats tbody:nth-child(2) th {
  border-right: 0;
  padding: 8px 10px;
  color: var(--gp-ink-2);
  font-weight: 400;
}
#content table.dashboard-stats tbody:nth-child(2) td {
  border-right: 0;
  border-bottom: 1px solid var(--gp-line-soft);
  padding: 8px 10px;
  font-family: var(--gp-mono);
  font-size: 12.5px;
  color: var(--gp-ink-2);
}
#content table.dashboard-stats tbody:nth-child(2) tr:hover {
  background: var(--gp-surface-2);
}
#content table.dashboard-stats tbody:nth-child(2) tr:hover th { color: var(--gp-ink); }
/* The timeframe row reads as one aligned control row. */
#basic_search label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gp-ink-2);
  font-size: 13.5px;
}
/* jQuery UI inserts a raw cal.png button beside every .dp field
   (showOn:'both', so focusing the field still opens the picker). Swap the
   bitmap for a glyph inside the control. */
.ui-datepicker-trigger,
#basic_search img.ui-datepicker-trigger,
#content img.ui-datepicker-trigger { display: none !important; }
#basic_search label:has(input.dp) { position: relative; }
#basic_search label:has(input.dp)::after {
  content: "\f073";
  font-family: FontAwesome;
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--gp-ink-3);
  pointer-events: none;
}
#basic_search input.dp { padding-right: 30px; }
#basic_search input.dp,
#basic_search select {
  height: var(--gp-ctl-h);
  font: inherit;
  font-size: 13.5px;
  color: var(--gp-ink);
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  padding: 0 10px;
}
#basic_search input.dp:focus,
#basic_search select:focus {
  outline: 0;
  border-color: var(--gp-navy);
  box-shadow: 0 0 0 3px rgba(42, 66, 117, 0.14);
}

/* =========================================================================
   15. Ticket detail view (scp/tickets.php?id=N — ticket-view.inc.php)
   =========================================================================
   Same system as the queue: white cards on cream, warm insets, navy for
   actions, semantic tokens for state. The toolbar reuses the sticky-bar
   card from §9; .flush-left order:-1 already puts the title first (the
   template emits .flush-right before .flush-left).
   ========================================================================= */

/* --- subject ------------------------------------------------------------ */
.tixTitle {
  padding: 18px 2px 14px;
}
.tixTitle h3 {
  color: var(--gp-ink);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.has_bottom_border { border-bottom: 1px solid var(--gp-line); }

/* --- metadata: the pale-blue panels become warm insets ------------------ */
/* One rhythm between every metadata block. Upstream separates them with
   bare <br>s on top of mixed margins, which left the panels 33px apart and
   Additional Details / Consent almost touching. */
table.ticket_info {
  width: 100%;                        /* the template hardcodes width=940 */
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  margin: 24px 0 0;
}
#content table.ticket_info + br,
#content br + br { display: none; }
#content table.ticket_info.custom-data { margin: 24px 0 0; }
table.ticket_info > tbody > tr > td { padding: 6px 10px; }
/* the label/value tables nested in each half */
table.ticket_info table th,
.ticket_info th {
  width: 130px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gp-ink-3);
  white-space: nowrap;
  vertical-align: top;
}
table.ticket_info table td {
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--gp-ink);
  overflow-wrap: anywhere;  /* raw email addresses must break on a phone */
}
table.ticket_info a { color: var(--gp-navy); text-decoration: none; }

/* --- the User row -------------------------------------------------------
   Upstream renders "icon Name (3) icon ( Manage Collaborators)" — two
   parenthesised fragments jammed against a link. The parens are wrapped in
   the template so they can come off here: the name leads, the ticket count
   becomes a chip, and collaborators read as a quiet secondary action. */
.ticket_info .gp-paren { display: none; }
.ticket_info td a > i.icon-user { color: var(--gp-ink-3); margin-right: 2px; }
.ticket_info a[data-dropdown="#action-dropdown-stats"] {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  border: 1px solid var(--gp-line-soft);
  font-family: var(--gp-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--gp-ink-2);
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
.ticket_info a[data-dropdown="#action-dropdown-stats"] b { font-weight: 500; }
.ticket_info a[data-dropdown="#action-dropdown-stats"]:hover {
  border-color: var(--gp-navy-edge);
  background: var(--gp-navy-tint);
  color: var(--gp-navy);
  text-decoration: none;
}
.ticket_info a.manage-collaborators {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 12.5px;
  color: var(--gp-ink-3);
}
.ticket_info a.manage-collaborators i { color: var(--gp-ink-3); }
.ticket_info a.manage-collaborators:hover,
.ticket_info a.manage-collaborators:hover i {
  color: var(--gp-navy);
  text-decoration: none;
}
.ticket_info a.manage-collaborators:hover span { text-decoration: underline; text-underline-offset: 3px; }
table.ticket_info a:hover { text-decoration: underline; text-underline-offset: 3px; }
table.ticket_info .faded { color: var(--gp-ink-3); }
/* custom-data forms ("Ticket Details", consent forms, …) */
table.ticket_info.custom-data thead th {
  background: none;
  border-bottom: 1px solid var(--gp-line);
  padding: 9px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
.custom-data th, .custom-data td { padding: 7px 10px; }
/* inline-edit affordance: quiet until hovered */
.ticket_info a.inline-edit { color: inherit; }
.ticket_info a.inline-edit:hover { color: var(--gp-navy); text-decoration: none; }
.ticket_info a.inline-edit:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* --- thread ------------------------------------------------------------- */
#ticket_thread, .tab_content { padding-top: 14px; }

.thread-entry { margin-bottom: 16px; }
/* Upstream floats a 48px avatar into a 60px gutter beside each entry, which
   leaves a placeholder square hanging outside the card. The header already
   names the author and the tint already says which side they are on, so the
   gutter comes back as width. (Inline avatars inside event descriptions
   stay — they read as part of the sentence.) */
.thread-entry > .avatar { display: none; }
.thread-entry.avatar,
.thread-entry.message.avatar,
.thread-entry.response.avatar,
.thread-entry.note.avatar { margin-left: 0; margin-right: 0; }
/* speech-bubble arrows: gone (both pseudo pairs carry them upstream) */
.thread-entry .header::before,
.thread-entry .header::after,
.thread-entry::before,
.thread-entry::after { display: none; }
.thread-entry .header {
  padding: 9px 14px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm) var(--gp-r-sm) 0 0;
  font-size: 13px;
  color: var(--gp-ink-2);
}
.thread-entry .header b { font-weight: 500; color: var(--gp-ink); }
.thread-entry .header time {
  font-family: var(--gp-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--gp-ink-3);
}
.thread-entry .header a { color: inherit; text-decoration: none; }
/* who is speaking, told by tint: user = navy, agent reply = sage, internal
   note = warm gold, system = neutral */
.thread-entry.message .header { background: var(--gp-navy-tint); border-color: var(--gp-navy-edge); }
.thread-entry.response .header { background: var(--gp-brand-tint); border-color: var(--gp-brand-edge); }
.thread-entry.note .header { background: var(--gp-warn-bg); border-color: var(--gp-warn-edge); }
.thread-entry.system .header { background: var(--gp-surface-2); }
.thread-entry .thread-body {
  border: 1px solid var(--gp-line);
  border-top: none;
  border-radius: 0 0 var(--gp-r-sm) var(--gp-r-sm);
  padding: 14px;
}
.thread-body .attachments {
  background-color: var(--gp-surface-2);
  border-top: 1px dashed var(--gp-line);
  border-radius: 0 0 var(--gp-r-sm) var(--gp-r-sm);
  margin: 0 -14px;
  padding: 8px 14px;
}
.thread-entry .header .muted-button {
  background: none;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  color: var(--gp-ink-3);
  padding: 2px 7px;
}
.thread-entry .header .muted-button:hover {
  background: var(--gp-surface);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
}
.thread-entry .header .label.label-bare {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
  background: none;
}
/* the event timeline between entries */
.thread-event { color: var(--gp-ink-3); }
.thread-event .type-icon {
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line-soft);
  border-radius: 50%;
}
.thread-event .type-icon::after { border-color: var(--gp-surface); }
.thread-event .faded.description { color: var(--gp-ink-3); }
.thread-event .description b { font-weight: 500; color: var(--gp-ink-2); }

/* --- response area ------------------------------------------------------ */
#response_options { margin-top: 20px; }
#response_options > form,
#response_options > form.tab_content {
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line);
  border-top: none;
  border-radius: 0 0 var(--gp-r-sm) var(--gp-r-sm);
  padding: 16px 18px;
}
#response_options td { font-size: 13.5px; overflow-wrap: anywhere; }
#response_options td label, #response_options label strong {
  font-weight: 500;
  color: var(--gp-ink-2);
}
#response_options input[type="text"],
#response_options select,
#response_options textarea:not(.richtext) {
  max-width: 100%;          /* long option text must not escape the fixed
                               layout table on a phone */
  font: inherit;
  font-size: 13.5px;
  color: var(--gp-ink);
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
}
#response_options input[type="text"],
#response_options textarea:not(.richtext) { padding: 6px 10px; }
#response_options select { height: 32px; padding: 0 10px; }
#response_options input[type="text"]:focus,
#response_options select:focus {
  outline: 0;
  border-color: var(--gp-navy);
  box-shadow: 0 0 0 3px rgba(42, 66, 117, 0.14);
}
/* the editor chrome */
#response_options .redactor-toolbar { margin: 0; padding: 4px 6px; }
#response_options .redactor-toolbar li {
  display: inline-block;
  float: none;
  margin: 0;
}
#response_options .redactor-box {
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  overflow: hidden;
  background: var(--gp-surface);
}
/* the uploader */
#response_options .filedrop .dropzone {
  border: 1px dashed var(--gp-line);
  border-radius: var(--gp-r-sm);
  background: var(--gp-surface);
  color: var(--gp-ink-3);
}
/* gold is decorative, never functional: the hardcoded .save.pending
   submit becomes the primary navy action */
input.save.pending, .save.pending {
  background-color: var(--gp-navy);
  border-color: var(--gp-navy);
  box-shadow: none;
  color: #fff;
}
input.save.pending:hover, .save.pending:hover {
  background-color: var(--gp-navy-strong);
  border-color: var(--gp-navy-strong);
  box-shadow: none;
  color: #fff;
}
.save.success { background-color: var(--gp-ok); border-color: var(--gp-ok); color: #fff; }
/* select2 widgets pick up the control voice */
#content .select2-container--default .select2-selection--single,
#content .select2-container--default .select2-selection--multiple {
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
}

/* =========================================================================
   16. Dialogs and shared form controls
   =========================================================================
   $.dialog panels (#popup and the inline .dialog nodes) carry every
   confirm, mass action, advanced search and column picker in the panel —
   agent AND admin — so they get the same surface language as a card.
   ========================================================================= */

.dialog, #popup {
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  box-shadow: 0 30px 80px -30px rgba(27, 34, 48, 0.45),
              0 2px 8px rgba(27, 34, 48, 0.08);
  padding: 22px 24px;
}
.dialog h3, #popup h3 {
  color: var(--gp-ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.dialog h3 i, #popup h3 i { color: var(--gp-ink-3); }
.dialog a, #popup a { color: var(--gp-navy); }
.dialog a.close, #popup a.close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--gp-ink-3);
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
.dialog a.close:hover, #popup a.close:hover {
  background: var(--gp-surface-2);
  color: var(--gp-ink);
}
.dialog hr, #popup hr {
  background: none;
  border-top: 1px solid var(--gp-line);
  height: 0;
}
.dialog th, .tip_box th {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gp-line);
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
.dialog .buttons, #popup .buttons { display: inline-flex; gap: 8px; }

/* --- checkboxes and radios, panel-wide ---------------------------------
   The list treatment is the panel treatment: dialogs, filter rules, the
   reply form's signature radios and every admin form share it. */
#content input[type="checkbox"],
.dialog input[type="checkbox"],
#popup input[type="checkbox"],
#content input[type="radio"],
.dialog input[type="radio"],
#popup input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  margin: 0 4px 0 0;
  border: 1.5px solid var(--gp-line);
  background: var(--gp-surface);
  cursor: pointer;
  vertical-align: -3px;
  transition: background var(--gp-t-color), border-color var(--gp-t-color);
}
#content input[type="checkbox"],
.dialog input[type="checkbox"],
#popup input[type="checkbox"] { border-radius: 5px; }
#content input[type="radio"],
.dialog input[type="radio"],
#popup input[type="radio"] { border-radius: 50%; }
#content input[type="checkbox"]:hover,
#content input[type="radio"]:hover,
.dialog input[type="checkbox"]:hover,
.dialog input[type="radio"]:hover { border-color: var(--gp-navy-edge); }
#content input[type="checkbox"]:checked,
.dialog input[type="checkbox"]:checked,
#popup input[type="checkbox"]:checked,
#content input[type="radio"]:checked,
.dialog input[type="radio"]:checked,
#popup input[type="radio"]:checked {
  background: var(--gp-navy);
  border-color: var(--gp-navy);
}
#content input[type="checkbox"]:checked::after,
.dialog input[type="checkbox"]:checked::after,
#popup input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin: 0.5px auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#content input[type="radio"]:checked::after,
.dialog input[type="radio"]:checked::after,
#popup input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: #fff;
}
#content input[type="checkbox"]:focus-visible,
#content input[type="radio"]:focus-visible,
.dialog input[type="checkbox"]:focus-visible,
.dialog input[type="radio"]:focus-visible {
  outline: 2px solid var(--gp-navy);
  outline-offset: 2px;
}
/* the queue's own boxes stay a touch larger — they are the primary control */
#content table.list input[type="checkbox"] { width: 18px; height: 18px; }

/* --- form tables ---------------------------------------------------------
   .form_table carries every settings and open-a-ticket form in both panels.
   Its section bands are grey #eee strips; they become the same warm
   micro-label the queue headers use, and the grid softens to hairlines. */
#content table.form_table,
.dialog table.form_table {
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-top: 12px;
}
#content table.form_table th,
#content div.section-break,
.dialog table.form_table th {
  background: var(--gp-surface-2);
  border: 0;
  border-bottom: 1px solid var(--gp-line);
  border-top: 1px solid var(--gp-line);
  padding: 9px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
#content table.form_table tr:first-child th { border-top: 0; }
#content table.form_table th em,
#content table.form_table th h4 {
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--gp-ink-3);
  background: none;
  margin: 4px 0 0;
  padding: 0;
}
#content table.form_table td {
  border: 0;
  border-bottom: 1px solid var(--gp-line-soft);
  padding: 9px 12px;
  vertical-align: middle;
}
#content table.form_table tr:last-child td { border-bottom: 0; }
#content table.form_table .required { font-weight: 500; }
#content table.form_table tr i.help-tip { opacity: 1; color: var(--gp-ink-3); }
#content table.form_table input[type="text"],
#content table.form_table input[type="password"],
#content table.form_table input[type="email"],
#content table.form_table textarea {
  font: inherit;
  font-size: 13.5px;
  color: var(--gp-ink);
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  padding: 6px 10px;
  max-width: 100%;
}
#content table.form_table input[type="text"]:focus,
#content table.form_table input[type="password"]:focus,
#content table.form_table textarea:focus {
  outline: 0;
  border-color: var(--gp-navy);
  box-shadow: 0 0 0 3px rgba(42, 66, 117, 0.14);
}

/* --- widgets that size themselves in JS ---------------------------------
   select2 writes an inline pixel width (450px on the ticket-open user
   picker), and filedrop paints its own grey dropzone. Both must live inside
   the column they are given. */
#content .select2-container,
.dialog .select2-container { max-width: 100%; }
#content .filedrop .dropzone,
.dialog .filedrop .dropzone {
  background: var(--gp-surface);
  border: 1px dashed var(--gp-line);
  border-radius: var(--gp-r-sm);
  color: var(--gp-ink-3);
}
#content .filedrop .dropzone:hover { border-color: var(--gp-navy-edge); }

/* A disabled field is still part of the palette. */
#content input:disabled,
#content textarea:disabled,
#content select:disabled,
.dialog input:disabled {
  background: var(--gp-surface-2);
  color: var(--gp-ink-3);
  cursor: not-allowed;
}

/* Legacy layout tables carry width="940" attributes; none of them may
   outgrow the column they sit in. */
#content table { max-width: 100%; }
/* The user and organization views head the page with a bare 940px table
   whose right cell holds the toolbar, so those buttons stopped 226px short
   of the card edge while every other page's toolbar reached it. */
#content > table:has(td.right_align),
#content > form > table:has(td.right_align) { width: 100%; }
/* The buttons inside stay floated, as upstream renders them — that is what
   puts More at the end of the run. A flex cell would leave the table's
   column model and collapse the header. */
#content td.right_align { text-align: right; vertical-align: middle; }
/* the reload glyph beside a record's name is an affordance, not a status */
#content h2 a > i.icon-refresh { color: var(--gp-ink-3); font-size: 0.72em; }
#content td.right_align > .action-button,
#content td.right_align > .button { margin-left: 6px; margin-right: 0; }
/* Selects size to their longest option, which on a narrow column pushes the
   page sideways. */
#content select, .dialog select { max-width: 100%; }

/* the injected scroll-up affordance in the pinned toolbar */
a.scroll-up, a.only.sticky.scroll-up {
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line);
  border-top: none;
  border-radius: 0 0 var(--gp-r-sm) var(--gp-r-sm);
  box-shadow: none;
  padding: 7px 10px 5px;
  color: var(--gp-ink-3) !important;
}
a.scroll-up:hover, a.only.sticky.scroll-up:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy) !important;
}

/* =========================================================================
   17. Agent sign-in (scp/login.php)
   =========================================================================
   Its own header (include/staff/login.header.php) loads only css/login.css,
   so this file is linked there too and lands last. The page matters more
   than its traffic suggests: a session timeout drops an agent straight
   onto it mid-task.

   Shape: single sign-on leads, because that is the route most agents take;
   the username-and-password form is intact but folded behind a disclosure.
   The disclosure is a checkbox sibling of the form, so no script is needed
   and the form is never rebuilt — every field, id and handler is untouched.

   Three states must never hide the form, and all three are read off the
   markup rather than tracked in JS:
     - no external backend is configured (password is the only way in)
     - the form is carrying the 2FA step  (input[name=do][value=2fa])
     - a message is showing (a failed attempt, or "2FA Pending")
   ========================================================================= */

#loginBody {
  min-height: 100vh;
  margin: 0;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gp-page);
  font-family: var(--gp-sans);
  color: var(--gp-ink);
}
/* the tiled wallpaper, its blur layer and the blend-mode overlay */
#brickwall, #blur, #background, #background-compat { display: none !important; }
#loginBox::after { content: none !important; }

#loginBox {
  position: static;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 27rem;              /* --gp-w-auth: the portal's sign-in column */
  margin: 0;
  padding: 36px 34px 30px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  box-shadow: 0 30px 70px -34px rgba(27, 34, 48, 0.4),
              0 2px 6px rgba(27, 34, 48, 0.04);
  text-align: left;
  overflow: visible;
}

/* Single sign-on leads; the disclosure and the form follow it. Ordering in
   CSS keeps the template's own block order untouched. */
#loginBox > h1#logo         { order: 1; }
#loginBox > .gp-signin-title { order: 1; }   /* DOM order settles the tie */
#loginBox > h3#login-message { order: 2; }
#loginBox > div.banner      { order: 3; }
#loginBox > div.external-auth { order: 4; }
#loginBox > div.or          { order: 5; }
#loginBox > .gp-signin-alt  { order: 6; }
#loginBox > form#login      { order: 7; }
#loginBox > #loading        { order: 8; }
#loginBox > #company        { order: 9; }
#loginBox > br              { display: none; }

#loginBox h1#logo {
  margin: 0 0 22px;
  padding: 0;
  text-align: center;
}
#loginBox #logo a { display: inline-block; height: auto; }
#loginBox #logo img { max-height: 54px; max-width: 220px; width: auto; }

/* Says what the page is — it is also where a timed-out session lands. */
#loginBox .gp-signin-title {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gp-ink);
  text-align: center;
}

/* The message slot carries two very different things: the standing prompt
   ("Authentication Required", rendered on every visit) and the failure text
   the ajax handler writes into it. It reads as a neutral notice by
   default, and as an error once a username has actually been submitted —
   which the field's own value attribute records. */
#loginBox h3#login-message {
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--gp-ink-2);
  text-align: center;
}
#loginBox h3#login-message:not(:empty) {
  margin-bottom: 18px;
  padding: 10px 14px;
  background: var(--gp-surface-2);
  border-radius: var(--gp-r-sm);
}
#loginBox:has(input[name="userid"]:not([value=""])) h3#login-message:not(:empty) {
  background: var(--gp-err-bg);
  border: 1px solid var(--gp-err-edge);
  color: var(--gp-err);
}
/* The banner always ships a <small>, so it is never :empty even with
   nothing to say — test the child instead, or an empty strip renders. */
#loginBox div.banner { margin: 0; padding: 0; }
#loginBox div.banner:has(small:empty),
#loginBox div.banner:empty { display: none; }
#loginBox div.banner:not(:empty) {
  margin-bottom: 18px;
  padding: 10px 14px;
  background: var(--gp-surface-2);
  border-radius: var(--gp-r-sm);
  color: var(--gp-ink-2);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
#loginBox div.banner small { font-size: inherit; }

/* --- single sign-on ------------------------------------------------------
   Whatever backends are registered render through
   AuthenticationBackend::renderExternalLink(): an <a class="external-sign-in">
   wrapping either a branded image or an icon + label. Both shapes become the
   page's primary action. */
#loginBox div.external-auth { display: block; margin: 0 0 12px; padding: 0; }
#loginBox div.external-auth + div.external-auth { margin-top: 0; }
#loginBox a.external-sign-in {
  display: block;
  width: 100%;
  text-decoration: none;
}
#loginBox a.external-sign-in .external-auth-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--gp-navy);
  border-radius: var(--gp-r-pill);
  background: var(--gp-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--gp-t-color), border-color var(--gp-t-color);
}
#loginBox a.external-sign-in:hover .external-auth-box {
  background: var(--gp-navy-strong);
  border-color: var(--gp-navy-strong);
}
#loginBox a.external-sign-in:focus-visible .external-auth-box {
  outline: 2px solid var(--gp-navy);
  outline-offset: 2px;
}
/* login.css gives the icon a 30px box with a divider rule and the label a
   100px box with a 30px line-height and its own dark colour — sized for the
   old bordered chip, not a full-width button. */
#loginBox .external-auth-icon,
#loginBox .external-auth-name {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0;
  border: 0;
  line-height: 1.2;
  color: inherit;
  font-size: 14px;
}
#loginBox .external-auth-icon i { font-size: 16px; line-height: 1; }
/* a backend that supplies its own branded button keeps it, just sized */
#loginBox img.sign-in-image { display: block; max-width: 100%; margin: 0 auto; }

/* the hairline between single sign-on and the username route */
#loginBox div.or { margin: 4px 0 14px; padding: 0; }
#loginBox div.or hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--gp-line);
  background: none;
}

/* --- the username disclosure -------------------------------------------- */
#loginBox .gp-signin-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;          /* stays focusable — the label is its control */
  pointer-events: none;
}
#loginBox .gp-signin-alt {
  display: none;       /* only earns its place when there is an alternative */
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  color: var(--gp-ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background var(--gp-t-color), color var(--gp-t-color),
              border-color var(--gp-t-color);
}
#loginBox .gp-signin-alt:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
}
#loginBox .gp-signin-alt i { color: var(--gp-ink-3); }
#loginBox .gp-signin-alt:hover i { color: var(--gp-navy); }
#loginBox .gp-signin-toggle:focus-visible + .gp-signin-alt {
  outline: 2px solid var(--gp-navy);
  outline-offset: 2px;
}

/* With single sign-on present the form folds away behind the disclosure. */
#loginBox:has(div.external-auth) .gp-signin-alt { display: inline-flex; }
#loginBox:has(div.external-auth) form#login { display: none; }
#loginBox:has(div.external-auth) .gp-signin-toggle:checked ~ form#login { display: block; }
#loginBox:has(div.external-auth) .gp-signin-toggle:checked ~ .gp-signin-alt { display: none; }
/* …but never when the form is the 2FA step, and never after an attempt has
   been made — the username field carries what was submitted, so a failed
   post comes back with the form open and the error above it. */
#loginBox:has(form#login input[name="do"][value="2fa"]) form#login,
#loginBox:has(form#login input[name="userid"]:not([value=""])) form#login { display: block; }
#loginBox:has(form#login input[name="do"][value="2fa"]) .gp-signin-alt,
#loginBox:has(form#login input[name="userid"]:not([value=""])) .gp-signin-alt { display: none; }

/* --- the form itself ----------------------------------------------------- */
#loginBox form#login { margin: 0; width: 100%; }
#loginBox fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
#loginBox fieldset input[type="text"],
#loginBox fieldset input[type="password"] {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--gp-ink);
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  box-shadow: none;
  transition: border-color var(--gp-t-color), box-shadow var(--gp-t-color);
}
#loginBox fieldset input::placeholder { color: var(--gp-ink-3); }
#loginBox input:focus,
#loginBox fieldset input[type="text"]:focus,
#loginBox fieldset input[type="password"]:focus {
  outline: 0;
  border-color: var(--gp-navy);
  box-shadow: 0 0 0 3px rgba(42, 66, 117, 0.14);
}
#loginBox button.submit,
#loginBox button[type="submit"],
#loginBox .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  order: 9;                 /* the action sits under the fields it submits */
  float: none;
  width: 100%;
  height: 44px;
  margin: 4px 0 0;
  padding: 0 18px;
  border: 1px solid var(--gp-navy);
  border-radius: var(--gp-r-pill);
  background: var(--gp-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--gp-t-color), border-color var(--gp-t-color);
}
#loginBox button.submit:hover,
#loginBox button[type="submit"]:hover,
#loginBox .button:hover {
  background: var(--gp-navy-strong);
  border-color: var(--gp-navy-strong);
  color: #fff;
}
#loginBox button[type="submit"]:disabled { opacity: 0.55; }
/* "Forgot my password" is a quiet link, not a heading */
#loginBox fieldset h3 {
  order: 10;
  margin: 2px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
}
#loginBox #reset-link { color: var(--gp-ink-3); text-decoration: none; }
#loginBox #reset-link:hover { color: var(--gp-navy); text-decoration: underline; text-underline-offset: 3px; }
#loginBox .hidden { display: none; }

/* the 2FA step renders a dynamic form inside the same <form> */
#loginBox form#login table { width: 100%; }
#loginBox form#login td { padding: 4px 0; }

/* --- footers -------------------------------------------------------------- */
#loginBox #company {
  position: static;
  left: auto;
  bottom: auto;
  width: auto;
  order: 9;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gp-line-soft);
  color: var(--gp-ink-3);
  font-size: 12px;
  text-align: center;
}
/* login.css renders the copyright as a dark translucent chip with a text
   shadow — legible over the old wallpaper, not over a white card. */
#loginBox #company .content {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  color: inherit;
}
/* The way out. The page is otherwise a dead end: its logo points at
   scp/index.php, which bounces a signed-out visitor straight back here. */
#loginBody .gp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 8px 16px;
  border-radius: var(--gp-r-pill);
  color: var(--gp-ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
#loginBody .gp-back-link:hover {
  background: var(--gp-surface-2);
  color: var(--gp-ink);
}
#loginBody .gp-back-link:focus-visible {
  outline: 2px solid var(--gp-navy);
  outline-offset: 2px;
}
#loginBody .gp-back-link i { font-size: 12px; color: var(--gp-ink-3); }
#loginBody .gp-back-link:hover i { color: var(--gp-navy); }

/* login.css pins this to the viewport corner with a dark chip and text
   shadows meant for the old wallpaper. */
#loginBody #poweredBy {
  position: static;
  margin: 10px 0 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  color: var(--gp-ink-3);
  font-size: 11.5px;
  text-align: center;
}
#loginBody #poweredBy .osticket-logo {
  opacity: 0.45;
  vertical-align: middle;
  filter: none;
  -webkit-filter: none;
}

#loginBody #loading.dialog {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  padding: 18px 22px;
}
#loginBody #loading h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--gp-ink-2);
}

@media (max-width: 480px) {
  #loginBody { padding: 24px 14px; }
  #loginBox { padding: 28px 20px 24px; }
}

/* =========================================================================
   18. Department access panel (include/staff/department.inc.php)
   =========================================================================
   One table answering "who can act in this department, and how". Rows come
   from three places - primary members, extended access, and agents
   inheriting through a parent - so Origin is a column rather than three
   separate tables with three separate headings.

   Each row carries a role select and four switches. Laid out inline that is
   five controls per row and unreadable at a glance, so the row shows a
   read-only summary and the controls live in a menu behind one cog. The
   menu is the panel's own .action-dropdown: it inherits the styling, and
   because it is only positioned rather than moved in the DOM, its inputs
   stay inside the form and post while hidden.
   ========================================================================= */

table.gp-access {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
table.gp-access th,
table.gp-access td {
  padding: 10px 12px;
  vertical-align: middle;         /* the cog and the name sit on one line */
  border-bottom: 1px solid var(--gp-line-soft);
}
table.gp-access thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
  border-bottom: 1px solid var(--gp-line);
  text-align: left;
}
table.gp-access tbody tr:last-child td { border-bottom: 0; }

/* Fixed layout so the cog column cannot drift as names change length. */
.gp-ac-name   { width: 30%; }
.gp-ac-origin { width: 22%; }
.gp-ac-access { width: auto; }
.gp-ac-cog    { width: 56px; text-align: right; white-space: nowrap; }

.gp-ac-who { font-weight: 500; color: var(--gp-ink); }

/* Origin reads as a quiet tag, not a button: it is information, not a
   control. Inherited is tinted so a borrowed grant is distinguishable at a
   glance from one configured here. */
.gp-origin {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--gp-r-pill);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gp-ink-2);
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line-soft);
}
.gp-origin-inherited {
  color: var(--gp-info);
  background: var(--gp-info-bg);
  border-color: var(--gp-info-edge);
}

.gp-ac-role { color: var(--gp-ink-2); }
.gp-ac-role.gp-ac-norole { color: var(--gp-err); }

.gp-ac-badges { display: inline; }
.gp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--gp-r-pill);
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--gp-ink-3);
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line-soft);
}
.gp-badge-manager {
  color: var(--gp-brand);
  background: var(--gp-brand-tint);
  border-color: var(--gp-brand-edge);
  font-weight: 500;
}

/* The cog and the jump-to-source link share a footprint so the column keeps
   its rhythm whether a row is editable or inherited. */
.gp-ac-menu-btn,
.gp-ac-source,
.gp-ac-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--gp-r-sm);
  color: var(--gp-ink-3);
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
.gp-ac-menu-btn { cursor: pointer; border: 1px solid transparent; }
.gp-ac-menu-btn:hover,
.gp-ac-source:hover,
.gp-ac-export:hover {
  color: var(--gp-ink);
  background: var(--gp-surface-2);
}
.gp-ac-menu-btn.dropdown-open {
  color: var(--gp-ink);
  background: var(--gp-surface-2);
  border-color: var(--gp-line);
}
.gp-ac-menu-btn i,
.gp-ac-source i,
.gp-ac-export i { margin: 0; }

/* --- the menu ----------------------------------------------------------- */

/* The panel surface normally lives on `.action-dropdown ul`; this menu holds
   form controls rather than a list, so it carries the surface itself. Same
   tokens, so it reads as the same object as every other menu in the panel.
   z-index clears the table: rows after this one would otherwise paint over
   an open menu. text-align is reset because the cog cell is right-aligned
   and the menu would inherit it. */
.action-dropdown.gp-ac-menu {
  box-sizing: border-box;   /* padding inside the declared width */
  width: 320px;
  padding: 12px 14px;
  text-align: left;
  z-index: 60;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  box-shadow: 0 14px 34px -18px rgba(27, 34, 48, 0.45);
}
.gp-ac-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gp-ac-menu-row > label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12.5px;
  color: var(--gp-ink-3);
}
.gp-ac-menu-row > select {
  flex: 1 1 auto;
  min-width: 0;               /* a long role name must not widen the menu */
  margin: 0;
}
.gp-ac-menu-sep {
  height: 1px;
  margin: 10px -14px;
  background: var(--gp-line-soft);
}

/* Checkbox rows: the box is a fixed column so every label starts on the
   same x, and a wrapping label indents under its own text rather than
   under the box. */
label.gp-ac-check {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 9px;
  margin: 0;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gp-ink-2);
  cursor: pointer;
}
label.gp-ac-check > input[type=checkbox] {
  margin: 1px 0 0;
  align-self: start;
}
label.gp-ac-check > span { min-width: 0; }
label.gp-ac-check:has(> input:disabled) {
  color: var(--gp-ink-3);
  cursor: default;
}
.gp-ac-manager-row > span { font-weight: 500; color: var(--gp-ink); }

a.gp-ac-remove {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--gp-err);
}
a.gp-ac-remove:hover { color: var(--gp-err); text-decoration: underline; }

/* --- the settings tab's read-only manager line -------------------------- */

.gp-manager-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--gp-ink);
}
.gp-manager-note em { color: var(--gp-ink-3); font-style: normal; }
a.gp-manager-jump { font-size: 12.5px; }

@media (max-width: 760px) {
  /* Origin stays: "via Support" is the answer to the question this table
     exists to answer, so it survives the narrow layout. The columns are let
     go instead, and the name and origin stack in one cell's worth of width. */
  table.gp-access { table-layout: auto; }
  table.gp-access th,
  table.gp-access td { padding: 9px 8px; }
  table.gp-access thead th.gp-ac-origin { display: none; }
  td.gp-ac-name { width: auto; }
  td.gp-ac-origin {
    width: 1%;
    padding-left: 0;
    white-space: nowrap;
  }
  .action-dropdown.gp-ac-menu { width: min(320px, calc(100vw - 32px)); }
}

/* The primary department's switches read as a list, not a paragraph: three
   inline labels wrapped mid-phrase and the second line looked orphaned. */
.gp-primary-switches {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.gp-primary-switches > label.inline.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: normal;
}
.gp-primary-switches > label.inline.checkbox > input { margin: 0; }

/* --- Redactor's reading measure ------------------------------------------
   redactor-osticket.js passes maxWidth: '950px' for .fullscreen editors, and
   Redactor writes it inline as `max-width: 950px; margin: auto`. It is meant
   as a reading measure for fullscreen composing, but it applies in every
   state. Upstream's 940px shell hid that - the cap was never reached, so the
   auto margins computed to zero. This console is wider, so the column started
   floating in the middle of its own box with the text out of line with the
   toolbar above it.

   Lift it only outside fullscreen, where the measure is doing nothing useful,
   and leave it intact where it was intended. Inline styles need !important. */
.redactor-box:not(.redactor-box-fullscreen) > .redactor-styles {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================================
   19. The close dialog's resolution section
   =========================================================================
   Rendered by templates/ticket-status.tmpl.php when the status change is a
   close. Each field lives in its own tbody so the conditional-visibility JS
   can slide the whole row; the widgets are the stock form widgets, so only
   the frame needs styling here. */

.gp-res-head td {
  padding-top: 14px;
}
.gp-res-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--gp-line-soft);
}
.gp-res-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gp-ink-3);
}
tbody.gp-res-field td {
  padding: 5px 0;
  vertical-align: middle;
}
td.gp-res-label {
  width: 150px;
  padding-right: 12px !important;
  font-size: 13px;
  color: var(--gp-ink-2);
  white-space: nowrap;      /* "Resolution summary" must not wrap */
}
/* One width for every control, so the column reads as a column. */
.gp-res-widget select,
.gp-res-widget input[type=text] {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  margin: 0;
}
.gp-res-widget .error {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

/* =========================================================================
   20. Resolution reports (scp/reports.php)
   =========================================================================
   Server-rendered: HTML bars for the Pareto, one inline SVG for the trend.
   Every number is a link into the underlying ticket list. */

.gp-rep-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 14px 16px;
  margin: 14px 0 18px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
}
.gp-rep-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
.gp-rep-filters input[type=date],
.gp-rep-filters select {
  margin: 0;
  font-size: 13px;
  min-width: 130px;
}
.gp-rep-apply { align-self: flex-end; }
.gp-rep-exports {
  margin-left: auto;
  align-self: flex-end;
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* --- headline cards ------------------------------------------------------ */
.gp-rep-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.gp-rep-card {
  padding: 14px 16px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gp-rep-card.gp-rep-alert { border-color: var(--gp-warn-edge); background: var(--gp-warn-bg); }
.gp-rep-k {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
.gp-rep-v {
  font-family: var(--gp-mono);
  font-size: 24px;
  line-height: 1.1;
  color: var(--gp-ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.gp-rep-delta { font-size: 12px; font-family: var(--gp-mono); }
.gp-rep-delta.good { color: var(--gp-ok); }
.gp-rep-delta.bad  { color: var(--gp-err); }

/* --- sections ------------------------------------------------------------ */
.gp-rep-section {
  padding: 18px 20px;
  margin-bottom: 18px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
}
.gp-rep-section > h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-ink);
}
.gp-rep-note { margin: 0 0 12px; font-size: 12.5px; color: var(--gp-ink-3); }
.gp-rep-cols {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
}
.gp-rep-cols .gp-rep-section { margin-bottom: 18px; }

/* --- the Pareto ---------------------------------------------------------- */
.gp-rep-bars { display: flex; flex-direction: column; gap: 6px; }
.gp-rep-bar {
  display: grid;
  grid-template-columns: 240px 1fr 44px 52px;
  align-items: center;
  gap: 10px;
  padding: 3px 6px;
  border-radius: var(--gp-r-sm);
  color: var(--gp-ink-2);
  transition: background var(--gp-t-color);
}
.gp-rep-bar:hover { background: var(--gp-navy-tint); color: var(--gp-navy); }
.gp-rep-bar-label {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-rep-bar-track {
  height: 14px;
  background: var(--gp-surface-2);
  border-radius: var(--gp-r-pill);
  overflow: hidden;
}
.gp-rep-bar-fill {
  display: block;
  height: 100%;
  background: var(--gp-navy);
  border-radius: var(--gp-r-pill);
}
.gp-rep-bar-n { font-family: var(--gp-mono); font-size: 13px; text-align: right; }
.gp-rep-bar-cum {
  font-family: var(--gp-mono);
  font-size: 11.5px;
  color: var(--gp-ink-3);
  text-align: right;
}
.gp-rep-others {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--gp-warn-bg);
  border: 1px solid var(--gp-warn-edge);
  border-radius: var(--gp-r-sm);
  font-size: 13px;
}
.gp-rep-others ul { margin: 8px 0 0 18px; }
.gp-rep-others li { margin: 2px 0; }

/* --- trend SVG ------------------------------------------------------------ */
.gp-rep-svg { width: 100%; max-width: 720px; height: auto; display: block; }
.gp-rep-svg-x { font-size: 11px; fill: var(--gp-ink-3); }
.gp-rep-svg-n { font-size: 11px; fill: var(--gp-ink-2); font-family: var(--gp-mono); }
.gp-rep-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--gp-ink-2);
}
.gp-rep-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 6px;
}

/* --- tables ---------------------------------------------------------------- */
.gp-rep-table { border-collapse: collapse; width: 100%; }
.gp-rep-table th, .gp-rep-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--gp-line-soft);
  font-size: 13px;
  text-align: left;
}
.gp-rep-table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
  border-bottom-color: var(--gp-line);
}
.gp-rep-table tbody tr:last-child td { border-bottom: 0; }
.gp-rep-table .gp-num { text-align: right; font-family: var(--gp-mono); }
.gp-rep-summary { max-width: 340px; }
.gp-rep-scroll { overflow-x: auto; }
.gp-rep-matrix td.faded { color: var(--gp-ink-3); }
.gp-rep-prevsplit {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gp-line-soft);
  font-size: 13px;
  flex-wrap: wrap;
}
.gp-rep-rowshead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 4px 0 12px;
}
.gp-rep-crumbs { color: var(--gp-ink-3); font-size: 13px; }
.gp-rep-foot { font-size: 12px; margin-top: 4px; }

@media (max-width: 900px) {
  .gp-rep-cols { grid-template-columns: 1fr; }
  .gp-rep-bar { grid-template-columns: 130px 1fr 40px 48px; }
  .gp-rep-exports { margin-left: 0; }
}

/* --- report schedules (reports.php?view=schedules) ----------------------- */
/* Real links, not ul.tabs (scp.js preventDefaults those), styled to match
   the panel's tabs exactly so the difference is invisible. */
.gp-rep-nav {
  display: flex;
  gap: 2px;
  padding: 0 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gp-line);
}
.gp-rep-nav > a {
  display: block;
  padding: 11px 14px 9px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gp-ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--gp-t-color), border-color var(--gp-t-color);
}
.gp-rep-nav > a:hover { color: var(--gp-ink); }
.gp-rep-nav > a.active {
  color: var(--gp-navy);
  border-bottom-color: var(--gp-navy);
}
.gp-sched-cron {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 12px 0 16px;
  border-radius: var(--gp-r-sm);
  font-size: 13px;
}
.gp-sched-cron.ok   { background: var(--gp-ok-bg); border: 1px solid var(--gp-ok-edge); color: var(--gp-ok); }
.gp-sched-cron.warn { background: var(--gp-warn-bg); border: 1px solid var(--gp-warn-edge); color: var(--gp-warn); }
.gp-sched-paused td { opacity: 0.6; }
.gp-run-ok      { color: var(--gp-ok); font-weight: 500; }
.gp-run-failed  { color: var(--gp-err); font-weight: 500; }
.gp-run-running { color: var(--gp-warn); font-weight: 500; }
.gp-sched-actions form { display: flex; gap: 4px; margin: 0; }
button.gp-linklike {
  border: 0;
  background: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--gp-ink-3);
  border-radius: var(--gp-r-sm);
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
button.gp-linklike:hover { background: var(--gp-surface-2); color: var(--gp-ink); }
button.gp-linklike.danger:hover { background: var(--gp-err-bg); color: var(--gp-err); }

.gp-sched-form { display: flex; flex-direction: column; gap: 12px; }
.gp-sched-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
.gp-sched-form input[type=text],
.gp-sched-form input[type=number],
.gp-sched-form select { margin: 0; font-size: 13px; }
.gp-sched-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gp-sched-row > label { flex: 1 1 120px; }
.gp-sched-dest {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--gp-surface-2);
  border-radius: var(--gp-r-sm);
}
.gp-sched-check {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  color: var(--gp-ink-2) !important;
  cursor: pointer;
}
.gp-sched-check input { margin: 0; }
.gp-sched-recips { margin-left: 24px !important; }
.gp-sched-privacy { font-size: 12.5px; margin: 0; }
.gp-sched-privacy.warn { color: var(--gp-warn); }

/* --- Google Drive settings (reports.php?view=drive) ----------------------- */
.gp-drive-models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gp-drive-model {
  display: flex !important;
  flex-direction: column;
  gap: 6px !important;
  padding: 14px 16px;
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r);
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: border-color var(--gp-t-color), background var(--gp-t-color);
}
.gp-drive-model.active {
  border-color: var(--gp-navy);
  background: var(--gp-navy-tint);
}
.gp-drive-model input { position: absolute; opacity: 0; }
.gp-drive-model-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gp-drive-model-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--gp-ink-2);
  line-height: 1.5;
}
.gp-drive-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--gp-surface-2);
  border-radius: var(--gp-r-sm);
}
.gp-drive-pane textarea {
  font-family: var(--gp-mono);
  font-size: 12px;
  margin: 0;
}
.gp-drive-pane code {
  background: var(--gp-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.gp-drive-inlineform {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 0 auto;
}
@media (max-width: 760px) {
  .gp-drive-models { grid-template-columns: 1fr; }
}
.gp-install-banner { align-items: flex-start; }
.gp-install-banner > div { flex: 1 1 auto; }
.gp-install-banner > div > div { margin-top: 3px; font-weight: 400; }
.gp-install-banner form { margin: 0; flex: 0 0 auto; }

/* =========================================================================
   21. The agent guide (templates/agent-guide.tmpl.php)
   =========================================================================
   A chaptered overlay with working mock-ups rather than a video: the agent
   clicks the same controls they will use, built from the same tokens, so
   the guide cannot drift away from the product's appearance.

   Rendered in the page header, outside #pjax-container, so it survives
   navigation. Everything is scoped under .gp-guide. */

.gp-guide-link i { margin-right: 4px; opacity: 0.75; }

.gp-guide[hidden] { display: none; }
.gp-guide {
  position: fixed;
  inset: 0;
  z-index: 9000;             /* above the sticky bars and any dropdown */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.gp-guide-open { overflow: hidden; }

.gp-guide-scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 34, 48, 0.55);
  backdrop-filter: blur(2px);
}

.gp-guide-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  background: var(--gp-surface);
  border-radius: var(--gp-r);
  box-shadow: 0 30px 70px -24px rgba(27, 34, 48, 0.5);
  overflow: hidden;
  outline: none;
}

/* --- header ------------------------------------------------------------- */
.gp-guide-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--gp-line);
}
.gp-guide-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--gp-ink);
}
.gp-guide-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--gp-ink-3); }
.gp-guide-x {
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--gp-ink-3);
  padding: 6px 8px;
  border-radius: var(--gp-r-sm);
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
.gp-guide-x:hover { background: var(--gp-surface-2); color: var(--gp-ink); }

/* --- body: rail + chapter ------------------------------------------------ */
.gp-guide-body {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 0;             /* lets the chapter pane scroll, not the page */
  flex: 1 1 auto;
}
.gp-guide-rail {
  border-right: 1px solid var(--gp-line);
  background: var(--gp-page);
  overflow-y: auto;
  padding: 10px 0;
}
.gp-guide-rail ol { list-style: none; margin: 0; padding: 0; }
.gp-guide-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--gp-ink-2);
  border-left: 2px solid transparent;
  transition: background var(--gp-t-color), color var(--gp-t-color);
}
.gp-guide-tab:hover { background: var(--gp-surface-2); color: var(--gp-ink); }
.gp-guide-tab.is-on {
  background: var(--gp-navy-tint);
  border-left-color: var(--gp-navy);
  color: var(--gp-navy);
  font-weight: 500;
}
.gp-guide-num {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface-2);
  font-family: var(--gp-mono);
  font-size: 11px;
  color: var(--gp-ink-3);
}
.gp-guide-tab.is-on .gp-guide-num { background: var(--gp-navy); color: #fff; }
.gp-guide-tabname { flex: 1 1 auto; min-width: 0; }
.gp-guide-tick { opacity: 0; font-size: 11px; color: var(--gp-ok); }
.gp-guide-tab.is-done .gp-guide-tick { opacity: 1; }
.gp-guide-tab.is-done .gp-guide-num { background: var(--gp-ok-bg); color: var(--gp-ok); }

.gp-guide-main { overflow-y: auto; padding: 22px 26px 26px; min-width: 0; }
.gp-guide-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
}
.gp-guide-main h3 {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 600;
  color: var(--gp-ink);
}
.gp-guide-lede { margin: 0 0 18px; font-size: 14px; color: var(--gp-ink-2); }
.gp-guide-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.gp-guide-prose p {
  margin: 0 0 11px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gp-ink-2);
}
.gp-guide-prose b { color: var(--gp-ink); font-weight: 600; }
.gp-guide-try {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--gp-brand);
}

/* --- footer -------------------------------------------------------------- */
.gp-guide-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-top: 1px solid var(--gp-line);
  background: var(--gp-page);
}
.gp-guide-dots { display: flex; gap: 5px; }
.gp-guide-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gp-line);
  transition: background var(--gp-t-color);
}
.gp-guide-dots span.is-on { background: var(--gp-navy); }
.gp-guide-actions { margin-left: auto; display: flex; gap: 8px; }
.gp-guide-actions .action-button[disabled] { opacity: 0.4; cursor: default; }
.gp-guide-next {
  background: var(--gp-navy);
  border-color: var(--gp-navy);
  color: #fff;
}
.gp-guide-next:hover { background: var(--gp-navy-strong); color: #fff; }

/* --- the mock-ups -------------------------------------------------------
   Built from the same tokens as the real panel so the guide cannot look
   like a different product. Inert: no form, no names, nothing navigable. */
.gp-gd {
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  background: var(--gp-surface);
  overflow: hidden;
  font-size: 12.5px;
}
.gp-gd-tipline {
  padding: 9px 12px;
  border-top: 1px solid var(--gp-line-soft);
  background: var(--gp-page);
  color: var(--gp-ink-3);
  min-height: 34px;
  transition: color var(--gp-t-color);
}
.gp-gd-tipline.is-live { color: var(--gp-navy); }

/* nav + toolbar rows share the chip treatment */
.gp-gd-navbar, .gp-gd-tbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
}
.gp-gd-navitem, .gp-gd-btn {
  padding: 5px 10px;
  border-radius: var(--gp-r-sm);
  border: 1px solid transparent;
  color: var(--gp-ink-2);
  cursor: default;
  white-space: nowrap;
  transition: background var(--gp-t-color), border-color var(--gp-t-color),
              color var(--gp-t-color);
}
.gp-gd-btn { border-color: var(--gp-line); background: var(--gp-surface); }
.gp-gd-navitem:hover, .gp-gd-btn:hover {
  background: var(--gp-navy-tint);
  border-color: var(--gp-navy-edge);
  color: var(--gp-navy);
}
.gp-gd-navitem.is-on { color: var(--gp-navy); font-weight: 500; }
.gp-gd-btn i { margin-right: 5px; opacity: 0.7; }

/* queue */
.gp-gd-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--gp-surface-2);
  border-bottom: 1px solid var(--gp-line-soft);
  flex-wrap: wrap;
}
.gp-gd-chip {
  padding: 3px 10px;
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  color: var(--gp-ink-2);
}
.gp-gd-chip.is-on { border-color: var(--gp-navy); color: var(--gp-navy); }
.gp-gd-chip b { font-family: var(--gp-mono); margin-left: 3px; }
.gp-gd-search {
  margin-left: auto;
  color: var(--gp-ink-3);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-pill);
  padding: 3px 12px;
}
.gp-gd-search i { margin-right: 5px; }
table.gp-gd-list { width: 100%; border-collapse: collapse; }
.gp-gd-list th {
  text-align: left;
  padding: 7px 12px;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gp-ink-3);
  border-bottom: 1px solid var(--gp-line-soft);
  font-weight: 500;
}
.gp-gd-list td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--gp-line-soft);
  color: var(--gp-ink-2);
}
.gp-gd-list tbody tr { cursor: pointer; transition: background var(--gp-t-color); }
.gp-gd-list tbody tr:hover { background: var(--gp-navy-tint); }
.gp-gd-list tbody tr.is-hit { background: var(--gp-ok-bg); }
.gp-gd-list tbody tr:last-child td { border-bottom: 0; }
.gp-gd-pri {
  padding: 1px 8px;
  border-radius: var(--gp-r-pill);
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line-soft);
  font-size: 11px;
}
.gp-gd-pri-low { color: var(--gp-ink-3); }
.gp-gd-open {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gp-ok-bg);
  border-top: 1px solid var(--gp-ok-edge);
  color: var(--gp-ok);
}

/* compose (reply / note) */
.gp-gd-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--gp-line);
  background: var(--gp-page);
}
.gp-gd-tabs span {
  padding: 9px 12px;
  color: var(--gp-ink-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--gp-t-color), border-color var(--gp-t-color);
}
.gp-gd-tabs span:hover { color: var(--gp-ink); }
.gp-gd-tabs span.is-on {
  color: var(--gp-navy);
  border-bottom-color: var(--gp-navy);
  font-weight: 500;
}
.gp-gd-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--gp-line-soft);
}
.gp-gd-field > label {
  flex: 0 0 116px;
  margin: 0;
  font-size: 11.5px;
  color: var(--gp-ink-3);
}
.gp-gd-field > select,
.gp-gd-field > input[type=text] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
}
.gp-gd-field > select.is-bad,
.gp-gd-field > input.is-bad { border-color: var(--gp-err); }
.gp-gd-static, .gp-gd-select {
  flex: 1 1 auto;
  color: var(--gp-ink-2);
}
.gp-gd-select {
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-r-sm);
  padding: 4px 10px;
  color: var(--gp-ink-3);
  background: var(--gp-surface);
}
.gp-gd-editor {
  padding: 16px 12px;
  min-height: 62px;
  color: var(--gp-ink-3);
  font-style: italic;
  border-bottom: 1px solid var(--gp-line-soft);
}
.gp-gd-editor-in { background: var(--gp-warn-bg); }
.gp-gd-outbound {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--gp-info);
  background: var(--gp-info-bg);
}
.gp-gd-outbound.gp-gd-internal { color: var(--gp-warn); background: var(--gp-warn-bg); }

/* dialogs */
.gp-gd-dialog-head {
  padding: 11px 12px;
  border-bottom: 1px solid var(--gp-line);
  font-weight: 600;
  color: var(--gp-ink);
}
.gp-gd-aside {
  margin: 0;
  padding: 10px 12px;
  color: var(--gp-ink-3);
  background: var(--gp-page);
}
.gp-gd-req { color: var(--gp-err); }
.gp-gd-dialog-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gp-page);
}
.gp-gd-msg { flex: 1 1 auto; font-size: 12px; color: var(--gp-ink-3); }
.gp-gd-msg.is-bad { color: var(--gp-err); }
.gp-gd-msg.is-ok  { color: var(--gp-ok); }
.gp-gd-dialog.is-done { border-color: var(--gp-ok-edge); }
.gp-gd-done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  color: var(--gp-ok);
  background: var(--gp-ok-bg);
}
.gp-gd-done p { margin: 0; }
.gp-gd-done i { font-size: 20px; }

/* --- narrow screens ------------------------------------------------------
   The rail becomes a horizontal strip and the two columns stack, so the
   guide is usable on a phone rather than merely not broken. */
@media (max-width: 860px) {
  .gp-guide { padding: 0; }
  .gp-guide-panel { max-height: 100vh; border-radius: 0; width: 100%; }
  .gp-guide-body { grid-template-columns: 1fr; }
  .gp-guide-rail {
    border-right: 0;
    border-bottom: 1px solid var(--gp-line);
    overflow-x: auto;
    padding: 6px 8px;
  }
  .gp-guide-rail ol { display: flex; gap: 4px; }
  .gp-guide-tab {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 7px 10px;
    white-space: nowrap;
    border-radius: var(--gp-r-sm);
  }
  .gp-guide-tab.is-on { border-bottom-color: var(--gp-navy); }
  .gp-guide-tabname { display: none; }      /* numbers only when tight */
  .gp-guide-tab.is-on .gp-guide-tabname { display: inline; }
  .gp-guide-cols { grid-template-columns: 1fr; gap: 16px; }
  .gp-guide-main { padding: 18px 16px 20px; }
  .gp-guide-main h3 { font-size: 18px; }
}

/* A display rule beats the UA's [hidden] { display: none }, and several of
   the mock-ups set display:flex on elements the demo script toggles with
   the hidden property. Without this the "Root cause detail" row - the one
   that is supposed to appear only for Other - is visible from the start,
   which teaches the opposite of the lesson. */
.gp-guide [hidden] { display: none !important; }

/* Narrow: stack each field so a select never pushes the mock wider than
   the panel. .gp-gd clips its overflow, so an overspilling row is cut off
   rather than scrollable - it has to fit. */
@media (max-width: 860px) {
  .gp-gd-field { flex-wrap: wrap; gap: 4px; }
  .gp-gd-field > label { flex: 1 1 100%; }
  .gp-gd-field > select,
  .gp-gd-field > input[type=text],
  .gp-gd-static, .gp-gd-select { flex: 1 1 100%; }
  .gp-gd-dialog-foot { flex-wrap: wrap; }
}
/* The mock controls are spans and rows, so they carry tabindex; give them
   the same focus treatment the real panel uses. */
.gp-gd [tabindex="0"]:focus-visible {
  outline: 2px solid var(--gp-navy);
  outline-offset: 1px;
  border-radius: var(--gp-r-sm);
}