/* =========================================================================
   ITK Novum – Modern Staff Panel Theme
   Additive override, loaded AFTER scp/css/scp.css (one extra <link> line in
   include/staff/header.inc.php and include/staff/login.header.php). Nothing
   in scp.css itself is touched, so osTicket core updates never conflict
   with this file. Safe to delete both the file and the two link lines to
   fully revert to stock.
   ========================================================================= */

/* ---------- 1. Design tokens (same brand, content area gets a toggle) ---------- */
:root {
  --brand-teal:  #00BFA0;
  --brand-cyan:  #00A8B5;
  --brand-sky:   #0091CD;
  --brand-blue:  #1D5DA8;
  --brand-navy:  #222F59;
  --brand-navy-deep: #141B33;

  --brand-gradient: linear-gradient(135deg, #00BFA0 0%, #00A8B5 38%, #0091CD 70%, #1D5DA8 100%);

  --bg:          #F3F6FA;
  --surface:     #FFFFFF;
  --surface-alt: #F7F9FC;
  --border:      #E4E9F1;
  --text:        #1B2440;
  --text-muted:  #66708C;
  --shadow-sm:   0 1px 2px rgba(20,30,60,.06), 0 1px 3px rgba(20,30,60,.08);
  --shadow-md:   0 4px 14px rgba(20,30,60,.10), 0 2px 4px rgba(20,30,60,.06);
  --radius-sm:   8px;
  --radius-md:   14px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
  --bg:          #0E1526;
  --surface:     #161F38;
  --surface-alt: #1B2440;
  --border:      #2A3457;
  --text:        #E8ECF7;
  --text-muted:  #96A1C4;
}

/* ---------- 2. Base ---------- */
body, html { background: var(--bg) !important; }
body { font-family: var(--font) !important; color: var(--text); }
.link, a { color: var(--brand-sky); }
div#header a { color: rgba(255,255,255,.92); }

/* ---------- 3. Shell ---------- */
#container { width: auto; max-width: 1320px; padding: 0 18px; }

/* Top bar: permanently branded dark navy, independent of the content dark/light toggle
   -- this is also why we always show the light/gray ITK Novum logo mark here. */
#header {
  height: 60px;
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--brand-navy-deep);
  background-image: linear-gradient(120deg, #141B33 0%, #17223F 60%, #15294A 100%);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  padding: 0 8px;
}
#logo { height: auto; padding: 0 0 0 14px; display: flex; align-items: center; }
#logo img { max-height: 30px; max-width: 200px; vertical-align: middle; }
#header p#info {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.85);
  font-size: 12.5px;
  margin: 0 14px 0 0;
}
#header p#info strong { color: #fff; }
#header p#info a { color: #fff; opacity: .8; }
#header p#info a:hover { opacity: 1; text-decoration: underline; }

.theme-toggle {
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  line-height: 20px;
  margin-right: 14px;
}
.theme-toggle:hover { background: rgba(255,255,255,.18); }

/* ---------- 4. Navigation ---------- */
/* #nav, #customQ_nav (the queue-tab row) and #content are meant to read as
   three evenly-spaced cards. Two things fought that:
   1) #nav had no margin-bottom, so it touched the row below with 0px gap.
   2) The queue-tab row (#sub_nav) isn't actually the box that sits in normal
      page flow -- it's an absolutely-positioned <ul> generated by the stock
      jb.overflow.menu.js widget, living inside a wrapper (#customQ_nav /
      .jb-overflowmenu) that stock CSS pins to a fixed 35px height, sized for
      stock's much tighter padding. Our extra padding/border made #sub_nav
      render taller than that 35px box, so it quietly overflowed past the
      wrapper's bottom edge and got covered by #content (a ~9px overlap).
      Fixing #sub_nav's own spacing wasn't enough -- the wrapper needs to be
      resized (and carry the margin to #content) since it's the element that
      actually participates in layout flow. */
#nav, #sub_nav {
  border: none;
  background: var(--surface);
}
#nav {
  padding: 8px 14px 0;
  border-radius: var(--radius-md);
  margin: 12px 0 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
#nav .active, #nav .inactive {
  color: var(--text-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-width: unset;
  font-size: 13.5px;
}
#nav .active a { color: var(--brand-blue); font-weight: 600; }
:root[data-theme="dark"] #nav .active a { color: #6FE3D6; }
#nav .inactive a { color: var(--text-muted); }
#nav li.active { background: var(--surface-alt); border-color: var(--border); box-shadow: none; }
#nav li.inactive:hover { background: var(--surface-alt); border-color: var(--border); box-shadow: none; }
#nav li.inactive > ul { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-md); }
#nav .inactive li a:hover { color: var(--brand-blue); background: var(--surface-alt); }

#customQ_nav.jb-overflowmenu {
  height: 48px !important;
  width: auto !important;
  max-width: 100%;
  margin-bottom: 14px;
}
#sub_nav {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}

/* ---------- 5. Content ---------- */
#content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin: 0 0 24px;
  color: var(--text);
}
:root[data-theme="dark"] #content, :root[data-theme="dark"] #content * { color: var(--text); }
:root[data-theme="dark"] #content a { color: var(--brand-sky); }

/* ---------- 6. Tables ---------- */
table.list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
table.list thead th {
  background: var(--surface-alt);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  border: none;
  border-bottom: 1px solid var(--border);
}
table.list thead th a { color: var(--text-muted); background: none !important; }
table.list tbody td {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
table.list tbody tr:nth-child(2n+1) td { background-color: var(--surface-alt); }
table.list tbody tr:hover td,
table.list tbody tr:nth-child(2n+1):hover td { background: rgba(0,145,205,.08); }

/* ---------- 7. Buttons ---------- */
.action-button, .button {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.button.green, .green.button,
button[type="submit"].button,
.button.primary {
  background: var(--brand-gradient);
  border: none;
  color: #fff !important;
}
.button:hover, .action-button:hover { filter: brightness(0.98); }
.button.green:hover, .green.button:hover, .button.primary:hover { filter: brightness(1.08); }

/* ---------- 7b. Native buttons without .button/.action-button class ----------
   !important on color here defends against the same stock "unsaved changes"
   inline style="color:red" that js/osticket.js applies on the client portal
   (see client_modern.css 7b) in case any staff form ever pulls in equivalent
   behavior; inline styles always beat plain stylesheet rules. */
input[type=submit], button[type=submit] {
  background: var(--brand-gradient);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
input[type=submit]:hover, button[type=submit]:hover { filter: brightness(1.08); }
input[type=reset], input[type=button]:not(.theme-toggle), button[type=reset] {
  background: var(--surface);
  color: var(--text-muted) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-family: var(--font);
  cursor: pointer;
}

/* ---------- 7c. Dark-mode contrast fixes for the most common legacy light panels ----------
   scp.css hardcodes light backgrounds (#F4FAFF, #F7FBFE, ...) on dozens of small
   widgets across the ~250 admin screens. Chasing every one is out of scope; these
   are the ones that show up on the screens staff actually live in day to day
   (ticket summary panel, breadcrumbs, banners, sidebars). */
:root[data-theme="dark"] .ticket_info,
:root[data-theme="dark"] .infoTable,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] #breadcrumbs,
:root[data-theme="dark"] table.custom-data th,
:root[data-theme="dark"] .search.well {
  background: var(--surface-alt) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] .ticket_info.custom-data thead th { background: var(--surface-alt) !important; }
:root[data-theme="dark"] .banner { background: var(--surface-alt) !important; border-color: var(--border) !important; color: var(--text) !important; }
:root[data-theme="dark"] .faded { color: var(--text-muted) !important; }
:root[data-theme="dark"] #breadcrumbs a { color: var(--brand-sky) !important; }
:root[data-theme="dark"] .sticky.bar.fixed,
:root[data-theme="dark"] .sticky.bar.opaque {
  background-color: rgba(22,31,56,.96) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md);
}
:root[data-theme="dark"] .sticky.bar.fixed h2,
:root[data-theme="dark"] .sticky.bar.fixed h2 a,
:root[data-theme="dark"] .tixTitle h3 { color: var(--text) !important; }

/* ---------- 8. Dashboard stat tiles ---------- */
table.dashboard-stats {
  border-collapse: separate;
  border-spacing: 8px;
}
table.dashboard-stats td, table.dashboard-stats th {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
ul.clean.tabs { border-bottom: 1px solid var(--border); }
ul.clean.tabs li.active a { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }

/* ---------- 9. Login page ---------- */
#loginBody, #brickwall {
  background: var(--brand-navy-deep) !important;
  background-image: linear-gradient(135deg, #10182C 0%, #15223E 45%, #0F2A47 75%, #123A54 100%) !important;
}
#blur, #background { display: none; }
#loginBox {
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
#loginBox:after {
  background-color: rgba(20,27,51,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#loginBox h3#login-message { color: #ffb4b4; }
#loginBox .banner { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.85); }
#loginBox h1#logo img { max-height: 46px; }
#loginBox input[type=text], #loginBox input[type=password] {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
}
#loginBox input::placeholder { color: rgba(255,255,255,.5); }
#loginBox input:focus {
  border: 1px solid var(--brand-sky) !important;
  box-shadow: 0 0 0 3px rgba(0,145,205,.25) !important;
}
#loginBox .button {
  background: var(--brand-gradient);
  border: none;
  color: #fff !important;
  border-radius: var(--radius-sm);
}
#loginBox #reset-link a, #loginBox a { color: rgba(255,255,255,.75); }
#company .content, #poweredBy { color: rgba(255,255,255,.5); }