/*
 * DIS branding — staff panel (/scp/). Polished to match the approved DIS mockup:
 * full-width, teal nav, pill queue tabs, rounded white content card, roomy search,
 * spacious rounded queue grid with frozen header + first columns.
 * Overrides scp/css/scp.css.
 */

/* ---- Page + full-width layout (was a fixed 960px column) ---- */
body {
  background: #eef1f3 !important;
}
#container {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
#header,
#nav,
#sub_nav,
#content {
  border-left: none !important;
  border-right: none !important;
}

/* ---- Brand header + logo ---- */
#header {
  height: 60px !important;
  background: #fff !important;
  box-shadow: none !important;
  border-bottom: 3px solid var(--dis-blue) !important;
}
/* Panel logo: <a id="logo"> inside #header (scoped so it never hits the login page). */
#header a#logo {
  height: 50px !important;
  padding: 5px 0 5px 18px !important;
  width: 240px !important;
  background: url('/assets/dis/dis-logo.svg') 18px center / auto 40px no-repeat !important;
}
#header a#logo img,
#header a#logo .valign-helper {
  display: none !important;
}
#header #info {
  padding-top: 20px !important;
  padding-right: 18px !important;
}
/* Staff login page (/scp/login.php): logo is a separate <h1 id="logo"> in a card. */
h1#logo a {
  display: inline-block !important;
  width: 190px !important;
  height: 54px !important;
  background: url('/assets/dis/dis-logo.svg') center / contain no-repeat !important;
}
h1#logo img {
  display: none !important;
}

/* ---- Primary nav (dark teal, roomy tabs) ---- */
#nav {
  background: var(--dis-teal) !important;
  height: auto !important;
  line-height: normal !important;
  padding: 0 14px !important;
  border-top: none !important;
  border-bottom: 2px solid var(--dis-blue) !important;
}
#nav .active,
#nav .inactive {
  height: 44px !important;
  line-height: 44px !important;
  min-width: 0 !important;
  padding: 0 20px !important;
  color: #cfe0e8 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
#nav li > a {
  color: #cfe0e8 !important;
}
#nav li.active,
#nav li.inactive:hover {
  background: #0a4a5e !important;
  box-shadow: none !important;
  border: none !important;
}
#nav li.active > a,
#nav li.inactive:hover > a {
  color: #fff !important;
}
/* Hover dropdowns sit just under the taller tabs, on a light surface */
#nav li.inactive > ul {
  top: 44px !important;
  background: #fff !important;
  border-radius: 0 0 8px 8px !important;
}
#nav li.inactive > ul a {
  color: var(--dis-ink) !important;
}

/* ---- Sub nav as pills ----
   The band is painted on the full-width <nav> parent. Base scp.css hardcodes
   .jb-overflowmenu to width:960px/height:35px (the seam on wide screens) and
   absolutely positions the ul over the nav via .jb-overflowmenu-helper-postion
   (ignoring the nav's padding) — undo all of that. */
#customQ_nav,
nav.jb-overflowmenu,
nav:has(> #sub_nav) {
  display: block !important;
  position: relative;
  width: auto !important;
  height: auto !important;
  background: #e9eff3 !important;
  border-bottom: 1px solid var(--dis-line) !important;
  padding: 14px 18px !important;
}
#sub_nav,
.jb-overflowmenu .jb-overflowmenu-helper-postion {
  position: static !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  width: auto !important;
}
/* The "more" overflow handle (shown only when pills don't fit): drop its gray
   boxed look; keep it anchored right. */
.jb-overflowmenu .jb-overflowmenu-container,
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle {
  background: transparent !important;
  border: none !important;
  color: #38505a !important;
}
/* Neutralize the base li.item box — its default padding and the white square
   (background + borders + padding shift) it paints on hover behind the pill. */
#sub_nav > li,
#customQ_nav .jb-overflowmenu-menu-primary li.item {
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sub_nav > li:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#sub_nav > li > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a {
  display: inline-block !important;
  padding: 7px 16px !important;
  border-radius: 18px !important;
  background-image: none !important;
  background-color: #fff !important;
  border: 1px solid var(--dis-line) !important;
  color: #38505a !important;
  font-weight: 600 !important;
}
#sub_nav > li > a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a {
  border-color: var(--dis-blue) !important;
  color: var(--dis-blue) !important;
  text-decoration: none !important;
}
#sub_nav > li.active > a,
#sub_nav > li.item.active > a,
#sub_nav a.active,
#sub_nav li.active > a {
  background-color: var(--dis-blue) !important;
  border-color: var(--dis-blue) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
#sub_nav > li.active > a i,
#sub_nav a.active i {
  color: #fff !important;
}

/* Sub-queue dropdown revealed on pill hover — make it a clean rounded menu
   (base only rounds the bottom corners and butts against the pill). */
#customQ_nav .customQ-dropdown,
.customQ-dropdown {
  top: calc(100% + 4px) !important;
  border-radius: 10px !important;
  border: 1px solid var(--dis-line) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14) !important;
  background: #fff !important;
  padding: 6px 0 !important;
  min-width: 190px !important;
}
/* Invisible bridge across the gap between the pill and the menu, so moving the
   mouse down doesn't leave the hover area (which would close the menu). */
.customQ-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.customQ-dropdown ul li > a,
.customQ-dropdown ul li > span {
  padding: 7px 16px !important;
  color: var(--dis-ink) !important;
}
.customQ-dropdown ul li:not(.personalQ):hover,
.customQ-dropdown ul li:hover > a {
  background: var(--dis-row-hover) !important;
  color: var(--dis-blue) !important;
}
.customQ-dropdown ul li:hover > span {
  color: var(--dis-blue) !important;
}
.customQ-dropdown li h4,
.customQ-dropdown li.top-level {
  background: #f4f7f9 !important;
  color: #64757d !important;
  padding: 5px 16px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
}

/* ---- Content as a rounded white card ---- */
#content {
  margin: 20px 16px 14px !important;
  padding: 4px 18px 18px !important;
  background: #fff !important;
  border: 1px solid var(--dis-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* ---- Search row: search box, [advanced] and Sort aligned on one line ----
   Base layout floats the Sort control in a hardcoded 25px-high box, leaving it
   hanging above the search field; flex centers everything on one axis. */
#basic_search {
  display: flex !important;
  align-items: center !important;
  padding: 14px 0 !important;
}
#basic_search form {
  order: 1;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin: 0 !important;
}
#basic_search .pull-right {
  order: 2;
  float: none !important;
  height: auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}
#basic_search .valign-helper {
  display: none !important;
}
/* Base .input.attached.focus draws a focus-ring outline around the whole
   wrapper (the input is autofocused) — that was the heavy dark border. */
#basic_search .attached.input.focus {
  outline: none !important;
}
#basic_search .attached.input {
  display: inline-flex !important;
  align-items: center !important;
  width: 480px !important;
  max-width: 70% !important;
  height: 40px !important;
  border: 1px solid var(--dis-line) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #fff !important;
}
#basic_search .attached.input input.basic-search {
  flex: 1 !important;
  width: auto !important;
  height: 38px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 6px 0 18px !important;
  font-size: 14px !important;
  background: transparent !important;
}
#basic_search .attached.input input.basic-search:focus {
  outline: none !important;
}
#basic_search .attached.input:focus-within {
  border-color: var(--dis-blue) !important;
}
#basic_search .attached.input button.attached.button {
  border: none !important;
  background: transparent !important;
  height: 38px !important;
  padding: 0 16px !important;
  color: var(--dis-teal) !important;
  box-shadow: none !important;
}

/* ---- Toolbar buttons (Sort, queue mass-action icons, ticket-view actions) ----
   Base .action-button/.button are 22px content-boxes with an inset-shadow border;
   normalize to one consistent rounded height so toolbars line up. */
.action-button,
.button {
  box-sizing: border-box !important;
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 12px !important;
  margin: 0 3px !important;
  background: #fff !important;
  border: 1px solid var(--dis-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #38505a !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
/* Keep the Sort control from being flex-squeezed onto two lines. */
#basic_search .pull-right {
  flex-shrink: 0;
}
/* Center icon + label inside the buttons; the floated caret (a leading
   <i class="pull-right"> in the markup) becomes an ordered flex item so it
   renders on the right instead of wrapping onto its own line. */
.action-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
}
.action-button > .pull-right,
.action-button i.pull-right {
  float: none !important;
  order: 9;
  margin-left: 2px;
}
.action-button:hover,
.action-button:active,
.button:hover {
  background: #fff !important;
  border-color: var(--dis-blue) !important;
  color: var(--dis-blue) !important;
  box-shadow: none !important;
}
.action-button.disabled,
.action-button.muted.disabled {
  opacity: 0.5;
}

/* ---- Queue title ---- */
#content .pull-left > a[href*="tickets.php"],
#content h2,
#content h3 {
  color: var(--dis-teal) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ---- Queue grid ---- */
table.list.queue.tickets {
  width: 100% !important;
}
table.list.queue.tickets thead th {
  background: var(--dis-teal) !important;
  color: #fff !important;
  border-color: #14536a !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* NB: the sort links carry class="1" (a digit); a `.1` selector is invalid CSS
   and would silently drop this whole rule, so match the anchor by element only. */
table.list.queue.tickets thead th a {
  color: #fff !important;
}
table.list.queue.tickets tbody td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
}
table.list.queue.tickets tbody tr:hover td {
  background: var(--dis-row-hover) !important;
}

/* ============================================================
   Excel-like frozen panes for the queue grid (dis.js wraps the
   table in .dis-grid-scroll and sets --dis-col1).
   ============================================================ */
.dis-grid-scroll {
  overflow: auto !important;
  border: 1px solid var(--dis-line);
  border-radius: 10px;
  position: relative;
}
.dis-grid-scroll > table.list.queue.tickets {
  margin: 0 !important;
}
/* Frozen header row */
.dis-grid-scroll thead th {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5;
}
/* Frozen first two columns (checkbox + Ticket number) */
.dis-grid-scroll tbody td:nth-child(1),
.dis-grid-scroll thead th:nth-child(1) {
  position: -webkit-sticky !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 4;
  background: #fff !important;
}
.dis-grid-scroll tbody td:nth-child(2),
.dis-grid-scroll thead th:nth-child(2) {
  position: -webkit-sticky !important;
  position: sticky !important;
  left: var(--dis-col1, 28px) !important;
  z-index: 4;
  background: #fff !important;
}
.dis-grid-scroll thead th:nth-child(1),
.dis-grid-scroll thead th:nth-child(2) {
  z-index: 6;
  background: var(--dis-teal) !important;
}
/* Frozen body cells track the row (stripe, then hover) so the left edge matches */
.dis-grid-scroll tbody tr:nth-child(2n+1) td:nth-child(1),
.dis-grid-scroll tbody tr:nth-child(2n+1) td:nth-child(2) {
  background: #f0faff !important;
}
.dis-grid-scroll tbody tr:hover td:nth-child(1),
.dis-grid-scroll tbody tr:hover td:nth-child(2) {
  background: var(--dis-row-hover) !important;
}

/* The row-preview popover attaches to <body>; keep it above the frozen columns. */
.tip_box {
  z-index: 1000 !important;
}