/* SolveIt Suite customer portal theme for osTicket 1.18 (client pages only).
   Loaded after the vendor stylesheets by include/client/header.inc.php (patched by scripts/osticket-patch.sh).
   Tokens mirror the SolveIt Suite console (solveitsuite repo, packages/ui-tokens). Light theme only: ticket
   bodies carry customers' own inline HTML, which does not survive a dark inversion. */

@font-face {
  font-family: "Geist";
  src: url("Geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --si-canvas: #faf9f6;
  --si-surface: #ffffff;
  --si-sunken: #f3f1ec;
  --si-ink: #111111;
  --si-ink-2: #5f5e5a;
  --si-ink-3: #6e6c67;
  --si-line: #e4e1db;
  --si-line-strong: #cfcbc3;
  --si-control: #8f8c85;
  --si-accent: #f4581c;
  --si-focus: #1f5fd1;
  --si-success: #0e7c3a;
  --si-success-soft: #e3f3e8;
  --si-warning: #8a5a00;
  --si-warning-soft: #fbefd6;
  --si-danger: #c2261f;
  --si-danger-soft: #fbe5e3;
  --si-info: #1f5fd1;
  --si-info-soft: #e6eefc;
  --si-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --si-measure: 70ch;
}

/* ---------- page frame ---------- */
html { overflow-y: auto; }
body {
  margin: 0;
  background: var(--si-canvas);
  color: var(--si-ink);
  font-family: var(--si-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body, input, select, textarea, button, .button {
  font-family: var(--si-font);
  color: var(--si-ink);
}
#container {
  background: transparent;
  width: auto;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  box-shadow: none;
}
#content {
  margin: 0;
  padding: 40px 0 72px;
  min-height: 50vh;
}
#footer {
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 48px;
  box-sizing: content-box;
  font-size: 13px;
  color: var(--si-ink-3);
}
#footer p { margin: 0; padding-top: 20px; border-top: 1px solid var(--si-line); }
#footer a { color: var(--si-ink-3); }

/* ---------- header and navigation ---------- */
#header {
  position: static;
  height: auto;
  padding: 28px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
#header .pull-right { float: none; order: 2; }
#header #logo {
  order: 1;
  float: none;
  height: auto;
  display: inline-flex;
  align-items: center;
}
#header #logo .valign-helper { display: none; }
#header #logo img {
  height: 24px;
  width: auto;
  max-height: none;
  max-width: none;
  display: block;
}
#header p {
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--si-ink-2);
  white-space: nowrap;
}
#header p a { color: var(--si-ink); }
#header + .clear { display: none; }

#nav {
  margin: 0;
  padding: 0;
  height: auto;
  background: none;
  border-top: 0;
  border-bottom: 1px solid var(--si-line);
  box-shadow: none;
  white-space: normal;
  display: flex;
  gap: 28px;
  overflow-x: auto;
}
#nav li { display: block; }
#nav li a,
.rtl #nav li a {
  display: block;
  height: auto;
  line-height: 1.2;
  padding: 10px 0 12px;
  margin: 0 0 -1px;
  color: var(--si-ink-2);
  background: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
#nav li a:hover { background: none; color: var(--si-ink); }
#nav li a.home, #nav li a.kb, #nav li a.new, #nav li a.status, #nav li a.tickets { background-image: none !important; text-decoration: none; }
#nav li a { text-decoration: none; }
#nav li a.active {
  background: none;
  color: var(--si-ink);
  border-bottom-color: var(--si-ink);
}
#content > hr { display: none; }

/* ---------- typography ---------- */
h1 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--si-ink);
  margin: 0 0 16px;
}
h2, .subject {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--si-ink);
}
h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
#content p { max-width: var(--si-measure); }
a, .link {
  color: var(--si-ink);
  text-decoration: underline;
  text-decoration-color: var(--si-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin-bottom: 0;
}
a:hover, .link:hover {
  border-bottom: 0;
  margin-bottom: 0;
  text-decoration-color: var(--si-ink);
}
.faded { color: var(--si-ink-3); }
hr { border-top-color: var(--si-line); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--si-focus);
  outline-offset: 2px;
}

/* ---------- notices ---------- */
#msg_notice, #msg_warning, #msg_error, #msg_info, .warning-banner {
  height: auto;
  line-height: 1.5;
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 6px;
  background-image: none;
  border: 1px solid transparent;
  font-size: 14px;
}
#msg_notice { background-color: var(--si-success-soft); border-color: var(--si-success-soft); color: var(--si-success); }
#msg_warning, .warning-banner { background-color: var(--si-warning-soft); border-color: var(--si-warning-soft); color: var(--si-warning); font-style: normal; }
#msg_error { background-color: var(--si-danger-soft); border-color: var(--si-danger-soft); color: var(--si-danger); }
#msg_info { background-color: var(--si-info-soft); border-color: var(--si-info-soft); color: var(--si-info); }
#msg_info .icon-compass { display: none; }
#msg_info a { color: inherit; }
.warning { background: none; font-style: normal; }
.error { color: var(--si-danger); }

/* ---------- controls ---------- */
.button, .button:visited, .green.button, .green.button:visited, .blue.button, .blue.button:visited,
input[type="submit"], .btn, .action-button, .action-button span, .action-button a {
  background: var(--si-ink);
  background-image: none;
  color: #fff !important;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  height: 36px;
  padding: 0 16px;
  max-width: none;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  position: static;
  margin: 0;
}
.action-button { line-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; margin-left: 8px; }
.action-button span, .action-button a { float: none; display: inline; padding: 0; height: auto; line-height: inherit; }
.button:hover, .green.button:hover, .blue.button:hover, input[type="submit"]:hover, .btn:hover, .action-button:hover {
  background-color: #2a2a2a;
  color: #fff;
}
.button:active { top: auto; }
input[type="reset"], input[type="button"], button.reset {
  background: var(--si-surface);
  color: var(--si-ink);
  border: 1px solid var(--si-control);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 34px;
  height: 36px;
  padding: 0 16px;
  cursor: pointer;
}
input[type="reset"]:hover, input[type="button"]:hover { background: var(--si-sunken); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea,
#ticketForm div input, #clientLogin div input, #ticketForm div textarea, #clientLogin div textarea,
#reply input[type="text"], #reply #response_options textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  height: 36px;
  padding: 4px 12px;
  background: var(--si-surface);
  color: var(--si-ink);
  border: 1px solid var(--si-control);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  box-shadow: none;
  display: block;
}
select { max-width: 320px; }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; display: inline-block; margin: 0 6px 0 0; }
textarea, #ticketForm td textarea, #clientLogin td textarea, #ticketForm div textarea, #clientLogin div textarea,
#reply textarea {
  width: 100% !important;
  max-width: none;
  height: auto;
  min-height: 160px;
  padding: 10px 12px;
}
.redactor-box, .redactor-editor { max-width: none; }
.redactor-box { border-radius: 6px; border-color: var(--si-control) !important; }
label { font-size: 14px; }
label.required, span.required { font-weight: 500; }
#ticketForm td em, #clientLogin td em, #ticketForm div em, #clientLogin div em, .ltr .hint { color: var(--si-ink-3); font-style: normal; font-size: 13px; }

/* ---------- landing page ---------- */
#landing_page .sidebar { display: none; }
#landing_page .main-content { width: auto; max-width: none; }
#landing_page .thread-body { padding: 0; background: transparent; color: var(--si-ink); font-family: var(--si-font); font-size: 15px !important; line-height: 1.55; }
#landing_page .thread-body a:not(.button) { color: var(--si-ink) !important; text-decoration: underline; text-decoration-color: var(--si-line-strong); }
#landing_page .thread-body ul.si-products { margin: 40px 0 32px; padding: 0 !important; list-style: none; }
#landing_page .thread-body ul.si-products li { margin: 0; padding: 0; }
#landing_page .thread-body p { margin: 0; }
#landing_page .thread-body h1.si-display { font-size: 40px; margin: 0 0 20px; font-weight: 400; line-height: 1.05; }
#landing_page .thread-body a:not(.button):hover, #landing_page .thread-body a:not(.button):focus { color: var(--si-ink) !important; text-decoration-color: var(--si-ink); outline: none; }
#landing_page .thread-body a:not(.button):focus-visible { outline: 2px solid var(--si-focus); outline-offset: 2px; }
.si-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 28px; }
#landing_page .thread-body .si-actions a:not(.button) { text-decoration: none; display: inline-block; height: 44px; line-height: 44px; padding: 0 20px; border-radius: 4px; font-size: 15px; font-weight: 500; }
#landing_page .thread-body .si-actions a.si-primary:not(.button) { background: var(--si-ink); color: #fff !important; }
#landing_page .thread-body .si-actions a.si-primary:not(.button):hover { background: #2a2a2a; }
#landing_page .thread-body .si-actions a.si-secondary:not(.button) { background: var(--si-surface); color: var(--si-ink) !important; border: 1px solid var(--si-control); line-height: 42px; }
#landing_page .thread-body .si-actions a.si-secondary:not(.button):hover { background: var(--si-sunken); }
#landing_page .thread-body .si-products a:not(.button), #landing_page .thread-body .si-products a:not(.button):hover { text-decoration: none; }
.si-display {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 20px;
  max-width: 18ch;
}
.si-lead { font-size: 17px; color: var(--si-ink-2); margin: 0; }
.si-products {
  list-style: none;
  margin: 40px 0 32px;
  padding: 0;
  border-top: 1px solid var(--si-line);
}
.si-products li { margin: 0; padding: 0; border-bottom: 1px solid var(--si-line); }
.si-products a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  text-decoration: none;
  color: var(--si-ink);
}
.si-products .si-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.si-products .si-desc { font-size: 14px; color: var(--si-ink-3); white-space: nowrap; }
#landing_page .thread-body .si-products a:not(.button) .si-name { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; }
#landing_page .thread-body .si-products a:not(.button):hover .si-name { text-decoration-color: var(--si-accent); }
.si-products a:hover .si-name { text-decoration-color: var(--si-accent); }
.si-status { color: var(--si-ink-2); margin: 0; }

/* ---------- new ticket form ---------- */
#ticketForm > table, #ticketForm table { width: 100% !important; table-layout: auto; border-spacing: 0; }
#ticketForm tr { display: block; margin: 0 0 20px; }
#ticketForm td, #ticketForm > table td, #ticketForm > table td + td {
  display: block;
  width: auto !important;
  padding: 0;
  font-size: 14px;
}
#ticketForm td:first-child { font-weight: 500; margin-bottom: 6px; }
#ticketForm td:first-child.required { font-weight: 500; }
#ticketForm .form-header, .form-header {
  font-size: 16px;
  font-weight: 600;
  margin: 32px 0 16px !important;
  padding-top: 24px;
  border-top: 1px solid var(--si-line);
}
#ticketForm hr { display: none; }
#ticketForm select, #ticketForm select#topicId { display: inline-block; vertical-align: middle; }
.form-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.form-header em, .form-header div { display: block; font-style: normal; font-weight: 400; color: var(--si-ink-2); font-size: 14px; margin-top: 4px; }
#ticketForm p.buttons {
  text-align: left !important;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 28px 0 0;
}
#ticketForm div.error, #ticketForm font.error { display: block; margin-top: 6px; font-size: 13px; }
#ticketForm span.error, #ticketForm td span.error { display: inline; margin: 0 0 0 2px; }
#ticketForm td input[type="text"], #ticketForm td input[type="email"], #ticketForm td input[type="tel"] { display: inline-block; vertical-align: middle; }
#ticketForm td input[size="5"] { width: 88px; max-width: 88px; margin-left: 8px; }
#ticketForm td input[size="5"]::before { content: ''; }
#ticketForm div.error input, #clientLogin div.error input { border-color: var(--si-danger); }

/* ---------- check status, sign in, password reset ---------- */
#clientLogin {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
#clientLogin > div { display: block !important; }
#clientLogin > div > div { display: block !important; padding: 0 !important; }
#clientLogin .login-box, .login-box, .rtl .login-box {
  width: auto;
  max-width: 420px;
  display: block;
  box-shadow: none;
  padding: 0;
}
#clientLogin .instructions, .rtl #clientLogin .instructions {
  display: block;
  padding: 20px 0 0;
  color: var(--si-ink-2);
  font-size: 14px;
}
#clientLogin label { display: block; font-weight: 500; margin: 0 0 16px; }
#clientLogin div input[type="text"], #clientLogin div input[type="password"], #clientLogin input[type="text"], #clientLogin input[type="password"] {
  margin: 6px 0 0;
  padding: 4px 12px;
  border-radius: 6px;
}
#clientLogin > div > div > div { margin-bottom: 16px; }
#clientLogin strong { display: block; color: var(--si-danger); font-size: 14px; margin-bottom: 12px; }
#clientLogin strong:empty { display: none; }
#clientLogin p { margin: 20px 0 0; display: flex; align-items: center; gap: 16px; }
#clientLogin input[type="submit"], #clientLogin div input[type="submit"], #clientLogin p input[type="submit"],
#ticketForm div input[type="submit"], #reply input[type="submit"], #dynamic-form input[type="submit"] {
  display: inline-block;
  width: auto;
  max-width: none;
  height: 36px;
  padding: 0 16px;
  background: var(--si-ink);
  color: #fff !important;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  margin: 0;
}

/* ---------- ticket list ---------- */
.search.well {
  background: var(--si-sunken);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 24px;
}
.search.well .pull-right { float: none; margin-top: 12px; }
#ticketSearchForm input[type="text"] { display: inline-block; width: 280px; vertical-align: middle; }
#ticketSearchForm input[type="submit"] { vertical-align: middle; margin-left: 8px; }
.states a, .states .state { color: var(--si-ink-2); }
.states .active.state { color: var(--si-ink); }
#ticketTable {
  width: 100% !important;
  border: 0;
  border-top: 1px solid var(--si-line-strong);
}
#ticketTable caption { background: none; border: 0; padding: 0 0 8px; font-weight: 500; }
#ticketTable th {
  height: auto;
  line-height: 1.4;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--si-line);
  padding: 10px 12px 10px 0;
  font-size: 13px;
  color: var(--si-ink-2);
}
#ticketTable th a { color: var(--si-ink-2); text-decoration: none; }
#ticketTable td {
  border: 0;
  border-bottom: 1px solid var(--si-line);
  padding: 12px 12px 12px 0;
  font-size: 14px;
}
#ticketTable tr.alt td { background: none; }
#ticketTable .Icon { background: none; padding-left: 0; color: var(--si-ink); }
#pagination li a, #pagination .active { padding: 4px 8px; font-size: 13px; }
#pagination li a:hover { color: var(--si-ink); }

/* ---------- ticket view ---------- */
#ticketInfo { width: 100% !important; }
#ticketInfo h1 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}
#ticketInfo h1 b { font-weight: 500; }
#ticketInfo h1 small { color: var(--si-ink-3); font-size: 16px; }
#ticketInfo h1 .refresh { color: var(--si-ink-3); font-size: 14px; }
#ticketInfo h1 .pull-right { float: none; margin-left: auto; display: flex; gap: 8px; }
#ticketInfo > tbody > tr > td { vertical-align: top; }
#ticketInfo td[width="50%"] { width: 50%; }
.infoTable { background: none; }
.infoTable th { color: var(--si-ink-2); font-weight: 400; padding: 6px 16px 6px 0; width: 38%; font-size: 14px; }
.infoTable td { padding: 6px 0; font-size: 14px; }
table.custom-data th, .infoTable thead th { background: none; }
table .headline, table.custom-data .headline, .infoTable .headline {
  border-bottom: 1px solid var(--si-line);
  font-weight: 500;
  background: none;
  color: var(--si-ink);
  padding-bottom: 8px;
}
table.custom-data { margin-top: 16px; }

#ticketThread { border-bottom: 0; }
#ticketThread::before { display: none; }
.thread-entry, .thread-entry.avatar, .thread-entry.response.avatar {
  margin: 0 0 28px;
  padding-left: 16px;
  border-left: 2px solid var(--si-line);
}
.thread-entry.response { border-left-color: var(--si-ink); }
.thread-entry::before, .thread-entry::after { display: none; }
.thread-entry > .avatar, .thread-entry.response > .avatar { display: none; }
.thread-entry .header, .thread-entry.message .header, .thread-entry.response .header {
  position: static;
  background: none !important;
  border: 0;
  border-radius: 0;
  padding: 0 0 6px;
  font-size: 13px;
  color: var(--si-ink-2);
}
.thread-entry .header::before, .thread-entry .header::after,
.thread-entry.avatar .header::before, .thread-entry.avatar .header::after,
.thread-entry.avatar.message .header::before, .thread-entry.avatar.message .header::after,
.thread-entry.avatar.response .header::after { display: none; content: none; }
.thread-entry .header .title { max-width: none; margin-left: 8px; color: var(--si-ink); font-weight: 500; }
.thread-entry .header .pull-right { color: var(--si-ink-3); }
.thread-entry .thread-body {
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 15px;
}
.thread-body .attachments {
  background: var(--si-sunken);
  margin: 12px 0 0;
  position: static;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
}
.thread-event { margin-left: 18px; padding: 0 0 20px; color: var(--si-ink-3); font-size: 13px; }
.thread-event .type-icon { display: none; }
.thread-event .description { margin: 0; padding: 0; width: auto; display: block; }
.label, .label-bare { font-size: 11px; font-weight: 500; text-shadow: none; border-radius: 9999px; padding: 1px 8px; }
.label-bare { border-color: var(--si-line-strong); color: var(--si-ink-3); }

#reply {
  margin-top: 36px;
  padding: 28px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--si-line);
}
#reply h2 { border-bottom: 0; padding: 0; margin: 0 0 16px; }
#reply > table { width: 100%; }
#reply td { display: block; padding: 0; }
#reply p { margin: 20px 0 0; }
#reply .warning-banner { margin-top: 20px; }
.freetext-files { background: var(--si-sunken); border: 0; border-radius: 6px; }

/* ---------- profile, account, misc pages ---------- */
#dynamic-form table, table.form_table { width: 100% !important; }
#dynamic-form td { padding: 4px 0; }
.sidebar .content { border-color: var(--si-line); background: var(--si-sunken); border-radius: 8px; }
#overlay { background: rgba(17, 17, 17, 0.4); }
#loading { border-radius: 8px; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  #container { padding: 0 16px; }
  #header { padding: 20px 0 12px; }
  #content { padding: 28px 0 56px; }
  .si-display { font-size: 32px; }
  .si-products a { flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 0; }
  .si-products .si-name { font-size: 20px; }
  #nav { gap: 2px 20px; flex-wrap: wrap; overflow: visible; }
  #landing_page .thread-body h1.si-display { font-size: 32px; }
  input[type="text"], input[type="email"], input[type="password"], select { max-width: none; }
  #ticketInfo > tbody > tr > td, #ticketInfo td[width="50%"] { display: block; width: auto !important; }
  #ticketInfo h1 .pull-right { margin-left: 0; width: 100%; }
  #ticketSearchForm input[type="text"] { width: 100%; margin-bottom: 8px; }
  #ticketSearchForm input[type="submit"] { margin-left: 0; }
  .thread-entry, .thread-entry.avatar, .thread-entry.response.avatar { padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  body { background: #fff; }
  #nav, #header p, #reply, #footer { display: none; }
}