/* =========================================================================
   ITK Novum – Modern Client Portal Theme
   Additive override, loaded AFTER css/osticket.css and assets/default/css/theme.css.
   Nothing in theme.css itself is touched, so osTicket core updates never
   conflict with this file. Safe to delete this single file (and its one
   <link> line in include/client/header.inc.php) to fully revert to stock.
   ========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --brand-teal:  #00BFA0;
  --brand-cyan:  #00A8B5;
  --brand-sky:   #0091CD;
  --brand-blue:  #1D5DA8;
  --brand-navy:  #222F59;

  --brand-gradient: linear-gradient(135deg, #00BFA0 0%, #00A8B5 38%, #0091CD 70%, #1D5DA8 100%);

  --bg:          #F3F6FA;
  --surface:     #FFFFFF;
  --surface-alt: #F7F9FC;
  --border:      #E4E9F1;
  --text:        #1B2440;
  --text-muted:  #66708C;
  --shadow-sm:   0 1px 2px rgba(20,30,60,.06), 0 1px 3px rgba(20,30,60,.08);
  --shadow-md:   0 4px 14px rgba(20,30,60,.10), 0 2px 4px rgba(20,30,60,.06);
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg:          #0E1526;
  --surface:     #161F38;
  --surface-alt: #1B2440;
  --border:      #2A3457;
  --text:        #E8ECF7;
  --text-muted:  #96A1C4;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.35);
  --shadow-md:   0 8px 24px rgba(0,0,0,.45);
}

/* Respect system preference automatically unless the visitor picked one explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0E1526;
    --surface:     #161F38;
    --surface-alt: #1B2440;
    --border:      #2A3457;
    --text:        #E8ECF7;
    --text-muted:  #96A1C4;
    --shadow-sm:   0 1px 2px rgba(0,0,0,.35);
    --shadow-md:   0 8px 24px rgba(0,0,0,.45);
  }
}

/* ---------- 2. Base ---------- */
html, body {
  background: var(--bg) !important;
}
body, input, select, textarea, button {
  font-family: var(--font) !important;
  color: var(--text);
}
a, .link { color: var(--brand-sky); }
a:hover, .link:hover { border-bottom-color: var(--brand-sky); }

h1 { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
h2, .subject { color: var(--text); font-weight: 600; }
.faded { color: var(--text-muted); }

/* ---------- 3. Shell / container ---------- */
#container {
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: 1080px;
  margin: 0 auto !important;
  padding: 0 20px;
}

#header {
  height: auto;
  padding: 22px 4px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header p { width: auto; padding: 0; }
#header .pull-right.flush-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

#header #logo,
#header a#logo {
  height: auto;
  display: inline-flex;
  align-items: center;
}
#header #logo img,
#header a#logo img {
  max-height: 42px;
  max-width: 260px;
}
.brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark { display: inline-block; }
}

/* ---------- 4. Navigation ---------- */
#nav {
  margin: 0 0 24px;
  padding: 4px;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  white-space: normal;
}
#nav li { display: block; flex: 0 0 auto; }
#nav li a { white-space: nowrap; }
#nav li a {
  height: 38px;
  line-height: 38px;
  padding: 0 18px 0 40px;
  margin: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13.5px;
  background-position: 14px 50%;
  transition: background .15s ease, color .15s ease;
}
#nav li a.active,
#nav li a:hover {
  background-color: var(--surface-alt);
  color: var(--brand-navy);
}
:root[data-theme="dark"] #nav li a.active,
:root[data-theme="dark"] #nav li a:hover {
  color: #fff;
}
#nav li a.active {
  color: var(--brand-blue);
  font-weight: 600;
}
:root[data-theme="dark"] #nav li a.active { color: #6FE3D6; }

/* ---------- 5. Content card ---------- */
#content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 0 0 24px;
  padding: 32px 36px;
  height: auto !important;
  min-height: 0 !important;
}
@media (max-width: 720px) {
  #content { padding: 22px 18px; border-radius: var(--radius-md); }
  #header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- 6. Buttons ---------- */
.button, .button:visited {
  background: var(--brand-gradient);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: none;
  text-shadow: none;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 20px;
  transition: filter .15s ease, transform .1s ease;
}
.button:hover { filter: brightness(1.07); background: var(--brand-gradient); color: #fff; }
.button:active { transform: translateY(1px); top: 0; }
.green.button, .green.button:visited,
.blue.button, .blue.button:visited {
  background: var(--brand-gradient);
}
.green.button:hover, .blue.button:hover { filter: brightness(1.07); }

/* ---------- 7. Forms ---------- */
#ticketForm div input, #clientLogin div input,
#ticketForm div textarea, #clientLogin div textarea,
#ticketForm div select, #clientLogin div select,
input[type=text], input[type=password], input[type=email], textarea, select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 8px 12px;
}
#ticketForm div input:focus, #clientLogin div input:focus,
#ticketForm div textarea:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px rgba(0,145,205,.15);
}
#clientLogin {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
#clientLogin input[type=text], #clientLogin input[type=password] {
  border-radius: var(--radius-sm);
}
#clientLogin input[type=submit] {
  border-radius: var(--radius-sm);
}

/* ---------- 7b. Native buttons without .button class ---------- */
/* Note: stock js/osticket.js sets an inline style="color:red" on the submit
   button as soon as any form field changes (its built-in "you have unsaved
   changes" cue). Inline styles beat any stylesheet rule regardless of
   selector specificity, so color needs !important here to stay white. */
input[type=submit], button[type=submit] {
  background: var(--brand-gradient);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
input[type=submit]:hover, button[type=submit]:hover { filter: brightness(1.07); }
input[type=reset], input[type=button]:not(.theme-toggle), button[type=reset], button[type=button]:not(.theme-toggle) {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-family: var(--font);
  cursor: pointer;
}
input[type=reset]:hover, input[type=button]:hover, button[type=reset]:hover, button[type=button]:hover {
  background: var(--surface-alt);
  color: var(--text);
}

/* ---------- 8. Landing page ---------- */
#landing_page #new_ticket, #landing_page #check_status {
  background: none;
  padding-left: 0;
}
.front-page-button .button { width: 100%; box-sizing: border-box; text-align: center; }

/* ---------- 9. Ticket list table ---------- */
#ticketTable {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
#ticketTable caption {
  background: var(--surface-alt);
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
#ticketTable th {
  background: var(--surface-alt);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  border: none;
  border-bottom: 1px solid var(--border);
  height: 36px;
  line-height: 36px;
}
#ticketTable td {
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
#ticketTable tr.alt td { background: var(--surface-alt); }
#ticketTable tr:hover td { background: rgba(0,145,205,.06); }

/* ---------- 10. Ticket thread ---------- */
/* .thread-body is also reused bare (no .thread-entry ancestor) for the KB / landing
   page welcome text -- css/thread.css hardcodes it white, so cover both cases. */
.thread-body {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}
#reply, .thread-entry .header, .thread-entry .thread-body {
  background: var(--surface);
  border-color: var(--border);
}
.thread-entry .header {
  background: var(--surface-alt);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.thread-entry .thread-body {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.thread-entry.message .header { background: rgba(0,191,160,.12); border-color: rgba(0,191,160,.3); }
.thread-entry.response .header { background: var(--surface-alt); }
.thread-entry.avatar .header:before,
.thread-entry.avatar .header:after { display: none; } /* drop legacy speech-bubble tails for a flatter, modern card look */

/* ---------- 11. Footer ---------- */
#footer { color: var(--text-muted); padding: 24px 0 40px; }
#footer a { color: var(--text-muted); }
#footer #poweredBy { opacity: .55; }

/* ---------- 12. Theme toggle ---------- */
.theme-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 20px;
}
.theme-toggle:hover { color: var(--text); }

/* ---------- 13. Nav icons (vector, replaces legacy sprite GIFs) ---------- */
#nav li a { background-image: none !important; position: relative; }
#nav li a:before {
  font-family: "FontAwesome";
  position: absolute;
  left: 14px;
  top: 0;
  line-height: 38px;
  font-size: 14px;
}
#nav li a.home:before   { content: "\f015"; }
#nav li a.kb:before      { content: "\f02d"; }
#nav li a.new:before     { content: "\f044"; }
#nav li a.status:before  { content: "\f002"; }
#nav li a.tickets:before { content: "\f0ca"; }

/* ---------- 14. Real responsiveness ----------
   The stock theme was built as a fixed ~840px box with many hard pixel widths
   (.main-content, .sidebar, #reply textarea, #ticketForm table cells, ...).
   None of that was ever meant to fit a phone. Neutralize the fixed widths
   below this breakpoint instead of chasing each one individually. */
@media (max-width: 760px) {
  * { box-sizing: border-box; }
  #container { padding: 0 14px; }
  #landing_page,
  .main-content,
  .sidebar,
  .front-page-button,
  .span4, .span8,
  .featured-category,
  #ticketForm, #ticketForm > table, #ticketForm td,
  #reply, #reply textarea, #reply > table,
  .login-box, #clientLogin .instructions,
  #kb-search #query, #kb-search #cid, #kb-search #topic-id {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }
  .thread-entry.avatar { margin-left: 0; }
  .thread-entry.response.avatar { margin-right: 0; }
  .thread-entry > .avatar { display: none; } /* avatar gutter assumes desktop spacing */
  #ticketTable { display: block; overflow-x: auto; }
  .front-page-button + .front-page-button,
  .sidebar { margin-top: 16px; }
}