/* ==========================================================================
   JB NE IT Support: staff / admin panel theme for osTicket 1.18.x
   Loaded AFTER scp.css via one line in include/staff/header.inc.php
   (and include/staff/login.header.php for the sign-in page).
   The staff panel is table-based, so this is a careful restyle, not a rebuild.
   ========================================================================== */

:root {
  --jb-navy-950: #070d1f;
  --jb-navy-900: #0a1228;
  --jb-navy-800: #0f1c3a;
  --jb-navy-700: #16264d;
  --jb-blue-600: #2563eb;
  --jb-blue-500: #3b82f6;
  --jb-blue-100: #dbeafe;
  --jb-blue-50:  #eff6ff;
  --jb-ink:      #0f172a;
  --jb-ink-2:    #334155;
  --jb-muted:    #64748b;
  --jb-line:     #e2e8f0;
  --jb-surface:  #ffffff;
  --jb-surface-2:#f8fafc;
  --jb-radius:   8px;
  --jb-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body, input, select, textarea, button { font-family: var(--jb-font); }
body, html { background: #e9eef5; color: var(--jb-ink); }
body { letter-spacing: 0; }
a, .link { color: var(--jb-blue-600); }
a:hover, .link:hover { color: #1d4ed8; }
h2 { color: var(--jb-ink); font-weight: 650; font-size: 1.35em; letter-spacing: -.01em; }
h3 { color: var(--jb-ink-2); }
h2 i { color: var(--jb-blue-500); }

/* ---------- Shell ---------- */
#container { width: 96%; max-width: 1360px; margin: 18px auto 24px; }

#header {
  height: auto; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;
  padding: 10px 20px;
  background: var(--jb-surface);
  border: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: none;
}
#logo { height: auto; max-width: 400px; padding: 0; }
#logo img { max-height: 54px; }
#header .valign-helper { display: none; }
#header p, #header p#info {
  float: none; margin: 0; max-width: none;
  background: transparent; border: 0; padding: 0;
  color: var(--jb-muted); font-size: 14px;
}
div#header a { color: var(--jb-blue-600); font-weight: 600; }
div#header a:hover { text-decoration: underline; }

/* Warning / error bars (e.g. "delete the setup directory") */
#notice_bar, #warning_bar, #error_bar {
  height: auto; line-height: 1.4; margin: 0;
  padding: 10px 20px 10px 44px; font-weight: 500;
  background-position: 16px 50%; background-repeat: no-repeat;
  border: 0; border-bottom: 1px solid;
  border-radius: 12px 12px 0 0;
}
#warning_bar { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
#error_bar   { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
#notice_bar  { background-color: #f0fdf4; border-color: #bbf7d0; color: #166534; }
#warning_bar + #header, #error_bar + #header, #notice_bar + #header { border-radius: 0; }

/* ---------- Main navigation (dark bar) ---------- */
#nav {
  height: auto; padding: 8px 14px 0; line-height: 1.2;
  background: var(--jb-navy-800);
  border: 0; border-top: 1px solid var(--jb-navy-700);
}
#nav .active, #nav .inactive {
  height: auto; min-width: 0; padding: 0 4px;
  border: 0; border-radius: 8px 8px 0 0;
}
#nav > li + li { margin-left: 4px; }
#nav .inactive a, #nav .active a {
  padding: 11px 18px; color: #cbd5e1; font-weight: 500; font-size: 14px;
}
#nav .active a { color: var(--jb-navy-900); font-weight: 650; }
#nav li.active, #nav li.inactive:hover { box-shadow: none; border: 0; }
#nav li.active { background: #fff; }
#nav li.inactive:hover { background: rgba(255,255,255,.1); }
#nav li.inactive:hover > a { color: #fff; }

/* Drop-down menus */
#nav li.inactive > ul {
  width: 240px; padding: 6px; margin-top: 0; left: 0;
  background: #fff; border: 1px solid var(--jb-line); border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 30px rgba(15,23,42,.18);
}
#nav li.inactive > ul li a {
  color: var(--jb-ink-2); padding: 8px 10px 8px 34px; font-size: 14px; font-weight: 400;
  border-radius: 6px;
}
#nav .inactive li a:hover { background: var(--jb-blue-50); color: var(--jb-blue-600); }
#nav li.inactive:hover > ul li a { color: var(--jb-ink-2); }
#nav li.inactive:hover > ul li a:hover { color: var(--jb-blue-600); }

/* ---------- Sub navigation (queues) ---------- */
#sub_nav {
  height: auto; line-height: 1.4; padding: 6px 14px;
  background: #fff; border: 0; border-bottom: 1px solid var(--jb-line);
}
#sub_nav > li > a, #customQ_nav .jb-overflowmenu-menu-primary li.item > a {
  color: var(--jb-ink-2); padding: 6px 10px 6px 24px; border-radius: 6px;
}
#sub_nav > li > a:hover, #customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a {
  color: var(--jb-blue-600); background-color: var(--jb-blue-50);
}
#sub_nav a.active, #sub_nav li.active > a {
  color: var(--jb-blue-600); background-color: var(--jb-blue-50); font-weight: 600;
}
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
  background: var(--jb-blue-50); border-color: transparent; padding: 3px 6px 4px;
}

/* ---------- Content area ---------- */
#content {
  padding: 22px 24px 28px;
  background: var(--jb-surface);
  border: 0;
  border-bottom: 1px solid var(--jb-line);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
#footer { color: var(--jb-muted); }
#footer a { color: var(--jb-muted); }

/* ---------- Tables ---------- */
table.list {
  background: transparent;
  border: 1px solid var(--jb-line);
  border-radius: var(--jb-radius);
  border-collapse: separate; border-spacing: 0;
  overflow: hidden;
}
table.list caption {
  background: var(--jb-navy-800); color: #fff; padding: 10px 14px; font-weight: 600;
  border-radius: var(--jb-radius) var(--jb-radius) 0 0;
}
table.list thead th {
  background: var(--jb-surface-2); color: var(--jb-muted);
  padding: 10px 12px; font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--jb-line);
}
table.list thead th a, table.list th a { color: var(--jb-muted); }
table.list thead th a.asc, table.list thead th a.desc { background-color: var(--jb-blue-50); color: var(--jb-blue-600); }
table.list tbody td { border: 0; border-bottom: 1px solid var(--jb-line); padding: 9px 12px; background: #fff; }
table.list tbody tr:nth-child(2n+1) td { background: #fbfdff; }
table.list tbody tr:hover td,
table.list tbody tr.highlight td,
table.list tbody tr:nth-child(2n+1):hover td { background: var(--jb-blue-50); }
table.list tbody tr:last-child td { border-bottom: 0; }
table tfoot td, table.list tfoot td { background: var(--jb-surface-2); padding: 8px 12px; }

table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) { background: var(--jb-surface-2); }
table.dashboard-stats tbody:nth-child(2) tr:hover { background: var(--jb-blue-50); }
.infoTable, .custom-data th, table.custom-data th { background: var(--jb-surface-2); }

/* ---------- Buttons ---------- */
input[type="submit"], input[type="reset"], input[type="button"],
.action-button, .button, button[type=submit] {
  height: auto; line-height: 1.2; padding: 8px 14px;
  color: var(--jb-ink-2);
  background: #fff; background-image: none;
  border: 0; border-radius: 7px;
  box-shadow: inset 0 0 0 1px #cbd5e1;
  font-size: 14px; font-weight: 500;
}
.action-button:hover, .button:hover,
input[type=button]:hover, input[type=reset]:hover {
  color: var(--jb-ink); background: var(--jb-surface-2);
  box-shadow: inset 0 0 0 1px #94a3b8;
}
button[type=submit], input[type="submit"], .primary.button {
  color: #fff; background: var(--jb-blue-600); font-weight: 600;
  box-shadow: 0 1px 2px rgba(37,99,235,.35);
}
button[type=submit]:hover, input[type=submit]:hover, input[type=submit]:active {
  color: #fff; background: #1d4ed8; box-shadow: 0 4px 12px rgba(37,99,235,.3);
}
.action-button, .action-button a, .action-button span { color: var(--jb-ink-2) !important; }
.action-button i, .button i { color: var(--jb-muted); }
a.refresh, a.edit, a.print { border-radius: 6px; border-color: var(--jb-line); background-color: #fff; }

/* ---------- Form controls ---------- */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=search], select, textarea {
  padding: 6px 9px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
  color: var(--jb-ink);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
select:focus, textarea:focus {
  outline: 0; border-color: var(--jb-blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}
input[type=checkbox], input[type=radio] { accent-color: var(--jb-blue-600); }
select { height: 34px; line-height: normal; padding: 0 8px; font-size: 14px; border-color: #cbd5e1; }
input[type=text], input[type=password], input[type=email], input[type=search] { font-size: 14px; }

/* Logos are usually saved with an off-white background; blend it into the white header */
#logo img, #loginBody #logo img { mix-blend-mode: multiply; }

/* ---------- Tabs ---------- */
ul.tabs { background: var(--jb-surface-2); border-bottom: 1px solid var(--jb-line); box-shadow: none; padding-left: 12px; }
ul.tabs li { background: transparent; border: 1px solid transparent; border-bottom: 0; box-shadow: none !important; font-weight: 500; }
ul.tabs li:not(.active) { bottom: 0; }
ul.tabs li.active { background: #fff; border: 1px solid var(--jb-line); border-top: 2px solid var(--jb-blue-600); border-bottom: 0; color: var(--jb-ink); }
ul.tabs li a { color: var(--jb-muted); }
ul.tabs li.active a { color: var(--jb-ink); }

/* ---------- Dialogs / popups ---------- */
.dialog {
  background: #fff; border: 1px solid var(--jb-line); border-radius: 12px;
  box-shadow: 0 24px 70px rgba(7,13,31,.45);
}
.dialog h3 { color: var(--jb-ink); }

/* ---------- Messages inside content ---------- */
#msg_notice, #msg_warning, #msg_error, #msg_info,
.warning-banner, .error-banner, .notice-banner {
  height: auto; line-height: 1.5; padding: 10px 14px 10px 40px;
  border: 1px solid; border-radius: var(--jb-radius); font-weight: 500;
  background-position: 12px 50%;
}
#msg_notice  { border-color: #bbf7d0; background-color: #f0fdf4; color: #166534; }
#msg_warning, .warning-banner { border-color: #fde68a; background-color: #fffbeb; color: #92400e; }
#msg_error   { border-color: #fecaca; background-color: #fef2f2; color: #991b1b; }

/* ==========================================================================
   Agent sign-in page (#loginBody)  -- needs the login.header.php line too
   ========================================================================== */
#loginBody {
  background: radial-gradient(1000px 500px at 20% -10%, rgba(37,99,235,.35), transparent 60%),
              linear-gradient(180deg, var(--jb-navy-900), var(--jb-navy-950)) fixed;
  min-height: 100%;
}
#loginBody #brickwall, #loginBody #blur, #loginBody #background { display: none; }
#loginBody #loginBox {
  width: 400px; max-width: calc(100% - 32px); margin-left: -200px;
  padding: 32px 28px 28px; top: 14%;
  background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  isolation: auto;
}
#loginBody #loginBox:after { display: none; }
#loginBody #logo a { height: auto; margin-bottom: 8px; }
#loginBody #login-message { font-size: 14px; color: #b91c1c; }
#loginBody form { width: 100%; }
#loginBody fieldset input[type=text], #loginBody fieldset input[type=password] {
  padding: 11px 12px; font-size: 15px; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 8px;
}
#loginBody input:focus { border-color: var(--jb-blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
#loginBody .button.submit, #loginBody button.submit {
  padding: 10px 20px; border-radius: 8px; background: var(--jb-blue-600); color: #fff; border: 0; font-weight: 600; cursor: pointer;
}
#loginBody #reset-link { font-size: 14px; }
@media (max-width: 460px) {
  #loginBody #loginBox { left: 16px; margin-left: 0; width: auto; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  #container { width: 100%; margin: 0; }
  #header { flex-direction: column-reverse; align-items: flex-start; gap: 6px; border-radius: 0; }
  #nav { overflow-x: auto; white-space: nowrap; }
}