/*
 * osTicket SCP – Single Merged UI Stylesheet
 * Combines bootstrap5-theme.css (vars + base + components)
 * with all body.ost-modern-ui layout rules.
 * bootstrap5-theme.css dead-code sections 5-8 (legacy layout,
 * body:not(.ost-modern-ui) scoped) are omitted — SCP always
 * has body.ost-modern-ui so those rules never applied.
 */

/* ============================================================
   1. CSS Custom Properties – Light Theme (default)
   modern-ui.css values win on conflicts (SCP-specific palette).
   ============================================================ */
:root,
[data-bs-theme="light"] {
  /* Brand — palette: #355872 · #7AAACE · #9CD5FF · #F7F8F0 */
  --ost-primary:        #7AAACE;  /* medium blue — main interactive */
  --ost-primary-strong: #5a87aa;  /* ~15% darker, hover states */
  --ost-primary-dark:   #355872;  /* darkest, pressed / nav bg */
  --ost-accent:         #355872;  /* dark blue accent */

  /* Surfaces */
  --ost-bg:             #F7F8F0;  /* warm off-white page bg */
  --ost-surface-0:      #f1f2ea;  /* slightly deeper off-white */
  --ost-surface:        #ffffff;
  --ost-surface-1:      #ffffff;
  --ost-surface-2:      #edf5fd;  /* lightly blue-tinted (from #9CD5FF) */

  /* Borders */
  --ost-border:         #c4dae8;  /* desaturated light blue */
  --ost-border-strong:  #99bdd1;  /* muted medium blue */
  --ost-header-border:  #c4dae8;

  /* Text */
  --ost-text:           #2a4559;  /* derived from #355872, high contrast */
  --ost-muted:          #5b7f96;  /* lighter blue-gray */
  --ost-text-muted:     #6a8999;
  --ost-link:           #7AAACE;
  --ost-link-hover:     #355872;

  /* Navigation bar */
  --ost-nav-bg:         #355872;  /* dark blue */
  --ost-nav-text:       #b8d6ea;  /* desaturated light blue */
  --ost-nav-active-bg:  #7AAACE;  /* medium blue for active */
  --ost-nav-active-fg:  #ffffff;
  --ost-nav-hover-bg:   rgba(255,255,255,0.10);

  /* Header bar */
  --ost-header-bg:      #ffffff;

  /* Status alerts */
  --ost-error-bg:       #fff5f5;
  --ost-error-border:   #f5c2c7;
  --ost-error-text:     #842029;
  --ost-warn-bg:        #fffbec;
  --ost-warn-border:    #ffc107;
  --ost-warn-text:      #664d03;
  --ost-notice-bg:      #e5f3fb;  /* tinted with palette */
  --ost-notice-border:  #9CD5FF;  /* light blue */
  --ost-notice-text:    #355872;  /* dark blue */
  --ost-success-bg:     #d1e7dd;
  --ost-success-border: #a3cfbb;
  --ost-success-text:   #0f5132;

  /* Inputs */
  --ost-input-bg:       #ffffff;
  --ost-input-border:   #c4dae8;  /* match border */
  --ost-input-focus:    #9CD5FF;  /* light blue focus ring */
  --ost-input-text:     #2a4559;  /* match text */

  /* Shadows — tinted with dark palette hue */
  --ost-shadow-xs: 0 1px 2px rgba(53,88,114,.07);
  --ost-shadow-sm: 0 10px 25px rgba(53,88,114,.09);
  --ost-shadow-md: 0 20px 40px rgba(53,88,114,.11);
  --ost-shadow:    0 4px 12px rgba(53,88,114,.09), 0 2px 4px rgba(53,88,114,.05);

  /* Radius */
  --ost-radius:    6px;
  --ost-radius-sm: 10px;
  --ost-radius-md: 16px;
  --ost-radius-lg: 22px;

  /* Shell spacing */
  --ost-shell-pad-x: 22px;
  --ost-shell-pad-y: 16px;
}

/* ============================================================
   2. CSS Custom Properties – Dark Theme
   ============================================================ */
[data-bs-theme="dark"] {
  /* Brand — darkened palette */
  --ost-primary:        #7AAACE;
  --ost-primary-strong: #9CD5FF;  /* lighter on dark bg for hover */
  --ost-primary-dark:   #9CD5FF;
  --ost-accent:         #9CD5FF;

  /* Surfaces — very dark navy derived from #355872 hue */
  --ost-bg:             #141d26;
  --ost-surface-0:      #192330;
  --ost-surface:        #1e2c3a;
  --ost-surface-1:      #1e2c3a;
  --ost-surface-2:      #243444;

  /* Borders */
  --ost-border:         #2d435a;
  --ost-border-strong:  #3d5870;
  --ost-header-border:  #2d435a;

  /* Text */
  --ost-text:           #d0e8f5;  /* very light blue-white */
  --ost-muted:          #7aaece;  /* muted medium blue */
  --ost-text-muted:     #8aacbd;
  --ost-link:           #9CD5FF;
  --ost-link-hover:     #7AAACE;

  /* Navigation bar */
  --ost-nav-bg:         #1a2836;  /* very dark navy */
  --ost-nav-text:       #7aaece;
  --ost-nav-active-bg:  #7AAACE;
  --ost-nav-active-fg:  #ffffff;
  --ost-nav-hover-bg:   rgba(255,255,255,0.07);

  /* Header bar */
  --ost-header-bg:      #1e2c3a;

  /* Status alerts */
  --ost-error-bg:       #2d1b1e;
  --ost-error-border:   #6f1d28;
  --ost-error-text:     #fca5a5;
  --ost-warn-bg:        #2a1e08;
  --ost-warn-border:    #854d0e;
  --ost-warn-text:      #fcd34d;
  --ost-notice-bg:      #0e2236;
  --ost-notice-border:  #7AAACE;
  --ost-notice-text:    #9CD5FF;
  --ost-success-bg:     #052e16;
  --ost-success-border: #166534;
  --ost-success-text:   #86efac;

  /* Inputs */
  --ost-input-bg:       #192330;
  --ost-input-border:   #3d5870;
  --ost-input-focus:    #7AAACE;
  --ost-input-text:     #d0e8f5;

  /* Shadows */
  --ost-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --ost-shadow-sm: 0 1px 4px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --ost-shadow-md: 0 8px 20px rgba(0,0,0,.5);
  --ost-shadow:    0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
}

/* ============================================================
   3. Global – Font & Base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body,
input, select, textarea, button {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system,
               BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--ost-bg) !important;
  color: var(--ost-text) !important;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}

a {
  color: var(--ost-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--ost-link-hover);
  text-decoration: underline;
}

/* ============================================================
   4. Page Container
   ============================================================ */
#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Float-clear divs are not needed in flex column layout */
#header + .clear,
#container > .clear {
  display: none !important;
}

/* ============================================================
   5. body.ost-modern-ui — SCP Layout
   ============================================================ */

body.ost-modern-ui {
  background:
    radial-gradient(circle at top right, rgba(122,170,206,0.08), transparent 24%),
    linear-gradient(180deg, #F7F8F0 0%, #f1f2ea 100%) !important;
  color: var(--ost-text) !important;
}

body.ost-modern-ui a {
  color: var(--ost-primary-strong);
}

body.ost-modern-ui #container {
  width: 100%;
  padding: 18px 18px 0;
  background: transparent !important;  /* let the body gradient show through */
}

body.ost-modern-ui #nav,
body.ost-modern-ui #nav ul,
body.ost-modern-ui #nav li,
body.ost-modern-ui #sub_nav,
body.ost-modern-ui .ost-subnav-list,
body.ost-modern-ui .ost-nav-menu {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

body.ost-modern-ui #header,
body.ost-modern-ui #nav,
body.ost-modern-ui #sub_nav,
body.ost-modern-ui #content,
body.ost-modern-ui #footer {
  border-left: 1px solid var(--ost-border);
  border-right: 1px solid var(--ost-border);
}

body.ost-modern-ui #header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px;
  min-height: 88px !important;
  height: auto !important;
  padding: var(--ost-shell-pad-y) var(--ost-shell-pad-x) !important;
  border-top: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-lg) var(--ost-radius-lg) 0 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--ost-shadow-sm) !important;
  position: relative !important;  /* override sticky so it scrolls with page */
}

body.ost-modern-ui #header .pull-right,
body.ost-modern-ui #header .pull-left,
body.ost-modern-ui #nav .pull-right,
body.ost-modern-ui #nav .pull-left {
  float: none;
}

body.ost-modern-ui #logo {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 360px;
  padding: 0;
  order: -1;   /* DOM: info first, logo second — reorder so logo is left */
}

body.ost-modern-ui #header p {
  margin: 0;
  padding: 10px 14px;
  max-width: none;
  border: 1px solid var(--ost-border);
  border-radius: 999px;
  background: var(--ost-surface-2);
  color: var(--ost-muted);
  order: 1;    /* push info to right */
}

body.ost-modern-ui #info {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  text-align: right;
}

body.ost-modern-ui #nav {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px;
  min-height: 54px !important;
  height: auto !important;
  padding: 10px var(--ost-shell-pad-x) 0 !important;
  background: var(--ost-nav-bg) !important;
  background-color: var(--ost-nav-bg) !important;
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;   /* MUST be visible — overflow:auto clips absolute dropdowns */
  position: relative;
  z-index: 300;
}

body.ost-modern-ui #nav li {
  display: flex;
  align-items: stretch;
  margin: 0;
  list-style: none;
}

/* Nav tab items — override scp.css inline-block + height:26px */
body.ost-modern-ui #nav .active,
body.ost-modern-ui #nav .inactive {
  display: flex !important;         /* override scp.css inline-block */
  align-items: stretch !important;
  height: auto !important;          /* override scp.css height:26px */
  min-height: 44px;
  min-width: 104px;
  padding: 0 !important;
  position: relative !important;    /* anchor for absolute dropdown */
  border: 1px solid transparent;
  border-radius: 14px 14px 0 0;
  box-shadow: none !important;      /* kill scp.css hover shadow */
  background-color: transparent !important;
}

body.ost-modern-ui #nav li.active {
  border-color: var(--ost-border) !important;
  background: var(--ost-surface-1) !important;
}

body.ost-modern-ui #nav li.inactive:hover {
  border-color: var(--ost-border) !important;
  background: var(--ost-nav-hover-bg) !important;
}

/* Top-level nav links */
body.ost-modern-ui #nav > li > a,
body.ost-modern-ui #nav > li.active > a,
body.ost-modern-ui #nav > li.inactive > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: auto !important;
  min-height: 44px;
  padding: 0 14px !important;
  color: var(--ost-nav-text) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
}

body.ost-modern-ui #nav > li.active > a {
  color: var(--ost-primary-dark) !important;
  font-weight: 600 !important;
}

body.ost-modern-ui #nav > li.inactive > a:hover,
body.ost-modern-ui #nav > li.inactive:hover > a {
  color: var(--ost-nav-active-fg) !important;
  text-decoration: none !important;
}

/* Dropdown panel — modern card style */
body.ost-modern-ui #nav li.inactive > ul {
  display: block !important;
  position: absolute !important;
  top: 100% !important;             /* flush below the full tab height */
  left: 0 !important;
  min-width: 210px !important;
  width: auto !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: 1030 !important;
  background: var(--ost-surface-1) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 8px 24px rgba(17, 37, 63, 0.12) !important;
  transition: visibility 0s linear 0.15s, opacity 0.15s ease !important;
}

body.ost-modern-ui #nav li.inactive:hover > ul {
  visibility: visible !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
}

/* Dropdown list items — reset scp.css */
body.ost-modern-ui #nav .inactive li,
body.ost-modern-ui #nav li.inactive ul li {
  display: block !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: static !important;
}

/* Dropdown links */
body.ost-modern-ui #nav .inactive li a,
body.ost-modern-ui #nav li.inactive ul li a {
  display: block !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 9px 16px !important;     /* symmetric — no icon gap */
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--ost-text) !important;
  background: transparent !important;
  background-image: none !important;
  background-position: unset !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}

body.ost-modern-ui #nav .inactive li a:hover,
body.ost-modern-ui #nav li.inactive ul li a:hover {
  background: var(--ost-surface-2) !important;
  color: var(--ost-primary) !important;
  text-decoration: none !important;
}

body.ost-modern-ui .ost-nav-link,
body.ost-modern-ui .ost-subnav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  width: 100%;
  line-height: 1.2;
}

body.ost-modern-ui .ost-nav-menu {
  padding: 10px 8px;
  border: 1px solid var(--ost-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--ost-shadow-md);
}

body.ost-modern-ui .ost-nav-menu-item + .ost-nav-menu-item {
  margin-top: 4px;
}

body.ost-modern-ui .ost-nav-menu-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 10px;
}

body.ost-modern-ui .ost-nav-menu-link:hover {
  background: rgba(37, 99, 235, 0.08);
  text-decoration: none;
}

body.ost-modern-ui #sub_nav {
  height: auto !important;          /* override scp.css height:26px */
  min-height: 48px;
  padding: 0 var(--ost-shell-pad-x) !important;
  background: var(--ost-surface-0) !important;
  border-bottom: 1px solid var(--ost-border) !important;
  overflow: visible !important;
  position: relative;
  z-index: 200;                     /* above #content so nothing covers it */
}

/* Bootstrap padding-left reset on sub_nav lists */
body.ost-modern-ui #sub_nav ul,
body.ost-modern-ui ul#sub_nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  min-height: 48px;
}

/* Override scp.css display:inline on sub_nav > li */
body.ost-modern-ui #sub_nav > li,
body.ost-modern-ui ul#sub_nav > li {
  display: inline-flex !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sub nav links */
body.ost-modern-ui ul#sub_nav li a,
body.ost-modern-ui #sub_nav li a,
body.ost-modern-ui ul#sub_nav a,
body.ost-modern-ui #sub_nav a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  height: auto !important;
  line-height: normal !important;
  color: var(--ost-muted) !important;
  font-size: 0.8125rem !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 4px 4px 0 0;
  background-image: none !important;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
body.ost-modern-ui ul#sub_nav li a:hover,
body.ost-modern-ui #sub_nav li a:hover,
body.ost-modern-ui ul#sub_nav a:hover,
body.ost-modern-ui #sub_nav a:hover {
  color: var(--ost-primary) !important;
  background-color: var(--ost-surface-2) !important;
  text-decoration: none !important;
}
body.ost-modern-ui ul#sub_nav li a.active,
body.ost-modern-ui #sub_nav li a.active,
body.ost-modern-ui ul#sub_nav a.active,
body.ost-modern-ui #sub_nav a.active,
body.ost-modern-ui ul#sub_nav li a[class*="active"],
body.ost-modern-ui #sub_nav li a[class*="active"] {
  color: var(--ost-primary) !important;
  /*border-bottom-color: var(--ost-primary) !important;*/
  font-weight: 600 !important;
}

body.ost-modern-ui .ost-subnav-list {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0;
}

body.ost-modern-ui .ost-subnav-item {
  margin: 0;
  list-style: none;
}

body.ost-modern-ui .ost-subnav-link {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
}

body.ost-modern-ui .ost-subnav-link.active,
body.ost-modern-ui .ost-subnav-link:hover {
  background: var(--ost-surface-2);
  border-color: var(--ost-border);
  text-decoration: none;
}

body.ost-modern-ui #basic_search,
body.ost-modern-ui .ost-search-bar {
  margin: 0 0 18px !important;   /* scp.css sets margin:-10px 0 which pulls this card up */
  padding: 14px 16px;
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,242,234,0.98));
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-search-input-wrap,
body.ost-modern-ui .attached.input {
  display: inline-flex !important;  /* scp.css sets display:inline-block */
  align-items: stretch;
  height: auto !important;          /* scp.css sets height:24px */
  position: relative;               /* anchor for the typeahead dropdown */
  border: 1px solid var(--ost-border-strong);
  border-radius: 12px;
  background: #fff;
  /* overflow:hidden intentionally omitted — typeahead appends ul.dropdown-menu
     inside this element; overflow:hidden would clip and hide that dropdown */
}

body.ost-modern-ui .attached.input .basic-search,
body.ost-modern-ui .attached.input input[type="text"] {
  border: 0 !important;            /* global input rule has border !important — must override */
  border-radius: 12px 0 0 12px !important;  /* match left side of container */
  height: auto !important;          /* scp.css .input.attached input { height:100% } = 24px */
  min-height: 42px;
  padding: 10px 12px !important;
  background-color: #fff !important;
  box-shadow: none !important;      /* kill the focus ring drawn on the wrong element */
}

body.ost-modern-ui .attached.input .attached.button,
body.ost-modern-ui .attached.input button {
  border: 0 !important;
  border-left: 1px solid var(--ost-border) !important;
  border-radius: 0 12px 12px 0 !important;  /* match right side of container */
  height: auto !important;          /* scp.css .input.attached .button.attached { height:100% } = 24px */
  min-width: 46px;
  background: var(--ost-surface-2) !important;
  color: var(--ost-muted) !important;  /* global button.button sets color:#fff !important */
  flex-shrink: 0;
}

body.ost-modern-ui .ost-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

body.ost-modern-ui .ost-record-list,
body.ost-modern-ui table.list,
body.ost-modern-ui table.queue.tickets {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ost-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--ost-shadow-sm);
  overflow: hidden;
}

body.ost-modern-ui table.list thead th,
body.ost-modern-ui .ost-record-list thead th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ost-border);
  background: var(--ost-surface-2);
  color: var(--ost-text);
  font-weight: 700;
}

body.ost-modern-ui table.list tbody td,
body.ost-modern-ui table.list tbody th,
body.ost-modern-ui .ost-record-list tbody td,
body.ost-modern-ui .ost-record-list tbody th {
  padding: 12px 14px;
  border-bottom: 1px solid #edf2f8;
  vertical-align: middle;
}

body.ost-modern-ui table.list tbody tr:nth-child(even),
body.ost-modern-ui .ost-record-list tbody tr:nth-child(even) {
  background: rgba(37, 99, 235, 0.025);
}

body.ost-modern-ui table.list tbody tr:hover,
body.ost-modern-ui .ost-record-list tbody tr:hover {
  background: rgba(37, 99, 235, 0.06);
}

body.ost-modern-ui .ost-list-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--ost-muted);
}

/* Sticky bars — replace JS-driven position:fixed with CSS sticky.
   Problem: JS calculates offset().top at pjax:end but PJAX preserves the
   previous page's scroll position. On task.php the bar is the first content
   element (~200px from top). If scroll was already 300px the bar immediately
   gets .fixed before the user scrolls at all.
   CSS sticky keeps the element in document flow initially and only pins it
   to the viewport top when the user actually scrolls past it.              */
body.ost-modern-ui div.sticky.bar:not(.stop) {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;  /* below #sub_nav(200) and #nav(300) so their dropdowns show above */
  /* Ensure bar is visible while pinned (task-view bar has no .opaque) */
  background: var(--ost-surface) !important;
  border-bottom: 1px solid var(--ost-border);
}
/* Neutralise JS: scp.css .sticky.bar.fixed { position:fixed; left:0; width:100%;
   z-index:6 } would override sticky and drop z-index to 6.
   JS only adds .fixed to :not(.stop) bars (see scp.js line 418).            */
body.ost-modern-ui div.sticky.bar.fixed:not(.stop) {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: auto !important;
  z-index: 100 !important;  /* scp.css sets z-index:6 on .fixed — reinforce */
}
/* JS inserts a .sticky.placeholder div before the bar and sets its height
   when .fixed is added. With position:sticky the bar stays in normal flow,
   so the placeholder creates duplicate vertical space — hide it.           */
body.ost-modern-ui div.sticky.placeholder {
  display: none !important;
}

/* ---- Flex layout for ALL sticky.bar .content ----
   task-view has no .opaque class, so the previous rule only covered .opaque.
   Without flex, block children stack vertically and icons appear below each
   other instead of side-by-side.                                           */
body.ost-modern-ui .sticky.bar .content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  /* Clear any JS-set inline width that becomes stale after resize */
  width: auto !important;
}

body.ost-modern-ui .sticky.bar.opaque {
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,242,234,0.98)) !important;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .sticky.bar.opaque .content {
  padding: 14px 16px !important;
}

/* The JS-appended scroll-up / sticky.only elements rely on the .fixed class
   mechanism (JS adds .fixed when bar passes viewport top). With CSS sticky,
   .fixed is either absent or added prematurely (PJAX race), so the existing
   scp.css rule `.sticky.bar:not(.fixed) .sticky.only { display:none }` is
   unreliable. Hide these elements unconditionally in modern UI — not needed
   with CSS position:sticky.                                                */
body.ost-modern-ui .sticky.bar .sticky.only,
body.ost-modern-ui .sticky.bar .scroll-up {
  display: none !important;
}

/* ticket-view.inc.php (and similar) puts the action-buttons div (.pull-right /
   .flush-right) FIRST in the DOM so float:right works in the legacy layout.
   In flex that DOM order dictates visual order. Use explicit order values so
   the breadcrumb/title always appears on the left regardless of DOM order.   */
body.ost-modern-ui .sticky.bar .content > .flush-left,
body.ost-modern-ui .sticky.bar .content > .pull-left {
  order: 1;
}
body.ost-modern-ui .sticky.bar .content > .flush-right,
body.ost-modern-ui .sticky.bar .content > .pull-right {
  order: 2;
}

body.ost-modern-ui #content {
  margin: 0;
  padding: 24px var(--ost-shell-pad-x) 28px !important;
  background: var(--ost-surface-1) !important;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-dashboard-page {
  display: grid;
  gap: 20px;
}

body.ost-modern-ui .ost-toolbar-card,
body.ost-modern-ui .ost-stats-card,
body.ost-modern-ui .ost-chart-card {
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241,242,234,0.98));
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-toolbar-card,
body.ost-modern-ui .ost-stats-card {
  padding: 18px 20px;
}

body.ost-modern-ui .ost-chart-card {
  padding: 18px;
  overflow: hidden;
}

body.ost-modern-ui .ost-dashboard-toolbar-inner {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

body.ost-modern-ui .ost-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  color: var(--ost-muted);
  font-weight: 600;
}

body.ost-modern-ui .ost-dashboard-input,
body.ost-modern-ui .ost-dashboard-select,
body.ost-modern-ui input[type="text"],
body.ost-modern-ui input[type="password"],
body.ost-modern-ui input[type="search"],
body.ost-modern-ui select,
body.ost-modern-ui textarea {
  border: 1px solid var(--ost-border-strong);
  border-radius: 10px;
}

body.ost-modern-ui .ost-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

body.ost-modern-ui .ost-tab-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--ost-border);
  border-radius: 999px;
  background: var(--ost-surface-2);
}

body.ost-modern-ui .ost-tabs > li.active .ost-tab-link {
  color: #fff;
  border-color: var(--ost-primary);
  background: linear-gradient(135deg, var(--ost-primary), var(--ost-primary-strong));
}

body.ost-modern-ui .dashboard-stats.table,
body.ost-modern-ui .ost-form-table,
body.ost-modern-ui table.form_table,
body.ost-modern-ui table.settings_table,
body.ost-modern-ui table.table.two-column {
  width: 100% !important;
  border: 1px solid var(--ost-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .dashboard-stats.table th,
body.ost-modern-ui .dashboard-stats.table td,
body.ost-modern-ui .ost-form-table td,
body.ost-modern-ui .ost-form-table th,
body.ost-modern-ui table.form_table td,
body.ost-modern-ui table.form_table th,
body.ost-modern-ui table.settings_table td,
body.ost-modern-ui table.settings_table th {
  padding: 12px 14px;
}

body.ost-modern-ui .ost-form-actions {
  margin-top: 18px;
}

body.ost-modern-ui .ost-ticket-view {
  display: grid;
  gap: 18px;
}

body.ost-modern-ui .ost-detail-view {
  display: grid;
  gap: 18px;
}

body.ost-modern-ui .ost-detail-header {
  width: 100% !important;
}

body.ost-modern-ui .ost-detail-card {
  width: 100% !important;
  border: 1px solid var(--ost-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-detail-card > tbody > tr > td {
  padding: 0;
  vertical-align: top;
}

body.ost-modern-ui .ost-detail-card > tbody > tr > td + td {
  border-left: 1px solid var(--ost-border);
}

body.ost-modern-ui .ost-detail-meta-table {
  width: 100%;
}

body.ost-modern-ui .ost-detail-meta-table th,
body.ost-modern-ui .ost-detail-meta-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #edf2f8;
}

body.ost-modern-ui .ost-detail-meta-table th {
  width: 150px;
  background: var(--ost-surface-2);
  color: var(--ost-text);
  font-weight: 700;
}

body.ost-modern-ui .ost-detail-tabs-container {
  display: grid;
  gap: 16px;
}

body.ost-modern-ui .ost-detail-panel {
  padding: 18px;
  border: 1px solid var(--ost-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-entity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--ost-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,242,234,0.98));
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-detail-data-table {
  width: 100%;
  border: 1px solid var(--ost-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-detail-data-table th,
body.ost-modern-ui .ost-detail-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #edf2f8;
}

body.ost-modern-ui .ost-detail-data-table th {
  background: var(--ost-surface-2);
  color: var(--ost-text);
}

body.ost-modern-ui .ost-notes-list {
  display: grid;
  gap: 14px;
}

body.ost-modern-ui .ost-note-card {
  border: 1px solid var(--ost-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,242,234,0.98));
  box-shadow: var(--ost-shadow-sm);
  overflow: hidden;
}

body.ost-modern-ui .ost-note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf2f8;
  background: var(--ost-surface-2);
}

body.ost-modern-ui .ost-note-body {
  padding: 14px;
}

body.ost-modern-ui .ost-note-create-box {
  margin-top: 14px;
}

body.ost-modern-ui .ost-note-create .body {
  padding: 16px 18px;
}

body.ost-modern-ui .ost-user-preview,
body.ost-modern-ui .ost-user-edit-form {
  margin-top: 10px;
}

body.ost-modern-ui .ost-ticket-toolbar {
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,242,234,0.98));
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-ticket-toolbar .content {
  padding: 16px 18px;
}

body.ost-modern-ui .ost-ticket-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.ost-modern-ui .ost-ticket-subject {
  margin: 0;
  padding: 4px 2px 0;
  border-bottom: 0;
}

body.ost-modern-ui .ost-ticket-subject h3 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.25;
}

body.ost-modern-ui .ticket_info.ost-ticket-card {
  width: 100% !important;
  border: 1px solid var(--ost-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ticket_info.ost-ticket-card > tbody > tr > td {
  padding: 0;
  vertical-align: top;
}

body.ost-modern-ui .ticket_info.ost-ticket-card > tbody > tr > td + td {
  border-left: 1px solid var(--ost-border);
}

body.ost-modern-ui .ost-ticket-meta-table {
  width: 100%;
}

body.ost-modern-ui .ost-ticket-meta-table th,
body.ost-modern-ui .ost-ticket-meta-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #edf2f8;
}

body.ost-modern-ui .ost-ticket-meta-table th {
  width: 130px;
  background: var(--ost-surface-2);
  color: var(--ost-text);
  font-weight: 700;
}

body.ost-modern-ui .ost-ticket-custom-data thead th {
  padding: 14px 16px;
  background: var(--ost-surface-2);
  color: var(--ost-text);
  font-weight: 700;
}

body.ost-modern-ui .ost-ticket-custom-data tbody td {
  padding: 12px 16px;
  border-top: 1px solid #edf2f8;
}

body.ost-modern-ui .ost-ticket-tabs-container {
  display: grid;
  gap: 16px;
}

body.ost-modern-ui .ost-ticket-thread {
  padding: 18px;
  border: 1px solid var(--ost-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui #ticketThread {
  border: 1px solid #edf2f8;
  border-radius: 14px;
  overflow: hidden;
  background: #fbfdff;
}

body.ost-modern-ui .ost-ticket-compose {
  border: 1px solid var(--ost-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,242,234,0.98));
  box-shadow: var(--ost-shadow-sm);
}

body.ost-modern-ui .ost-ticket-compose .ost-response-tabs {
  margin: 0;
  padding: 16px 16px 0;
}

body.ost-modern-ui .ost-compose-form {
  padding: 14px 16px 18px;
}

body.ost-modern-ui .ost-compose-table td,
body.ost-modern-ui .ost-compose-table th {
  padding: 10px 12px;
  vertical-align: top;
}

body.ost-modern-ui .ost-compose-table select,
body.ost-modern-ui .ost-compose-table input[type="text"],
body.ost-modern-ui .ost-compose-table textarea {
  width: 100%;
  max-width: 100%;
}

body.ost-modern-ui .ost-compose-form > p {
  margin: 10px 0 0;
}

body.ost-modern-ui #footer {
  padding: 16px var(--ost-shell-pad-x) 10px;
  border-bottom: 1px solid var(--ost-border);
  border-radius: 0 0 var(--ost-radius-lg) var(--ost-radius-lg);
  color: var(--ost-muted);
  background: var(--ost-surface-1);
}

@media (max-width: 991.98px) {
  body.ost-modern-ui #header {
    flex-direction: column;
    align-items: flex-start;
  }

  body.ost-modern-ui #info {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }

  body.ost-modern-ui #nav,
  body.ost-modern-ui #sub_nav,
  body.ost-modern-ui #content,
  body.ost-modern-ui #footer,
  body.ost-modern-ui #header {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.ost-modern-ui .ost-dashboard-toolbar-inner,
  body.ost-modern-ui .ost-list-head,
  body.ost-modern-ui .ost-list-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  body.ost-modern-ui .ost-toolbar-field {
    min-width: 100%;
  }

  body.ost-modern-ui .ticket_info.ost-ticket-card > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  body.ost-modern-ui .ticket_info.ost-ticket-card > tbody > tr > td + td {
    border-left: 0;
    border-top: 1px solid var(--ost-border);
  }

  body.ost-modern-ui .ost-detail-card > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  body.ost-modern-ui .ost-detail-card > tbody > tr > td + td {
    border-left: 0;
    border-top: 1px solid var(--ost-border);
  }

  body.ost-modern-ui .ost-note-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Modern Tab Bar
   Replaces the legacy bottom/height offset system with a clean
   flexbox underline-indicator design. Scoped to ost-modern-ui.
   ============================================================ */

/* Container bar */
body.ost-modern-ui ul.tabs {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap;
  height: auto !important;
  min-height: 42px;
  padding: 0 8px !important;
  margin: 0 !important;
  background: var(--ost-surface-2) !important;
  border-bottom: 2px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-sm) var(--ost-radius-sm) 0 0;
  box-shadow: none !important;
  gap: 2px;
  list-style: none !important;
}

/* All tab items — reset the legacy bottom/height offset */
body.ost-modern-ui ul.tabs li,
body.ost-modern-ui ul.tabs li.active,
body.ost-modern-ui ul.tabs li:not(.active) {
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
  bottom: 0 !important;        /* kills the 2px misalignment */
  height: auto !important;
  min-height: 40px;
  min-width: 100px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ost-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* Inactive tab hover */
body.ost-modern-ui ul.tabs li:not(.active):hover {
  color: var(--ost-primary) !important;
  background-color: rgba(37, 99, 235, 0.05) !important;
  border-radius: 4px 4px 0 0 !important;
}

/* Active tab — colored bottom border flush with the ul's bottom border */
body.ost-modern-ui ul.tabs li.active {
  color: var(--ost-primary) !important;
  border-bottom-color: var(--ost-primary) !important;
  margin-bottom: -2px !important;  /* flush border-bottom with ul border */
}

/* Tab link — fill the full li, vertically centered */
body.ost-modern-ui ul.tabs li a,
body.ost-modern-ui ul.tabs li.active a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  padding: 0 18px !important;
  line-height: 1 !important;
  color: inherit !important;
  font-weight: inherit !important;
  white-space: nowrap;
  text-decoration: none !important;
  outline: none !important;
}

body.ost-modern-ui ul.tabs li.active a {
  font-weight: 600 !important;
}

/* Tab content panel — clean card, rounded only on bottom */
body.ost-modern-ui .tab_content {
  border-radius: 0 0 var(--ost-radius-sm) var(--ost-radius-sm) !important;
  border-top: none !important;
  padding: 20px !important;
  margin-bottom: 12px;
}

/* Dark mode tab bar */
html[data-bs-theme="dark"] body.ost-modern-ui ul.tabs {
  background: var(--ost-surface-2) !important;
  border-bottom-color: var(--ost-border) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui ul.tabs li {
  color: var(--ost-text-muted) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui ul.tabs li.active {
  color: var(--ost-primary) !important;
  border-bottom-color: var(--ost-primary) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui ul.tabs li:not(.active):hover {
  color: var(--ost-primary) !important;
  background-color: rgba(78, 142, 247, 0.08) !important;
}

/* ============================================================
   Dark Mode Overrides
   Scoped to body.ost-modern-ui to avoid cross-portal bleed.
   ============================================================ */
html[data-bs-theme="dark"] body.ost-modern-ui {
  background: linear-gradient(180deg, #141d26 0%, #192330 100%) !important;
  color: var(--ost-text) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui #header {
  background: rgba(26, 29, 39, 0.97) !important;
  border-color: var(--ost-border) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui #content {
  background: var(--ost-surface) !important;
  border-color: var(--ost-border) !important;
  color: var(--ost-text);
}
html[data-bs-theme="dark"] body.ost-modern-ui a {
  color: var(--ost-link);
}
html[data-bs-theme="dark"] body.ost-modern-ui a:hover {
  color: var(--ost-link-hover);
}
html[data-bs-theme="dark"] body.ost-modern-ui input,
html[data-bs-theme="dark"] body.ost-modern-ui textarea,
html[data-bs-theme="dark"] body.ost-modern-ui select {
  background: var(--ost-input-bg) !important;
  border-color: var(--ost-input-border) !important;
  color: var(--ost-input-text) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .ost-card,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-thread-entry,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-entry {
  background: var(--ost-surface) !important;
  border-color: var(--ost-border) !important;
}

/* ── Dark mode: Thread body (thread.css hardcoded colors) ── */
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body {
  background-color: var(--ost-surface) !important;
  color: var(--ost-text) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h1,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h2,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h3,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h4,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h5,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h6 {
  color: var(--ost-text) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h1 small,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h2 small,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h3 small,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h4 small,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h5 small,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body h6 small {
  color: var(--ost-text-muted) !important;
}
/* thread.css sets color: #428bca !important — must counter with !important */
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body a:not(.button) {
  color: var(--ost-link) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body a:not(.button):hover,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body a:not(.button):focus {
  color: var(--ost-link-hover) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body hr,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body .page-header {
  border-color: var(--ost-border) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body blockquote {
  border-left-color: var(--ost-border) !important;
  color: var(--ost-text-muted) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body blockquote small {
  color: var(--ost-text-muted) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body blockquote.pull-right {
  border-right-color: var(--ost-border) !important;
}
/* thread.css thead bg: #f0f0f0 !important — must counter with !important */
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table thead > tr > td,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table thead > tr > th,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table tr > th {
  background-color: var(--ost-surface-2) !important;
  color: var(--ost-text) !important;
  border-color: var(--ost-border) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table tbody > tr > th,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table tfoot > tr > th,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table tbody > tr > td,
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table tfoot > tr > td {
  border-color: var(--ost-border) !important;
  color: var(--ost-text) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body table table {
  background-color: var(--ost-surface) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .thread-body pre {
  background: var(--ost-surface-2) !important;
  color: var(--ost-text) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .response-body {
  color: var(--ost-text) !important;
}

/* ── Dark mode: Tables ── */
/* Fix hardcoded #fff wrappers on all table types */
html[data-bs-theme="dark"] body.ost-modern-ui table.list,
html[data-bs-theme="dark"] body.ost-modern-ui table.queue.tickets,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list,
html[data-bs-theme="dark"] body.ost-modern-ui table.form_table,
html[data-bs-theme="dark"] body.ost-modern-ui table.settings_table,
html[data-bs-theme="dark"] body.ost-modern-ui table.table.two-column,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-form-table,
html[data-bs-theme="dark"] body.ost-modern-ui .dashboard-stats.table,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-ticket-meta-table,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-ticket-custom-data,
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats {
  background: var(--ost-surface) !important;
  border-color: var(--ost-border) !important;
}

/* Header rows */
html[data-bs-theme="dark"] body.ost-modern-ui table thead tr,
html[data-bs-theme="dark"] body.ost-modern-ui table.list thead th,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list thead th,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-ticket-meta-table th,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-ticket-custom-data thead th,
html[data-bs-theme="dark"] body.ost-modern-ui table.form_table th,
html[data-bs-theme="dark"] body.ost-modern-ui table.settings_table th,
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats th {
  background: var(--ost-surface-2) !important;
  color: var(--ost-text) !important;
  border-color: var(--ost-border) !important;
}

/* thead link colors — scp.css hardcodes #000 */
html[data-bs-theme="dark"] body.ost-modern-ui table.list thead th a,
html[data-bs-theme="dark"] body.ost-modern-ui table.list thead th a.asc,
html[data-bs-theme="dark"] body.ost-modern-ui table.list thead th a.desc {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--ost-text-muted) !important;
}

/* Body cells — fix #fff background and #edf2f8 borders */
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody td,
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody th,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list tbody td,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list tbody th,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-ticket-meta-table td,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-ticket-custom-data td,
html[data-bs-theme="dark"] body.ost-modern-ui table.form_table td,
html[data-bs-theme="dark"] body.ost-modern-ui table.form_table th,
html[data-bs-theme="dark"] body.ost-modern-ui table.settings_table td,
html[data-bs-theme="dark"] body.ost-modern-ui table.settings_table th,
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats td,
html[data-bs-theme="dark"] body.ost-modern-ui table tfoot td {
  background: var(--ost-surface) !important;
  color: var(--ost-text) !important;
  border-color: var(--ost-border) !important;
}

/* Odd rows — subtle tint instead of light blue */
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody tr:nth-child(odd) td,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list tbody tr:nth-child(odd) td {
  background: var(--ost-surface-0) !important;
}

/* Even rows */
html[data-bs-theme="dark"] body.ost-modern-ui table tbody tr:nth-child(even),
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody tr:nth-child(even) td,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list tbody tr:nth-child(even) td {
  background: var(--ost-surface) !important;
}

/* Row hover — replace yellow (#ffe/#ffd) from scp.css */
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody tr:hover td,
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody tr:hover th,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list tbody tr:hover td,
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody tr:nth-child(odd):hover td {
  background: rgba(122, 170, 206, 0.1) !important;
  color: var(--ost-text) !important;
}

/* Links inside table cells */
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody td a,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list tbody td a {
  color: var(--ost-link) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui table.list tbody td a:hover,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-record-list tbody td a:hover {
  color: var(--ost-link-hover) !important;
}

/* .table class (generic dotted-border data tables) */
html[data-bs-theme="dark"] body.ost-modern-ui .table td:not(:empty) {
  background: transparent !important;
  color: var(--ost-text) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .table tr:not(:last-child):not(.header),
html[data-bs-theme="dark"] body.ost-modern-ui .table tr.header {
  border-color: var(--ost-border) !important;
}

/* .ticket_info (ticket detail custom field table) */
html[data-bs-theme="dark"] body.ost-modern-ui .ticket_info {
  background: var(--ost-surface) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui .ticket_info.custom-data thead th {
  background: var(--ost-surface-2) !important;
  border-color: var(--ost-border) !important;
  color: var(--ost-text) !important;
}

/* .form_table section headers (scp.css has #929292 bg on th h4) */
html[data-bs-theme="dark"] body.ost-modern-ui table.form_table th h4,
html[data-bs-theme="dark"] body.ost-modern-ui div.section-break {
  background: var(--ost-surface-2) !important;
  border-color: var(--ost-border) !important;
  color: var(--ost-text) !important;
}

html[data-bs-theme="dark"] body.ost-modern-ui #footer {
  background: var(--ost-surface) !important;
  border-color: var(--ost-border) !important;
  color: var(--ost-text-muted) !important;
}

/* ── Dark mode: Search bar ── */
/* #basic_search and .ost-search-bar have a hardcoded white linear-gradient */
html[data-bs-theme="dark"] body.ost-modern-ui #basic_search,
html[data-bs-theme="dark"] body.ost-modern-ui .ost-search-bar {
  background: linear-gradient(180deg, var(--ost-surface-1), var(--ost-surface-0)) !important;
  border-color: var(--ost-border) !important;
  box-shadow: none !important;
}

/* .ost-search-input-wrap / .attached.input have hardcoded background: #fff */
html[data-bs-theme="dark"] body.ost-modern-ui .ost-search-input-wrap,
html[data-bs-theme="dark"] body.ost-modern-ui .attached.input {
  background: var(--ost-input-bg) !important;
  border-color: var(--ost-input-border) !important;
}

/* ── Dark mode: Dashboard stats table alternating rows + hover ── */
/* scp.css tbody:nth-child(2) tr:nth-child(odd) { background: #f0faff } targets the tr.
   We override both td and th in that row to ensure no light bleed-through. */
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody tr:nth-child(odd) td,
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody tr:nth-child(odd) th {
  background: var(--ost-surface-0) !important;
  color: var(--ost-text-muted) !important;
  border-color: var(--ost-border) !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody tr:nth-child(even) td,
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody tr:nth-child(even) th {
  background: var(--ost-surface) !important;
  color: var(--ost-text-muted) !important;
  border-color: var(--ost-border) !important;
}
/* scp.css tr:hover { background: #FFFFDD } — targets tr directly, bleeds through
   semi-transparent td overrides. Fix: override tr + td + th with opaque dark bg. */
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody tr:hover,
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody tr:hover td,
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody tr:hover th {
  background: var(--ost-surface-2) !important;
  color: var(--ost-text) !important;
}
/* scp.css tbody:first-child th border: 1px dashed #ddd */
html[data-bs-theme="dark"] body.ost-modern-ui table.dashboard-stats tbody:first-child th {
  border-color: var(--ost-border) !important;
  color: var(--ost-text-muted) !important;
}


/* ============================================================
   9. Alert / Message Bars
   ============================================================ */
.error_bar,
#error_bar,
#msg_error,
.error-banner {
  background-color: var(--ost-error-bg) !important;
  border: 1px solid var(--ost-error-border) !important;
  color: var(--ost-error-text) !important;
  padding: 11px 18px;
  margin-bottom: 14px;
  border-radius: var(--ost-radius);
  font-size: 0.875rem;
}
.warning_bar,
#warning_bar,
#msg_warning,
.warn-banner,
.warning-banner {
  background-color: var(--ost-warn-bg) !important;
  border: 1px solid var(--ost-warn-border) !important;
  color: var(--ost-warn-text) !important;
  padding: 11px 32px;
  margin-bottom: 14px;
  border-radius: var(--ost-radius);
  font-size: 0.875rem;
}
.notice_bar,
#notice_bar,
#msg_notice,
.notice-banner {
  background-color: var(--ost-notice-bg) !important;
  border: 1px solid var(--ost-notice-border) !important;
  color: var(--ost-notice-text) !important;
  padding: 11px 18px;
  margin-bottom: 14px;
  border-radius: var(--ost-radius);
  font-size: 0.875rem;
}
.success-banner,
#msg_success {
  background-color: var(--ost-success-bg) !important;
  border: 1px solid var(--ost-success-border) !important;
  color: var(--ost-success-text) !important;
  padding: 11px 18px;
  margin-bottom: 14px;
  border-radius: var(--ost-radius);
  font-size: 0.875rem;
}

/* ============================================================
   10. Cards / Panels / Boxes
   ============================================================ */
.panel,
.box,
.tab_content,
.ticket-view,
.topic-box,
.faq-entry {
  background-color: var(--ost-surface);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius-lg);
  box-shadow: var(--ost-shadow-sm);
  overflow: hidden;
}

/* .thread-entry shares card styling but MUST NOT have overflow:hidden —
   the avatar span and .action-dropdown.anchor-right extend outside its
   bounds and would be clipped. border-radius still draws the rounded shape. */
.thread-entry {
  background-color: var(--ost-surface);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius-lg);
  box-shadow: var(--ost-shadow-sm);
  overflow: visible;
}

/* ============================================================
   11. Tables
   ============================================================ */
table.list,
.table-list {
  width: 100%;
  border-collapse: collapse;
  background: var(--ost-surface);
  border-radius: var(--ost-radius-lg);
  font-size: 0.875rem;
  box-shadow: var(--ost-shadow-sm);
  overflow: hidden;
}
table.list thead th,
table.list th {
  background-color: var(--ost-surface-2);
  color: var(--ost-text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ost-border);
  white-space: nowrap;
}
table.list tbody tr {
  border-bottom: 1px solid var(--ost-border);
  transition: background-color 0.1s ease;
}
table.list tbody tr:last-child { border-bottom: none; }
table.list tbody tr:hover { background-color: var(--ost-surface-2); }
table.list tbody td {
  padding: 10px 14px;
  color: var(--ost-text);
  vertical-align: middle;
}
table.list tfoot td {
  background-color: var(--ost-surface-2);
  border-top: 1px solid var(--ost-border);
  padding: 8px 14px;
  color: var(--ost-text-muted);
  font-size: 0.8rem;
}

/* ============================================================
   12. Forms – Inputs
   NOTE: <select> is styled separately below — native select elements
   do not respond to padding the same way as text inputs, and adding
   vertical padding makes them taller than the scp.css form rows expect.
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea {
  background-color: var(--ost-input-bg) !important;
  border: 1px solid var(--ost-input-border) !important;
  color: var(--ost-input-text) !important;
  border-radius: var(--ost-radius);
  padding: 7px 11px;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus {
  border-color: var(--ost-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(78, 142, 247, 0.18) !important;
  outline: none;
}
input::placeholder,
textarea::placeholder { color: var(--ost-text-muted); opacity: 0.75; }
label { color: var(--ost-text); font-size: 0.875rem; }

/* <select> – height kept at browser default; only colour/border themed. */
select {
  background-color: var(--ost-input-bg) !important;
  border: 1px solid var(--ost-input-border) !important;
  color: var(--ost-input-text) !important;
  border-radius: var(--ost-radius);
  font-size: 0.875rem;
  min-height: 33px !important;
  height: auto !important;
  padding: 3px 6px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:focus {
  border-color: var(--ost-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(78, 142, 247, 0.18) !important;
  outline: none;
}

/* ============================================================
   13. Buttons
   ============================================================ */
input[type="submit"],
button[type="submit"],
button.submit,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--ost-radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  background-color: var(--ost-primary);
  color: #ffffff !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
button.submit:hover,
button.button:hover {
  background-color: var(--ost-primary-dark);
  box-shadow: var(--ost-shadow-sm);
  color: #fff !important;
  text-decoration: none;
}
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--ost-radius);
  border: 1px solid var(--ost-border);
  background-color: var(--ost-surface-2);
  color: var(--ost-text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
input[type="button"]:hover,
input[type="reset"]:hover {
  background-color: var(--ost-border);    /* was var(--ost-surface)=#fff in light mode */
  border-color: var(--ost-border-strong);
  color: var(--ost-text);
}
/* Green buttons (Export, Refresh on dashboard etc.)
   scp.css .green.button:hover { background-color: inherit } has specificity (0,3,0)
   which beats our button.button:hover (0,2,1), causing the button to inherit the
   parent's white surface background on hover. Override with a solid green scheme. */
body.ost-modern-ui button.green.button,
body.ost-modern-ui a.green.button {
  background-color: #2e9e4f;
  border-color: transparent;
}
body.ost-modern-ui button.green.button:hover,
body.ost-modern-ui a.green.button:hover {
  background-color: #237a3c !important;
  color: #fff !important;
  box-shadow: none !important; /* replace scp.css inset ring with solid bg */
}

/* ============================================================
   14. Loading Overlay
   ============================================================ */
#overlay {
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1040 !important;   /* scp.css: z-index:9 — must be above #nav(300) */
}
#loading {
  background-color: var(--ost-surface);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius-lg);
  box-shadow: var(--ost-shadow);
  padding: 32px 48px;
  text-align: center;
  color: var(--ost-text);
}
#loading h1,
#loading h4 { color: var(--ost-text); font-size: 1rem; font-weight: 500; }

/* ============================================================
   15. Dialogs / Popups
   ============================================================ */
div.dialog,
.dialog {
  background-color: var(--ost-surface) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-lg) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18) !important;
  color: var(--ost-text) !important;
  z-index: 1050 !important;             /* above #nav(300) + nav dropdowns(1030) */
  padding: 0 !important;                /* reset scp.css 1em; sections own their padding */
  max-height: 80vh !important;          /* scp.css: 72% — causes early scrollbar */
  overflow-y: auto !important;
}

/* ---- Dialog header: h3 as direct child (#alert, #confirm, etc.) ----
   With dialog padding:0, h3 spans full width naturally.                    */
div.dialog > h3,
.dialog > h3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 14px 50px 14px 20px !important;  /* right: room for × close btn */
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--ost-text) !important;
  background: var(--ost-surface-2) !important;
  border-bottom: 1px solid var(--ost-border) !important;
  border-radius: calc(var(--ost-radius-lg) - 1px) calc(var(--ost-radius-lg) - 1px) 0 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* ---- Dialog header: h3 inside .body (#popup AJAX dialogs) ----
   Only h3.drag-handle is the dialog title; section-break h3s are NOT targeted.
   .body has padding: 16px 20px; negative margins bleed h3 to .body edges.  */
.dialog .body h3.drag-handle {
  margin: -16px -20px 16px !important;
  padding: 14px 50px 14px 20px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--ost-text) !important;
  background: var(--ost-surface-2) !important;
  border-bottom: 1px solid var(--ost-border) !important;
}

/* ---- Section-break divs inside dialogs (form section headers) ---- */
.dialog div.section-break,
.dialog .form-header.section-break {
  background: var(--ost-surface-2) !important;
  border: none !important;
  border-top: 1px solid var(--ost-border) !important;
  border-bottom: 1px solid var(--ost-border) !important;
  margin: 12px -20px !important;            /* bleed to .body edges */
  padding: 7px 20px !important;
}
.dialog div.section-break h3,
.dialog .form-header.section-break h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ost-muted) !important;
}

/* ---- Bootstrap 5 table tbody: vertical-align:inherit causes misaligned cells ---- */
.table > tbody {
  vertical-align: middle;
}

/* ---- table.grid.form caption: Bootstrap 5 sets caption-side:bottom globally ----
   These tables use <caption> as the section title; must appear at the TOP.  */
table.grid.form {
  caption-side: top !important;
}
table.grid.form caption {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ost-muted) !important;
  text-align: start !important;
  padding: 8px 4px 6px !important;
}

/* ---- AJAX popup body wrapper ---- */
.dialog .body {
  padding: 16px 20px !important;
}

/* ---- Direct-child content (alert/confirm dialogs) ---- */
div.dialog > div:not(#popup-loading),
.dialog > div:not(#popup-loading),
div.dialog > p,
.dialog > p {
  padding: 12px 20px !important;
}

div.dialog > hr,
.dialog > hr {
  margin: 0 !important;
  background: none !important;
  border-color: var(--ost-border) !important;
}

/* ---- Close button ---- */
div.dialog a.close,
.dialog a.close {
  position: absolute !important;
  top: 9px !important;
  right: 12px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ost-muted) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  z-index: 3 !important;
  transition: background 0.15s, color 0.15s !important;
}
div.dialog a.close:hover,
.dialog a.close:hover {
  background: rgba(var(--ost-danger-rgb, 201, 42, 42), 0.1) !important;
  color: var(--ost-danger, #c0392b) !important;
  text-decoration: none !important;
}

/* ============================================================
   16. ui-dialog (jQuery UI) dark-mode fixes
   ============================================================ */
/* Ensure jQuery UI dialogs float above the nav bar (z-index:300) and
   nav dropdown menus (z-index:1030). jQuery UI default is z-index:100. */
body.ost-modern-ui .ui-widget-overlay {
  z-index: 1040 !important;
}
body.ost-modern-ui .ui-dialog {
  z-index: 1050 !important;
}
/* scp.css forces .ui-datepicker { z-index: 200 !important } which places the
   calendar behind our .dialog (z-index:1050). Override above the dialog.   */
.ui-datepicker {
  z-index: 1060 !important;
}
.ui-timepicker-div {
  z-index: 1060 !important;
}

[data-bs-theme="dark"] .ui-widget,
[data-bs-theme="dark"] .ui-dialog,
[data-bs-theme="dark"] .ui-dialog-content {
  background-color: var(--ost-surface) !important;
  color: var(--ost-text) !important;
  border-color: var(--ost-border) !important;
}
[data-bs-theme="dark"] .ui-widget-header,
[data-bs-theme="dark"] .ui-dialog-titlebar {
  background-color: var(--ost-surface-2) !important;
  color: var(--ost-text) !important;
  border-color: var(--ost-border) !important;
}
[data-bs-theme="dark"] .ui-state-default,
[data-bs-theme="dark"] .ui-widget-content .ui-state-default {
  background-color: var(--ost-surface-2) !important;
  color: var(--ost-text) !important;
  border-color: var(--ost-border) !important;
}
[data-bs-theme="dark"] .ui-datepicker {
  background-color: var(--ost-surface) !important;
  color: var(--ost-text) !important;
  border-color: var(--ost-border) !important;
}
[data-bs-theme="dark"] .ui-datepicker td a,
[data-bs-theme="dark"] .ui-datepicker td span {
  background-color: var(--ost-surface-2) !important;
  color: var(--ost-text) !important;
}
[data-bs-theme="dark"] .ui-state-active,
[data-bs-theme="dark"] .ui-widget-content .ui-state-active {
  background-color: var(--ost-primary) !important;
  color: #fff !important;
}

/* ============================================================
   17. Select2 dark-mode fixes
   ============================================================ */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--ost-input-bg) !important;
  border-color: var(--ost-input-border) !important;
  color: var(--ost-input-text) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered {
  color: var(--ost-input-text) !important;
}
[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--ost-surface) !important;
  border-color: var(--ost-border) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--ost-text) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ost-primary) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .select2-search__field {
  background-color: var(--ost-input-bg) !important;
  color: var(--ost-input-text) !important;
  border-color: var(--ost-input-border) !important;
}

/* ============================================================
   18. Footer
   ============================================================ */
#footer {
  background-color: var(--ost-surface);
  border-top: 1px solid var(--ost-header-border);
  padding: 14px 24px;
  text-align: center;
  color: var(--ost-text-muted);
  font-size: 0.8rem;
  margin-top: auto;
}
#footer p { margin: 0; }
#footer a,
#poweredBy,
#poweredBy a {
  color: var(--ost-text-muted);
  font-size: 0.8rem;
}
#footer a:hover,
#poweredBy a:hover { color: var(--ost-primary); text-decoration: none; }

/* ============================================================
   19. Theme Toggle Button
   ============================================================ */
#ost-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ost-border);
  background-color: var(--ost-surface-2);
  color: var(--ost-text-muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none !important;
  user-select: none;
  margin-left: 6px;
}
#ost-theme-toggle:hover {
  background-color: var(--ost-primary);
  color: #fff;
  border-color: var(--ost-primary);
  text-decoration: none;
}

/* ============================================================
   20. SCP pjax-container
   ============================================================ */
#pjax-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Thread / Ticket View */
.thread-entry,
.response textarea {
  background-color: var(--ost-surface);
  border-color: var(--ost-border);
  color: var(--ost-text);
}
.thread-body,
.response-body {
  color: var(--ost-text);
}

/* Staff queues */
.queue-bucket {
  background-color: var(--ost-surface);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
}

/* ============================================================
   21. Login Pages – Client & Staff
   ============================================================ */
body#loginBody,
body.login-body {
  background-color: var(--ost-bg) !important;
}


#loginBox {
  background-color: transparent !important; /* let login.css ::after glass layer show */
  border: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-lg) !important;
  box-shadow: var(--ost-shadow) !important;
  color: var(--ost-text);
}

html[data-bs-theme="dark"] #loginBox::after {
  background-color: rgba(20, 29, 38, 0.82) !important; /* dark glass instead of white */
}

#loginBox fieldset input[type="text"],
#loginBox fieldset input[type="password"],
#loginBox fieldset input[type="email"],
.login-box input[type="text"],
.login-box input[type="password"],
.login-box input[type="email"] {
  background-color: var(--ost-input-bg) !important;
  border: 1px solid var(--ost-input-border) !important;
  color: var(--ost-input-text) !important;
  border-radius: var(--ost-radius);
  padding: 10px 13px;
  font-size: 0.95rem;
  width: 100%;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#loginBox fieldset input:focus,
.login-box input:focus {
  border-color: var(--ost-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(78, 142, 247, 0.18) !important;
  outline: none;
}

#loginBox button.submit,
#loginBox button[type="submit"],
.login-box input[type="submit"],
.login-box .btn {
  background-color: var(--ost-primary) !important;
  border-color: var(--ost-primary) !important;
  color: #fff !important;
  border-radius: var(--ost-radius);
  padding: 10px 20px;
  font-weight: 500;
  width: 100%;
  transition: background-color 0.15s ease;
}
#loginBox button.submit:hover,
.login-box input[type="submit"]:hover {
  background-color: var(--ost-primary-dark) !important;
}

#loginBox a {
  color: var(--ost-link);
}

#login-message {
  color: var(--ost-text-muted);
  font-size: 0.9rem;
}

/* Dark mode login text */
html[data-bs-theme="dark"] #loginBox h1,
html[data-bs-theme="dark"] #loginBox h2,
html[data-bs-theme="dark"] #loginBox h3,
html[data-bs-theme="dark"] body#loginBody { color: var(--ost-text); }

/* Login page toggle (fixed bottom-right) */
#ost-theme-toggle.login-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  font-size: 1.15rem;
  box-shadow: var(--ost-shadow);
}

/* ============================================================
   22. Redactor editor dark-mode fix
   ============================================================ */
[data-bs-theme="dark"] .redactor-box,
[data-bs-theme="dark"] .redactor-editor {
  background-color: var(--ost-input-bg) !important;
  border-color: var(--ost-input-border) !important;
  color: var(--ost-input-text) !important;
}
[data-bs-theme="dark"] .redactor-toolbar {
  background-color: var(--ost-surface-2) !important;
  border-bottom-color: var(--ost-border) !important;
}
[data-bs-theme="dark"] .redactor-toolbar li a {
  color: var(--ost-text) !important;
}
[data-bs-theme="dark"] .redactor-toolbar li a:hover {
  background-color: var(--ost-surface) !important;
  color: var(--ost-primary) !important;
}

/* ============================================================
   23. Tooltip dark-mode
   ============================================================ */
[data-bs-theme="dark"] .tooltip-container,
[data-bs-theme="dark"] .tip {
  background-color: var(--ost-surface) !important;
  border-color: var(--ost-border) !important;
  color: var(--ost-text) !important;
  box-shadow: var(--ost-shadow) !important;
}

/* ============================================================
   24. Scrollbar (Webkit) – subtle dark-mode adaptation
   ============================================================ */
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--ost-bg); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3d4554;
  border-radius: 4px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #536075; }

/* ============================================================
   25. Responsive
   ============================================================ */
@media (max-width: 768px) {
  #header {
    position: relative;
    padding: 8px 12px;
    min-height: auto;
  }
  ul#nav {
    flex-direction: column;
    position: static;
  }
  ul#nav > li > a { padding: 10px 14px; }
  #content { padding: 12px; }
  #loginBox { width: 94vw !important; margin: 10px auto; }
}

/* ============================================================
   Phase 6.3 — WCAG 2.1 AA Contrast Fixes
   ============================================================ */
.faded,
.text-muted { color: #595959 !important; }

.help-block,
.text-help,
small.muted,
span.muted { color: #767676 !important; }

input::placeholder,
textarea::placeholder,
select::placeholder { color: #767676 !important; }

[data-bs-theme="dark"] .faded,
[data-bs-theme="dark"] .text-muted { color: #a0aec0 !important; }
[data-bs-theme="dark"] .help-block,
[data-bs-theme="dark"] .text-help { color: #94a3b8 !important; }
[data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] textarea::placeholder { color: #718096 !important; }

/* ============================================================
   customQ-dropdown — Consistent hover (palette + no dual style)
   The dropdown lives INSIDE #sub_nav (queue-navigation template
   callables are echoed into the <ul id="sub_nav"> loop). The
   sub_nav a:hover rule uses #sub_nav (ID specificity) with
   !important, setting color: var(--ost-primary) and
   background-color: var(--ost-surface-2) on ALL a:hover inside
   sub_nav — including dropdown links. Must include #sub_nav in
   these selectors to beat that rule, and must also reset bg.
   ============================================================ */
/* Full-width dropdown rows — #sub_nav li a rule sets display:inline-flex
   on ALL descendants, shrinking each a to content-width. Override with
   flex on li so the a fills remaining width and span stays on the right
   (float:right is ignored inside a flex container, so reorder via order). */
body.ost-modern-ui #sub_nav .customQ-dropdown ul li {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.ost-modern-ui #sub_nav .customQ-dropdown ul li > a {
  order: 1 !important;
  flex: 1 1 0% !important;
  display: block !important;
  min-width: 0 !important;
  margin-right: 0 !important; /* reset scp.css 60px margin-right */
}
body.ost-modern-ui #sub_nav .customQ-dropdown ul li > span.newItemQ {
  order: 2 !important;
  flex-shrink: 0 !important;
  float: none !important; /* deactivate pull-right inside flex */
}
body.ost-modern-ui #sub_nav .customQ-dropdown ul li:not(.personalQ):hover {
  background-color: var(--ost-primary-dark) !important; /* #355872 */
}
body.ost-modern-ui #sub_nav .customQ-dropdown ul li:hover > a,
body.ost-modern-ui #sub_nav .customQ-dropdown ul li > a:hover {
  color: #ffffff !important;
  background-color: transparent !important; /* reset sub_nav a:hover bg */
  text-decoration: none !important;
}
body.ost-modern-ui #sub_nav .customQ-dropdown li:hover > span {
  color: #ffffff !important;
}
html[data-bs-theme="dark"] body.ost-modern-ui #sub_nav .customQ-dropdown ul li:not(.personalQ):hover {
  background-color: var(--ost-primary) !important; /* #7AAACE on dark */
}