/* ==========================================================================
   Aeropict Aviation — osTicket 1.18.4 theme
   aeropict-scp.css — agent panel and admin panel (/scp)
   Requires aeropict-core.css.

   The two panels share one language; the admin panel swaps its accent to the
   informational blue so you always know which side of the house you are on.
   ========================================================================== */

body { padding: 0 !important; margin: 0 !important; }

/* Panel accent: red for agents, Diamond blue for admin */
body.ap-staff { --ap-accent: var(--ap-red); --ap-accent-dim: var(--ap-red-dim); }
body.ap-admin { --ap-accent: var(--ap-blue); --ap-accent-dim: var(--ap-blue-dim); }
body { --ap-accent: var(--ap-red); --ap-accent-dim: var(--ap-red-dim); }

/* ------------------------------------------------------------------ shell */
#container {
  width: auto !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 6px 28px 44px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

/* ----------------------------------------------------------------- header */
#header {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ap-line) !important;
  height: auto !important;
  padding: 22px 2px 20px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}
#header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 72px; height: 2px;
  background: var(--ap-accent);
}

#header #logo {
  float: none !important;
  order: 1;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  line-height: 1;
}
#header #logo .valign-helper { display: none !important; }
#header #logo img {
  content: url("../img/mark-96.png");
  width: 34px !important;
  height: 34px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
}
[data-ap-theme="light"] #header #logo img { content: url("../img/mark-96.png"); }
#header #logo::after {
  content: "AEROPICT";
  color: var(--ap-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.19em;
  line-height: 1;
}
#header #logo::before {
  order: 3;
  content: "AGENT PANEL";
  color: var(--ap-text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding-left: 11px;
  border-left: 1px solid var(--ap-line-strong);
  line-height: 1;
}
body.ap-admin #header #logo::before {
  content: "ADMIN PANEL";
  color: var(--ap-blue);
  border-left-color: var(--ap-blue);
}

#header #info, #header .pull-right {
  float: none !important;
  order: 2;
  margin-left: auto !important;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ap-text-dim) !important;
  font-size: 12.5px !important;
  text-align: right;
}
#header #info strong { color: var(--ap-text) !important; font-weight: 700; }
#header #info a { color: var(--ap-text) !important; font-weight: 600; }
#header #info a:hover { color: var(--ap-accent) !important; }

/* ------------------------------------------------------------- main tabs */
ul#nav {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ap-line) !important;
  border-radius: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  gap: 2px;
  list-style: none;
  flex-wrap: wrap;
}
/* scp.css pins the tab <li> to height:26px and min-width:95px, which clipped
   our taller links and pushed the active underline under the sub-nav bar. */
ul#nav > li, ul#nav > li.active, ul#nav > li.inactive {
  float: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  width: auto !important;
  display: block !important;
  list-style: none;
  position: relative;
}
ul#nav > li > a {
  display: block;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--ap-text-dim) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 16px 20px 14px !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
ul#nav > li > a:hover { color: var(--ap-text) !important; background: var(--ap-panel-2) !important; }
ul#nav > li.active > a {
  color: var(--ap-text) !important;
  background: transparent !important;
  border-bottom-color: var(--ap-accent) !important;
}
/* hover fly-outs on inactive tabs */
ul#nav > li > ul {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line-strong) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow) !important;
  padding: 5px 0 !important;
}
ul#nav > li > ul li a {
  color: var(--ap-text) !important;
  font-size: 12.5px !important;
  padding: 8px 16px !important;
  text-transform: none;
  letter-spacing: 0;
  /* scp.css hangs a GIF sprite off these links (a.logs, a.teams, a.users …)
     with no position or repeat of its own — the parent rule supplies the
     21px left padding that makes room for it. Our padding is different, so the
     sprite lands on top of the label. Drop the sprites, as on the sub-nav. */
  background: transparent !important;
  background-image: none !important;
}
ul#nav > li > ul li a::before, ul#nav > li > ul li a > img { display: none !important; }
ul#nav > li > ul li a:hover { background: var(--ap-accent) !important; color: #fff !important; }

/* --------------------------------------------------------------- sub nav */
/* Two shapes here, and they must be handled separately.
   - The agent queue bar is driven by the jb.overflowmenu widget: the widget
     absolutely positions #sub_nav inside <nav class="jb-overflowmenu"> and
     measures item widths to decide what spills into the overflow menu. So the
     wrapper needs a real height, and the list must stay block/inline-block —
     making it a flex container collapses the wrapper and throws "New Ticket"
     on top of the tab bar.
   - The admin sub-nav is a plain list that flows normally. */

nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  padding: 0 !important;
}
/* the plain (admin) case */
nav:not(.jb-overflowmenu) {
  position: static;
  height: auto !important;
  margin: 0 0 24px !important;
}
/* the widget-driven (agent queue) case — the wrapper must reserve the height */
nav.jb-overflowmenu {
  position: relative !important;
  height: 46px !important;
  margin: 0 0 24px !important;
  line-height: normal !important;
}
/* #customQ_nav sets line-height:26px, which sized the absolutely-positioned bar
   to ~30px while the links inside ran to 41px — the labels hung out below the
   bar's bottom edge. Give the bar a real height and centre the links in it. */
ul#sub_nav {
  height: 46px !important;
  box-sizing: border-box !important;
  line-height: normal !important;
}
ul#sub_nav > li, #customQ_nav .jb-overflowmenu-menu-primary li.item {
  height: 100% !important;
}

ul#sub_nav {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--ap-radius) var(--ap-radius) !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  list-style: none;
  display: block;
  white-space: nowrap;
  /* MUST stay visible: each queue item hangs a .customQ-dropdown off its <li>,
     and any overflow value other than visible clips it to the bar's height.
     The overflowmenu widget already handles horizontal overflow by moving
     surplus items into its own ">>" drawer, so nothing needs to scroll here. */
  overflow: visible !important;
}
/* only the plain list owns its own bottom margin; the widget one is absolute */
nav:not(.jb-overflowmenu) ul#sub_nav { margin: 0 !important; }
nav.jb-overflowmenu ul#sub_nav { margin: 0 !important; }

ul#sub_nav > li,
#customQ_nav .jb-overflowmenu-menu-primary li.item {
  float: none !important;
  display: inline-block !important;
  vertical-align: top;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  list-style: none;
}
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

ul#sub_nav > li > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a,
ul#sub_nav > li > .jb-overflowmenu-menu-secondary-handle {
  display: inline-flex !important;
  align-items: center;
  height: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--ap-text-dim) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 0 15px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  white-space: nowrap;
}
/* the plain admin bar has no absolutely-positioned parent to inherit height from */
nav:not(.jb-overflowmenu) ul#sub_nav > li > a { height: 46px !important; }
ul#sub_nav > li + li > a { margin-left: 0 !important; }
ul#sub_nav > li > a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a {
  color: var(--ap-text) !important;
  text-decoration: none !important;
}
ul#sub_nav > li > a.active,
ul#sub_nav > li.active > a,
ul#sub_nav > li.item.active > a {
  color: var(--ap-text) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--ap-accent) !important;
  background: transparent !important;
}
/* Each queue link carries its caret as `<i class="small icon-sort-down pull-right">`
   written *before* the label. Floats do nothing inside a flex container, so
   order it last explicitly or it lands to the left of the text. */
ul#sub_nav > li > a > i.icon-sort-down,
ul#sub_nav > li > a > i.pull-right {
  float: none !important;
  order: 2;
  margin: 0 0 0 7px !important;
  font-size: 10px;
  line-height: 1;
  opacity: .5;
}
/* osTicket ships PNG icon sprites on the sub-nav; they read as noise here */
ul#sub_nav > li > a::before, ul#sub_nav > li > a > img { display: none !important; }

/* the queue count bubbles */
ul#sub_nav .queue-count, ul#sub_nav .personalQmenu {
  color: var(--ap-text-faint) !important;
  font-size: 10.5px;
}

/* the ">>" overflow drawer pinned to the right of the queue bar */
.jb-overflowmenu .jb-overflowmenu-container {
  background: transparent !important;
  border: 0 !important;
}
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle,
.jb-overflowmenu .jb-overflowmenu-menu-secondary-handle {
  background: transparent !important;
  border: 0 !important;
  color: var(--ap-text-faint) !important;
  padding: 14px 10px !important;
}
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle:hover {
  background: var(--ap-panel-3) !important;
  color: var(--ap-text) !important;
}
.jb-overflowmenu-menu-secondary {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line-strong) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow) !important;
  padding: 5px 0 !important;
}
.jb-overflowmenu-menu-secondary li a { color: var(--ap-text) !important; }
.jb-overflowmenu-menu-secondary li a:hover {
  background: var(--ap-accent) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------- content */
#content {
  background: var(--ap-panel) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius-lg) !important;
  box-shadow: var(--ap-shadow) !important;
  padding: 24px 26px 28px !important;
  margin: 0 !important;
  width: auto !important;
  min-height: 380px;
  color: var(--ap-text) !important;
}
#pjax-container { width: auto !important; }

#content h1, .tixTitle h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.01em;
}
#content h2 { font-size: 15px !important; }
#content h1 small, #content h1 .faded { color: var(--ap-text-faint) !important; font-weight: 400; }

/* Everything osTicket sizes with width="940" should just fill the panel */
#content > table, #content table.list, #content table.form_table,
#content table.ticket_info, #content table.custom-info, table.queue {
  width: 100% !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------- queue toolbar */
#basic_search {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ap-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 16px !important;
  margin: 0 0 18px !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* the search form is emitted after the sort control; put it back on the left */
#basic_search form { display: flex; align-items: center; gap: 10px; margin: 0; order: 1; }
#basic_search .pull-right { float: none !important; margin-left: auto; height: auto !important; order: 2; }
#basic_search input[type="text"], .search input[type="text"] { min-width: 280px; }
#basic_search a { color: var(--ap-blue) !important; font-size: 12px; }

.action-dropdown, #sort-dropdown, .customQ-dropdown {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line-strong) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow) !important;
  color: var(--ap-text) !important;
}
.action-dropdown ul li a, .customQ-dropdown ul li a {
  color: var(--ap-text) !important;
  padding: 7px 14px !important;
}
.action-dropdown ul li a:hover, .customQ-dropdown ul li a:hover {
  background: var(--ap-accent) !important;
  color: #fff !important;
}
.action-dropdown ul li.active > a { color: var(--ap-accent) !important; }

.sort-dropdown, .queue-sort, .dropdown-toggle {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  color: var(--ap-text) !important;
  border-radius: var(--ap-radius) !important;
}

/* queue heading ("Open", "My Tickets") — osTicket paints it green */
#content h1, #content h1 a, #content h1 a:link, #content h1 a:visited,
#content h1 span, .queue-title, h1 .refresh { color: var(--ap-heading) !important; }
#content h1 .icon-refresh, #content h1 i { color: var(--ap-text-faint) !important; font-size: 13px; }
#content h1 a:hover .icon-refresh { color: var(--ap-accent) !important; }
.masthead, .queue-header, .clear.tixTitle {
  border-bottom: 1px solid var(--ap-line) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}
.has_bottom_border { border-bottom: 1px solid var(--ap-line) !important; }

/* Action buttons, including the split "More ▾" control. osTicket writes the
   caret first in the DOM and floats it right, which threw the label off centre;
   lay the button out as a flex row and order the caret last instead. */
.action-button, .queue-action, a.action-button, span.action-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  color: var(--ap-text-dim) !important;
  border-radius: var(--ap-radius) !important;
  /* fixed height + min-width so the icon-only, split and labelled variants in
     the ticket toolbar all come out the same size instead of 33/35/44/59px */
  height: 34px !important;
  min-width: 38px;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  margin-left: 8px;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  vertical-align: middle;
  cursor: pointer;
}
/* the print button wraps its icon in an inner <a> */
.action-button > a {
  display: inline-flex !important;
  align-items: center;
  order: 1;
  color: inherit !important;
  padding: 0 !important;
  background: transparent !important;
}
.action-button > a:hover { color: inherit !important; }
/* dropdown.css gives the caret a border-left divider and asymmetric padding,
   which is what pushed the label off centre */
.action-button > i.pull-right, .action-button > i.icon-caret-down,
.action-button:hover > i.icon-caret-down {
  float: none !important;
  order: 2;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: auto !important;
  width: auto !important;
  opacity: .65;
  font-size: 11px;
  line-height: 1 !important;
}
.action-button > span { order: 1; display: inline-flex; align-items: center; gap: 6px; }
.action-button:hover {
  color: var(--ap-text) !important;
  border-color: var(--ap-line-strong) !important;
  background: var(--ap-panel-3) !important;
}
/* the green "Add New …" primary sits beside it — keep the two the same height */
a.green.button.action-button, .action-button.green {
  background: var(--ap-red) !important;
  border-color: var(--ap-red) !important;
  color: #fff !important;
}
a.green.button.action-button:hover {
  background: var(--ap-red-hover) !important;
  border-color: var(--ap-red-hover) !important;
  color: #fff !important;
}
/* The toolbar row that holds them must NOT become a flex container. The ticket
   toolbar floats each button right, so floats stack right-to-left and the DOM
   order (More, Edit, Print, …) renders as Reply-first on the left. Flexing the
   container kills the floats and reverses the whole bar. Spacing comes from the
   buttons' own margin instead. */
#content .pull-right.flush-right { display: block; }
#content .pull-right.flush-right::after { content: ""; display: block; clear: both; }

/* pagination / footer strip under a queue */
.pagination, #pagination, .tableFooter, .table-footer {
  color: var(--ap-text-faint) !important;
  font-size: 12px;
  padding-top: 10px;
}
.pagination a, #pagination a { color: var(--ap-blue) !important; }

/* ------------------------------------------------------------ ticket view */
table.ticket_info {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  margin-bottom: 18px !important;
}
table.ticket_info th {
  background: transparent !important;
  border: 0 !important;
  color: var(--ap-text-faint) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 7px 10px 7px 14px !important;
  white-space: nowrap;
  vertical-align: middle;
}
table.ticket_info td {
  background: transparent !important;
  border: 0 !important;
  color: var(--ap-text) !important;
  padding: 7px 14px 7px 0 !important;
  vertical-align: middle;
}
table.ticket_info table { border: 0 !important; }

/* the "Ticket #NNNN" reload link in the sticky bar — osTicket paints it green */
.sticky.bar h2, .sticky.bar h2 a, .sticky.bar h2 a:link, .sticky.bar h2 a:visited {
  color: var(--ap-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.sticky.bar h2 a .icon-refresh { color: var(--ap-text-faint) !important; font-size: 12px; }
.sticky.bar h2 a:hover .icon-refresh { color: var(--ap-accent) !important; }

/* sticky ticket action bar */
#ticket-actions, .sticky.bar, .sticky_bar {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow-sm) !important;
  color: var(--ap-text) !important;
}
.sticky.bar .content, .sticky_bar .content { background: transparent !important; }

/* thread */
.thread-entry {
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  background: var(--ap-panel-2) !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
}
.thread-entry .header, .thread-entry-header {
  background: var(--ap-panel-3) !important;
  border-bottom: 1px solid var(--ap-line) !important;
  color: var(--ap-text-dim) !important;
  font-size: 12px !important;
  padding: 9px 13px !important;
  text-shadow: none !important;
  border-radius: var(--ap-radius) var(--ap-radius) 0 0 !important;
}
.thread-entry .header .username, .thread-entry .header b { color: var(--ap-text) !important; }
.thread-entry .thread-body { background: transparent !important; padding: 14px !important; }
/* message vs response vs internal note */
.thread-entry.message { border-left: 3px solid var(--ap-blue) !important; }
.thread-entry.response { border-left: 3px solid var(--ap-green) !important; }
.thread-entry.note { border-left: 3px solid var(--ap-amber) !important; }
/* on the agent side the thread sits inside .tab_content, one step lighter */
.tab_content .thread-entry::before, .tab_content .thread-entry::after,
.tab_content .thread-event .type-icon::after {
  border-color: var(--ap-panel-2) !important;
}
.thread-event, .thread-entry.event {
  background: transparent !important;
  border: 0 !important;
  color: var(--ap-text-faint) !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
}
.thread-event .avatar img, .thread-entry img[src*="avatar"] { border-radius: 50%; }

/* tabs above the reply box */
ul.tabs, .tabs {
  border-bottom: 1px solid var(--ap-line) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 -1px !important;
  display: flex;
  gap: 2px;
  list-style: none;
}
ul.tabs li { float: none !important; margin: 0 !important; background: none !important; }
ul.tabs li a {
  display: block;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: var(--ap-radius) var(--ap-radius) 0 0 !important;
  color: var(--ap-text-dim) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px !important;
}
ul.tabs li.active a, ul.tabs li a.active {
  background: var(--ap-panel-2) !important;
  border-color: var(--ap-line) !important;
  color: var(--ap-text) !important;
}
.tab_content {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 0 var(--ap-radius) var(--ap-radius) var(--ap-radius) !important;
  padding: 18px !important;
}

/* -------------------------------------------------- the generic .table grid
   scp.css fills every non-empty cell of a `.table` with #fff — that is what
   left the profile, preferences and signature panels white behind the fields. */
.table, table.table, .table.two-column {
  background: transparent !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  margin-top: 0 !important;
}
.table td, .table th,
.table td:not(:empty), .table th:not(:empty) {
  background-color: transparent !important;
  color: var(--ap-text) !important;
  border-bottom: 1px solid var(--ap-line-soft) !important;
  padding: 10px 14px !important;
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
/* the left-hand label column */
.table.two-column tbody tr td:first-child,
.table td.required {
  color: var(--ap-text-dim) !important;
  font-weight: 600;
}
.table td.required { color: var(--ap-text-dim) !important; }
/* section rows ("Authentication", "Status and Settings") */
.table tr.header td, .table tr.header th, .table > thead th {
  background: var(--ap-panel-2) !important;
  color: var(--ap-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ap-line-strong) !important;
}
.table tr.header { border-bottom: 0 !important; }
.table .avatar img, .avatar img { border-radius: var(--ap-radius); }

/* ---------------------------------------------------------- admin forms */
table.form_table, table.custom-info {
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  overflow: hidden;
}
table.form_table th, table.custom-info th {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ap-line-soft) !important;
  color: var(--ap-text-dim) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left;
  padding: 10px 14px !important;
  vertical-align: middle;
}
table.form_table td, table.custom-info td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ap-line-soft) !important;
  padding: 8px 14px !important;
  color: var(--ap-text) !important;
  vertical-align: middle;
}
/* section header rows (osTicket uses a full-width th with an <em>) */
table.form_table th[colspan] , table.form_table tr th[colspan] em,
table.form_table .header, table.list th[colspan] {
  background: var(--ap-panel-2) !important;
  color: var(--ap-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal !important;
}
table.form_table th[colspan] { padding: 11px 14px !important; border-bottom: 1px solid var(--ap-line-strong) !important; }

.form_table div.error, .form_table td div.error { display: block; margin-top: 3px; }
/* keep field, asterisk and help tip on one line */
table.form_table td > i.help-tip, table.form_table td > .icon-question-sign { vertical-align: middle; margin-left: 4px; }

/* Save/Reset row */
p[style*="text-align:center"], .form-footer, .submit_row {
  border-top: 1px solid var(--ap-line);
  padding-top: 16px !important;
  margin-top: 18px !important;
}

/* ---------------------------------------------------------- knowledgebase */
/* scp.css gives each category row a folder sprite plus a white gradient strip */
#kb { padding: 0 !important; margin: 0 !important; }
#kb li {
  background-image: none !important;
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  padding: 14px 16px !important;
  margin: 0 0 8px !important;
  list-style: none;
}
#kb li:hover { border-color: var(--ap-line-strong) !important; }
#kb li h4 { margin: 0 0 4px !important; font-size: 14px !important; }
#kb li .faded, #kb li div { color: var(--ap-text-dim) !important; }

/* --------------------------------------------------------------- widgets */
.dashboard-stats, .stats-panel, .db-stats {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
}
/* scp.css zebra-stripes the stats table with #f0faff and paints its cells white */
table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd),
table.dashboard-stats tbody tr, table.dashboard-stats td, table.dashboard-stats th {
  background-color: transparent !important;
}
table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) td {
  background-color: rgba(255, 255, 255, 0.025) !important;
}
[data-ap-theme="light"] table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) td {
  background-color: rgba(0, 0, 0, 0.025) !important;
}
table.dashboard-stats td, table.dashboard-stats th {
  color: var(--ap-text) !important;
  border-color: var(--ap-line-soft) !important;
}
table.dashboard-stats thead th, table.dashboard-stats tbody:first-child th {
  color: var(--ap-text-dim) !important;
  border-bottom: 1px solid var(--ap-line-strong) !important;
}
#graph, .chart, .graph {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
}
/* The activity graph: flot re-measures #line-chart-here and hangs its x-axis
   label layer past the bottom edge, so the card has to be the wrapper around
   it — otherwise the dates sit on the border however much padding the inner
   div gets. The wrapper is a bare <div style="position:relative"> with no
   class, so aeropict-theme.js tags it .ap-chart-card for us. */
.ap-chart-card {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  padding: 10px 10px 24px !important;
  box-sizing: content-box;
}
#line-chart-here { background: transparent !important; border: 0 !important; }
/* The activity graph is a flot canvas painted for a white page. Inverting it
   (with a hue rotation to keep the series colours honest) puts it on the same
   footing as the rest of the night panel. */
[data-ap-theme="dark"] #line-chart-here,
[data-ap-theme="dark"] #line-chart-legend {
  filter: invert(1) hue-rotate(180deg);
}
[data-ap-theme="dark"] #line-chart-here { background: transparent !important; }

/* preview popovers */
.tip_box, .tip_content, #tip_box {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line-strong) !important;
  color: var(--ap-text) !important;
}

/* Icon sprites that assume a white page */
.Icon, span.Icon { filter: none; }
[data-ap-theme="dark"] .Icon.overdueTicket,
[data-ap-theme="dark"] .Icon.assignedTicket { filter: brightness(1.25); }

/* ----------------------------------------------------------- staff login */
/* scp/login.php is standalone: its own <head>, a stock photo backdrop and a
   blurred glass card. Drop the photo, keep the card, put the chart behind it. */
body#loginBody {
  background: var(--ap-bg) var(--ap-chart) repeat !important;
  background-size: 760px 760px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}
#brickwall, #loginBox #blur, #loginBox #background { display: none !important; }

#loginBox {
  position: relative !important;   /* must stay positioned: :after is absolute to it */
  width: 400px !important;
  max-width: 92vw;
  margin: 0 auto !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  text-align: center;
}
/* login.css paints a translucent white sheet over the card with #loginBox:after */
#loginBox:after { content: none !important; display: none !important; }
/* the mark plus a wordmark, stacked */
#loginBox #logo {
  height: auto !important;
  margin: 4px auto 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-indent: 0;
}
#loginBox #logo .valign-helper { display: none !important; }
#loginBox #logo a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  height: auto !important;
  text-decoration: none;
}
#loginBox #logo a img {
  display: block !important;
  content: url("../img/mark-96.png");
  width: 56px !important;
  height: 56px !important;
  max-width: none !important;
  max-height: none !important;
}
[data-ap-theme="light"] #loginBox #logo a img { content: url("../img/mark-96.png"); }
#loginBox #logo a::after {
  content: "AEROPICT";
  color: var(--ap-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1;
}
#loginBox #login-message {
  color: var(--ap-red) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px !important;
}
#loginBox .banner { color: var(--ap-text-dim) !important; text-align: center; }
/* login.css pins #company and #poweredBy to the viewport corners, where they
   land on top of each other once the backdrop is gone. Stack them instead. */
body#loginBody #company, body#loginBody #company .content {
  position: static !important;
  background: transparent !important;
  color: var(--ap-text-faint) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 11px;
  text-align: center;
  margin: 20px auto 0 !important;
  padding: 0 !important;
  width: auto !important;
  bottom: auto !important; left: auto !important; right: auto !important;
}
body#loginBody #poweredBy {
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--ap-text-faint) !important;
  opacity: .45;
  margin: 8px auto 0 !important;
  padding: 0 !important;
  bottom: auto !important; right: auto !important;
  font-size: 10.5px;
  text-align: center;
}
body#loginBody #poweredBy img { filter: grayscale(1); opacity: .7; }
#loginBox .or { color: var(--ap-text-faint) !important; }
#loginBox #reset-link { color: var(--ap-blue) !important; font-size: 11.5px; font-weight: 500; }

#loginBox {
  background: var(--ap-panel) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius-lg) !important;
  box-shadow: var(--ap-shadow) !important;
  color: var(--ap-text) !important;
  padding: 30px 28px 26px !important;
}
/* The form sits inside the card — no second panel. login.css pins it to a
   220px column with floated buttons, which leaves the fields narrow and
   off-centre inside our wider card; take the whole column back. */
form#login {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
#loginBox fieldset, form#login fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
}
#loginBox input[type="text"], #loginBox input[type="password"],
form#login input[type="text"], form#login input[type="password"],
form#login fieldset input {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  padding: 11px 12px !important;
  font-size: 13.5px !important;
  text-align: left;
}
#loginBox button[type="submit"], form#login button[type="submit"],
form#login .submit.button {
  display: block !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 4px 0 0 !important;
  background: var(--ap-red) !important;
  border-color: var(--ap-red) !important;
  color: #fff !important;
  padding: 12px !important;
  font-size: 13px !important;
  text-align: center;
}
/* the "forgot password" line shares a row with the second submit button */
form#login h3 { margin: 14px 0 0 !important; text-align: center; float: none !important; }
#loginBox .copyright, .login-footer, #copyright {
  color: var(--ap-text-faint) !important;
  background: transparent !important;
  font-size: 11px;
}

/* ----------------------------------------------------------------- footer */
#footer {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ap-line) !important;
  margin: 28px auto 0 !important;
  padding: 16px 0 26px !important;
  text-align: center;
  color: var(--ap-text-faint) !important;
  font-size: 11.5px;
  max-width: 1440px;
}
#footer a { color: var(--ap-text-faint) !important; }

/* ------------------------------------------------------- floating toggle */
.ap-mode-toggle-float {
  position: fixed;
  top: 16px; right: 18px;
  z-index: 9999;
  box-shadow: var(--ap-shadow-sm);
}

@media (max-width: 900px) {
  #container { padding: 0 12px 30px !important; }
  #content { padding: 16px 14px 20px !important; }
  ul#nav { overflow-x: auto; flex-wrap: nowrap; }
  #header #logo::before { display: none; }
}