/*
 * osTicket Bootstrap 5 Modernization Theme
 * Layered on top of Bootstrap 5.3 + existing osTicket CSS.
 * Uses [data-bs-theme="light"] / [data-bs-theme="dark"] for theming.
 * All existing JS hooks / class names are preserved — only visual styles change.
 */

/* ============================================================
   1. CSS Custom Properties – Light Theme (default)
   ============================================================ */
:root,
[data-bs-theme="light"] {
  /* Brand — palette: #355872 · #7AAACE · #9CD5FF · #F7F8F0 */
  --ost-primary:        #7AAACE;
  --ost-primary-strong: #5a87aa;
  --ost-primary-dark:   #355872;
  --ost-accent:         #E65524;

  /* Surfaces */
  --ost-bg:             #F7F8F0;
  --ost-surface-0:      #f1f2ea;
  --ost-surface:        #ffffff;
  --ost-surface-1:      #ffffff;
  --ost-surface-2:      #edf5fd;

  /* Borders */
  --ost-border:         #c4dae8;
  --ost-border-strong:  #99bdd1;
  --ost-header-border:  #c4dae8;

  /* Text */
  --ost-text:          #2a4559;
  --ost-muted:         #5b7f96;
  --ost-text-muted:    #6a8999;
  --ost-link:          #7AAACE;
  --ost-link-hover:    #355872;

  /* Navigation bar */
  --ost-nav-bg:        #355872;
  --ost-nav-text:      #b8d6ea;
  --ost-nav-active-bg: #7AAACE;
  --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;
  --ost-notice-border: #9CD5FF;
  --ost-notice-text:   #355872;
  --ost-success-bg:    #d1e7dd;
  --ost-success-border:#a3cfbb;
  --ost-success-text:  #0f5132;

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

  /* 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;
  --ost-primary-dark:   #9CD5FF;
  --ost-accent:         #ff7043;

  /* Surfaces — very dark navy */
  --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;
  --ost-muted:         #7aaece;
  --ost-text-muted:    #8aacbd;
  --ost-link:          #9CD5FF;
  --ost-link-hover:    #7AAACE;

  /* Navigation bar */
  --ost-nav-bg:        #1a2836;
  --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:     #0c1f36;
  --ost-notice-border: #1d4a6e;
  --ost-notice-text:   #9CD5FF;
  --ost-success-bg:    #052e16;
  --ost-success-border:#166534;
  --ost-success-text:  #86efac;

  /* Inputs */
  --ost-input-bg:      #1e2c3a;
  --ost-input-border:  #2d435a;
  --ost-input-focus:   #7AAACE;
  --ost-input-text:    #d0e8f5;

  /* Shadows */
  --ost-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --ost-shadow-sm: 0 10px 25px rgba(0,0,0,.35);
  --ost-shadow-md: 0 20px 40px rgba(0,0,0,.45);
  --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;
}
body:not(.ost-modern-ui):not(.ost-client-ui) #container {
  background-color: var(--ost-bg);
}

/* ============================================================
   4b. Float-clear divs are not needed in flex column layout.
   The client portal places a <div class="clear"> between #header
   and #nav to clear floats. In flex context clear:both has no
   effect, but the element still occupies a flex slot. Hide it.
   ============================================================ */
#header + .clear,
#container > .clear {
  display: none !important;
}

/* ============================================================
   5. Header Bar
   (Scoped to legacy layout — overridden by modern-ui.css / client-modern-ui.css
    when body.ost-modern-ui or body.ost-client-ui is present.)
   ============================================================ */
body:not(.ost-modern-ui):not(.ost-client-ui) #header {
  background-color: var(--ost-header-bg) !important;
  border-bottom: 1px solid var(--ost-header-border);
  box-shadow: var(--ost-shadow-sm);
  padding: 0 24px !important;
  height: auto !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px;
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
}

/* Logo */
body:not(.ost-modern-ui):not(.ost-client-ui) #header a#logo,
body:not(.ost-modern-ui):not(.ost-client-ui) #header a.pull-left,
body:not(.ost-modern-ui):not(.ost-client-ui) div#header a.pull-left {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border: none;
  background: none;
  flex-shrink: 0;
}
body:not(.ost-modern-ui):not(.ost-client-ui) div#header a { color: var(--ost-text); }
body:not(.ost-modern-ui):not(.ost-client-ui) #header img { max-height: 42px; width: auto; }

/* Right-side user info */
body:not(.ost-modern-ui):not(.ost-client-ui) #header .pull-right.flush-right,
body:not(.ost-modern-ui):not(.ost-client-ui) div#header p#info.pull-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ost-text-muted);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
body:not(.ost-modern-ui):not(.ost-client-ui) #header .pull-right p,
body:not(.ost-modern-ui):not(.ost-client-ui) div#header p#info { margin: 0; color: var(--ost-text-muted); }
body:not(.ost-modern-ui):not(.ost-client-ui) #header .pull-right a,
body:not(.ost-modern-ui):not(.ost-client-ui) div#header p#info a { color: var(--ost-link); font-size: 0.85rem; }
body:not(.ost-modern-ui):not(.ost-client-ui) #header .pull-right a:hover,
body:not(.ost-modern-ui):not(.ost-client-ui) div#header p#info a:hover { color: var(--ost-link-hover); text-decoration: underline; }

/* Admin/Agent panel link pinned next to toggle */
body:not(.ost-modern-ui):not(.ost-client-ui) #header p#info a[href*="admin.php"],
body:not(.ost-modern-ui):not(.ost-client-ui) #header p#info a[href*="index.php"] {
  font-weight: 500;
}

/* ============================================================
   6. Primary Navigation (horizontal tab-bar)
   (Scoped to legacy layout — overridden by modern-ui.css when
    body.ost-modern-ui is present.)
   ============================================================ */

/* 6a. Reset Bootstrap reboot ul padding on every nav list */
body:not(.ost-modern-ui):not(.ost-client-ui) ul#nav,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav,
body:not(.ost-modern-ui):not(.ost-client-ui) ul#nav ul,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav ul,
body:not(.ost-modern-ui):not(.ost-client-ui) ul#nav li,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* 6b. Nav bar */
body:not(.ost-modern-ui):not(.ost-client-ui) ul#nav,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  flex-wrap: nowrap;
  height: 44px !important;        /* explicit px — kills scp.css 26px */
  line-height: 44px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  background-color: var(--ost-nav-bg) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: var(--ost-shadow-xs);
  white-space: nowrap;
  clear: none !important;
  z-index: 500;
  overflow: visible !important;
}

/* 6c. Nav li items — inline-block keeps position:absolute dropdown anchored */
body:not(.ost-modern-ui):not(.ost-client-ui) #nav > li,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav > li.active,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav > li.inactive {
  display: inline-block !important;  /* NOT flex; avoids top:auto breakage */
  position: relative !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  vertical-align: bottom;
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 6d. Top-level tab links */
body:not(.ost-modern-ui):not(.ost-client-ui) #nav > li > a,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav > li.active > a,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav > li.inactive > a {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 18px !important;
  color: var(--ost-nav-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

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

body:not(.ost-modern-ui):not(.ost-client-ui) #nav > li.active > a {
  color: var(--ost-nav-active-fg) !important;
  border-bottom-color: var(--ost-primary) !important;
  background-color: var(--ost-nav-hover-bg) !important;
  font-weight: 600 !important;
}

/* Neutralise scp.css li.active / li.inactive:hover box-shadows/borders */
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li.active,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li.inactive:hover {
  box-shadow: none !important;
  border-color: transparent !important;
  background-color: transparent !important;
}

/* 6e. Dropdown panel */
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li.inactive > ul {
  display: block !important;       /* always in layout; JS toggles visibility */
  visibility: hidden;              /* initial state — JS will override */
  opacity: 0;                      /* initial state — JS will override */
  top: 44px !important;
  left: 0 !important;
  min-width: 210px !important;
  width: auto !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  position: absolute !important;
  z-index: 1030 !important;
  background-color: var(--ost-surface) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: 0 0 var(--ost-radius) var(--ost-radius) !important;
  box-shadow: var(--ost-shadow) !important;
  pointer-events: auto !important;
}

/* Explicit CSS fallback — also shown via :hover in case JS is slow */
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li.inactive:hover > ul {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 6f. Dropdown list items */
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li.inactive ul li,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav .inactive li {
  display: block !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
  min-width: 0;
  position: static !important;
}

/* Cancel the greedy #nav .active rule for dropdown a tags */
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li.inactive ul li a.active,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav li.inactive ul li a[class*="active"],
body:not(.ost-modern-ui):not(.ost-client-ui) #nav .inactive li a.active,
body:not(.ost-modern-ui):not(.ost-client-ui) #nav .inactive li a[class*="active"] {
  display: block !important;
  height: auto !important;
  line-height: 1.5 !important;
  position: static !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 9px 16px !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: var(--ost-surface-2) !important;
  color: var(--ost-primary) !important;
  font-weight: 600 !important;
}

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

/* ============================================================
   7. Sub-Navigation
   (Scoped to legacy layout — overridden by modern-ui.css when
    body.ost-modern-ui is present.)
   ============================================================ */

/* 7a. Reset Bootstrap padding */
body:not(.ost-modern-ui):not(.ost-client-ui) #sub_nav,
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav,
body:not(.ost-modern-ui):not(.ost-client-ui) #sub_nav ul,
body:not(.ost-modern-ui):not(.ost-client-ui) #sub_nav li {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* 7b. Sub-nav bar */
body:not(.ost-modern-ui):not(.ost-client-ui) nav#sub_nav,
body:not(.ost-modern-ui):not(.ost-client-ui) #sub_nav,
body:not(.ost-modern-ui):not(.ost-client-ui) div.sub_nav {
  background-color: var(--ost-surface) !important;
  border-bottom: 1px solid var(--ost-border) !important;
  border-top: none !important;
  padding: 0 16px !important;
  height: auto !important;
  line-height: normal !important;
  clear: both;
  overflow: visible !important;
}

/* 7c. Sub-nav item list */
body:not(.ost-modern-ui):not(.ost-client-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: 38px;
}

body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav > li {
  display: inline-block !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 7d. Sub-nav links */
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav li a,
body:not(.ost-modern-ui):not(.ost-client-ui) ul#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-text-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;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav li a:hover,
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav a:hover {
  color: var(--ost-primary) !important;
  background-color: var(--ost-surface-2) !important;
  text-decoration: none !important;
}
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav li a.active,
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav a.active,
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav li a[class*="active"],
body:not(.ost-modern-ui):not(.ost-client-ui) ul#sub_nav a[class*="active"] {
  color: var(--ost-primary) !important;
  border-bottom-color: var(--ost-primary) !important;
  font-weight: 600 !important;
}

/* ============================================================
   8. Content Area
   (Scoped to legacy layout — overridden by modern-ui.css when
    body.ost-modern-ui is present.)
   ============================================================ */
body:not(.ost-modern-ui):not(.ost-client-ui) #content,
body:not(.ost-modern-ui):not(.ost-client-ui) div#content {
  flex: 1;
  padding: 24px;
  background-color: var(--ost-bg);
}

/* ============================================================
   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 18px;
  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,
.thread-entry,
.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;
}

/* ============================================================
   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.
   Browsers compute select height internally (content + UA padding).
   Overriding padding breaks that computation and makes selects too tall
   or too short compared to adjacent form elements.                    */
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;       /* minimum touch-friendly height */
  height: auto !important;          /* never clamp select height */
  padding: 3px 6px !important;      /* minimal padding — preserves UA height */
  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,
input.btn,
a.btn {
  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,
input.btn:hover,
a.btn: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-surface);
  border-color: var(--ost-primary);
  color: var(--ost-primary);
}

/* ============================================================
   14. Loading Overlay
   ============================================================ */
#overlay {
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
#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: var(--ost-shadow) !important;
  color: var(--ost-text) !important;
}
div.dialog h3,
.dialog h3 {
  color: var(--ost-text);
  border-bottom: 1px solid var(--ost-border);
  padding-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 600;
}
div.dialog hr,
.dialog hr { border-color: var(--ost-border); }

/* ============================================================
   16. ui-dialog (jQuery UI) dark-mode fixes
   ============================================================ */
[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: var(--ost-surface) !important;
  border: 1px solid var(--ost-border) !important;
  border-radius: var(--ost-radius-lg) !important;
  box-shadow: var(--ost-shadow) !important;
  color: var(--ost-text);
}

#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 */
[data-bs-theme="dark"] #loginBox h1,
[data-bs-theme="dark"] #loginBox h2,
[data-bs-theme="dark"] #loginBox h3,
[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
   Minimum 4.5:1 for normal text, 3:1 for large/bold text.
   ============================================================ */

/* .faded: was #666 on ~#eee bg (2.8:1 FAIL) → #595959 (4.5:1 PASS) */
.faded,
.text-muted { color: #595959 !important; }

/* Muted/helper labels: was #999 on white (2.8:1) → #767676 (4.5:1) */
.help-block,
.text-help,
small.muted,
span.muted { color: #767676 !important; }

/* Placeholder text: was #aaa on white (2.3:1) → #767676 (4.5:1) */
input::placeholder,
textarea::placeholder,
select::placeholder { color: #767676 !important; }

/* Dark mode contrast — maintain readability */
[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; }