/* ==========================================================================
   Atomicx theme for osTicket 1.18 client portal (eticket.atomicx.com)
   Matches support.atomicx.com: charcoal header, red rule, warm grey page.
   Install: upload to /assets/default/css/atomicx.css and add, as the LAST
   stylesheet in include/client/header.inc.php:
     <link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/atomicx.css?v=1">
   ========================================================================== */

:root {
  --atx-ink:      #1f2124;   /* header / dark bars */
  --atx-ink-2:    #2b2b2b;   /* body text */
  --atx-red:      #c00000;   /* brand red */
  --atx-red-dk:   #9e0000;
  --atx-page:     #e8e5e1;   /* warm grey page */
  --atx-card:     #ffffff;
  --atx-field:    #faf9f7;
  --atx-line:     #dcd8d2;
  --atx-muted:    #8a857f;
  --atx-soft:     #f4f2ef;
  --atx-font: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ---- Page shell ------------------------------------------------------- */
html, body {
  background: var(--atx-page) !important;
  background-image: none !important;
  color: var(--atx-ink-2);
  font-family: var(--atx-font);
  font-size: 15px;
  line-height: 1.55;
}
#container {
  width: auto !important;
  max-width: 1080px;
  margin: 28px auto 0;
  background: var(--atx-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  border: 0;
}

/* ---- Header ----------------------------------------------------------- */
#header {
  background: var(--atx-ink);
  height: auto !important;
  padding: 18px 28px 2px;
  position: relative;
}
#container > .clear { display: none; }
#container > hr { border: 0; height: 4px; background: var(--atx-red); margin: 0; }  /* pages with no nav */
#header:after { content: ""; display: block; clear: both; }
#header #logo { height: auto; padding: 4px 0 14px; display: inline-block; }
#header .pull-right p { margin: 0; }
#header #logo img {
  max-height: 44px;
  width: auto;
  /* white-text logo for the dark bar (same file support.atomicx.com uses).
     Remove this line once you upload it under Admin > Settings > Company > Logo */
  content: url("https://support.atomicx.com/files/atomicx-web.png");
}
#header .valign-helper { display: none; }
#header p, #header .pull-right { color: #b9b4ad; font-size: 13px; }
#header .pull-right { padding-top: 10px; }
#header p a { color: #fff; font-weight: 600; text-decoration: none; }
#header p a:hover { color: #ff6b6b; }

/* "SUPPORT CENTER" wordmark, mirrors "SUPPORT PORTAL" */
#header #logo:after {
  content: "SUPPORT CENTER";
  display: inline-block;
  vertical-align: middle;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #44474c;
  color: #fff;
  font-size: 13px;
  letter-spacing: .14em;
  font-weight: 600;
}

/* ---- Nav (tabs inside the dark header) --------------------------------- */
#nav {
  clear: both;
  background: var(--atx-ink) !important;
  border: 0 !important;
  border-top: 1px solid #34373c !important;
  border-bottom: 4px solid var(--atx-red) !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 14px !important;
  height: auto !important;
  width: auto !important;
}
#nav li { display: inline-block; margin: 0; }
#nav li a {
  display: block;
  background: none !important;           /* kill stock icon sprites */
  padding: 12px 14px !important;
  margin: 0 !important;
  color: #c9c5bf !important;
  font-size: 14px;
  font-weight: 600;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  text-decoration: none !important;
}
#nav li a:hover { color: #fff !important; }
#nav li a.active, #nav li a.active:hover {
  color: #fff !important;
  border-bottom-color: #ff4d4d !important;
}

/* ---- Content ---------------------------------------------------------- */
#content { padding: 32px 28px 40px; }
#content h1, #content h2, #content h3 {
  color: var(--atx-ink);
  font-family: var(--atx-font);
  font-weight: 600;
  letter-spacing: -.01em;
}
#content a { color: var(--atx-red); }
#content a:hover { color: var(--atx-red-dk); }

/* Buttons everywhere in the client portal */
.button, a.button, input[type=submit], input[type=button], input[type=reset],
button.button, .green.button, .blue.button {
  background: var(--atx-red) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 600 14px/1 var(--atx-font) !important;
  padding: 11px 20px !important;
  text-shadow: none !important;
  cursor: pointer;
  height: auto !important;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover { background: var(--atx-red-dk) !important; }
input[type=reset], input[type=button][value="Cancel"], input[name=cancel] {
  background: #fff !important; color: var(--atx-ink-2) !important;
  border: 1px solid var(--atx-line) !important;
}

/* Fields */
#content input[type=text], #content input[type=email], #content input[type=tel],
#content input[type=password], #content select, #content textarea {
  background: var(--atx-field);
  border: 1px solid var(--atx-line);
  border-radius: 3px;
  padding: 8px 10px;
  font: 14px var(--atx-font);
  box-shadow: none;
}
#content input:focus, #content select:focus, #content textarea:focus {
  outline: none; border-color: var(--atx-red);
  box-shadow: 0 0 0 3px rgba(192,0,0,.12);
}
.form-header h1, .form-header h2 { border-bottom: 1px solid var(--atx-line); padding-bottom: 8px; }

/* Ticket list / thread */
#ticketTable th, table.list th {
  background: var(--atx-ink) !important; color: #fff !important;
  border: 0 !important; padding: 9px 10px !important; font-weight: 600;
}
#ticketTable td, table.list td { border-color: var(--atx-line) !important; }
.thread-entry .header { border-radius: 3px 3px 0 0; }

/* Notices */
#msg_notice, #msg_warning, #msg_error, .info-banner {
  border-radius: 3px; border-left: 4px solid var(--atx-red) !important;
  background-image: none !important; padding: 12px 14px !important;
}

/* ---- Footer ----------------------------------------------------------- */
#footer {
  max-width: 1080px; width: auto !important;
  margin: 0 auto 40px;
  padding: 18px 28px;
  color: var(--atx-muted);
  font-size: 12px;
  text-align: center;
}
#footer p { margin: 0 0 6px; }
#footer a#poweredBy { opacity: .45; filter: grayscale(1); }

/* ==========================================================================
   Landing page (index.php). Content pasted into Admin > Manage > Pages
   ========================================================================== */
#landing_page .sidebar { display: none; }   /* replaced by the action cards */
#landing_page .main-content, #landing_page .main-content * { box-sizing: border-box; }
#landing_page .main-content { width: 100% !important; float: none !important; }
#landing_page .thread-body { padding: 0 !important; margin: 0 !important; border: 0 !important; }

.atx-hero { padding: 6px 0 26px; border-bottom: 1px solid var(--atx-line); }
.atx-kicker {
  color: var(--atx-muted); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px;
}
#content .atx-hero h1 { font-size: 32px; line-height: 1.2; margin: 0 0 10px; }
.atx-hero .atx-lede { font-size: 16px; color: #55524e; max-width: 640px; margin: 0; }

.atx-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 0; }
.atx-fact { padding: 0 28px 0 0; margin-right: 28px; border-right: 1px solid var(--atx-line); }
.atx-fact:last-child { border-right: 0; }
.atx-fact .atx-kicker { margin-bottom: 2px; }
.atx-fact strong { font-size: 15px; color: var(--atx-ink); }
#content .atx-fact a { color: var(--atx-red); font-weight: 700; text-decoration: none; font-size: 17px; }

.atx-cards { display: flex; flex-wrap: wrap; gap: 18px; margin: 30px 0; }
.atx-card {
  flex: 1 1 260px; display: flex; flex-direction: column;
  border: 1px solid var(--atx-line); border-radius: 3px; background: #fff;
  overflow: hidden;
}
.atx-card-head {
  background: var(--atx-ink); color: #fff; font-size: 16px; font-weight: 600;
  padding: 11px 14px; display: flex; align-items: center; gap: 10px;
}
.atx-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--atx-red); color: #fff; font-size: 11px; font-weight: 700;
}
.atx-card-body { padding: 16px 14px 18px; flex: 1; display: flex; flex-direction: column; }
.atx-card-body p { margin: 0 0 16px; color: #55524e; font-size: 14px; flex: 1; }
#content a.atx-btn {
  display: inline-block; align-self: flex-start;
  background: var(--atx-red); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 3px;
}
#content a.atx-btn:hover { background: var(--atx-red-dk); color: #fff; }
#content a.atx-btn.atx-ghost { background: #fff; color: var(--atx-ink); border: 1px solid var(--atx-line); }
#content a.atx-btn.atx-ghost:hover { border-color: var(--atx-ink); }

.atx-how { display: flex; flex-wrap: wrap; background: var(--atx-soft); border: 1px solid var(--atx-line); border-radius: 3px; }
.atx-how > div { flex: 1 1 220px; padding: 16px 18px; border-right: 1px solid var(--atx-line); }
.atx-how > div:last-child { border-right: 0; }
.atx-how strong { display: block; color: var(--atx-ink); font-size: 14px; margin-bottom: 4px; }
.atx-how span { color: #6b6762; font-size: 13px; }

.atx-urgent {
  margin-top: 22px; padding: 14px 18px; border-left: 4px solid var(--atx-red);
  background: #fff; border-top: 1px solid var(--atx-line); border-right: 1px solid var(--atx-line);
  border-bottom: 1px solid var(--atx-line); font-size: 14px; color: #55524e;
}
#content .atx-urgent a { font-weight: 700; text-decoration: none; }

@media (max-width: 700px) {
  #container { margin-top: 0; }
  #header, #content { padding-left: 16px; padding-right: 16px; }
  #nav { padding: 0 6px !important; }
  #header #logo:after { display: none; }
  #content .atx-hero h1 { font-size: 26px; }
  .atx-fact { border-right: 0; margin: 0 0 12px; width: 100%; }
  .atx-how > div { border-right: 0; border-bottom: 1px solid var(--atx-line); }
}

/* ---- Override osTicket thread.css inside the landing wrapper (v3) ---- */
#landing_page .thread-body { font-family: var(--atx-font) !important; font-size: 15px !important; line-height: 1.55 !important; }
#landing_page .thread-body a:not(.button) { color: var(--atx-red) !important; }
#landing_page .thread-body a.atx-btn { color: #fff !important; }
#landing_page .thread-body a.atx-btn.atx-ghost { color: var(--atx-ink) !important; }
#landing_page .thread-body > .atx-hero { margin: 0 !important; }
#landing_page .thread-body .atx-facts { margin-top: 22px !important; }
#landing_page .thread-body > .atx-cards { margin: 30px 0 !important; }
#landing_page .thread-body > .atx-urgent { margin-top: 22px !important; }