/*
    evix-brand.css — EVIX house style for the osTicket client portal.

    Same semantic tokens as evix.org/main.css (brand navy, periwinkle, pink;
    Fira Sans/Fira Code), so the helpdesk reads as part of the same site.
    Loaded as the LAST stylesheet from include/client/header.inc.php, so it
    only has to out-specify osTicket's own theme.css.

    Self-contained: nothing is fetched from evix.org (cross-origin fonts would
    need CORS), the woff2 files live next to this file.
*/

/* ==========================================================================
   Fonts (subset copied from evix.org/static/fonts)
   ========================================================================== */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fira-sans-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fira-sans-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fira-sans-700-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-code-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens — identical to evix.org
   ========================================================================== */
:root {
  --navy: #091540;
  --periwinkle: #7692ff;
  --pale: #abd2fa;
  --pink: #e60073;
  --bg: #eef1ff;
  --surface: #ffffff;
  --surface-2: #f5f7ff;
  --surface-3: #e8ecff;
  --border: #d3dbf7;
  --border-strong: #adbaea;
  --text: #0d1330;
  --text-muted: #4b5578;
  --link: #2338c4;
  --link-hover: #101f8e;
  --accent: #b3005a;
  --brand-band: var(--navy);
  --on-brand: #e9edff;
  --code-bg: #eef1fb;
  --shadow: 0 1px 2px rgb(9 21 64 / 6%), 0 10px 30px -18px rgb(9 21 64 / 28%);
  --font: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 10px;
  --radius-sm: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070a19;
    --surface: #101632;
    --surface-2: #182046;
    --surface-3: #202a58;
    --border: #2b3668;
    --border-strong: #3d4a86;
    --text: #e9ecff;
    --text-muted: #a6b0dd;
    --link: #a8bcff;
    --link-hover: #cdd8ff;
    --accent: #ff6aa8;
    --brand-band: #070d24;
    --code-bg: #1b2450;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
}

/* ==========================================================================
   Page shell
   ========================================================================== */
body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font) !important;
  font-size: 15px;
  line-height: 1.6;
}

#container {
  width: min(74rem, 100% - 2rem) !important;
  max-width: none !important;
  margin: 1.5rem auto 3rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

h1, h2, h3, h4, h5 { color: var(--text); font-weight: 700; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
code, pre, tt, .mono { font-family: var(--mono); background: var(--code-bg); }

/* ==========================================================================
   Header — navy band with the site's blob mark and wordmark
   ========================================================================== */
#header {
  background: var(--brand-band) !important;
  color: var(--on-brand) !important;
  border: 0 !important;
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem !important;
  box-shadow: var(--shadow);
  height: auto !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#header p, #header a { color: #c3cdff !important; }
#header p { margin: 0 !important; }
/* The stock markup puts the "Guest User | Sign In" block before the logo;
   in a flex row the brand has to come first regardless. */
#header #logo { order: -1; }
#header .pull-right { order: 2; margin-left: 1.25rem; float: none !important; text-align: right; }
#header a:hover { color: #fff !important; }

/* The stock logo image is replaced by the same mark the website uses. */
#header #logo { display: inline-flex !important; align-items: center; float: none !important; text-decoration: none; }
#header #logo img, #header #logo .valign-helper { display: none !important; }
#header #logo::before {
  content: "";
  width: 2.6rem;
  height: 2.6rem;
  margin-right: -1.55rem;
  flex: none;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="g" x1="1" x2="0" y1="0" y2="1"><stop offset="0%25" stop-color="%237692ff"/><stop offset="100%25" stop-color="%23e60073"/></linearGradient></defs><path fill="url(%23g)" transform="translate(100 100)" d="M51.6,-70.8C64.6,-61.5,71.5,-43.5,75.1,-25.9C78.8,-8.3,79.3,8.8,75.3,25.6C71.4,42.4,63,58.8,49.7,63.6C36.5,68.4,18.2,61.5,-0.1,61.6C-18.3,61.7,-36.7,68.7,-52.5,64.7C-68.4,60.8,-81.7,45.8,-81.6,30.3C-81.5,14.7,-67.9,-1.5,-60.3,-18C-52.7,-34.5,-51.1,-51.3,-42,-61.9C-33,-72.5,-16.5,-77,1.4,-78.9C19.3,-80.8,38.5,-80.1,51.6,-70.8Z"/></svg>');
}
#header #logo::after {
  content: "EVIX";
  position: relative;
  color: var(--on-brand);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
#header #logo:hover::after { color: #fff; }

/* ==========================================================================
   Navigation — same row as the brand, right aligned, exactly like evix.org
   ========================================================================== */
#nav {
  order: 1;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
  white-space: normal !important;
  list-style: none;
}
#nav li { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#nav li a {
  display: block;
  background: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem !important;
  margin: 0 !important;
  color: #c3cdff !important;
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center !important;
  text-decoration: none;
  width: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: color 120ms ease, background-color 120ms ease;
}
#nav li a:hover {
  background: rgb(255 255 255 / 10%) !important;
  color: #fff !important;
}
#nav li a.active {
  color: #fff !important;
  background: rgb(255 255 255 / 12%) !important;
  border-color: rgb(255 255 255 / 18%) !important;
  box-shadow: inset 0 -2px 0 var(--periwinkle);
}
#nav li a:focus { outline: none; }
#nav li a:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 2px; }

/* In dark mode the navy band and the page background are nearly the same
   colour, so the bar would dissolve into the page. Give it an edge. */
@media (prefers-color-scheme: dark) {
  #header {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
  }
}

/* ==========================================================================
   Content surface
   ========================================================================== */
#content {
  background: var(--surface) !important;
  color: var(--text);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 2rem) !important;
  margin: 1.25rem 0 1.5rem !important;
  min-height: 0 !important;
}

/* ==========================================================================
   Buttons — pink is the primary action, periwinkle outline the secondary
   ========================================================================== */
.button, a.button, input[type="submit"], input[type="button"], input[type="reset"], button.btn, .btn {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-radius: var(--radius) !important;
  border: 1px solid transparent !important;
  padding: 0.65rem 1.4rem !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 100ms ease, background-color 120ms ease;
}
.button:hover, a.button:hover, input[type="submit"]:hover, .btn:hover { transform: translateY(-1px); }

.button, a.button, .blue.button, input[type="submit"], .btn {
  background-color: var(--pink) !important;
  color: #fff !important;
}
.button:hover, a.button:hover, .blue.button:hover, input[type="submit"]:hover, .btn:hover {
  background-color: #ff1a8c !important;
  color: #fff !important;
}

.green.button, .greybutton, input[type="button"], input[type="reset"] {
  background-color: transparent !important;
  color: var(--link) !important;
  border-color: var(--border-strong) !important;
}
.green.button:hover, .greybutton:hover, input[type="button"]:hover, input[type="reset"]:hover {
  background-color: var(--surface-3) !important;
  color: var(--link-hover) !important;
}

:is(.button, a.button, input[type="submit"], .btn):focus-visible {
  outline: 2px solid var(--periwinkle);
  outline-offset: 3px;
}

/* ==========================================================================
   Forms
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea, .redactor-box .redactor-editor {
  font-family: var(--font) !important;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.5rem 0.65rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--periwinkle);
  outline-offset: 1px;
  border-color: var(--periwinkle) !important;
}
label, .faded, .light, small { color: var(--text-muted); }

/* The CAPTCHA is a generated bitmap with a pale background; a frame keeps it
   from looking like a sticker pasted on the dark form. */
#captchaRow img, img[src*="captcha"] {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  vertical-align: middle;
}

/* ==========================================================================
   Tables and ticket threads
   ========================================================================== */
table.list, table.list th, table.list td, .ticket_info, table.padded td {
  border-color: var(--border) !important;
  color: var(--text);
}
table.list thead th, table.list th {
  background: var(--surface-3) !important;
  background-image: none !important;
  color: var(--text) !important;
  font-weight: 700;
}
table.list tbody tr:nth-child(even) td { background: var(--surface-2) !important; }
table.list tbody tr:hover td { background: var(--surface-3) !important; }

.thread-entry, .thread-body, #ticketThread .thread-entry {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.thread-entry .header, .thread-entry.message .header {
  background: var(--surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.thread-entry.response .header, .thread-entry.note .header { background: var(--surface-3) !important; }

/* thread.css hardcodes `.thread-body { color: #333 }` and
   `.thread-body h1..h6 { color: black }`, which is unreadable on the dark
   surface. Re-point every text node in the content area at the tokens. */
#content, #content p, #content li, #content dd, #content dt, #content td, #content th,
#content .thread-body, #content .thread-body p, #content .thread-body li,
#content .thread-body td, #content .thread-body th, #content .thread-body dd,
#content .thread-body h1, #content .thread-body h2, #content .thread-body h3,
#content .thread-body h4, #content .thread-body h5, #content .thread-body h6,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
  color: var(--text) !important;
}
#content .faded, #content .light, #content small, #content .thread-body blockquote {
  color: var(--text-muted) !important;
}
#content a:not(.button):not(.btn), #content .thread-body a:not(.button) {
  color: var(--link) !important;
}
#content a:not(.button):not(.btn):hover, #content .thread-body a:not(.button):hover {
  color: var(--link-hover) !important;
}

/* On the landing page the welcome text is wrapped in a .thread-body; there it
   is body copy on the card, not a quoted message, so drop the frame. */
#landing_page .thread-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#landing_page .thread-body h1 { font-size: 1.8rem; margin-top: 0; }

/* Status and notice boxes */
#msg_notice, #msg_warning, #msg_error, .tip_box {
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
  background-image: none !important;
}
#msg_notice { background: #e7f7ef !important; border-color: #9bd8bd !important; color: #14543a !important; }
#msg_warning { background: #fff5e0 !important; border-color: #e8c887 !important; color: #6b4b06 !important; }
#msg_error { background: #fdeaf1 !important; border-color: #f0a9c6 !important; color: #8a0040 !important; }

@media (prefers-color-scheme: dark) {
  #msg_notice { background: #10321f !important; border-color: #2f6b4a !important; color: #b8ecd0 !important; }
  #msg_warning { background: #322610 !important; border-color: #6b562f !important; color: #f0d9a4 !important; }
  #msg_error { background: #3a0f22 !important; border-color: #7a2a49 !important; color: #ffc0d6 !important; }
}

/* osTicket reuses `.error` for the little red asterisk next to required fields
   and for inline validation text, so it must stay plain text, not a badge. */
#content .error, #content .warning, #content .success, .required, span.error {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 600;
}
#content span.error, span.error { color: var(--accent) !important; }
/* `.required` wraps the whole label text, so it must keep the normal colour. */
#content .required, .required { color: inherit !important; font-weight: inherit; }

/* ==========================================================================
   Footer
   ========================================================================== */
#footer {
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 0.9rem;
  padding-top: 1rem !important;
  text-align: center;
}
#footer #poweredBy {
  background-image: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 0.8rem;
  opacity: 0.75;
}
#footer a, #poweredBy { color: var(--text-muted) !important; text-decoration: none; }
#footer a:hover, #poweredBy:hover { color: var(--link) !important; text-decoration: underline; }

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 40rem) {
  #container { width: min(74rem, 100% - 1rem) !important; }
  #header { padding: 0.55rem 0.9rem !important; }
  #header #logo::before { width: 2.2rem; height: 2.2rem; margin-right: -1.3rem; }
  #header #logo::after { font-size: 1.2rem; }
  #content { padding: 1rem !important; }
}