/* osTicket client presentation: approved CartSift Midnight palette.
   No staff templates, authorization, ticket fields or workflow logic changed. */
@import url('/css/midnight-fonts.css');
* { box-sizing: border-box; }
body { font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.65; }
#container { width: min(1120px, calc(100% - 48px)); margin: 32px auto; border-radius: 20px; }
#header { min-height: 100px; height: auto; padding: 20px 28px; }
#header #logo { max-width: min(60%, 280px); height: auto; }
#header #logo img { max-width: 100%; height: auto; }
#header .pull-right { max-width: 55%; }
#header p { line-height: 1.6; }
#nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 20px; height: auto; }
#nav li { float: none; }
#nav li a { display: flex; align-items: center; min-height: 46px; padding: 10px 18px 10px 40px; border-radius: 12px; }
#content { padding: clamp(20px, 4vw, 40px); min-height: 400px; }
h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -.035em; }
h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; letter-spacing: -.025em; }
h3 { line-height: 1.35; }
p, li { overflow-wrap: break-word; }
a { text-underline-offset: 3px; }
input, button, select, textarea { font: inherit; max-width: 100%; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select,
button, input[type=submit], input[type=button], .button { min-height: 44px; border-radius: 10px; }
textarea { min-height: 140px; border-radius: 12px; line-height: 1.6; }
button, input[type=submit], input[type=button], .button { padding: 10px 18px; }
label { line-height: 1.5; }
:where(a,button,input,select,textarea):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
form { max-width: 100%; }
form table { max-width: 100%; }
form td { padding-block: 10px; }
#ticketTable { width: 100%; font-size: .875rem; }
#ticketTable th, #ticketTable td { padding: 12px; }
.thread-entry { border-radius: 14px; overflow-wrap: anywhere; }
.thread-body { line-height: 1.75; }
.thread-body img { max-width: 100%; height: auto; }
.thread-body pre { max-width: 100%; overflow: auto; }
.error_bar, .warning_bar, .notice_bar { margin: 12px 0; padding: 16px 20px; border-radius: 12px; line-height: 1.5; }
#footer { width: min(1120px, calc(100% - 48px)); margin: 24px auto 40px; line-height: 1.6; }
@media (max-width: 700px) {
  #container { width: calc(100% - 24px); margin-block: 12px; border-radius: 16px; }
  #header { padding: 20px; }
  #header .pull-right { float: none; max-width: 100%; text-align: start; }
  #header #logo { max-width: 240px; float: none; display: inline-block; }
  #nav { padding: 8px 12px; }
  #nav li a { padding: 10px 12px 10px 40px; }
  #content { padding: 20px; }
  #content .sidebar { float: none; width: 100%; max-width: 100%; }
  #content .main-content { width: 100%; margin: 0; }
  #ticketTable { display: block; overflow-x: auto; }
  #footer { width: calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  color-scheme: light;
  --cs-page: #b9dcd9; --cs-panel: #d0e5dd; --cs-inset: #9fc9ca;
  --cs-text: #132f3c; --cs-muted: #31535e; --cs-line: #749da0;
  --cs-teal: #075647; --cs-orange: #f3954f; --cs-focus: #994214;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark;
    --cs-page: #0a1524; --cs-panel: #101f30; --cs-inset: #132638;
    --cs-text: #f0f3ec; --cs-muted: #9fadb9; --cs-line: #293b4c;
    --cs-teal: #5cdfc9; --cs-orange: #ffac69; --cs-focus: #ffac69;
  }
}
html, body { background: var(--cs-page); color: var(--cs-text); }
body { font-family: 'DM Sans', Arial, sans-serif; }
h1,h2,h3 { font-family: 'Manrope', Arial, sans-serif; color: var(--cs-text); }
#container { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: 11px; box-shadow: none; }
#header, #content, #landing_page, #ticketForm { background: var(--cs-panel); color: var(--cs-text); }
#nav { background: var(--cs-inset); border-color: var(--cs-line); }
#nav li a { background-color: transparent; color: var(--cs-text); border-radius: 7px; }
#nav li a.active, #nav li a:hover { background-color: var(--cs-panel); color: var(--cs-teal); }
a, #footer a { color: var(--cs-teal); }
#content .filedrop .dropzone a, #content .filedrop .dropzone a:hover, #content .filedrop .dropzone a:focus-visible { color: var(--cs-teal); }
#footer, .faded, .small, #header p { color: var(--cs-muted); }
input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]), select, textarea,
.redactor-editor, .redactor-toolbar, .select2-container--default .select2-selection--single {
  background: var(--cs-inset); color: var(--cs-text); border: 1px solid var(--cs-line); border-radius: 7px;
}
input::placeholder, textarea::placeholder { color: var(--cs-muted); opacity: 1; }
button, input[type=submit], input[type=button], .button, #new_ticket { background: var(--cs-orange); color: #0a1524; border: 1px solid transparent; border-radius: 7px; text-shadow: none; }
button:hover, input[type=submit]:hover, input[type=button]:hover { filter: brightness(1.06); }
#ticketTable th, #ticketTable td, #ticketTable tr, #ticketTable tr:nth-child(even), .thread-entry .header,
.thread-entry .thread-body, .faq-content { background-color: var(--cs-panel); color: var(--cs-text); border-color: var(--cs-line); }
#ticketTable th, .thread-entry .header { background: var(--cs-inset); }
:where(a,button,input,select,textarea):focus-visible { outline-color: var(--cs-focus); }
#header p { width: auto; max-width: 100%; }
#content { margin: 0; }
#clientLogin { width: 100%; max-width: 100%; background: var(--cs-inset); border: 1px solid var(--cs-line); color: var(--cs-text); box-shadow: none; padding: 16px; border-radius: 11px; }
#clientLogin input:not([type=submit]) { width: 100%; min-width: 0; background: var(--cs-panel); color: var(--cs-text); border-color: var(--cs-muted); }
#clientLogin input[type=submit], #content .button, #content .btn { background: var(--cs-orange); color: #0a1524; text-shadow: none; border-color: transparent; }
#clientLogin .login-box { padding: 12px; min-width: 0; }
#content .sidebar .content, #landing_page .thread-body { background: var(--cs-panel); color: var(--cs-text); border-color: var(--cs-line); }
#content input:not([type=submit]):not([type=button]), #content select, #content textarea { border-color: var(--cs-muted); }
@media (max-width: 700px) {
  #clientLogin > div, #clientLogin > div > div { display: block !important; width: 100%; padding: 8px 0 !important; box-shadow: none; }
  #content .sidebar { margin: 0 0 20px; }
  #content form table { width: 100%; table-layout: fixed; }
  #content form table td { display: block; width: 100%; }
  #landing_page #new_ticket, #landing_page #check_status { width: 100%; padding-left: 0; background-image: none; }
}