/* =============================================================================
 *  Roommatik Helpdesk — STAFF (/scp) theme
 *  Non-invasive skin for the osTicket agent panel. Loaded after the core/osta
 *  CSS, only on /scp. No core file is modified.
 *
 *  Look: Roommatik "Classic" application shell — cool grey canvas, one floating
 *  white content card, Signal-Teal queue pills, Inter, soft two-layer shadows.
 *
 *  Architecture (mirror of portal.css so both surfaces read as one system):
 *    1. Tokens        design variables (:root)
 *    2. Base          font, typography, links, focus, icon-font safety
 *    3. Shell         full-width layout, top header, queue-tab band, content card
 *    4. Components     queue table, forms, buttons, notices, ticket-view bars
 *    5. Concealment    hide tech-leak credits
 *
 *  osta quirks handled here (documented inline where they bite):
 *   - the shell is pinned to ~1022px and #content to max-width:80% → widen both;
 *   - the jb-overflowmenu parks the queue tabs absolutely → pull back into flow;
 *   - several controls ship solid black / pale-green → rebrand to teal/neutral.
 * ========================================================================== */

/* ============================================================================
 *  1. TOKENS
 * ========================================================================== */
@font-face {
  font-family: 'InterRmk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/custom/fonts/inter-latin-var.woff2') format('woff2');
}

:root {
  --rmk-primary: #0BA5B7; --rmk-deep: #0E7C8A; --rmk-pale: #CFF2F6;
  --rmk-ink: #0F172A; --rmk-body: #334155; --rmk-support: #64748B;
  --rmk-border: #CBD5E1; --rmk-card-border: #E2E8F0; --rmk-surface: #FFFFFF;
  --rmk-soft: #F8FAFC; --rmk-canvas: #E8EDF2; --rmk-danger: #EF4444;
  --rmk-font: 'InterRmk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --rmk-r-sm: 6px; --rmk-r-md: 10px; --rmk-r-lg: 16px; --rmk-r-pill: 999px;
  --rmk-shadow: 0 1px 2px rgba(20,40,60,.04), 0 4px 16px rgba(20,40,60,.05);
}

/* ============================================================================
 *  2. BASE
 * ========================================================================== */
/* Inter everywhere (icon-safe: keep Redactor/FontAwesome/Material glyphs). */
body.staff-side, body.staff-side h1, body.staff-side h2, body.staff-side h3, body.staff-side h4,
body.staff-side p, body.staff-side a, body.staff-side span, body.staff-side div, body.staff-side li,
body.staff-side ul, body.staff-side ol, body.staff-side label, body.staff-side strong, body.staff-side em,
body.staff-side td, body.staff-side th, body.staff-side input, body.staff-side button,
body.staff-side select, body.staff-side textarea { font-family: var(--rmk-font) !important; }
body.staff-side [class*="re-icon"], body.staff-side .re-button > i { font-family: 'Redactor' !important; }
body.staff-side i[class^="icon-"], body.staff-side i[class*=" icon-"], body.staff-side .fa { font-family: 'FontAwesome' !important; }
body.staff-side .material-icons, body.staff-side .material-icons-outlined { font-family: 'Material Icons' !important; }

body.staff-side { background: var(--rmk-canvas) !important; color: var(--rmk-body); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; }
body.staff-side a { color: var(--rmk-deep); }
body.staff-side a:hover { color: var(--rmk-primary); }
body.staff-side a:focus-visible, body.staff-side button:focus-visible,
body.staff-side input:focus-visible, body.staff-side select:focus-visible,
body.staff-side textarea:focus-visible { outline: 2px solid var(--rmk-primary); outline-offset: 1px; border-radius: var(--rmk-r-sm); }

/* ============================================================================
 *  3. SHELL
 * ========================================================================== */

/* ---- Full-width layout -------------------------------------------------- */
/* osta pins body / #container / #pjax-container to a fixed ~1022px, so the tab
   band and content card look narrow and left-hugging. Let the shell use the
   full viewport width so the submenu spans it and the wide queue table fits. */
body.staff-side,
body.staff-side #container,
body.staff-side #pjax-container,
body.staff-side #content-wrapper {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* ---- Top header — white app bar ---------------------------------------- */
body.staff-side #header {
  background: var(--rmk-surface) !important;
  border-bottom: 1px solid var(--rmk-card-border);
  box-shadow: 0 1px 2px rgba(20,40,60,.04);
}
body.staff-side #nav.pull-right > li > a,
body.staff-side #nav.pull-right > li > a:link {
  color: var(--rmk-body) !important;
  font-weight: 500;
  font-size: 14.5px !important;
  border-radius: var(--rmk-r-sm);
  transition: color .15s, background .15s;
}
body.staff-side #nav.pull-right > li > a:hover { color: var(--rmk-deep) !important; background: var(--rmk-soft); }
body.staff-side #nav.pull-right > li.active > a,
body.staff-side #nav.pull-right > li.open > a { color: var(--rmk-deep) !important; font-weight: 600; }
body.staff-side #home-link svg, body.staff-side #home-link path { fill: var(--rmk-deep); }

/* ---- Queue-tab band → white second row of the app bar ------------------ */
/* Whiten the whole band (osta paints it cyan on the wrapper ul / sticky bar) so
   it reads as part of the white app bar and the pills sit on white. */
body.staff-side #sub_nav-wrap,
body.staff-side #sub_nav-wrap > ul#sub_nav,
body.staff-side #customQ_nav,
body.staff-side .sticky.bar,
body.staff-side #sub_nav-wrap .sticky {
  background: var(--rmk-surface) !important;
  border: none !important;
  box-shadow: none !important;
}
body.staff-side #sub_nav-wrap {
  position: relative;
  display: flow-root;          /* contain the menu so the band grows to hold it */
  height: auto !important;     /* osta pins it to height:24px → band never grew  */
  min-height: 44px;
  border-bottom: 1px solid var(--rmk-card-border) !important;
  padding: 4px 16px !important;
}
/* osta's jb-overflowmenu parks the primary tab list at position:absolute, so the
   band collapses to ~24px and the pills float over the content card. Pull the
   whole menu back into normal flow so the white band grows to a real 2nd row. */
body.staff-side #customQ_nav.jb-overflowmenu,
body.staff-side #sub_nav-wrap > ul#sub_nav,
body.staff-side ul#sub_nav.jb-overflowmenu-menu-primary {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
body.staff-side .jb-overflowmenu-container {
  position: static !important;
  height: auto !important;
}
/* On desktop every pill renders inline; hide the overflow "⋮" handle/container. */
body.staff-side .jb-overflowmenu-menu-secondary,
body.staff-side .jb-overflowmenu-menu-secondary-handle { display: none !important; }

body.staff-side ul#sub_nav.jb-overflowmenu-menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  padding: 6px 0 !important;
  background: transparent !important;
}
/* "Buscar"/"Nuevo Ticket" are not .top-queue — match the compact pill sizing so
   the whole secondary menu fits one row within osta's content width. */
body.staff-side ul#sub_nav.jb-overflowmenu-menu > li > a {
  padding: 5px 7px !important;
  font-size: 12px !important;
}
body.staff-side ul#sub_nav > li.top-queue { background: transparent !important; border: none !important; }
body.staff-side ul#sub_nav > li.top-queue > a {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding: 5px 7px !important;
  border-radius: var(--rmk-r-pill) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--rmk-support) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  white-space: nowrap;
  transition: color .15s, background .15s, box-shadow .15s;
}
body.staff-side ul#sub_nav > li.top-queue > a:hover { color: var(--rmk-deep) !important; background: transparent !important; }
/* Active queue = teal text + bold only (no filled pill, no glow) — per user + /ui-design. */
body.staff-side ul#sub_nav > li.top-queue.active > a {
  color: var(--rmk-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
body.staff-side ul#sub_nav > li.top-queue.active > a i { color: var(--rmk-primary) !important; }

/* Non-ticket sections (Usuarios, Organizaciones, Tareas, KB…) render #sub_nav-wrap
   with a plain <nav><ul id="sub_nav"> (no jb-overflowmenu/top-queue classes), so
   none of the rules above match and osta's raw huge-active-pill styling shows
   through, pushing/hiding whatever sits below (e.g. the queue search box). Style
   every <ul>/<li>/<a> under #sub_nav-wrap generically so both markups line up. */
body.staff-side #sub_nav-wrap ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  padding: 6px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  list-style: none !important;
}
body.staff-side #sub_nav-wrap li { list-style: none !important; }
body.staff-side #sub_nav-wrap li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding: 5px 7px !important;
  border-radius: var(--rmk-r-pill) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--rmk-support) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  white-space: nowrap;
  transition: color .15s, background .15s, box-shadow .15s;
}
body.staff-side #sub_nav-wrap li > a:hover { color: var(--rmk-deep) !important; background: transparent !important; }
body.staff-side #sub_nav-wrap li > a.active {
  color: var(--rmk-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Sub-queue hover dropdown. osTicket nests it as <ul class="scroll-height"> inside a
   top-queue <li>, each item `<li><span class="queue-count">N</span><a>name</a></li>`.
   The bar's flex + pill rules above would flatten every item onto one overlapping
   row — force this dropdown back to a plain vertical list. */
body.staff-side #sub_nav-wrap li.top-queue ul,
body.staff-side #sub_nav-wrap ul.scroll-height {
  display: block !important; flex-wrap: nowrap !important; gap: 0 !important; padding: 5px !important;
}
body.staff-side #sub_nav-wrap li.top-queue ul > li,
body.staff-side #sub_nav-wrap ul.scroll-height > li {
  display: block !important; width: 100% !important; margin: 0 !important;
}
body.staff-side #sub_nav-wrap li.top-queue ul > li > a,
body.staff-side #sub_nav-wrap ul.scroll-height > li > a {
  display: block !important; white-space: normal !important; text-align: left !important;
  padding: 6px 10px !important; border-radius: var(--rmk-r-sm) !important; font-weight: 500 !important;
}
body.staff-side #sub_nav-wrap ul.scroll-height .queue-count { color: var(--rmk-support) !important; font-weight: 600 !important; }

/* Unify osta's bright orange/green hover text on brand deep teal.
   (Leave the customQ dropdown item highlight — white-on-teal — untouched.) */
body.staff-side a:hover,
body.staff-side #nav .inactive li a:hover,
body.staff-side #sub_nav > li > a:hover,
body.staff-side #customQ_nav .jb-overflowmenu-menu-primary li.item a:hover,
body.staff-side .jb-overflowmenu-menu-secondary li.item:hover,
body.staff-side .jb-overflowmenu-menu-secondary li.item:hover > a {
  color: var(--rmk-deep) !important;
}

/* Queue "list" dropdown (customQ): clean floating card with its own stacking. */
body.staff-side .customQ-dropdown {
  background: var(--rmk-surface) !important;
  border: 1px solid var(--rmk-card-border) !important;
  border-radius: var(--rmk-r-md) !important;
  box-shadow: var(--rmk-shadow) !important;
  margin-top: 6px !important;
  z-index: 60 !important;
  overflow: hidden;
}

/* ---- Content → one floating white card on the canvas ------------------- */
body.staff-side #content {
  background: var(--rmk-surface) !important;
  border: 1px solid var(--rmk-card-border);
  border-radius: var(--rmk-r-lg);
  box-shadow: var(--rmk-shadow);
  margin: 18px 16px 28px !important;
  padding: 22px 24px !important;
  box-sizing: border-box;
  /* osta caps #content at max-width:80% and left-aligns it → off-centre. Let it
     fill the shell (symmetric 16px margins) so it lines up with the tab band. */
  max-width: none !important;
  width: auto !important;
}
body.staff-side #content h2 {
  color: var(--rmk-ink); font-weight: 600; font-size: 18px !important;
  margin: 0 0 16px !important; letter-spacing: -.1px;
}
/* Queue toolbar ships a hard-coded inner width:1140px; on narrower shells its
   pull-right search overflows and peeks above the card. */
body.staff-side #content .sticky.bar > .content { width: auto !important; max-width: 100% !important; }
/* Queue search box: osta docks it with `.attached{top:-34px}`, lifting it out of
   the card's top border. Drop it back inside the card. */
body.staff-side #content .page-top .attached,
body.staff-side #content .sticky .attached { top: 0 !important; }

/* ---- Basic-search boxes (queue tickets, users, orgs, tasks…) ------------ *
 * Every staff list ships the same `.input.attached > input.basic-search` group,
 * but osta floats/docks it (`.attached{top:-34px}`, float:right), so on the
 * screens without the tickets "Advanced" button it lifts out of flow and overlaps
 * the header — invisible. Pull EVERY basic-search group back into normal flow and
 * give it one bordered, softly shadowed field with a teal focus ring. */
body.staff-side #content .input.attached:has(input.basic-search) {
  position: static !important; top: auto !important; float: none !important;
  display: inline-flex; align-items: stretch; height: 34px; box-sizing: border-box;
  overflow: hidden; margin: 0 0 6px !important; max-width: 100%;
  border: 1px solid var(--rmk-border) !important;
  border-radius: var(--rmk-r-sm) !important;
  background: var(--rmk-surface) !important;
  box-shadow: inset 0 1px 2px rgba(20,40,60,.06) !important;
}
body.staff-side #content .input.attached:has(input.basic-search) input.basic-search {
  height: auto !important; box-sizing: border-box; padding: 0 10px !important;
  border: 0 !important; border-radius: 0 !important; float: none !important; margin: 0 !important;
  background: transparent !important; box-shadow: none !important; opacity: 1 !important;
}
body.staff-side #content .input.attached:has(input.basic-search) .button.attached {
  margin: 0 !important; float: none !important; border: 0 !important;
  border-left: 1px solid var(--rmk-border) !important; border-radius: 0 !important;
  background: var(--rmk-soft) !important;
}
body.staff-side #content .input.attached:has(input.basic-search):focus-within {
  border-color: var(--rmk-primary) !important;
  box-shadow: 0 0 0 3px rgba(11,165,183,.16) !important;
}

/* Tickets queue only: the search form also carries osta's "Advanced" button in
 * normal inline flow next to the (osta-floated) field, so it painted ON TOP of the
 * input. Lay THAT form out as a flex row so field + button sit side by side. */
body.staff-side #content .page-top form { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
body.staff-side #content .page-top form .input.attached,
body.staff-side #content .page-top form .action-button.advanced-search { float: none !important; margin: 0 !important; }

/* ============================================================================
 *  4. COMPONENTS
 * ========================================================================== */

/* ---- List tables — generic light polish (all /scp list tables) ---------- */
body.staff-side #table-outter, body.staff-side #table-inner { overflow-x: auto; }  /* wide table scrolls inside the card */
body.staff-side table.list { border-collapse: collapse; }
body.staff-side table.list > thead th {
  background: #F6F8FA !important; color: var(--rmk-support) !important;
  font-weight: 600; font-size: 13px !important;
  border: 0 !important; border-bottom: 1px solid var(--rmk-card-border) !important;
  padding: 12px 14px !important; text-align: left !important;
}
body.staff-side table.list > tbody td {
  padding: 10px 14px !important; border-bottom: 1px solid #EEF2F6 !important;
  font-size: 13px !important; line-height: 1.45 !important; font-weight: 400 !important;
}
body.staff-side table.list > tbody td a { font-size: 13px !important; font-weight: 400 !important; }
/* Calm osta's inline `font-weight:bolder/bold` on the inner cell wrappers. */
body.staff-side table.list > tbody td div,
body.staff-side table.list > tbody td time { font-weight: 400 !important; }
body.staff-side table.list > tbody tr:nth-child(even) > td { background: #FAFBFC !important; }
body.staff-side table.list > tbody tr:hover > td { background: rgba(11,165,183,.07) !important; }
body.staff-side table.list td .icon-flag, body.staff-side table.list .flag { color: var(--rmk-danger); }

/* ============================================================================
 * TICKET QUEUE — full redesign, scoped to the queue form `#tickets` so it can fully
 * replace osta without touching other list tables. NOTE: the queue table lives in
 * `<form id="tickets" action="?">`, NOT in the search form `form[action="tickets.php"]`
 * — scoping to the latter matches nothing (that mistake cost a lot; keep `#tickets`).
 * osTicket core AND osta paint cell backgrounds on <td> (a td background covers the
 * row), and osTicket flags old tickets with `tr.highlight` → a yellow row
 * (#ffe9d2 / #FFFFDD). So we paint td backgrounds authoritatively and fold
 * tr.highlight into the clean zebra: every column shares one background, no yellow
 * shading. Selector base `body.staff-side #tickets table.list` — the `#tickets` ID
 * gives high specificity, so it beats osta's !important rules and inline styles.
 * ========================================================================== */

/* Header: uppercase micro-labels (queue header links are all inside <a>). */
body.staff-side #tickets table.list thead th { font-size: 0 !important; padding: 12px 14px !important; }
body.staff-side #tickets table.list thead th a {
  font-size: 10.5px !important; font-weight: 600 !important; color: var(--rmk-support) !important;
  text-transform: uppercase; letter-spacing: .055em; text-shadow: none !important;
}

/* Cells + row shading painted on <td> (beats osta/core td backgrounds incl. the
   yellow tr.highlight). Hover wins over zebra; highlight folded into the scheme. */
body.staff-side #tickets table.list tbody td,
body.staff-side #tickets table.list tbody tr.highlight td {
  background: #FFFFFF !important; background-image: none !important;
  border: 0 !important; border-bottom: 1px solid #EEF2F6 !important;
  padding: 10px 14px !important; vertical-align: middle !important;
  font-size: 13px !important; font-weight: 400 !important; line-height: 1.45 !important;
  color: var(--rmk-body) !important; filter: none !important; opacity: 1 !important;
}
body.staff-side #tickets table.list tbody tr:nth-child(even) td,
body.staff-side #tickets table.list tbody tr.highlight:nth-child(even) td { background: #FAFBFC !important; }
body.staff-side #tickets table.list tbody tr:hover td,
body.staff-side #tickets table.list tbody tr.highlight:hover td { background: rgba(11,165,183,.07) !important; }

/* Ticket # → teal link + teal "new reply" dot. */
body.staff-side #tickets table.list td.osta_ticket a.preview { color: var(--rmk-deep) !important; font-weight: 600 !important; }
/* "New reply" marker: osta ships a 20×20 background-image square. Turn it into a
   small round teal dot (8px), and shrink its box to match. */
body.staff-side #tickets table.list td.osta_ticket #new-reply-icon { width: 8px !important; height: 8px !important; margin: 5px 7px 0 0 !important; }
body.staff-side #tickets table.list td.osta_ticket #new-reply-icon .dot {
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  background: var(--rmk-primary) !important; background-image: none !important; background-size: auto !important;
  margin: 0 !important;
}

/* Times muted; osta shades the RESP./CREADO cell red as time passes (inline bg on
   the td, and on its inner div) — neutralise both so the cell stays clean; overdue
   is signalled by sober red text instead of a block. */
body.staff-side #tickets table.list td.osta_datecreated,
body.staff-side #tickets table.list td.osta_lastresponse { color: var(--rmk-support) !important; font-variant-numeric: tabular-nums; }
body.staff-side #tickets table.list td.osta_datecreated > div,
body.staff-side #tickets table.list td.osta_lastresponse > div { background: transparent !important; background-image: none !important; }
body.staff-side #tickets table.list td .overdueTicket-container { color: #DC2626 !important; }

/* Subject → primary ink link; attachment/comment counts muted. */
body.staff-side #tickets table.list td.osta_subject a { color: var(--rmk-ink) !important; font-weight: 500 !important; }
body.staff-side #tickets table.list td.osta_subject a:hover { color: var(--rmk-deep) !important; }
body.staff-side #tickets table.list td.osta_subject small,
body.staff-side #tickets table.list td.osta_subject .faded-more { color: var(--rmk-support) !important; font-size: 12px !important; }

/* Priority → tinted pill (only Urgente stays loud). Built by staff.js as a
   `.rmk-pill` element (it tags osta's inner div, or wraps the bare text when osta
   emits no div — see renderPriorityPills). `data-level` carries the priority so the
   colour works whether osta's class suffix is Spanish (urgente/alta/baja) or English
   (emergency/high/low). Styling `.rmk-pill` — a class osta never targets — makes the
   pill immune to osta's theme settings and its `td.osta_priority div{display:none}`.
   The `> div` fallback only shapes the pill for the split-second before JS runs. */
body.staff-side #tickets table.list td.osta_priority { text-align: left !important; }
/* Pill SHAPE only — NO colour here (this selector carries the extra `td.osta_priority`
   and would otherwise out-specify the per-level colour rules below and force grey). */
body.staff-side #tickets table.list .rmk-pill,
body.staff-side #tickets table.list td[class*="osta_prior"] > div {
  display: inline-block !important; padding: 3px 12px !important; border-radius: 999px !important;
  font-size: 12px !important; line-height: 1.4 !important; letter-spacing: .01em !important;
  font-weight: 500 !important; text-align: center !important; min-width: 76px;
  border: 1px solid transparent !important; background-image: none !important;
}
/* Default colour when data-level isn't set yet (pre-JS) or is unknown → neutral. */
body.staff-side #tickets table.list .rmk-pill:not([data-level]),
body.staff-side #tickets table.list td[class*="osta_prior"] > div:not([data-level]) { background: #F1F5F9 !important; color: #475569 !important; border-color: #E2E8F0 !important; }
body.staff-side #tickets table.list .rmk-pill[data-level="urgente"],
body.staff-side #tickets table.list .rmk-pill[data-level="emergency"] { background: #FEE2E2 !important; color: #B91C1C !important; border-color: #FCA5A5 !important; font-weight: 600 !important; }
body.staff-side #tickets table.list .rmk-pill[data-level="alta"],
body.staff-side #tickets table.list .rmk-pill[data-level="high"] { background: #FFEDD5 !important; color: #C2410C !important; border-color: #FED7AA !important; }
body.staff-side #tickets table.list .rmk-pill[data-level="normal"] { background: #F1F5F9 !important; color: #475569 !important; border-color: #E2E8F0 !important; }
body.staff-side #tickets table.list .rmk-pill[data-level="baja"],
body.staff-side #tickets table.list .rmk-pill[data-level="low"] { background: transparent !important; color: #94A3B8 !important; border-color: transparent !important; font-weight: 400 !important; }

/* Status → coloured dot + label (quiet, so the priority pill stays the accent).
   staff.js tags each td.osta_mensaje with `rmk-st-<slug>` from the status name. */
body.staff-side #tickets table.list td.osta_mensaje > div {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-weight: 500 !important; font-size: 12.5px !important; color: var(--rmk-body) !important;
}
body.staff-side #tickets table.list td.osta_mensaje > div::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--st-dot, #94A3B8);
}
body.staff-side #tickets table.list td.rmk-st-nuevo > div { --st-dot: #0BA5B7; }
body.staff-side #tickets table.list td.rmk-st-analizado > div { --st-dot: #F59E0B; }
body.staff-side #tickets table.list td.rmk-st-desarrollo > div { --st-dot: #3B82F6; }
body.staff-side #tickets table.list td.rmk-st-instalar > div { --st-dot: #6366F1; }
body.staff-side #tickets table.list td.rmk-st-pendiente-de-validacion > div { --st-dot: #EAB308; }
body.staff-side #tickets table.list td.rmk-st-pendiente-de-terceros > div { --st-dot: #94A3B8; }
body.staff-side #tickets table.list td.rmk-st-puesta-en-marcha > div { --st-dot: #8B5CF6; }
body.staff-side #tickets table.list td.rmk-st-puesta-en-marcha-completada > div { --st-dot: #10B981; }
body.staff-side #tickets table.list td.rmk-st-resuelto1 > div { --st-dot: #10B981; }
body.staff-side #tickets table.list td.rmk-st-cerrado > div { --st-dot: #64748B; }
body.staff-side #tickets table.list td.rmk-st-consulta > div { --st-dot: #14B8A6; }
body.staff-side #tickets table.list td.rmk-st-archivado > div,
body.staff-side #tickets table.list td.rmk-st-borrado > div { --st-dot: #CBD5E1; }

/* ---- Form controls ------------------------------------------------------ */
body.staff-side input[type="text"], body.staff-side input[type="email"],
body.staff-side input[type="password"], body.staff-side input[type="search"],
body.staff-side input[type="number"], body.staff-side select, body.staff-side textarea {
  border: 1px solid var(--rmk-border); border-radius: var(--rmk-r-sm);
  padding: 7px 11px; color: var(--rmk-ink); background: var(--rmk-surface);
}
body.staff-side input:focus, body.staff-side select:focus, body.staff-side textarea:focus {
  border-color: var(--rmk-primary); outline: none; box-shadow: 0 0 0 3px rgba(11,165,183,.16);
}

/* ---- Buttons ------------------------------------------------------------ */
body.staff-side .action-button, body.staff-side a.button, body.staff-side .btn,
body.staff-side input.button, body.staff-side button.action-button { border-radius: var(--rmk-r-sm) !important; }
/* Primary/green submits + osta's "Publicar Respuesta" (ships as input.save, pale
   green on green, off-brand and low-contrast) → brand teal. */
body.staff-side input[type="submit"].green, body.staff-side button.green, body.staff-side .green.button, body.staff-side .btn.btn-green,
body.staff-side input[type="submit"].save, body.staff-side input.save.pending, body.staff-side .save.button {
  background: var(--rmk-deep) !important; background-image: none !important;
  border: 1px solid var(--rmk-deep) !important; color: #fff !important; border-radius: var(--rmk-r-sm) !important;
  text-shadow: none !important;
}
body.staff-side input[type="submit"].green:hover, body.staff-side button.green:hover,
body.staff-side input[type="submit"].save:hover, body.staff-side input.save.pending:hover { background: var(--rmk-primary) !important; }
/* ---- Ticket-view action toolbar → ghost buttons, teal on hover ---------- *
 * osta ships a segmented bar of dark boxes; each glyph is a background-image SVG
 * data-URI with its fill BAKED IN (#128DBE at rest, #fff/#d01919 on osta's own
 * hover swaps), so `color`/`fill` cannot recolour it — only `filter` can. We
 * exploit that: `brightness(0)` collapses ANY baked colour to black, then
 * `invert()` rebuilds one uniform tone, so osta's heterogeneous icons all render
 * alike. Rest = borderless, slate-grey icon + label; hover/active = teal fill
 * with a white glyph + label. */
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger) {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;   /* kills osta's box + divider borders */
  border-radius: var(--rmk-r-sm) !important;
  box-shadow: none !important;
  margin: 0 2px !important;
  transition: background .15s, color .15s;
}
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):hover,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):active {
  background: var(--rmk-primary) !important;   /* teal fill only on hover/active */
  box-shadow: none !important;                 /* kill osta's large hover shadow */
}
/* Rest: slate-grey label + glyph (glyph normalised from osta's baked fill). */
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger),
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger) a,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger) span,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger) i { color: var(--rmk-support) !important; }
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger) i {
  filter: brightness(0) saturate(100%) invert(45%) !important;   /* baked SVG → uniform grey */
}
/* Hover/active: white label + glyph over the teal fill. */
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):hover,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):hover a,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):hover span,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):active,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):active a,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):active span { color: #fff !important; }
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):hover i,
body.staff-side .action-button:not(.green):not(.red):not(.btn-danger):active i {
  filter: brightness(0) invert(1) !important;   /* baked SVG → white */
}
body.staff-side .action-button .icon-caret-down { opacity: .85; }

/* ---- Notices / alerts --------------------------------------------------- */
body.staff-side .alert, body.staff-side .note, body.staff-side #msg_notice,
body.staff-side #msg_warning, body.staff-side #msg_error { border-radius: var(--rmk-r-md); }
body.staff-side ul.tabs li.active a, body.staff-side .tabs > li > a.active { color: var(--rmk-deep); border-bottom-color: var(--rmk-primary); }
/* System warning bar (osta uses solid black) → brand amber. */
body.staff-side #warning_bar {
  background: #92400E !important;
  background-image: none !important;
}
body.staff-side #warning_bar #warning-inner,
body.staff-side #warning_bar #warning-inner i { color: #FEF3C7 !important; }

/* ---- Ticket view — sticky reply/note bar + tabs ------------------------- *
 * The "Publicar Respuesta" / "Publicar Nota Interna" tabs are ul.tabs#response-tabs
 * inside #response_options (classes: sticky bar stop actions). osta paints the
 * <li> (and its hover) dark; our earlier rule only recoloured the <a> (transparent),
 * so the dark <li> showed through under dark text → unreadable, with a black hover.
 * Fix: force the whole bar white and set backgrounds on the <li> too, not just <a>. */
body.staff-side #response_options,
body.staff-side #response_options.sticky.bar,
body.staff-side #response_options.stop,
body.staff-side #response_options .tab_content { background: var(--rmk-surface) !important; }
body.staff-side #response-tabs,
body.staff-side #response-tabs > li,
body.staff-side #response-tabs > li > a {
  background: transparent !important;
  background-image: none !important;
}
body.staff-side #response-tabs { border-bottom: 1px solid var(--rmk-card-border) !important; }
body.staff-side #response-tabs > li > a {
  color: var(--rmk-body) !important;      /* readable dark text on the white bar */
  font-weight: 600;
  text-shadow: none !important;
}
body.staff-side #response-tabs > li > a:hover,
body.staff-side #response-tabs > li:hover > a {
  color: var(--rmk-deep) !important;
  background: var(--rmk-pale) !important;  /* teal-pale, never osta's black */
}
body.staff-side #response-tabs > li.active > a {
  color: var(--rmk-deep) !important;
  background: var(--rmk-surface) !important;
  border-bottom: 2px solid var(--rmk-primary) !important;
}

/* ---- Cookie-consent strip ---------------------------------------------- */
/* Blend into the canvas instead of a bare floating white strip below the card. */
body.staff-side #complianceouter {
  background: transparent !important;
  text-align: center;
}
body.staff-side #complianceouter #compliance-message,
body.staff-side #complianceouter #complaince-message { color: var(--rmk-support) !important; }

/* ============================================================================
 *  5. CONCEALMENT
 * ========================================================================== */
/* Hide the osTicket / osTicket Awesome footer credit on /scp. */
body.staff-side #footer #osticket, body.staff-side #footer #ostawesome,
body.staff-side #footer #osticket a, body.staff-side #footer #ostawesome a { display: none !important; }

/* ============================================================================
 *  6. PRESENCE QUICK-ACCESS  (floating pill, set your work state from /scp)
 * ========================================================================== */
.rmk-presence {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  font-family: var(--rmk-font);
}
.rmk-presence-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rmk-surface); color: var(--rmk-ink);
  border: 1px solid var(--rmk-card-border); border-radius: var(--rmk-r-pill);
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--rmk-shadow); line-height: 1;
}
.rmk-presence-pill:hover { border-color: var(--rmk-primary); }
.rmk-presence-lbl { color: var(--rmk-support); font-weight: 500; }
.rmk-presence-val { color: var(--rmk-ink); }
.rmk-presence-caret { color: var(--rmk-support); font-size: 11px; }
.rmk-presence-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1;
  flex: 0 0 auto; display: inline-block;
}
.rmk-presence-menu {
  display: none; position: absolute; right: 0; bottom: calc(100% + 8px);
  min-width: 240px; background: var(--rmk-surface);
  border: 1px solid var(--rmk-card-border); border-radius: var(--rmk-r-md);
  box-shadow: var(--rmk-shadow); overflow: hidden; padding: 4px;
}
.rmk-presence-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 9px 12px; font: inherit; font-size: 13px; color: var(--rmk-ink);
  border-radius: var(--rmk-r-sm);
}
.rmk-presence-opt:hover { background: var(--rmk-soft); }
.rmk-presence-opt em { color: var(--rmk-support); font-style: normal; font-size: 11px; }

/* No state set yet → red, pulsing, to nudge the agent to mark it. */
.rmk-presence--alert .rmk-presence-pill {
  background: var(--rmk-danger); color: #fff; border-color: transparent;
  animation: rmkPresencePulse 1.5s ease-in-out infinite;
}
.rmk-presence--alert .rmk-presence-lbl,
.rmk-presence--alert .rmk-presence-val,
.rmk-presence--alert .rmk-presence-caret { color: #fff; }
@keyframes rmkPresencePulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) {
  .rmk-presence--alert .rmk-presence-pill { animation: none; }
}

/* ---- Team popover (live state of everyone) ------------------------------- */
.rmk-team-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rmk-surface); color: var(--rmk-body);
  border: 1px solid var(--rmk-card-border); border-radius: var(--rmk-r-pill);
  padding: 8px 13px; margin-right: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: var(--rmk-shadow); line-height: 1;
}
.rmk-team-btn:hover { border-color: var(--rmk-primary); color: var(--rmk-deep); }
.rmk-team-panel {
  display: none; position: absolute; right: 0; bottom: calc(100% + 8px);
  width: 360px; max-width: 82vw; background: var(--rmk-surface);
  border: 1px solid var(--rmk-card-border); border-radius: var(--rmk-r-md);
  box-shadow: var(--rmk-shadow); overflow: hidden;
}
.rmk-team-title {
  padding: 12px 14px 4px; font-size: 14px; font-weight: 700; color: var(--rmk-ink);
}
.rmk-team-head {
  padding: 0 14px 10px; font-size: 12px; color: var(--rmk-support);
  border-bottom: 1px solid var(--rmk-card-border);
}
.rmk-team-body { max-height: 340px; overflow-y: auto; padding: 4px; }
.rmk-team-row { padding: 7px 10px; border-radius: var(--rmk-r-sm); }
.rmk-team-row:hover { background: var(--rmk-soft); }
.rmk-team-line { display: flex; align-items: center; gap: 8px; }
.rmk-team-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.rmk-team-name {
  color: var(--rmk-ink); font-weight: 600; font-size: 13px;
  flex: 1 1 auto; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rmk-team-state { flex: 0 0 auto; font-weight: 600; font-size: 12px; white-space: nowrap; }
.rmk-team-none { color: var(--rmk-danger) !important; }
.rmk-team-meta {
  color: var(--rmk-support); font-size: 11px; margin-top: 1px; margin-left: 18px;
}
.rmk-team-off { opacity: .62; }
.rmk-team-connect {
  display: inline-flex; align-items: center; margin: 10px; padding: 8px 14px;
  background: var(--rmk-deep); color: #fff; border: 0; border-radius: var(--rmk-r-sm);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rmk-team-connect:hover { background: var(--rmk-primary); }