/* =========================================================
   WTG osTicket Client Portal Dark Theme
   osTicket v1.18.4
   ========================================================= */

:root {
    --wtg-bg: #0d1117;
    --wtg-surface: #111a24;
    --wtg-surface-2: #16212c;
    --wtg-surface-3: #1c2936;
    --wtg-border: #2d3e50;
    --wtg-border-light: #3a4c5e;
    --wtg-text: #e6edf3;
    --wtg-muted: #8b9caf;
    --wtg-blue: #2f81f7;
    --wtg-blue-hover: #58a6ff;
    --wtg-green: #238636;
    --wtg-red: #da3633;
}

/* ===== PAGE ===== */

html,
body {
    background: #0d1117 !important;
    background-image: none !important;
    color: var(--wtg-text) !important;
}

body,
input,
select,
textarea {
    color: var(--wtg-text);
}

#container {
    background: var(--wtg-surface) !important;
    border: 1px solid var(--wtg-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.45) !important;
}

/* Preserve native client geometry */
#container {
    width: 840px !important;
}

/* ===== HEADER ===== */

#header {
    background: var(--wtg-surface) !important;
    border-bottom: 1px solid var(--wtg-border) !important;
}

#header p {
    color: var(--wtg-text) !important;
}

#header a {
    color: var(--wtg-blue-hover) !important;
}

/* Slightly improve logo presence without tying it to one PNG */
#header #logo img {
    max-height: 70px !important;
    max-width: 390px !important;
    width: auto !important;
    height: auto !important;
}

/* ===== NAVIGATION ===== */

#nav {
    background: #0f1720 !important;
    background-image: none !important;
    border: 1px solid var(--wtg-border) !important;
    box-shadow: none !important;
}

#nav li a {
    color: #c9d6e2 !important;
}

#nav li a.active {
    background-color: #1d3145 !important;
    color: #ffffff !important;
}

#nav li a:hover {
    background-color: #182635 !important;
    color: #ffffff !important;
}

/* ===== CONTENT / TYPOGRAPHY ===== */

#content {
    color: var(--wtg-text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.subject {
    color: #f0f6fc !important;
}

p,
div,
span,
td,
th,
label {
    border-color: var(--wtg-border);
}

a,
.link {
    color: var(--wtg-blue-hover);
}

a:hover,
.link:hover {
    color: #79c0ff;
    border-bottom-color: #79c0ff;
}

.faded,
.muted {
    color: var(--wtg-muted) !important;
}

hr {
    border-top-color: var(--wtg-border) !important;
}

/* ===== FORMS ===== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    background: #0f1720 !important;
    color: var(--wtg-text) !important;
    border: 1px solid #3b4d60 !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #708399 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--wtg-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(47,129,247,.35) !important;
}

/* ===== BUTTONS ===== */

.button,
.button:visited,
input[type="submit"],
input[type="button"],
button {
    background: #1f6feb !important;
    color: #ffffff !important;
    border: 1px solid #388bfd !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background: #2f81f7 !important;
}

.green.button,
.green.button:visited {
    background: #238636 !important;
    border-color: #2ea043 !important;
}

.green.button:hover {
    background: #2ea043 !important;
}

.blue.button,
.blue.button:visited {
    background: #1f6feb !important;
    border-color: #388bfd !important;
}

/* ===== LOGIN / TICKET FORMS ===== */

#clientLogin,
#ticketForm,
#reply {
    background: var(--wtg-surface-2) !important;
    border-color: var(--wtg-border-light) !important;
    box-shadow: none !important;
}

#clientLogin {
    background-color: var(--wtg-surface-2) !important;
}

#reply h2 {
    border-bottom-color: var(--wtg-border) !important;
}

/* ===== TABLES ===== */

#ticketTable,
table.custom-data,
table.list {
    background: var(--wtg-surface) !important;
    border-color: var(--wtg-border-light) !important;
    color: var(--wtg-text) !important;
}

#ticketTable th,
table.custom-data th,
table.list th {
    background: #1c2936 !important;
    color: #dbe9f6 !important;
    border-color: var(--wtg-border-light) !important;
}

#ticketTable td,
table.custom-data td,
table.list td {
    background: var(--wtg-surface) !important;
    color: var(--wtg-text) !important;
    border-color: var(--wtg-border) !important;
}

table.custom-data th {
    background-color: #182635 !important;
}

table .headline,
table.custom-data .headline {
    border-bottom-color: var(--wtg-border) !important;
}

/* ===== KNOWLEDGEBASE ===== */

#kb,
#faq {
    color: var(--wtg-text) !important;
}

#kb > li {
    background: var(--wtg-surface-2) !important;
    background-image: none !important;
    border-bottom-color: var(--wtg-border) !important;
}

#kb > li h4 span {
    color: var(--wtg-muted) !important;
}

#faq ol li {
    border-bottom-color: var(--wtg-border) !important;
}

#faq ol li a:hover {
    background-color: #182635 !important;
}

#faq .article-meta {
    background: #182635 !important;
    color: var(--wtg-muted) !important;
}

#kb-search #breadcrumbs,
#kb-search #breadcrumbs a {
    color: var(--wtg-muted) !important;
}

/* ===== SIDEBARS ===== */

.sidebar .content {
    background: var(--wtg-surface-2) !important;
    border-color: var(--wtg-border-light) !important;
    color: var(--wtg-text) !important;
}

/* ===== THREADS ===== */

.thread-entry .header {
    color: var(--wtg-text) !important;
    border-color: var(--wtg-border-light) !important;
}

.thread-entry.response .header {
    background: #263442 !important;
}

.thread-entry.message .header {
    background: #183653 !important;
}

.thread-entry .thread-body {
    background: var(--wtg-surface) !important;
    color: var(--wtg-text) !important;
    border-color: var(--wtg-border-light) !important;
}

.thread-body .attachments {
    background: #182635 !important;
    border-top-color: var(--wtg-border) !important;
}

.type-icon {
    background: #1c2936 !important;
    border-color: var(--wtg-border-light) !important;
}

/* ===== ALERTS ===== */

#msg_notice,
.notice_bar {
    background-color: #142b1d !important;
    color: #7ee787 !important;
    border-color: #238636 !important;
}

#msg_warning,
.warning_bar,
.warning-banner {
    background-color: #352a12 !important;
    color: #e3b341 !important;
    border-color: #9e6a03 !important;
}

#msg_error,
.error_bar {
    background-color: #3a1719 !important;
    color: #ff7b72 !important;
    border-color: #da3633 !important;
}

#msg_info {
    background-color: #13283a !important;
    color: #79c0ff !important;
    border-color: #1f6feb !important;
}

/* ===== SELECT2 ===== */

.select2-container .select2-choice,
.select2-container .select2-selection,
.select2-dropdown,
.select2-results {
    background: #0f1720 !important;
    color: var(--wtg-text) !important;
    border-color: #3b4d60 !important;
}

.select2-results__option,
.select2-results li {
    background: #0f1720 !important;
    color: var(--wtg-text) !important;
}

.select2-results__option--highlighted,
.select2-results li:hover {
    background: #1f6feb !important;
    color: #ffffff !important;
}

/* ===== JQUERY UI / DIALOGS ===== */

.ui-widget-content,
.ui-dialog,
.ui-datepicker {
    background: var(--wtg-surface-2) !important;
    color: var(--wtg-text) !important;
    border-color: var(--wtg-border-light) !important;
}

.ui-widget-header {
    background: #1c2936 !important;
    color: #ffffff !important;
    border-color: var(--wtg-border-light) !important;
}

/* ===== REDACTOR ===== */

.redactor-box,
.redactor-toolbar,
.redactor-editor,
.redactor-layer {
    background: var(--wtg-surface-2) !important;
    color: var(--wtg-text) !important;
    border-color: var(--wtg-border-light) !important;
}

/* ===== FOOTER ===== */

#footer,
#footer p {
    color: #8fa4b8 !important;
}

#footer a {
    color: #8fa4b8 !important;
}

/* =========================================================
   END WTG CLIENT DARK THEME
   ========================================================= */

/* =========================================================
   WTG CLIENT POLISH 2
   Fix white client panels, black editor/input text, and buttons
   ========================================================= */


/* ---------- Main client content panels ---------- */

.main-content,
#content .main-content,
#content .main-content .content,
#content .main-content .faq-content,
#content .main-content .ticket-content,
#content .main-content .article-content,
#content .main-content .thread-entry,
#content .main-content .thread-body,
#content .main-content .message,
#content .main-content .response,
#content .main-content .ticket-status,
#content .main-content .ticket-info,
#content .main-content .form-data,
#content .main-content .form-data > div,
#content .main-content .user-content,
#content .main-content .kb-article,
#content .main-content .attachments,
#content .main-content .flush-left,
#content .main-content .flush-right {
    background: #111a24 !important;
    color: #e6edf3 !important;
    border-color: #2d3e50 !important;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content p,
.main-content span,
.main-content div,
.main-content td,
.main-content li,
.main-content label {
    color: #e6edf3 !important;
}

/* Welcome/home body block */
.main-content,
#content .main-content {
    box-shadow: none !important;
}


/* ---------- Rich text editor / typed text ---------- */

.redactor-box,
.redactor-editor,
.redactor-layer,
.redactor-source,
.redactor-box textarea,
.redactor-editor p,
.redactor-editor div,
.redactor-editor span,
.redactor-editor font,
.redactor-editor li {
    background: #111a24 !important;
    color: #e6edf3 !important;
    border-color: #3b4d60 !important;
}

.redactor-editor,
.redactor-editor * {
    color: #e6edf3 !important;
}

.redactor-placeholder:before,
.redactor-editor:empty:before {
    color: #7f93a8 !important;
    opacity: 1 !important;
}


/* ---------- Toolbar above support request box ---------- */

.redactor-toolbar {
    background: #18232f !important;
    border-color: #34495e !important;
}

.redactor-toolbar li a,
.redactor-toolbar li a span,
.redactor-toolbar a {
    color: #dbe9f6 !important;
}

.redactor-toolbar li a:hover,
.redactor-toolbar a:hover {
    background: #1f6feb !important;
    color: #ffffff !important;
}


/* ---------- Force text inside standard inputs to stay light ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    color: #e6edf3 !important;
    -webkit-text-fill-color: #e6edf3 !important;
    caret-color: #e6edf3 !important;
}

/* Browser autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0f1720 inset !important;
    -webkit-text-fill-color: #e6edf3 !important;
    caret-color: #e6edf3 !important;
    border: 1px solid #3b4d60 !important;
}


/* ---------- Bottom form buttons ---------- */

input[type="submit"],
button[type="submit"],
.button,
.blue.button,
.green.button {
    background: #1f6feb !important;
    color: #ffffff !important;
    border: 1px solid #388bfd !important;
    text-shadow: none !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover,
.blue.button:hover,
.green.button:hover {
    background: #2f81f7 !important;
    color: #ffffff !important;
}

input[type="reset"],
button[type="reset"],
.button.alt,
.secondary,
.cancel,
a.cancel {
    background: #1b2530 !important;
    color: #dce6f0 !important;
    border: 1px solid #44576b !important;
    text-shadow: none !important;
}

input[type="reset"]:hover,
button[type="reset"]:hover,
.button.alt:hover,
.secondary:hover,
.cancel:hover,
a.cancel:hover {
    background: #243241 !important;
    color: #ffffff !important;
}

/* Disabled/odd pale buttons */
input[disabled],
button[disabled],
.button.disabled,
.button:disabled {
    background: #2b3440 !important;
    color: #c9d3de !important;
    border: 1px solid #45515f !important;
    opacity: 1 !important;
}


/* ---------- Ticket create footer area ---------- */

.form-footer,
.form-actions,
#content .form-actions,
#content .buttons {
    background: #111a24 !important;
    color: #e6edf3 !important;
    border-top-color: #2d3e50 !important;
}


/* ---------- CAPTCHA/help text line ---------- */

.captcha,
.captcha-text,
.captcha-entry,
.faded,
.muted,
.help-text,
.form-hint {
    color: #9bb0c5 !important;
}


/* =========================================================
   END WTG CLIENT POLISH 2
   ========================================================= */


/* =========================================================
   WTG CLIENT POLISH 2
   Fix white client panels, black editor/input text, and buttons
   ========================================================= */


/* ---------- Main client content panels ---------- */

.main-content,
#content .main-content,
#content .main-content .content,
#content .main-content .faq-content,
#content .main-content .ticket-content,
#content .main-content .article-content,
#content .main-content .thread-entry,
#content .main-content .thread-body,
#content .main-content .message,
#content .main-content .response,
#content .main-content .ticket-status,
#content .main-content .ticket-info,
#content .main-content .form-data,
#content .main-content .form-data > div,
#content .main-content .user-content,
#content .main-content .kb-article,
#content .main-content .attachments,
#content .main-content .flush-left,
#content .main-content .flush-right {
    background: #111a24 !important;
    color: #e6edf3 !important;
    border-color: #2d3e50 !important;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content p,
.main-content span,
.main-content div,
.main-content td,
.main-content li,
.main-content label {
    color: #e6edf3 !important;
}

/* Welcome/home body block */
.main-content,
#content .main-content {
    box-shadow: none !important;
}


/* ---------- Rich text editor / typed text ---------- */

.redactor-box,
.redactor-editor,
.redactor-layer,
.redactor-source,
.redactor-box textarea,
.redactor-editor p,
.redactor-editor div,
.redactor-editor span,
.redactor-editor font,
.redactor-editor li {
    background: #111a24 !important;
    color: #e6edf3 !important;
    border-color: #3b4d60 !important;
}

.redactor-editor,
.redactor-editor * {
    color: #e6edf3 !important;
}

.redactor-placeholder:before,
.redactor-editor:empty:before {
    color: #7f93a8 !important;
    opacity: 1 !important;
}


/* ---------- Toolbar above support request box ---------- */

.redactor-toolbar {
    background: #18232f !important;
    border-color: #34495e !important;
}

.redactor-toolbar li a,
.redactor-toolbar li a span,
.redactor-toolbar a {
    color: #dbe9f6 !important;
}

.redactor-toolbar li a:hover,
.redactor-toolbar a:hover {
    background: #1f6feb !important;
    color: #ffffff !important;
}


/* ---------- Force text inside standard inputs to stay light ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    color: #e6edf3 !important;
    -webkit-text-fill-color: #e6edf3 !important;
    caret-color: #e6edf3 !important;
}

/* Browser autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0f1720 inset !important;
    -webkit-text-fill-color: #e6edf3 !important;
    caret-color: #e6edf3 !important;
    border: 1px solid #3b4d60 !important;
}


/* ---------- Bottom form buttons ---------- */

input[type="submit"],
button[type="submit"],
.button,
.blue.button,
.green.button {
    background: #1f6feb !important;
    color: #ffffff !important;
    border: 1px solid #388bfd !important;
    text-shadow: none !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover,
.blue.button:hover,
.green.button:hover {
    background: #2f81f7 !important;
    color: #ffffff !important;
}

input[type="reset"],
button[type="reset"],
.button.alt,
.secondary,
.cancel,
a.cancel {
    background: #1b2530 !important;
    color: #dce6f0 !important;
    border: 1px solid #44576b !important;
    text-shadow: none !important;
}

input[type="reset"]:hover,
button[type="reset"]:hover,
.button.alt:hover,
.secondary:hover,
.cancel:hover,
a.cancel:hover {
    background: #243241 !important;
    color: #ffffff !important;
}

/* Disabled/odd pale buttons */
input[disabled],
button[disabled],
.button.disabled,
.button:disabled {
    background: #2b3440 !important;
    color: #c9d3de !important;
    border: 1px solid #45515f !important;
    opacity: 1 !important;
}


/* ---------- Ticket create footer area ---------- */

.form-footer,
.form-actions,
#content .form-actions,
#content .buttons {
    background: #111a24 !important;
    color: #e6edf3 !important;
    border-top-color: #2d3e50 !important;
}


/* ---------- CAPTCHA/help text line ---------- */

.captcha,
.captcha-text,
.captcha-entry,
.faded,
.muted,
.help-text,
.form-hint {
    color: #9bb0c5 !important;
}


/* =========================================================
   END WTG CLIENT POLISH 2
   ========================================================= */


/* =========================================================
   WTG CLIENT POLISH 3
   Redactor toolbar button cleanup
   ========================================================= */

.redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
    background: #18232f !important;
    background-color: #18232f !important;
    border-color: #34495e !important;
    box-shadow: none !important;
}

.redactor-toolbar.redactor-toolbar a,
.redactor-toolbar a.re-button-icon,
.redactor-air a {
    background: #18232f !important;
    background-color: #18232f !important;
    color: #dbe9f6 !important;
    box-shadow: none !important;
    border: none !important;
}

.redactor-toolbar.redactor-toolbar a:hover,
.redactor-toolbar a.re-button-icon:hover,
.redactor-air a:hover {
    background: #1f6feb !important;
    background-color: #1f6feb !important;
    color: #ffffff !important;
}

.redactor-toolbar.redactor-toolbar a.redactor-button-active {
    background: #26384a !important;
    background-color: #26384a !important;
    color: #ffffff !important;
}

.redactor-toolbar.redactor-toolbar a.redactor-button-disabled,
.redactor-toolbar.redactor-toolbar a.redactor-button-disabled:hover {
    background: #18232f !important;
    background-color: #18232f !important;
    color: #687b8e !important;
    opacity: 0.55 !important;
}

.redactor-toolbar i,
.redactor-toolbar [class^="re-icon-"],
.redactor-toolbar [class*=" re-icon-"] {
    color: inherit !important;
}

/* End WTG CLIENT POLISH 3 */

/* =========================================================
   WTG CLIENT POLISH - INFORMATION FIELDS
   Fix custom-form Information / notice blocks
   ========================================================= */

#content table.grid.form fieldset.field > .thread-body.bleed {
    background: #13202b !important;
    background-color: #13202b !important;
    color: #e6edf3 !important;
    border: 1px solid #34495e !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    margin: 0 !important;
}

/* Information-field heading */
#content table.grid.form fieldset.field > .thread-body.bleed > h3 {
    color: #f0f6fc !important;
    background: transparent !important;
    margin: 0 0 10px 0 !important;
}

/* Information-field body text */
#content table.grid.form fieldset.field > .thread-body.bleed > div,
#content table.grid.form fieldset.field > .thread-body.bleed p,
#content table.grid.form fieldset.field > .thread-body.bleed span,
#content table.grid.form fieldset.field > .thread-body.bleed strong,
#content table.grid.form fieldset.field > .thread-body.bleed em {
    background: transparent !important;
    color: #d8e3ed !important;
}

/* Links inside Information fields */
#content table.grid.form fieldset.field > .thread-body.bleed a {
    color: #58a6ff !important;
}

/* END WTG CLIENT INFORMATION FIELD FIX */

/* =========================================================
   WTG CLIENT POLISH - INFORMATION FIELD FINAL FIX
   ========================================================= */

#ticketForm #dynamic-form .thread-body.bleed {
    background: #13202b !important;
    background-color: #13202b !important;
    color: #e6edf3 !important;
    border: 1px solid #34495e !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    margin: 0 !important;
}

/* Information title */
#ticketForm #dynamic-form .thread-body.bleed h1,
#ticketForm #dynamic-form .thread-body.bleed h2,
#ticketForm #dynamic-form .thread-body.bleed h3,
#ticketForm #dynamic-form .thread-body.bleed h4,
#ticketForm #dynamic-form .thread-body.bleed h5,
#ticketForm #dynamic-form .thread-body.bleed h6 {
    color: #f0f6fc !important;
    background: transparent !important;
}

/* Information body */
#ticketForm #dynamic-form .thread-body.bleed div,
#ticketForm #dynamic-form .thread-body.bleed p,
#ticketForm #dynamic-form .thread-body.bleed span,
#ticketForm #dynamic-form .thread-body.bleed strong,
#ticketForm #dynamic-form .thread-body.bleed em {
    color: #d8e3ed !important;
    background: transparent !important;
}

/* Links inside information blocks */
#ticketForm #dynamic-form .thread-body.bleed a {
    color: #58a6ff !important;
}

/* END WTG CLIENT INFORMATION FIELD FINAL FIX */



/* WTG CLIENT LOGO FINAL SIZE */
#header #logo img {
    width: 320px !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: none !important;
}

#header {
    height: 115px !important;
    min-height: 115px !important;
}

#logo {
    height: 115px !important;
}

/* END WTG CLIENT LOGO FINAL SIZE */