/* ==========================================================================
   Aeropict Aviation — osTicket 1.18.4 theme
   aeropict-client.css — the client end (support.aeropict.org)
   Requires aeropict-core.css.
   ========================================================================== */

/* ------------------------------------------------------------------ shell */
body { padding: 0 !important; margin: 0 !important; }

#container {
  width: auto !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

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

#logo {
  float: none !important;
  order: 1;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 13px;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  line-height: 1;
}
#logo .valign-helper { display: none !important; }
#logo img {
  content: url("../img/mark-96.png");
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
}
[data-ap-theme="light"] #logo img { content: url("../img/mark-96.png"); }

#logo::after {
  content: "AEROPICT";
  display: block;
  color: var(--ap-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.20em;
  line-height: 1;
}
#logo::before {
  content: "SUPPORT CENTER";
  order: 3;
  display: block;
  color: var(--ap-text-faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--ap-line-strong);
}

#header .pull-right, #header .flush-right {
  float: none !important;
  order: 2;
  flex: 0 1 auto;
  min-width: 0;
  width: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  text-align: right;
  margin: 0 0 0 auto !important;
}
/* theme.css hard-codes #header p { width: 400px }, which is what held the user
   menu ~200px short of the right edge. */
#header p, #header .pull-right p {
  width: auto !important;
  max-width: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  color: var(--ap-text-dim) !important;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* osTicket emits a second <p> for the language flags. It is usually blank but
   holds whitespace, so :empty misses it and it reserves ~200px on the right —
   which is why the user menu sat short of the panel edge. aeropict-theme.js
   removes it; this only covers the genuinely empty case.
   (Deliberately no :has() here — an unsupported :has() invalidates the whole
   selector list, taking the :empty rule down with it.) */
#header .pull-right p:empty { display: none !important; }
#header .pull-right a { color: var(--ap-text) !important; font-weight: 600; }
#header .pull-right a:hover { color: var(--ap-red) !important; }

/* -------------------------------------------------------------------- nav */
#nav, ul#nav.flush-left {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ap-line) !important;
  border-radius: 0 !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  display: flex;
  gap: 4px;
  list-style: none;
  flex-wrap: wrap;
}
/* theme.css pins these to height:20px, which clips our taller links */
#nav li, #nav li.active {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
  display: block !important;
  background: none !important;
  border: 0 !important;
  list-style: none;
}
#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: 13px 16px !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
#nav li a:hover { color: var(--ap-text) !important; background: var(--ap-panel-2) !important; }
#nav li a.active {
  color: var(--ap-text) !important;
  border-bottom-color: var(--ap-red) !important;
  background: transparent !important;
}
/* osTicket sets little sprite icons on the nav links */
#nav li a::before { display: none !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: 30px 32px 34px !important;
  margin: 0 !important;
  min-height: 320px;
  color: var(--ap-text) !important;
}

#content h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.015em;
}
#content h1 a, #content h1 a:link, #content h1 a:visited { color: var(--ap-heading) !important; }
#content h1 .icon-refresh, #content h1 i { color: var(--ap-text-faint) !important; font-size: 14px; }
#content h1 a:hover .icon-refresh { color: var(--ap-red) !important; }
#content h1 + p, #content > p:first-of-type { color: var(--ap-text-dim); }
#content h2 { font-size: 17px !important; margin: 26px 0 10px !important; }
#content h3 { font-size: 14px !important; letter-spacing: 0.04em; }

#content hr { border-top: 1px solid var(--ap-line); margin: 22px 0; }

/* ------------------------------------------------------------ landing page */
#landing_page { display: flex; gap: 34px; align-items: flex-start; }
#landing_page .main-content { flex: 1 1 auto; min-width: 0; order: 1; }
#landing_page .sidebar {
  float: none !important;
  order: 2;
  flex: 0 0 268px;
  width: 268px;
}
/* the welcome copy is wrapped in .thread-body, which is an inset panel elsewhere */
#landing_page .thread-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#landing_page .main-content h1 { margin-top: 0 !important; }
#landing_page .main-content p { color: var(--ap-text-dim); max-width: 62ch; }

/* Open a New Ticket is the primary action here; Check Status is secondary. */
#landing_page a.blue.button {
  background: var(--ap-red) !important;
  border-color: var(--ap-red) !important;
  color: #fff !important;
}
#landing_page a.blue.button:hover {
  background: var(--ap-red-hover) !important;
  border-color: var(--ap-red-hover) !important;
}
#landing_page a.green.button {
  background: transparent !important;
  border-color: var(--ap-line-strong) !important;
  color: var(--ap-text) !important;
}
#landing_page a.green.button:hover {
  background: var(--ap-panel-2) !important;
  border-color: var(--ap-blue) !important;
  color: var(--ap-blue) !important;
}
#landing_page .front-page-button p { margin: 0 0 10px !important; }

#content .pull-right, #content .flush-right { max-width: 268px; }
a.green.button, a.blue.button, .green.button, .blue.button {
  display: block !important;
  width: auto !important;
  text-align: center;
  padding: 13px 18px !important;
  margin: 0 0 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--ap-radius) !important;
}

/* --------------------------------------------------------------- the well */
.search.well, .well {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  margin: 0 0 22px !important;
  color: var(--ap-text-dim) !important;
}
.well select, .well input { margin: 0 4px; }

/* ticket state filters on the ticket list */
h1 .states { font-size: 12px; }
h1 .states .state {
  color: var(--ap-text-dim) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--ap-line);
  border-radius: 999px;
  margin-left: 6px;
  display: inline-block;
}
h1 .states .state.active {
  color: var(--ap-red) !important;
  border-color: var(--ap-red) !important;
  background: var(--ap-red-dim);
}

/* -------------------------------------------------------------- login box */
/* osTicket gives the form itself an #f6f6f6 panel; the card is .login-box */
#clientLogin {
  margin-top: 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#clientLogin .login-box {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius-lg) !important;
  padding: 22px !important;
  width: 320px;
  display: table-cell;
  vertical-align: top;
  box-shadow: none !important;
}
#clientLogin .login-box > div { margin-bottom: 10px; }
#clientLogin .login-box input[type="text"],
#clientLogin .login-box input[type="password"] { width: 100%; box-sizing: border-box; }
#clientLogin .login-box input[type="submit"] { width: 100%; padding: 10px !important; }
#clientLogin .login-box strong { color: var(--ap-red) !important; display: block; }
#clientLogin strong:empty { display: none !important; }

/* ------------------------------------------------------------- forms */
table.form_table, #ticketForm table, form table {
  width: 100%;
  border: 0 !important;
}
#ticketForm table th, form table th,
table.form_table 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: 12px 14px 12px 0 !important;
  vertical-align: top;
  width: 220px;
}
#ticketForm table td, form table td, table.form_table td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ap-line-soft) !important;
  padding: 10px 0 10px 14px !important;
  vertical-align: top;
}
#ticketForm .form_title, .form_title, #ticketForm h2 {
  color: var(--ap-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 18px 0 8px !important;
  border-bottom: 1px solid var(--ap-line-strong) !important;
  margin: 0 0 6px !important;
}
#ticketForm input[type="text"], #ticketForm input[type="email"],
#ticketForm input[type="tel"], #ticketForm select { min-width: 320px; max-width: 100%; }
#ticketForm .buttons, .buttons {
  padding-top: 20px;
  border-top: 1px solid var(--ap-line);
  margin-top: 8px;
}

/* ------------------------------------------------------------ ticket view */
#ticketThread, .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: 14px !important;
}
.thread-entry .header, .thread-entry .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 14px !important;
  border-radius: var(--ap-radius) var(--ap-radius) 0 0;
}
.thread-entry .thread-body { padding: 14px !important; background: transparent !important; }
.thread-entry.avatar > .thread-entry-header { border-radius: 0; }

/* The client ticket view is built from legacy tables and a bare <form>, both
   carrying near-white backgrounds from osticket.css. */
#content table:not(.list):not(#ticketTable),
#content table:not(.list):not(#ticketTable) td,
#content table:not(.list):not(#ticketTable) th,
#content > form, #content form[action*="tickets.php"] {
  background-color: transparent !important;
  background-image: none !important;
}
#content table:not(.list):not(#ticketTable) {
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
}
#content table td.headline, #content td.headline {
  background: var(--ap-panel-2) !important;
  color: var(--ap-heading) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ap-line-strong) !important;
  padding: 9px 12px !important;
}
#content form { background: transparent !important; border: 0 !important; }
#content form h2, #content .form_title { color: var(--ap-heading) !important; }

#ticketInfo, .ticket-info {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
}
#ticketInfo h1 { font-size: 19px !important; }

/* KB / FAQ */
.faq, #faq, .category {
  background: var(--ap-panel-2) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
}
.faq h3, .category h3 { margin-top: 0 !important; }
.faq-category-name, .category-name { color: var(--ap-heading) !important; }

/* ----------------------------------------------------------------- footer */
#footer {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ap-line) !important;
  margin: 34px auto 0 !important;
  max-width: 1120px;
  padding: 18px 24px 30px !important;
  text-align: center;
  color: var(--ap-text-faint) !important;
  font-size: 11.5px;
}
#footer p { margin: 0 0 6px !important; color: var(--ap-text-faint) !important; }
#poweredBy {
  color: var(--ap-text-faint) !important;
  opacity: .55;
  font-size: 10.5px;
  letter-spacing: .04em;
}
#poweredBy:hover { opacity: .9; }
#footer img { opacity: .5; filter: grayscale(1); }

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

/* ---------------------------------------------------------------- mobile */
@media (max-width: 760px) {
  #container { padding: 0 14px 32px !important; }
  #header { padding: 16px 0 14px !important; }
  #logo::before { display: none; }
  #content { padding: 20px 16px 24px !important; }
  #nav { overflow-x: auto; flex-wrap: nowrap; }
  #ticketForm input[type="text"], #ticketForm select { min-width: 0; width: 100%; }
  #ticketForm table th, #ticketForm table td { display: block; width: auto; padding-left: 0 !important; }
  #clientLogin .login-box { width: auto; display: block; }
}