/* ==========================================================================
   Modern agent-panel skin for osTicket 1.18  —  CSS-only reskin
   --------------------------------------------------------------------------
   Loaded LAST in include/staff/header-staff.inc.php and login.header.php,
   after scp-agent.css and custom.css, so it wins the cascade without any of
   them being edited.

   LIGHT MODE ONLY - AND THAT IS DELIBERATE.
   ------------------------------------------
   The agent panel must not have a dark theme applied this way. Queue columns
   carry admin-configured colours emitted as INLINE styles
   (QueueColumnCondition -> class.queue.php:2128, rendered at
   queue-tickets.tmpl.php:273). Those colours were picked against a white
   background and inline styles beat any stylesheet, so on a dark page every
   one of them becomes a glaring light island - priority cells, conditional
   row highlights, status chips. There is no way to enumerate them from CSS.
   A dark agent panel needs the queue renderer rewritten; it is not a
   stylesheet problem. Do not re-add dark blocks here.

   OTHER CONSTRAINTS - do not relax without re-testing the panel:
     * No `display`, `float`, `position` or `visibility` changes on structural
       elements. Tabs, dialogs, dropdowns, drag handles and pjax are driven by
       jQuery reading exactly those properties.
     * Icons untouched. The agent panel uses Font Awesome 4 `icon-*` names,
       not the client portal's FA5 `fas fa-*`.
     * Admin-configured inline background colours are LEFT ALONE. They are a
       deliberate operator signal, and on a light surface they read correctly.
   ========================================================================== */

:root {
  /* Tailwind slate scale - the neutral ramp behind most modern SaaS UIs. Its
     hue is consistent all the way down, which is why greys built from it never
     look muddy next to a saturated accent. */
  /* The ramp needs real tonal steps, not three shades of almost-white. A card
     is only legible as a card if the ground behind it is visibly darker, so
     the page sits a full step below the panel, and the list ground another
     step below that:  page < list ground < card.  */
  --a-bg:            #e8edf3;  /* page - deliberately below slate-50 */
  --a-surface:       #ffffff;  /* cards, panels                      */
  --a-surface-2:     #eef2f7;
  --a-surface-3:     #dde4ed;
  --a-inset:         #f2f5f9;  /* the ground a list of cards sits on */

  --a-border:        #d9e1ea;
  --a-border-strong: #b9c5d4;

  --a-text:          #0f172a;  /* slate-900 */
  --a-muted:         #475569;  /* slate-600 */
  --a-subtle:        #94a3b8;  /* slate-400 */

  --a-accent:        #2563eb;  /* blue-600  */
  --a-accent-hover:  #1d4ed8;  /* blue-700  */
  --a-accent-fg:     #ffffff;
  --a-accent-soft:   #eff6ff;  /* blue-50   */
  --a-accent-border: #bfdbfe;  /* blue-200  */

  --a-success:       #16794a;
  --a-success-soft:  #e6f5ed;
  --a-success-border:#b7e2cb;
  --a-warning:       #9a6206;
  --a-warning-soft:  #fdf3e2;
  --a-warning-border:#f3d9a8;
  --a-danger:        #c02626;
  --a-danger-soft:   #fdeceb;
  --a-danger-border: #f5c2be;

  /* status/priority pills need more than three hues to stay distinguishable */
  --a-neutral:       #475569;  /* slate-600 */
  --a-neutral-soft:  #f1f5f9;  /* slate-100 */
  --a-neutral-border:#cbd5e1;  /* slate-300 */
  --a-info:          #0f766e;  /* teal-700  */
  --a-info-soft:     #f0fdfa;  /* teal-50   */
  --a-info-border:   #99f6e4;  /* teal-200  */
  --a-violet:        #6d28d9;  /* violet-700 */
  --a-violet-soft:   #f5f3ff;  /* violet-50  */
  --a-violet-border: #ddd6fe;  /* violet-200 */

  --a-thead:         #f2f5f9;

  --a-focus:  0 0 0 3px rgba(47, 111, 237, .28);
  --a-r-sm:   6px;
  --a-r:      9px;
  --a-r-lg:   12px;
  --a-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --a-shadow-lg: 0 12px 32px rgba(16, 24, 40, .13);

  --a-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;   /* keep form controls light even on a dark OS */
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
  background: var(--a-bg) !important;
  color: var(--a-text) !important;
  font-family: var(--a-font) !important;
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--a-accent); }
a:hover { color: var(--a-accent-hover); }

h1, h3, h4, h5 {
  color: var(--a-text);
  font-weight: 650;
  letter-spacing: -.011em;
}

/* custom.css paints every <h2> as a solid blue bar with white text.
   Turn it back into a heading. */
h2 {
  background: transparent !important;
  color: var(--a-text) !important;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -.011em;
  padding: 0 !important;
  text-shadow: none !important;
}

hr { border: 0; height: 1px; background: var(--a-border); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--a-focus);
  border-radius: var(--a-r-sm);
}

.faded, .faded a { color: var(--a-muted) !important; }

/* ==========================================================================
   Shell
   ========================================================================== */

#container, .body-content { background: transparent !important; }

#content {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border) !important;
  border-radius: var(--a-r-lg) !important;
  box-shadow: var(--a-shadow) !important;
  padding: 18px !important;
  color: var(--a-text);
}

#pjax-container { background: transparent !important; }

/* ==========================================================================
   Top navigation
   ========================================================================== */

/* White chrome on a slate-50 page: the nav stays distinct because the content
   panels are inset cards with their own radius and ring, not because the bar is
   tinted. Kept light - the logo is a light-background raster and would sit as a
   white rectangle on a dark bar. */
#header, .navbar, .navbar-default {
  background: var(--a-surface) !important;
  background-image: none !important;
  border: 0 !important;
  /* the chrome has to read as a fixed layer above the page, so it gets a real
     edge and a shadow rather than a hairline that vanishes on a pale ground */
  border-bottom: 1px solid var(--a-border-strong) !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important;
}

.navbar-default .navbar-nav > li > a,
#header a, .navbar a {
  color: var(--a-neutral) !important;
  text-shadow: none !important;
  font-weight: 600;
  border-radius: var(--a-r-sm);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar a:hover {
  color: var(--a-accent) !important;
  background: var(--a-accent-soft) !important;
}

/* active / open tab is a soft rounded pill, the current convention */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
  background: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
  box-shadow: none;
  border-radius: 8px;
}

#footer {
  background: transparent !important;
  color: var(--a-muted) !important;
  border-top: 1px solid var(--a-border);
}
#footer a { color: var(--a-muted) !important; }

/* ==========================================================================
   Queue header bar  (.bcolor is the blue "Open" strip)
   ========================================================================== */

/* The queue header is TWO adjacent .bcolor columns
   (queue-tickets.tmpl.php:172 and :219). Giving each its own border and
   radius produces a visible seam between them, so style them as one
   continuous strip: shared background, one bottom rule, no side borders,
   no radius. The table below closes the shape. */
.bcolor {
  background: var(--a-inset) !important;
  background-image: none !important;
  color: var(--a-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--a-border) !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}
/* custom.css:441 forces .bcolor a { color:#ffffff } - invisible on a light
   bar, which is why the toolbar icons disappeared. */
.bcolor h2, .bcolor a, .bcolor span, .bcolor i, .bcolor label {
  color: var(--a-text) !important;
  text-shadow: none !important;
}
.bcolor a:hover, .bcolor .icon-cog:hover { color: var(--a-accent) !important; }
.bcolor .icon-cog { color: var(--a-muted) !important; }

/* --------------------------------------------------------------------------
   Sticky action bar on the ticket view

   When it pins, content keeps scrolling underneath it — that is what
   `position: fixed` does, and osTicket reserves no space for it. So the bar
   has to be visually complete on its own: fully opaque, with a hard bottom
   edge, or a line of text passing behind reads as clipped rather than
   scrolled.

   Stock made it 95%-opaque white (scp.css:3228) and custom.css:197 repainted
   it #0473aa. An earlier version of this file used var(--a-accent), which is
   the same mistake in a different colour: a saturated bar pinned over the
   thread, with the ticket-number link coming out green on blue.

   It is chrome, so it is painted like the rest of the chrome.
   -------------------------------------------------------------------------- */
.tbar .message.bar,
.sticky.bar.fixed {
  background: var(--a-surface) !important;
  background-image: none !important;
  color: var(--a-text) !important;
  /* opacity matters more than colour here: anything translucent shows the
     thread sliding past behind the toolbar */
  opacity: 1 !important;
  border-bottom: 1px solid var(--a-border-strong) !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .10) !important;
  backdrop-filter: none !important;
}

/* the ticket number and its refresh icon */
.sticky.bar.fixed h2,
.sticky.bar.fixed h2 a,
.tbar .message.bar h2,
.tbar .message.bar h2 a {
  color: var(--a-text) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  text-shadow: none !important;
}
.sticky.bar.fixed h2 a:hover { color: var(--a-accent) !important; }
.sticky.bar.fixed h2 i,
.sticky.bar.fixed .icon-refresh { color: var(--a-subtle) !important; }

/* toolbar buttons in the pinned bar: dark squares on blue in the stock skin */
.sticky.bar.fixed .action-button,
.sticky.bar.fixed .action-button > a,
.tbar .message.bar .action-button {
  background: var(--a-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--a-border) !important;
  color: var(--a-muted) !important;
  text-shadow: none !important;
}
.sticky.bar.fixed .action-button:hover,
.sticky.bar.fixed .action-button > a:hover {
  background: var(--a-accent-soft) !important;
  border-color: var(--a-accent-border) !important;
  color: var(--a-accent) !important;
}

/* ==========================================================================
   Sub navigation / tabs
   ========================================================================== */

#nav, #sub_nav { background: transparent !important; border-color: var(--a-border) !important; }

#sub_nav { border-bottom: 1px solid var(--a-border) !important; margin-bottom: 14px; }

#sub_nav > li > a, #nav > li > a {
  color: var(--a-muted) !important;
  border-radius: var(--a-r-sm) var(--a-r-sm) 0 0;
  font-weight: 550;
  transition: background .14s ease, color .14s ease;
}
#sub_nav > li > a:hover, #nav > li > a:hover {
  background: var(--a-surface-2) !important;
  color: var(--a-text) !important;
}
#sub_nav > li.active > a, #nav > li.active > a, #sub_nav > li > a.active {
  color: var(--a-accent) !important;
  background: var(--a-accent-soft) !important;
  border-bottom: 2px solid var(--a-accent) !important;
}

ul.tabs { border-bottom: 1px solid var(--a-border) !important; background: transparent !important; }
ul.tabs > li > a {
  background: transparent !important;
  border: 0 !important;
  color: var(--a-muted) !important;
  font-weight: 600;
  border-radius: var(--a-r-sm) var(--a-r-sm) 0 0;
}
ul.tabs > li > a:hover { background: var(--a-surface-2) !important; color: var(--a-text) !important; }
ul.tabs > li.active > a, ul.tabs > li > a.active {
  background: var(--a-surface) !important;
  color: var(--a-accent) !important;
  border-bottom: 2px solid var(--a-accent) !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button, input[type="submit"], button.button, a.button {
  background: var(--a-accent) !important;
  background-image: none !important;
  border: 1px solid var(--a-accent) !important;
  border-radius: var(--a-r-sm) !important;
  color: var(--a-accent-fg) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 7px 14px !important;
  transition: background .14s ease, border-color .14s ease;
}
.button:hover, input[type="submit"]:hover, a.button:hover {
  background: var(--a-accent-hover) !important;
  border-color: var(--a-accent-hover) !important;
  color: var(--a-accent-fg) !important;
}

input[type="reset"], input[type="button"],
.button.cancel, a.button.cancel, .btn-default {
  background: var(--a-surface) !important;
  background-image: none !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-sm) !important;
  color: var(--a-text) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-weight: 550 !important;
}
input[type="reset"]:hover, input[type="button"]:hover,
.button.cancel:hover, .btn-default:hover {
  background: var(--a-surface-2) !important;
  border-color: var(--a-border-strong) !important;
  color: var(--a-text) !important;
}

.button.green, .green.button, .btn-success {
  background: var(--a-success) !important; border-color: var(--a-success) !important; color: #fff !important;
}
.button.red, .btn-danger, .danger {
  background: var(--a-danger) !important; border-color: var(--a-danger) !important; color: #fff !important;
}

/* Small icon buttons in queue toolbars - custom.css forces #eee on these */
.action-button, .action-button > a,
#users-list .btn-xs, .org-list .btn-xs, .task-list .btn-xs, .user-page .btn-xs,
.title-right-icons span, .title-right-icons .span-a, .title-right-icons .action-button {
  background-color: var(--a-surface) !important;
  background-image: none !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-sm) !important;
  color: var(--a-muted) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.action-button:hover, .action-button > a:hover,
.title-right-icons span:hover, .title-right-icons .action-button:hover {
  background-color: var(--a-accent-soft) !important;
  border-color: var(--a-accent-border) !important;
  color: var(--a-accent) !important;
}

.action-dropdown, .dropdown-menu, .action-dropdown ul {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-sm) !important;
  box-shadow: var(--a-shadow-lg) !important;
  color: var(--a-text) !important;
}
.action-dropdown a, .dropdown-menu a { color: var(--a-text) !important; }
.action-dropdown a:hover, .dropdown-menu a:hover {
  background: var(--a-accent-soft) !important; color: var(--a-accent) !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="url"], input[type="number"],
input[type="search"], input[type="date"], input[type="time"],
select, textarea, .form-control {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-sm) !important;
  color: var(--a-text) !important;
  font-family: inherit !important;
  padding: 7px 10px !important;
  box-shadow: none !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--a-accent) !important;
  box-shadow: var(--a-focus) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--a-subtle) !important; }
input[disabled], select[disabled], textarea[disabled], input[readonly] {
  background: var(--a-surface-2) !important; color: var(--a-muted) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--a-accent); }

label { color: var(--a-text); }
.required:after, span.required { color: var(--a-danger) !important; }
.error, td.error, div.error, span.error, font.error { color: var(--a-danger) !important; }

table.form_table > tbody > tr > td, table.form_table > tbody > tr > th {
  border-color: var(--a-border) !important; color: var(--a-text);
}
table.form_table > tbody > tr > th {
  background: var(--a-inset) !important; color: var(--a-muted) !important; font-weight: 650;
}

/* Search bar above the queue */
.form-control.basic-search { border-radius: var(--a-r-sm) 0 0 var(--a-r-sm) !important; }

/* ==========================================================================
   Tables - queues and admin lists
   Row/cell backgrounds set inline by admins are intentionally NOT overridden.
   ========================================================================== */

table.list, table.table, .table {
  background: var(--a-surface) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--a-border) !important;
  border-radius: 0 0 var(--a-r) var(--a-r) !important;
  overflow: hidden;
  color: var(--a-text) !important;
}

table.list > thead > tr > th, table.table > thead > tr > th, table.list th {
  background: var(--a-inset) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--a-border) !important;
  border-right: 0 !important;
  color: var(--a-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-shadow: none !important;
  padding: 9px 12px !important;
}
table.list > thead > tr > th a, table.table > thead > tr > th a { color: inherit !important; }
table.list > thead > tr > th a:hover { color: var(--a-accent) !important; }

table.list tbody td, table.table tbody td {
  border-bottom: 1px solid var(--a-border) !important;
  border-right: 0 !important;
  border-top: 0 !important;
  color: var(--a-text) !important;
  padding: 9px 12px !important;
  vertical-align: middle;
}

table.list tbody tr:last-child td { border-bottom: 0 !important; }
table.list tbody tr:hover td { background-color: var(--a-inset); }
table.list tbody tr.disabled td { color: var(--a-subtle) !important; }

/* Unread/answered rows: use weight, not a background, so admin colours show */
table.list tbody tr td a { color: var(--a-accent); }
table.list tbody tr td a:hover { color: var(--a-accent-hover); }

/* ==========================================================================
   Alerts and message bars
   ========================================================================== */

.alert, #error_bar, #warning_bar, #notice_bar,
#msg_error, #msg_warning, #msg_notice, #msg_info {
  border-radius: var(--a-r-sm) !important;
  border-width: 1px !important;
  border-left-width: 3px !important;
  background-image: none !important;
  padding: 10px 13px !important;
  text-shadow: none !important;
  font-size: 13px;
}
.alert-danger, #error_bar, #msg_error, .error-banner {
  background: var(--a-danger-soft) !important; border-color: var(--a-danger-border) !important;
  border-left-color: var(--a-danger) !important; color: var(--a-danger) !important;
}
.alert-warning, #warning_bar, #msg_warning, .warning-banner {
  background: var(--a-warning-soft) !important; border-color: var(--a-warning-border) !important;
  border-left-color: var(--a-warning) !important; color: var(--a-warning) !important;
}
.alert-info, #notice_bar, #msg_notice, #msg_info, .info-banner {
  background: var(--a-accent-soft) !important; border-color: var(--a-accent-border) !important;
  border-left-color: var(--a-accent) !important; color: var(--a-accent) !important;
}
.alert-success, .success-banner {
  background: var(--a-success-soft) !important; border-color: var(--a-success-border) !important;
  border-left-color: var(--a-success) !important; color: var(--a-success) !important;
}

/* ==========================================================================
   Ticket view - thread entries
   ========================================================================== */

/* Who said it is the most important thing on this page, so the header carries
   the distinction: customer / agent / internal note each get their own hue,
   plus a rail down the entry. Written with tokens so dark inherits it - no
   duplicate rules in modern-agent-dark.css.

   Stock already colour-codes these (scp.css:1590 #C3D9FF message, :1598
   #FFE0B3 response, :1629 #FFE note). This keeps the meaning and restates it
   in the palette. */

.thread-entry {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border) !important;
  border-radius: var(--a-r) !important;
  box-shadow: var(--a-shadow);
  overflow: hidden;
}
/* scp.css:1517 and :1522 draw 2px solid WHITE above and below every entry -
   invisible on a white page, two bright rules on a dark one. */
.thread-entry::before,
.thread-entry::after { border-color: transparent !important; }

.thread-entry .header, .thread-entry > .header {
  background: var(--a-surface-2) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--a-border) !important;
  border-radius: 0 !important;
  color: var(--a-text) !important;
  text-shadow: none !important;
  padding: 9px 14px !important;
  font-size: 13px;
}
.thread-entry .header a { color: var(--a-text) !important; font-weight: 600; }

/* --- customer ------------------------------------------------------------- */
.thread-entry.message { border-left: 3px solid var(--a-accent) !important; }
.thread-entry.message .header {
  background: var(--a-accent-soft) !important;
  border-bottom-color: var(--a-accent-border) !important;
}
.thread-entry.message .header a { color: var(--a-accent) !important; }

/* --- agent ---------------------------------------------------------------- */
.thread-entry.response { border-left: 3px solid var(--a-info) !important; }
.thread-entry.response .header {
  background: var(--a-info-soft) !important;
  border-bottom-color: var(--a-info-border) !important;
}
.thread-entry.response .header a { color: var(--a-info) !important; }

/* --- internal note -------------------------------------------------------- */
.thread-entry.note { border-left: 3px solid var(--a-warning) !important; }
.thread-entry.note .header {
  background: var(--a-warning-soft) !important;
  border-bottom-color: var(--a-warning-border) !important;
}
.thread-entry.note .header a { color: var(--a-warning) !important; }

/* --- system --------------------------------------------------------------- */
.thread-entry.system .header { background: var(--a-surface-2) !important; }

/* The little caret pointing at the avatar is drawn with border colours matched
   to the stock header fills, so it has to be re-pointed at the new ones or it
   floats as a stray pale triangle. */
.thread-entry.avatar.message  .header:after  { border-left-color:  var(--a-accent-soft) !important; }
.thread-entry.avatar.message  .header:before { border-left-color:  var(--a-accent-border) !important; }
.thread-entry.avatar.response .header:after  { border-right-color: var(--a-info-soft) !important; }
.thread-entry.avatar.response .header:before { border-right-color: var(--a-info-border) !important; }
.thread-entry.avatar.note     .header:after  { border-right-color: var(--a-warning-soft) !important; }
.thread-entry.avatar.note     .header:before { border-right-color: var(--a-warning-border) !important; }

/* Gravatar serves a grey "mystery man" for addresses with no account, which is
   most of them. Round it and calm it down rather than leaving grey slabs.

   CAREFUL: `.avatar` is not only on the image. The entry container itself is
   <div class="thread-entry message avatar">, so a bare `.avatar { border-radius }`
   rounds the whole message block into a circle. Target the image and the two
   span wrappers explicitly, and restore the entry's own radius. */
img.avatar,
.thread-entry > span.avatar,
.thread-event img.avatar { border-radius: 999px !important; }

.thread-entry.avatar { border-radius: var(--a-r) !important; }

.thread-entry > span.avatar {
  width: 40px !important;
  max-height: 40px !important;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--a-border);
}
.thread-entry.avatar            { margin-left: 52px !important; }
.thread-entry.message.avatar    { margin-right: 52px !important; margin-left: 0 !important; }
.thread-entry > span.avatar     { margin-left: -52px !important; }
.thread-entry.message > span.avatar { margin-left: initial !important; margin-right: -52px !important; }

/* The event rail under each message ("Created by ...", "X claimed this").
   scp.css:59 sets .faded to rgba(0,0,0,.5) — half-black, which is legible on a
   white page and all but invisible on a dark one. Route it through the tokens
   so it reads in both. */
.faded       { color: var(--a-muted) !important; }
.faded-more  { color: var(--a-subtle) !important; }
.faded b, .faded strong { color: var(--a-text) !important; }
.thread-event time { color: var(--a-subtle) !important; }

/* the little round icon marking each event */
.type-icon {
  background-color: var(--a-surface-2) !important;
  border: 1px solid var(--a-border) !important;
  color: var(--a-muted) !important;
  border-radius: 999px !important;
}
.type-icon i { color: var(--a-muted) !important; }
/* scp.css:3499 hides the connector line behind a 16px WHITE block */
.thread-event .type-icon::after { border-color: var(--a-bg) !important; }

.thread-event, .thread-event .description { color: var(--a-muted) !important; }
.thread-event .avatar, .thread-event img.avatar { width: 20px; height: 20px; }

/* ==========================================================================
   Dialogs
   ========================================================================== */

.dialog, .ui-dialog {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-lg) !important;
  box-shadow: var(--a-shadow-lg) !important;
  color: var(--a-text) !important;
}
.dialog h3, .ui-dialog .ui-dialog-titlebar {
  background: var(--a-inset) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--a-border) !important;
  color: var(--a-text) !important;
  border-radius: var(--a-r-lg) var(--a-r-lg) 0 0 !important;
}
.ui-widget-overlay { background: rgba(8, 11, 16, .45) !important; opacity: 1 !important; }

/* ==========================================================================
   Third-party widgets
   ========================================================================== */

.select2-container .select2-choice,
.select2-container .select2-selection,
.select2-container-multi .select2-choices {
  background: var(--a-surface) !important; background-image: none !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-sm) !important;
  color: var(--a-text) !important; box-shadow: none !important;
}
.select2-drop, .select2-dropdown {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border-strong) !important;
  box-shadow: var(--a-shadow-lg) !important; color: var(--a-text) !important;
}
.select2-results .select2-highlighted, .select2-results__option--highlighted {
  background: var(--a-accent) !important; color: var(--a-accent-fg) !important;
}

.redactor-box {
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-sm) !important; overflow: hidden;
}
.redactor-toolbar { background: var(--a-inset) !important; border-bottom: 1px solid var(--a-border) !important; }
.redactor-toolbar li a { color: var(--a-muted) !important; }
.redactor-toolbar li a:hover { background: var(--a-accent) !important; color: var(--a-accent-fg) !important; }
.redactor-editor, .redactor-layer {
  background: var(--a-surface) !important; color: var(--a-text) !important;
  font-family: var(--a-font) !important;
}

.tipsy-inner, .ui-tooltip {
  background: var(--a-text) !important; color: #fff !important;
  border-radius: var(--a-r-sm) !important; box-shadow: var(--a-shadow-lg) !important;
}

.pagination a, .pagenav a {
  border: 1px solid var(--a-border) !important;
  border-radius: var(--a-r-sm) !important;
  background: var(--a-surface) !important;
  color: var(--a-muted) !important;
}
.pagination a:hover, .pagenav a:hover {
  background: var(--a-accent-soft) !important;
  border-color: var(--a-accent-border) !important;
  color: var(--a-accent) !important;
}

.dash-stats, .stats-container, .dashboard-stat {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border) !important;
  border-radius: var(--a-r) !important;
  box-shadow: var(--a-shadow);
  color: var(--a-text) !important;
}

/* ==========================================================================
   Corrections for specific OSTRT-theme rules
   Each of these overrides a hardcoded colour in custom.css / scp-agent.css
   that the reskin has to neutralise by name. Line refs are to the live files.
   ========================================================================== */

/* scp-agent.css:390 stripes ODD rows #f0faff (pale blue) and :392 hovers to
   #ffd (pale yellow). Keep striping - it helps scanning a dense queue - but
   make it a neutral tint, and make hover consistent. */
table.list tbody tr:nth-child(2n+1) td {
  background-color: var(--a-inset) !important;
}
table.list tbody tr:hover td,
table.list tbody tr:nth-child(2n+1):hover td {
  background-color: var(--a-accent-soft) !important;
}

/* The queue table carries a hardcoded width="940" attribute */
table.list.queue, table.list.tickets { width: 100% !important; }

/* Bootstrap 3 contextual panels colour the agent ticket view cyan and green
   (bootstrap.min.css: panel-info #bce8f1, panel-success #d6e9c6). Neutralise
   so the ticket screen reads as one surface. */
.panel, .panel-info, .panel-success, .panel-default, .panel-warning {
  border-color: var(--a-border) !important;
  border-radius: var(--a-r) !important;
  box-shadow: var(--a-shadow) !important;
  background: var(--a-surface) !important;
}
.panel > .panel-heading,
.panel-info > .panel-heading,
.panel-success > .panel-heading {
  background: var(--a-inset) !important;
  background-image: none !important;
  border-color: var(--a-border) !important;
  color: var(--a-text) !important;
}
.panel-body { background: var(--a-surface) !important; }

/* The ticket-view info tables sit inside those panels */
table.ticket_info > tbody > tr > td,
table.ticket_info > tbody > tr > th {
  border-color: var(--a-border) !important;
  background-color: transparent !important;
}
table.ticket_info > tbody > tr:nth-child(2n+1) > td,
table.ticket_info > tbody > tr:nth-child(2n+1) > th {
  background-color: var(--a-inset) !important;
}

/* Nav dropdowns.
   custom.css:54 paints every direct child link solid #0584f2 and :460 forces
   white text on .tickets-menu links. In the menu markup
   (navigation-staff.tmpl.php:23) the DIRECT `> li > a` children are queue
   GROUP headers and the nested `ul > li > a` are the entries beneath them.
   Filled blue bars for the headers read as a 2010 admin panel, so treat them
   as quiet section labels instead and let the entries be ordinary rows. */
.dropdown-menu {
  background-color: var(--a-surface) !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r) !important;
  box-shadow: var(--a-shadow-lg) !important;
  padding: 6px !important;
  min-width: 232px !important;
}

/* Group / section headers - a tinted strip so each group is a visible block
   rather than a run of text at slightly different weights. */
.tickets-menu > li > a,
.dropdown-menu > li > a {
  background-color: var(--a-thead) !important;
  background-image: none !important;
  color: var(--a-neutral) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 6px 10px !important;
  margin-bottom: 3px;
  border-radius: var(--a-r-sm);
}
.tickets-menu > li + li > a { margin-top: 6px; }
.tickets-menu > li > a:hover,
.dropdown-menu > li > a:hover {
  background-color: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
}

/* Entries under a header */
.tickets-menu ul,
.dropdown-menu ul {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.tickets-menu ul li a,
.dropdown-menu ul li a {
  display: block;
  background-color: transparent !important;
  color: var(--a-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 10px !important;
  border-radius: var(--a-r-sm);
}
.tickets-menu ul li a:hover,
.dropdown-menu ul li a:hover {
  background-color: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
}
.tickets-menu ul li a.active,
.dropdown-menu ul li a.active {
  background-color: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
  font-weight: 600 !important;
}

/* "Add personal queue" style affordances read as quiet actions */
.tickets-menu ul li a[href*="add"],
.tickets-menu ul li a[href*="create"] { color: var(--a-muted) !important; }

/* --------------------------------------------------------------------------
   The queue tree proper.
   Markup comes from templates/queue-navigation.tmpl.php and
   queue-savedsearches-nav.tmpl.php (emitted via callables registered in
   scp/tickets.php:471). Target those real classes rather than generic
   dropdown selectors. Nothing here touches position/display - scp.js and the
   theme control when .customQ-dropdown is shown.
   -------------------------------------------------------------------------- */

.tickets-menu > li.top-queue > a.Ticket,
.tickets-menu > li.primary-only > a.Ticket {
  display: block;
  background-color: transparent !important;
  color: var(--a-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 10px !important;
  border-radius: var(--a-r-sm);
}
.tickets-menu > li.top-queue > a.Ticket:hover,
.tickets-menu > li.primary-only > a.Ticket:hover {
  background-color: var(--a-surface-2) !important;
  color: var(--a-text) !important;
}
/* Active queue: a quiet left rail, not a blue fill. A filled accent block on a
   permanently-active row reads as a button you can press. Weight + rail carry
   the state without shouting. */
.tickets-menu > li.top-queue.active > a.Ticket,
.tickets-menu > li.top-queue.child.active > a.Ticket,
.tickets-menu > li.primary-only.active > a.Ticket {
  background-color: var(--a-surface-2) !important;
  color: var(--a-text) !important;
  font-weight: 700 !important;
  box-shadow: inset 2px 0 0 var(--a-accent);
}
/* the little disclosure caret */
.tickets-menu > li > a.Ticket > i.icon-sort-down {
  color: var(--a-subtle) !important;
  font-size: 11px;
  margin-top: 3px;
}

/* Counts sit quietly at the right of a row */
.tickets-menu .queue-count,
.tickets-menu #queue-count-bucket {
  color: var(--a-muted) !important;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* The flyout panel of child queues */
.customQ-dropdown {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r) !important;
  box-shadow: var(--a-shadow-lg) !important;
  padding: 6px !important;
}
.customQ-dropdown ul.scroll-height {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.customQ-dropdown li > a {
  display: block;
  background-color: transparent !important;
  color: var(--a-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 10px !important;
  border-radius: var(--a-r-sm);
}
.customQ-dropdown li > a:hover {
  background-color: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
}
.customQ-dropdown li > a.active {
  background-color: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
  font-weight: 600 !important;
}
.customQ-dropdown h4 {
  color: var(--a-neutral) !important;
  background: var(--a-thead);
  border-radius: var(--a-r-sm);
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 6px 0 4px;
  padding: 5px 10px;
}
/* separator before personal queues */
.customQ-dropdown li.personalQ {
  height: 1px;
  background: var(--a-border);
  margin: 6px 4px;
  padding: 0;
  list-style: none;
}
/* sticky "Add personal queue" action */
.customQ-dropdown .add-queue {
  border-top: 1px solid var(--a-border);
  margin-top: 6px;
  padding-top: 4px;
}
.customQ-dropdown .add-queue a {
  display: block;
  color: var(--a-muted) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 7px 10px !important;
  border-radius: var(--a-r-sm);
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}
.customQ-dropdown .add-queue a:hover {
  background: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
}
.customQ-dropdown .add-queue i.green,
.customQ-dropdown .add-queue i.icon-plus-sign { color: var(--a-accent) !important; }

/* --------------------------------------------------------------------------
   Counts inside the flyout.

   custom.css:470 sets `.customQ-dropdown .queue-count { position:absolute;
   right:0 }`. An absolutely positioned box resolves against the padding box of
   its nearest POSITIONED ancestor - and the <li> is static, so `right:0` climbs
   past every row and lands on the inner edge of the panel border, ignoring the
   panel's own padding. That is why the numbers sit on the border.

   Give each row `position:relative` so `right` resolves per-row, then inset it.
   The markup puts the count span BEFORE the <a> (queue-navigation.tmpl.php:31,
   queue-subnavigation.tmpl.php:14), so the anchor also needs room reserved on
   the right or long queue names slide under the number.
   -------------------------------------------------------------------------- */
.customQ-dropdown ul li { position: relative; }

.customQ-dropdown .queue-count {
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%);
  padding: 0 !important;
  margin: 0 !important;
  color: var(--a-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* scp.css:453 paints these orange and :458 turns them white on hover. */
.customQ-dropdown li:not(.personalQ) > span.queue-count,
.customQ-dropdown li > span.queue-count,
.customQ-dropdown li:hover > span.queue-count {
  color: var(--a-muted) !important;
}
.customQ-dropdown li > span.queue-count.disabled { color: var(--a-subtle) !important; }

/* reserve the gutter the absolute count occupies */
.customQ-dropdown li > a,
.customQ-dropdown ul li > a { padding-right: 52px !important; }

/* The user menu on the far right is a plain dropdown, not a queue tree */
.navbar-right .dropdown-menu > li > a {
  color: var(--a-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 7px 10px !important;
}
.navbar-right .dropdown-menu > li > a:hover {
  background-color: var(--a-accent-soft) !important;
  color: var(--a-accent) !important;
}

/* Defensive: the menu was already drawing behind table cells before this
   reskin (nothing here sets z-index or position). Bootstrap gives
   .dropdown-menu z-index:1000 while custom.css sprays 9999 on several
   elements. Lift the menu above them and guarantee it is opaque. */
.navbar .dropdown-menu, .tickets-menu { z-index: 10000 !important; }

/* ==========================================================================
   Agent ticket view
   Styled by real class, not rewritten: ticket-view.inc.php is 1433 lines with
   76 element ids, 8 inline onclick handlers and 7 data-dropdown menus driving
   status change, transfer, ban-email, merge/link, inline edit and the tasks
   tab. Restyling is safe; re-marking it up without an agent login to test
   against is not.
   ========================================================================== */

/* Ticket number + subject header */
.titlea h2 {
  background: transparent !important;
  color: var(--a-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  width: auto !important;
}
.titlea h2 a { color: var(--a-muted) !important; text-decoration: none; }
.titlea h2 a:hover { color: var(--a-accent) !important; }

.tixTitle { border: 0 !important; margin-bottom: 4px; }
.tixTitle h3 {
  color: var(--a-text) !important;
  font-size: 21px !important;
  font-weight: 660 !important;
  letter-spacing: -.015em;
  margin: 2px 0 0 !important;
  line-height: 1.3;
}
.has_bottom_border {
  border-bottom: 1px solid var(--a-border) !important;
  padding-bottom: 12px !important;
}

/* The four info panels */
.ticket-view .panel { margin-bottom: 16px !important; height: auto !important; }
.ticket-view .panel-body { padding: 0 !important; }

/* Their inner tables were narrower than the panel, leaving a white gap on
   the right of e.g. the "Assigned To" card. */
.ticket-view .panel table.table,
.panel table.ticket_info {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  table-layout: fixed;
}
.ticket-view .panel table.table > tbody > tr > th,
.ticket-view .panel table.table > tbody > tr > td {
  border: 0 !important;
  border-bottom: 1px solid var(--a-border) !important;
  padding: 9px 14px !important;
  font-size: 13px;
  vertical-align: top;
  background: transparent !important;
}
.ticket-view .panel table.table > tbody > tr:last-child > th,
.ticket-view .panel table.table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}
.ticket-view .panel table.table > tbody > tr > th {
  color: var(--a-muted) !important;
  font-weight: 550 !important;
  width: 38% !important;
  white-space: nowrap;
}
.ticket-view .panel table.table > tbody > tr > td {
  color: var(--a-text) !important;
  word-break: break-word;
}
/* kill the pale-blue zebra inside these cards */
.ticket-view .panel table.table-striped > tbody > tr:nth-of-type(odd) > td,
.ticket-view .panel table.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--a-inset) !important;
}

/* Custom-data panel */
table.ticket_info.custom-data > tbody > tr > th {
  background: var(--a-inset) !important;
  color: var(--a-muted) !important;
  font-weight: 650 !important;
  border-color: var(--a-border) !important;
}
table.ticket_info.custom-data > tbody > tr > td {
  border-color: var(--a-border) !important;
  color: var(--a-text) !important;
}

/* Response tabs under the thread */
ul.tabs#response-tabs { border-bottom: 1px solid var(--a-border) !important; }

/* Toolbar action buttons at the top right of the ticket */
.action-button.span-a, .post-response.action-button {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-border-strong) !important;
  border-radius: var(--a-r-sm) !important;
  color: var(--a-muted) !important;
}
.action-button.span-a:hover, .post-response.action-button:hover {
  background: var(--a-accent-soft) !important;
  border-color: var(--a-accent-border) !important;
  color: var(--a-accent) !important;
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  #nav, #sub_nav, .buttons, .action-button, #header { display: none !important; }
  #content { border: 0 !important; box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   AI draft notes  (posted by ai-bridge.php)

   NOT under .m-scope — the ticket view is still stock markup, so these have to
   be plain selectors.

   SPECIFICITY MATTERS HERE. modern-agent-dark.css carries
     html[data-theme="dark"] .thread-body * { color: var(--a-text) !important }
   which is (0,2,1). A two-class rule loses to it and the greys below would be
   silently flattened to body text in dark — which is exactly the bug that made
   the first version of this look right by accident. Every rule is therefore
   written through .thread-body .m-aidraft (0,3,0) so it wins in both themes.
   ========================================================================== */

.thread-body .m-aidraft { margin: 2px 0; }

.thread-body .m-aidraft .m-aidraft__reply {
  border-left: 3px solid var(--a-warning) !important;
  padding-left: 12px;
}

.thread-body .m-aidraft .m-aidraft__agent {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed var(--a-border-strong) !important;
}

.thread-body .m-aidraft .m-aidraft__label {
  margin: 0 0 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--a-subtle) !important;
}

.thread-body .m-aidraft .m-aidraft__reply .m-aidraft__text {
  color: var(--a-text) !important;
}
/* The agent half is deliberately quieter than the reply: it is scaffolding for
   the colleague, not the thing being sent. */
.thread-body .m-aidraft .m-aidraft__agent .m-aidraft__text {
  color: var(--a-muted) !important;
  font-size: 13px !important;
}

/* Make the whole entry legible as machine output at a glance, so nobody skims
   past the title and reads it as a colleague's note. */
.thread-entry.note .header a[href*="mailto"],
.thread-entry.note:has(.m-aidraft) .header {
  background: var(--a-warning-soft) !important;
}
.thread-entry.note:has(.m-aidraft) {
  border-left-color: var(--a-warning) !important;
}