/*
  Aetherion osTicket refinement layer
  Client portal + staff panel + login polish
  No font binaries included. Uses the same Google Fonts stack as Aetherion.
*/
:root {
  --ae-bg: #0c0c10;
  --ae-bg-deep: #070708;
  --ae-bg-soft: #14141a;
  --ae-panel: rgba(20, 20, 26, 0.88);
  --ae-panel-strong: rgba(255, 255, 255, 0.045);
  --ae-line: rgba(255, 255, 255, 0.08);
  --ae-line-gold: rgba(214, 178, 110, 0.22);
  --ae-text: #f6f1e8;
  --ae-muted: #b8ae9e;
  --ae-muted-strong: #d7cbbb;
  --ae-gold: #d6b26e;
  --ae-gold-strong: #e3c383;
  --ae-gold-dark: #9e7535;
  --ae-success: #9bddb0;
  --ae-danger: #ff8c8c;
  --ae-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --ae-radius-xl: 28px;
  --ae-radius-lg: 22px;
  --ae-radius-md: 18px;
  --ae-radius-sm: 14px;
  --ae-container: 1180px;
  --ae-body-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ae-display-font: "Playfair Display", Georgia, serif;
}

html,
body,
body#loginBody {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(214, 178, 110, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(214, 178, 110, 0.08), transparent 34%),
    linear-gradient(180deg, #0a0a0d 0%, #0e0f14 100%) !important;
  color: var(--ae-text) !important;
  font-family: var(--ae-body-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before,
body#loginBody::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(214, 178, 110, 0.08), transparent 25%, transparent 72%, rgba(214, 178, 110, 0.06)),
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.04), transparent 42%);
  opacity: .85;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

a,
a:link,
a:visited {
  color: var(--ae-gold-strong);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--ae-text);
}

#container {
  width: min(100% - 40px, var(--ae-container)) !important;
  min-height: 760px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ae-line-gold) !important;
  border-radius: var(--ae-radius-xl) !important;
  background:
    linear-gradient(180deg, rgba(18, 17, 16, 0.94), rgba(7, 7, 8, 0.96)),
    radial-gradient(circle at top, rgba(214,178,110,.09), transparent 36%) !important;
  box-shadow: var(--ae-shadow) !important;
}

/* Header / brand alignment */
#header,
#header.ae-client-header,
#header.ae-staff-header {
  min-height: 120px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 28px 36px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ae-line-gold) !important;
  background:
    linear-gradient(180deg, rgba(10, 10, 13, 0.92), rgba(12, 11, 10, 0.86)) !important;
}

#header .pull-right,
#header .flush-right,
#header #info,
#header p#info,
.ae-auth-links {
  float: none !important;
  position: relative !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  color: var(--ae-muted-strong) !important;
  font-family: var(--ae-body-font) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: .02em !important;
}

#header p,
#header .ae-auth-links p {
  margin: 0 !important;
  color: var(--ae-muted-strong) !important;
}

#header .ae-auth-links a,
#header #info a {
  color: var(--ae-gold-strong) !important;
  border-bottom: 1px solid rgba(214,178,110,.24);
}

#header .ae-auth-links a:hover,
#header #info a:hover {
  color: var(--ae-text) !important;
  border-bottom-color: rgba(246,241,232,.55);
}

#header .ae-language-links {
  display: block;
  margin-top: 6px !important;
}

#logo,
#header #logo,
#header a#logo,
.ae-brand-lockup,
#loginBox #logo a.ae-brand-lockup {
  float: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ae-text) !important;
  text-decoration: none !important;
}

#logo::before,
#logo::after,
#header #logo::before,
#header #logo::after,
#loginBox #logo a::before,
#loginBox #logo a::after {
  display: none !important;
  content: none !important;
}

.ae-brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #f3da9b 0%, #c79c4d 100%) !important;
  color: #17120a !important;
  font-family: var(--ae-display-font) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 18px 44px rgba(214,178,110,.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.ae-brand-copy {
  display: grid !important;
  gap: 4px !important;
}

.ae-brand-name {
  display: block !important;
  color: var(--ae-text) !important;
  font-family: var(--ae-body-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.ae-brand-tagline {
  display: block !important;
  color: var(--ae-gold) !important;
  font-family: var(--ae-body-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  opacity: .9 !important;
  white-space: nowrap !important;
}

/* Navigation */
#nav,
#sub_nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(214, 178, 110, 0.14) !important;
  background: rgba(214, 178, 110, 0.035) !important;
}

#nav li,
#sub_nav li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#nav li a,
#nav li a.home,
#nav li a.kb,
#nav li a.new,
#nav li a.status,
#nav li a.tickets,
#nav a,
#sub_nav a,
.tabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 10px 16px !important;
  border: 1px solid var(--ae-line-gold) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--ae-muted-strong) !important;
  font-family: var(--ae-body-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}

#nav li a.active,
#nav li.active > a,
#nav a.active,
#nav a:hover,
#sub_nav a:hover,
.tabs a:hover,
.tabs a.active {
  background: rgba(214,178,110,.14) !important;
  color: var(--ae-text) !important;
  border-color: rgba(214,178,110,.42) !important;
  transform: translateY(-1px) !important;
}

#content {
  width: auto !important;
  min-height: 520px !important;
  margin: 0 !important;
  padding: 34px 38px 42px !important;
  background: transparent !important;
  color: var(--ae-text) !important;
}

/* Landing page */
#landing_page {
  display: grid !important;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
  min-height: 430px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#landing_page .main-content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ae-text) !important;
}

#landing_page .sidebar,
#landing_page #sidebar,
#landing_page .buttons,
#landing_page .left {
  width: auto !important;
}

#landing_page #new_ticket,
#landing_page #check_status {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 0 14px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214,178,110,.38) !important;
  background: linear-gradient(180deg, #f3da9b 0%, #c79c4d 100%) !important;
  color: #17120a !important;
  box-shadow: 0 18px 54px rgba(214,178,110,.18) !important;
  text-decoration: none !important;
}

#landing_page #new_ticket h3,
#landing_page #check_status h3,
#landing_page #new_ticket a,
#landing_page #check_status a {
  margin: 0 !important;
  color: #17120a !important;
  font-family: var(--ae-body-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.thread-body,
.thread-entry .thread-body,
#landing_page .thread-body,
.ae-welcome-panel {
  position: relative !important;
  min-height: 300px !important;
  padding: 42px !important;
  overflow: hidden !important;
  border: 1px solid var(--ae-line-gold) !important;
  border-radius: var(--ae-radius-lg) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    radial-gradient(circle at 82% 20%, rgba(214,178,110,.10), transparent 36%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 70px rgba(0,0,0,.30) !important;
  color: var(--ae-muted-strong) !important;
  font-family: var(--ae-body-font) !important;
  line-height: 1.75 !important;
}

#landing_page .thread-body::after,
.ae-welcome-panel::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(214,178,110,.18);
  border-radius: 18px;
  pointer-events: none;
}

.ae-eyebrow,
.section-kicker,
.eyebrow {
  margin: 0 0 12px !important;
  color: var(--ae-gold) !important;
  font-family: var(--ae-body-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

#landing_page h1,
.thread-body h1,
.ae-welcome-panel h1,
h1,
h2 {
  color: var(--ae-text) !important;
  font-family: var(--ae-display-font) !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  text-shadow: none !important;
}

.ae-welcome-panel h1,
#landing_page .thread-body h1 {
  margin: 0 0 18px !important;
  font-size: clamp(36px, 5vw, 58px) !important;
  line-height: 1.02 !important;
}

.thread-body p,
.ae-welcome-panel p,
#landing_page .thread-body p {
  position: relative;
  z-index: 1;
  max-width: 730px !important;
  margin: 0 0 24px !important;
  color: #d7cbbb !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
}

.ae-support-points {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.ae-support-points span,
.status-pill,
.label-bare {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,178,110,.18);
  background: rgba(214,178,110,.06);
  color: #eadbc1 !important;
  font-size: 13px;
}

/* Buttons, forms, tables */
button,
input[type="button"],
input[type="submit"],
.button,
.green.button,
a.button,
.buttons input,
button.button,
input.button {
  border: 1px solid rgba(214,178,110,.34) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #e1c287 0%, #c79c4d 100%) !important;
  color: #17120a !important;
  font-family: var(--ae-body-font) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 14px 42px rgba(214,178,110,.16) !important;
  text-shadow: none !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
a.button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

input,
textarea,
select,
.select2-container .select2-choice,
.redactor-box,
.redactor-editor,
input[type="text"],
input[type="email"],
input[type="password"] {
  border: 1px solid var(--ae-line) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--ae-text) !important;
  font-family: var(--ae-body-font) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(215,203,187,.58) !important;
}

label,
form label,
form td,
form th,
table,
table td,
table th,
#content p,
#content div {
  color: var(--ae-muted-strong);
  font-family: var(--ae-body-font);
}

table.list,
table.grid,
table.form_table,
.ticket_info,
.infoTable,
.thread-entry,
.message,
.notice,
.warning,
.error {
  border-color: var(--ae-line) !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--ae-muted-strong) !important;
}

table.list th,
table.grid th,
table.form_table th,
#content th {
  background: rgba(214,178,110,.08) !important;
  color: var(--ae-text) !important;
  border-color: var(--ae-line) !important;
}

table.list td,
table.grid td,
#content td {
  border-color: rgba(255,255,255,.06) !important;
}

#msg_error,
.error-banner,
.error_bar {
  border-color: rgba(255,140,140,.42) !important;
  background: rgba(255,140,140,.10) !important;
  color: #ffdada !important;
}

#msg_notice,
.notice-banner,
.notice_bar {
  border-color: rgba(155,221,176,.36) !important;
  background: rgba(155,221,176,.09) !important;
  color: #dcffe8 !important;
}

#msg_warning,
.warning-banner,
.warning_bar {
  border-color: rgba(214,178,110,.42) !important;
  background: rgba(214,178,110,.09) !important;
  color: #f5dfb4 !important;
}

/* Footer */
#footer {
  width: min(100% - 40px, var(--ae-container)) !important;
  margin: 22px auto 24px !important;
  padding: 0 10px !important;
  color: rgba(215,203,187,.62) !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
  font-family: var(--ae-body-font) !important;
}

#footer p,
#footer a {
  color: rgba(215,203,187,.62) !important;
  font-size: 12px !important;
}

#poweredBy,
#footer #poweredBy,
#footer a#poweredBy,
.osticket-logo {
  display: none !important;
  visibility: hidden !important;
}

/* Staff panel */
body.staff,
#container #pjax-container,
#pjax-container {
  color: var(--ae-text) !important;
}

#header.ae-staff-header {
  min-height: 104px !important;
}

#content > div:not(#nav):not(#sub_nav),
.dialog,
#popup,
#popup .body,
#alert {
  border-color: var(--ae-line) !important;
  background: rgba(20,20,26,.94) !important;
  color: var(--ae-muted-strong) !important;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content .pull-left h2,
#content .pull-left h3 {
  color: var(--ae-text) !important;
  font-family: var(--ae-display-font) !important;
  font-weight: 600 !important;
}

#content hr,
hr {
  border-color: var(--ae-line) !important;
  background: transparent !important;
}

/* Staff login */
#loginBody #brickwall,
#loginBody #blur,
#loginBody #background {
  display: none !important;
}

#loginBody {
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
}

#loginBox {
  position: relative !important;
  width: min(100% - 28px, 520px) !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 34px !important;
  border: 1px solid var(--ae-line-gold) !important;
  border-radius: var(--ae-radius-xl) !important;
  background:
    linear-gradient(180deg, rgba(20,20,26,.94), rgba(9,9,11,.96)),
    radial-gradient(circle at top, rgba(214,178,110,.12), transparent 32%) !important;
  box-shadow: var(--ae-shadow) !important;
  color: var(--ae-text) !important;
}

#loginBox:before,
#loginBox:after {
  display: none !important;
}

#loginBox #logo,
#loginBox h1#logo {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  text-align: left !important;
}

#loginBox .ae-login-brand {
  justify-content: center !important;
}

#loginBox .ae-brand-mark {
  width: 60px !important;
  height: 60px !important;
  flex-basis: 60px !important;
  font-size: 31px !important;
}

#login-message {
  color: var(--ae-text) !important;
  font-family: var(--ae-display-font) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

#loginBox .banner,
#loginBox .banner small {
  color: var(--ae-muted-strong) !important;
  font-family: var(--ae-body-font) !important;
}

#loginBox fieldset {
  padding: 0 !important;
  border: 0 !important;
}

#loginBox input[type="text"],
#loginBox input[type="password"] {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 0 12px !important;
  padding: 0 16px !important;
}

#loginBox .submit.button {
  min-height: 48px !important;
  padding: 0 18px !important;
}

#company {
  margin-top: 24px !important;
  color: rgba(215,203,187,.62) !important;
  text-align: center !important;
}

/* responsive */
@media (max-width: 900px) {
  #container,
  #footer {
    width: min(100% - 24px, var(--ae-container)) !important;
    margin-top: 12px !important;
  }

  #header,
  #header.ae-client-header,
  #header.ae-staff-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    min-height: auto !important;
    padding: 24px !important;
  }

  #header .ae-auth-links,
  #header #info {
    width: 100% !important;
    text-align: left !important;
  }

  #landing_page {
    grid-template-columns: 1fr !important;
  }

  #content {
    padding: 24px !important;
  }

  .thread-body,
  #landing_page .thread-body,
  .ae-welcome-panel {
    padding: 30px 24px !important;
  }

  .ae-welcome-panel h1,
  #landing_page .thread-body h1 {
    font-size: 38px !important;
  }
}

@media (max-width: 560px) {
  .ae-brand-lockup {
    gap: 12px !important;
  }

  .ae-brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    font-size: 24px !important;
  }

  .ae-brand-name {
    font-size: 12px !important;
    letter-spacing: .16em !important;
  }

  .ae-brand-tagline {
    display: none !important;
  }

  #nav,
  #sub_nav {
    padding: 14px !important;
  }

  #nav li a,
  #nav a,
  #sub_nav a {
    width: 100% !important;
  }
}