/* ==========================================================================
   DJMCServer theme for osTicket 1.18.x
   Client portal + staff panel. Dark by default, light via [data-theme="light"].
   Loaded AFTER osTicket's own stylesheets; overrides only, no stock files edited.
   ========================================================================== */

:root {
  /* brand */
  --djmc-orange:      #FA6603;
  --djmc-orange-hi:   #FF8134;
  --djmc-orange-lo:   #C24E02;
  --djmc-on-orange:   #120A03;
  /* accent used for TEXT; the vivid brand orange fails contrast on light
     backgrounds, so light mode swaps in a darker tint of the same hue */
  --accent-text:      #FA6603;

  /* dark palette (default) */
  --bg-0:   #0B0E13;
  --bg-1:   #12161D;
  --bg-2:   #191F28;
  --bg-3:   #212933;
  --line:   #262E3A;
  --line-2: #384454;
  --text:   #E8ECF2;
  --text-2: #9AA6B6;
  --text-3: #8792A3;

  --ok:     #35C46A;
  --warn:   #F0B429;
  --err:    #F2545B;
  --info:   #3DA5F4;

  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);

  --radius: 3px;
  --radius-lg: 4px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas,
          "Liberation Mono", monospace;

  --maxw: 1180px;
}

html[data-theme="light"] {
  --bg-0:   #EEF1F5;
  --bg-1:   #FFFFFF;
  --bg-2:   #FFFFFF;
  --bg-3:   #F4F6F9;
  --line:   #DCE2EA;
  --line-2: #C3CCD8;
  --text:   #10151C;
  --text-2: #56616F;
  --text-3: #626D7C;
  --accent-text:    #B34503;
  --shadow: 0 1px 2px rgba(16,21,28,.06), 0 8px 24px rgba(16,21,28,.08);
  --shadow-sm: 0 1px 3px rgba(16,21,28,.10);
}

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */

html, body {
  background: var(--bg-0) !important;
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* pixel-grid wash behind everything — very low contrast, reads as texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(148,166,190,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,166,190,.045) 1px, transparent 1px);
  background-size: 32px 32px;
}
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(to right, rgba(16,21,28,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,21,28,.035) 1px, transparent 1px);
}

#container {
  position: relative;
  z-index: 1;
  max-width: var(--maxw) !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--djmc-orange-hi); text-decoration: underline; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* --------------------------------------------------------------------------
   2. Header + brand lockup
   -------------------------------------------------------------------------- */

#header {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  padding: 22px 0 18px !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* logo: swap osTicket's <img> for the DJMC mark + wordmark */
#header #logo,
#header a#logo {
  display: flex !important;
  align-items: center;
  gap: 14px;
  height: auto !important;
  width: auto !important;
  float: left;
  text-decoration: none;
  padding: 0 !important;
  margin: 0 !important;
}
#header #logo img { display: none !important; }
#header #logo .valign-helper { display: none !important; }

#header #logo::before {
  content: "";
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: var(--djmc-orange);
  border-radius: var(--radius);
  background-image: url("../img/logo-mark-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px auto;
  image-rendering: pixelated;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.18);
}

#header #logo::after {
  content: "DJMCSERVER";
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

/* account strip, right side */
#header .pull-right {
  float: right;
  text-align: right;
  padding-top: 6px;
}
#header .pull-right p {
  margin: 0 0 2px !important;
  width: auto !important;          /* stock fixes this at 400px */
  max-width: 100% !important;
  font-size: 12.5px;
  color: var(--text-2);
  letter-spacing: .01em;
}
#header .pull-right a { color: var(--text-2); font-weight: 600; }
#header .pull-right a:hover { color: var(--accent-text); text-decoration: none; }

/* theme toggle button (injected by djmc-theme.js) */
button.djmc-theme-toggle,
.djmc-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 6px 11px !important;
  font: 700 10.5px/1 var(--sans) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  vertical-align: middle;
}
button.djmc-theme-toggle:hover,
.djmc-theme-toggle:hover {
  color: var(--accent-text) !important;
  background: var(--bg-3) !important;
  border-color: var(--line-2) !important;
}

/* --------------------------------------------------------------------------
   3. Primary nav
   -------------------------------------------------------------------------- */

#nav,
ul#nav {
  clear: both;
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0 6px !important;
  margin: 0 0 28px !important;
  height: auto !important;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  overflow: visible !important;
}

#nav li { float: none !important; display: block; margin: 0 !important; }

#nav li a {
  display: block;
  position: relative;
  padding: 14px 16px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-2) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: none;
  height: auto !important;
  line-height: 1.2 !important;
}
#nav li a:hover { color: var(--text) !important; }

#nav li a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  background: transparent;
}
#nav li a.active,
#nav li a:hover.active { color: var(--accent-text) !important; }
#nav li a.active::after { background: var(--djmc-orange); }

/* kill stock nav icons */
#nav li a.home, #nav li a.new, #nav li a.status, #nav li a.kb, #nav li a.tickets {
  background-image: none !important;
  padding-left: 16px !important;
}

/* --------------------------------------------------------------------------
   4. Content surface
   -------------------------------------------------------------------------- */

#content {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 34px !important;
  margin: 0 0 28px !important;
  min-height: 0 !important;
  width: auto !important;
  color: var(--text);
}

h1, h2, h3, h4, h5 { color: var(--text); font-weight: 750; letter-spacing: -.01em; }
#content h1 { font-size: 30px; line-height: 1.2; margin: 0 0 14px; }
#content h2 { font-size: 21px; margin: 32px 0 12px; }
#content h3 { font-size: 16px; margin: 26px 0 10px; }
#content p  { color: var(--text-2); margin: 0 0 14px; }
#content strong, #content b { color: var(--text); }

/* section headings get a small orange block, the one overt pixel nod */
#content h2::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 10px;
  background: var(--djmc-orange);
  vertical-align: baseline;
}

#content ul, #content ol { color: var(--text-2); padding-left: 20px; }
#content ul li::marker { color: var(--accent-text); }

code, kbd, samp, pre, .mono {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

input[type="submit"],
input[type="button"],
input[type="reset"],
button,
.btn,
a.btn,
.button,
a.button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  font: 700 12.5px/1 var(--sans) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 20px !important;
  border-radius: var(--radius) !important;
  border: 0 !important;
  cursor: pointer;
  background: var(--djmc-orange) !important;
  background-image: none !important;
  color: var(--djmc-on-orange) !important;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.26), inset 0 2px 0 rgba(255,255,255,.22) !important;
  text-shadow: none !important;
  height: auto !important;
  width: auto !important;
  transition: background .12s ease, transform .06s ease;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover, .btn:hover, .button:hover, a.button:hover, a.btn:hover {
  background: var(--djmc-orange-hi) !important;
  color: var(--djmc-on-orange) !important;
  text-decoration: none;
}
input[type="submit"]:active, button:active, .btn:active, .button:active {
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.26), inset 0 2px 0 rgba(255,255,255,.12) !important;
}

/* secondary / cancel / reset */
input[type="reset"],
input[name="cancel"],
.btn.cancel, .button.cancel,
input[type="button"][value="Cancel"],
input[type="button"][value="Reset"] {
  background: transparent !important;
  color: var(--text-2) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
}
input[type="reset"]:hover,
input[name="cancel"]:hover {
  background: var(--bg-3) !important;
  color: var(--text) !important;
}

/* stock coloured buttons on the landing sidebar */
.button.green, .green.button, a.green,
.button.blue, .blue.button, a.blue {
  background: var(--djmc-orange) !important;
  color: var(--djmc-on-orange) !important;
}
.button.green, .green.button, a.green {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius) !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  outline: none;
  max-width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
html[data-theme="dark"] select,
select { background-image: none; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--djmc-orange) !important;
  box-shadow: 0 0 0 3px rgba(250,102,3,.22) !important;
}

input::placeholder, textarea::placeholder { color: var(--text-3); }

/* native dropdown items: without this the selected label renders dark-on-dark */
select option, select optgroup {
  background: var(--bg-2) !important;
  color: var(--text) !important;
}

/* checkboxes, radios and range thumbs pick up the brand orange */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
  accent-color: var(--accent-text);
}

label, .form_table th, table.form th {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 13px;
}
/* osTicket wraps the whole label in .required and the asterisk in .error —
   only the asterisk should read as red */
label .required, span.required, td.required, th.required {
  color: var(--text) !important;
  font-weight: 600;
}
span.error, .error, .required .error { color: var(--err) !important; font-weight: 700; }
label { display: inline-block; margin-bottom: 6px; }
label > input, label > select, label > textarea { margin-top: 6px; }
.faded, .faded * { color: var(--text-3) !important; }

/* osTicket dynamic form tables */
table.form_table, table.form, #dynamic-form table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: transparent !important;
}
table.form_table td, table.form_table th,
#dynamic-form td, #dynamic-form th {
  background: transparent !important;
  border: 0 !important;
  padding: 9px 12px 9px 0 !important;
  vertical-align: top;
  color: var(--text);
}
.form-header, td.form-header, th.form-header {
  color: var(--text-2) !important;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 10px !important;
}

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
legend { color: var(--text-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 0 8px; }

.buttons, p.buttons { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

/* redactor (rich text) */
.redactor-box {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius);
  overflow: hidden;
}
.redactor-editor, .redactor-layer, .redactor-in {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  min-height: 150px;
}
.redactor-editor a { color: var(--accent-text) !important; }
.redactor-toolbar, .redactor-toolbar-wrapper {
  background: var(--bg-3) !important;
  border-bottom: 1px solid var(--line) !important;
}
.redactor-toolbar li a,
.redactor-toolbar a.re-button,
.re-button, .re-button-icon {
  background: transparent !important;
  color: var(--text-2) !important;
  border-radius: 2px;
}
.redactor-toolbar li a:hover,
.redactor-toolbar a.re-button:hover,
.re-button:hover, .re-button-icon:hover {
  background: var(--bg-1) !important;
  color: var(--accent-text) !important;
}
.re-button.re-button-active, .re-button.active { color: var(--accent-text) !important; }
.redactor-dropdown, .redactor-context-toolbar {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: var(--shadow);
}
.redactor-dropdown a { color: var(--text-2) !important; }
.redactor-dropdown a:hover { background: var(--bg-3) !important; color: var(--accent-text) !important; }
.redactor-statusbar {
  background: var(--bg-3) !important;
  color: var(--text-3) !important;
  border-top: 1px solid var(--line) !important;
}

/* file drop */
.filedrop, .dropzone, .file-drop {
  background: var(--bg-2) !important;
  border: 1px dashed var(--line-2) !important;
  border-radius: var(--radius);
  color: var(--text-2) !important;
}

/* --------------------------------------------------------------------------
   7. Tables / lists
   -------------------------------------------------------------------------- */

table.list, table#ticketTable, .list {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
table.list th, table#ticketTable th, .list th {
  background: var(--bg-3) !important;
  color: var(--text-2) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
table.list th a, .list th a { color: var(--text-2) !important; }
table.list td, table#ticketTable td, .list td {
  padding: 13px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text-2) !important;
  background: transparent !important;
  vertical-align: middle;
}
table.list tr:last-child td { border-bottom: 0 !important; }
table.list tbody tr:hover td { background: var(--bg-2) !important; }
table.list td a { color: var(--text) !important; font-weight: 600; }
table.list td a:hover { color: var(--accent-text) !important; }

/* ticket numbers read as data */
td .ticket-number, .ticket_number, td a[href*="tid="] { font-family: var(--mono); }

/* --------------------------------------------------------------------------
   8. Status pills
   -------------------------------------------------------------------------- */

.djmc-pill,
td .status, .status-open, .status-closed {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

/* --------------------------------------------------------------------------
   9. Messages / alerts
   -------------------------------------------------------------------------- */

#msg_error, #msg_notice, #msg_warning,
.error_bar, .warning_bar, .notice_bar,
#msg_info {
  border-radius: var(--radius);
  padding: 13px 16px !important;
  margin: 0 0 22px !important;
  font-size: 13.5px;
  font-weight: 500;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
#msg_error, .error_bar {
  background: rgba(242,84,91,.10) !important;
  border-color: rgba(242,84,91,.45) !important;
  color: #FF9095 !important;
}
#msg_notice, .notice_bar {
  background: rgba(53,196,106,.10) !important;
  border-color: rgba(53,196,106,.40) !important;
  color: #6BDF97 !important;
}
#msg_warning, .warning_bar {
  background: rgba(240,180,41,.10) !important;
  border-color: rgba(240,180,41,.40) !important;
  color: #F5CB63 !important;
}
html[data-theme="light"] #msg_error, html[data-theme="light"] .error_bar { color: #B3252C !important; }
html[data-theme="light"] #msg_notice, html[data-theme="light"] .notice_bar { color: #1B7A41 !important; }
html[data-theme="light"] #msg_warning, html[data-theme="light"] .warning_bar { color: #8A6510 !important; }

/* --------------------------------------------------------------------------
   10. Knowledgebase
   -------------------------------------------------------------------------- */

#breadcrumbs {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 18px;
  padding: 0;
  background: none !important;
  border: 0 !important;
}
#breadcrumbs a { color: var(--text-2); }

.searchbar, #kb-search, form.search {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 22px;
}

/* category blocks on the KB index */
#content .category, .kb-category, #kb-categories li {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--djmc-orange);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  list-style: none;
}
#content .category h3, .kb-category h3 { margin: 0 0 6px; font-size: 15px; }

.faq-content {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   11. Ticket thread (client view)
   -------------------------------------------------------------------------- */

.thread-entry, #ticketThread .thread-body, #ticketThread .thread-entry {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 16px !important;
  color: var(--text-2);
  box-shadow: none !important;
}
.thread-entry .header, .thread-entry .thread-entry-header {
  background: var(--bg-3) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text-2) !important;
  font-size: 12.5px;
  padding: 11px 16px !important;
  border-radius: 0 !important;
}
.thread-entry .thread-body, .thread-entry .body { padding: 18px !important; color: var(--text-2); }
.thread-entry.message { border-left: 3px solid var(--line-2) !important; }
.thread-entry.response { border-left: 3px solid var(--djmc-orange) !important; }

.ticket_info, #ticket_info, .infoTable {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  padding: 4px 8px;
}
.ticket_info th, .infoTable th { color: var(--text-3) !important; font-weight: 600; }
.ticket_info td, .infoTable td { color: var(--text) !important; }

/* client ticket view: info banner, info tables, reply box */
#msg_info {
  background-color: rgba(61,165,244,.10) !important;
  border: 1px solid rgba(61,165,244,.40) !important;
  color: #8CC9F7 !important;
  border-radius: var(--radius);
  padding: 12px 15px !important;
  margin: 0 0 22px !important;
}
#msg_info a { color: var(--accent-text) !important; font-weight: 600; }
html[data-theme="light"] #msg_info { color: #1B5E8C !important; }

.infoTable {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}
.infoTable th, .infoTable td { background: transparent !important; padding: 9px 12px !important; }
.infoTable th { color: var(--text-3) !important; font-weight: 600; }
.infoTable td { color: var(--text) !important; }

table .headline, table.custom-data .headline, .infoTable .headline {
  background-color: var(--bg-3) !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--line) !important;
  font: 700 11.5px/1.6 var(--sans) !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 10px 12px !important;
}

#reply {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  padding: 22px !important;
  margin-top: 22px !important;
  color: var(--text-2) !important;
}
#reply h2 {
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  font-size: 17px !important;
}
#reply td, #reply th, #reply label, #reply p, #reply em, #reply i { color: var(--text-2) !important; }
#reply input[type="text"], #reply #response_options textarea, #reply textarea {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text) !important;
  width: 100% !important;
  box-sizing: border-box;
}
#ticketForm div input, #ticketForm div textarea,
#clientLogin div input, #clientLogin div textarea {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text) !important;
}

/* thread entries on the client side: stock uses light headers, hard borders
   and CSS-triangle pointers coloured to match — all retargeted here */
.thread-entry .header {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  background: var(--bg-3) !important;
  color: var(--text-2) !important;
}
.thread-entry .header b, .thread-entry .header strong { color: var(--text) !important; }
.thread-entry.response .header { background: var(--bg-3) !important; }
.thread-entry.message .header { background: var(--bg-3) !important; }
.thread-entry .thread-body {
  border: 1px solid var(--line) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  background: var(--bg-2) !important;
}
.thread-entry.avatar .header:before { border-right-color: var(--line) !important; border-left-color: var(--line) !important; }
.thread-entry.avatar .header:after { border-right-color: var(--bg-3) !important; border-left-color: var(--bg-3) !important; }
.thread-entry.message { border-left: 0 !important; }
.thread-entry.response { border-left: 0 !important; }
.thread-entry.message .thread-body { border-left: 3px solid var(--line-2) !important; }
.thread-entry.response .thread-body { border-left: 3px solid var(--djmc-orange) !important; }
.thread-entry > .avatar { border-radius: var(--radius); overflow: hidden; background: var(--bg-3); }

/* the timeline: stock masks the dotted spine with white bars — recolour to the
   card surface so they disappear again on dark */
.thread-entry::before { border-top-color: var(--bg-1) !important; }
.thread-entry::after  { border-bottom-color: var(--bg-1) !important; }
.thread-event .type-icon::after { border-color: var(--bg-1) !important; }
#ticketThread::before { border-left-color: var(--line-2) !important; }
#ticketThread { border-bottom-color: var(--line) !important; }
.thread-event, .thread-event .faded { color: var(--text-3) !important; }
.thread-event .type-icon { color: var(--text-2) !important; }

.thread-entry .attachments, .thread-body .attachments {
  background: var(--bg-3) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--text-2) !important;
}
.thread-body { background-color: transparent !important; color: var(--text-2) !important; }
.thread-body table, .thread-body table thead > tr > td,
.thread-body table thead > tr > th, .thread-body table tr > th {
  background-color: var(--bg-3) !important;
  color: var(--text-2) !important;
  border-color: var(--line) !important;
}
.thread-body pre {
  background: var(--bg-3) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
.thread-body mark { background: rgba(250,102,3,.35) !important; color: var(--text) !important; }
.type-icon, .freetext-files {
  background: var(--bg-3) !important;
  color: var(--text-2) !important;
  border-color: var(--line) !important;
}
.warning {
  background: rgba(240,180,41,.12) !important;
  border: 1px solid rgba(240,180,41,.4) !important;
  color: #F5CB63 !important;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-style: normal;
}
.warning strong { color: var(--warn) !important; }

#ticketTable th { background: var(--bg-3) !important; }
#ticketTable tr.alt td { background: var(--bg-2) !important; }
table.custom-data th { background: var(--bg-3) !important; color: var(--text-2) !important; }

/* --------------------------------------------------------------------------
   12. Login
   -------------------------------------------------------------------------- */

#clientLogin, .login-box {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px !important;
  max-width: 440px;
  margin: 0 auto;
}
#clientLogin h1 { font-size: 22px; }
#clientLogin input[type="text"],
#clientLogin input[type="email"],
#clientLogin input[type="password"] { width: 100%; box-sizing: border-box; }
#clientLogin input[type="submit"] { width: 100%; }
.external-auth { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

#footer {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto !important;
  padding: 22px 24px 40px !important;
  border-top: 1px solid var(--line);
  background: transparent !important;
  color: var(--text-3) !important;
  font-size: 12px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
#footer p { margin: 0 !important; color: var(--text-3) !important; }
#footer a { color: var(--text-3); }
#footer a:hover { color: var(--accent-text); }
#footer #poweredBy {
  background-image: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 11px;
  opacity: .65;
  display: inline-block !important;
}

/* --------------------------------------------------------------------------
   14. Misc stock chrome
   -------------------------------------------------------------------------- */

#overlay { background: rgba(6,9,13,.72) !important; }
#loading {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  color: var(--text) !important;
  box-shadow: var(--shadow);
}
#loading h4 { color: var(--text) !important; }

.tip_box, .tip_content {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-2) !important;
  border-radius: var(--radius);
}

/* stock paints <time> black, which vanishes on dark thread headers */
time, .thread-entry .header time, .header time { color: inherit !important; }

/* small pill-shaped action buttons (Print / Edit on a ticket, panel actions) */
.action-button, a.action-button, .action-buttons a {
  background: var(--bg-2) !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600;
  padding: 6px 11px !important;
  text-transform: none;
  letter-spacing: 0;
}
.action-button:hover, a.action-button:hover, .action-buttons a:hover {
  color: var(--accent-text) !important;
  border-color: var(--djmc-orange) !important;
  background: var(--bg-3) !important;
}

/* file drop zone links */
.filedrop a, .filedrop a.manual, .dropzone a, a.manual {
  color: var(--accent-text) !important;
  opacity: 1 !important;
  font-weight: 600;
}

/* jQuery UI + select2 brought in line */
.ui-widget-content { background: var(--bg-2) !important; border-color: var(--line) !important; color: var(--text) !important; }
.ui-widget-header { background: var(--bg-3) !important; border-color: var(--line) !important; color: var(--text) !important; }
.ui-state-default, .ui-widget-content .ui-state-default {
  background: var(--bg-3) !important; border-color: var(--line) !important; color: var(--text-2) !important;
}
.ui-state-active, .ui-state-highlight {
  background: var(--djmc-orange) !important; border-color: var(--djmc-orange) !important; color: var(--djmc-on-orange) !important;
}
.select2-container--default .select2-selection--single {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius) !important;
  height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important; line-height: 38px !important;
}
.select2-dropdown { background: var(--bg-2) !important; border-color: var(--line-2) !important; }
.select2-results__option { color: var(--text-2) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--djmc-orange) !important; color: var(--djmc-on-orange) !important;
}

/* --------------------------------------------------------------------------
   14b. Landing page
   -------------------------------------------------------------------------- */

#landing_page .thread-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text-2) !important;
  margin: 0 !important;
}
#landing_page .thread-body h1,
#landing_page .thread-body h2,
#landing_page .thread-body h3,
#landing_page .thread-body h4,
#landing_page h1, #landing_page h2, #landing_page h3 { color: var(--text) !important; }
#landing_page .thread-body p,
#landing_page .thread-body li { color: var(--text-2) !important; }
#landing_page .thread-body a { color: var(--accent-text) !important; }
#landing_page .thread-body h2 {
  font-size: 19px !important;
  margin: 34px 0 14px !important;
}

/* Stock floats the button rail and lets the main column shrink to fit around
   it, which wastes a third of the width on a content-heavy landing page.
   A real two-column grid gives the content the full remaining measure. */
#landing_page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 0 34px;
  align-items: start;
}
#landing_page .main-content { grid-column: 1; width: auto !important; min-width: 0; }
#landing_page .sidebar.pull-right {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
#landing_page > .clear, #landing_page > div:last-child:empty { display: none; }
#landing_page .front-page-button p { margin: 0 0 12px !important; }
#landing_page .front-page-button a.button {
  display: block !important;
  text-align: center;
  padding: 15px 18px !important;
}
#landing_page .sidebar .content:empty { display: none !important; }

#landing_page .search-form { padding: 0 0 26px !important; }
#landing_page .search-form form { display: flex; gap: 10px; }
#landing_page .search-form .search,
.searchbar .search {
  width: 100% !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--line-2) !important;
  background: var(--bg-2) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}

/* --------------------------------------------------------------------------
   Landing-page content styling.

   osTicket's HTML sanitizer deletes every class attribute that does not start
   with "Mso", so page content cannot carry its own classes — it would style
   correctly once and lose everything the first time an admin re-saved the page
   in Admin Panel > Manage > Pages. Everything below is therefore driven by
   STRUCTURE, not classes. The expected shape of the landing content is:

     h1                       page title (an eyebrow label is added by CSS)
     h1 + p                   lead paragraph
     h2                       section heading
     div > div                a row of cards (2-4 children)
     div > div > h3 / h4      card title
     ul                       bulleted list, orange square markers
     table with a th row      the response-time table
     blockquote               closing note

   Edit the page freely in the admin UI; as long as that shape holds, the
   styling survives.
   -------------------------------------------------------------------------- */

#landing_page .thread-body > h1 {
  font-size: 34px !important;
  margin: 0 0 12px !important;
  color: var(--text) !important;
}
#landing_page .thread-body > h1::before {
  content: "DJMCServer Support";
  display: block;
  font: 700 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}
#landing_page .thread-body > h1 + p {
  font-size: 15.5px;
  max-width: 68ch;
  color: var(--text-2) !important;
}

#landing_page .thread-body > h2 {
  font-size: 19px !important;
  margin: 38px 0 12px !important;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--text) !important;
}
#landing_page .thread-body > h2:first-child { border-top: 0; padding-top: 0; }

/* a div holding divs becomes a card row */
#landing_page .thread-body > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 0 4px;
}
#landing_page .thread-body > div > div {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--djmc-orange);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  min-width: 0;
}
#landing_page .thread-body > div > div > h3,
#landing_page .thread-body > div > div > h4 {
  margin: 0 0 6px !important;
  color: var(--text) !important;
}
#landing_page .thread-body > div > div > h3 { font-size: 15.5px !important; }
#landing_page .thread-body > div > div > h3 a { color: var(--text) !important; text-decoration: none !important; }
#landing_page .thread-body > div > div > h3 a:hover { color: var(--accent-text) !important; text-decoration: none; }
#landing_page .thread-body > div > div > h4 {
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3) !important;
}
#landing_page .thread-body > div > div > p {
  color: var(--text-3) !important;
  font-size: 13px;
  margin: 0 0 12px !important;
  line-height: 1.55;
}
#landing_page .thread-body > div > div > p:last-child { margin-bottom: 0 !important; }

/* lists inside the landing content */
#landing_page .thread-body ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#landing_page .thread-body ul li {
  position: relative;
  padding: 6px 0 6px 19px;
  color: var(--text-2) !important;
  font-size: 13.5px;
  line-height: 1.55;
}
#landing_page .thread-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 7px; height: 7px;
  background: var(--djmc-orange);
}
#landing_page .thread-body ul li b,
#landing_page .thread-body ul li strong { color: var(--text) !important; }

/* the response-time table (any table carrying a header row) */
#landing_page .thread-body table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  background: var(--bg-2) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 20px 0 0;
}
#landing_page .thread-body table th,
#landing_page .thread-body table td {
  text-align: left;
  padding: 11px 15px !important;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
#landing_page .thread-body table th {
  background: var(--bg-3) !important;
  color: var(--text-2) !important;
  font: 700 11px/1.4 var(--sans) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#landing_page .thread-body table td { color: var(--text-2) !important; }
#landing_page .thread-body table td:first-child { color: var(--text) !important; font-weight: 600; }
#landing_page .thread-body table tr:last-child td { border-bottom: 0; }

/* closing note */
#landing_page .thread-body blockquote {
  margin: 30px 0 0 !important;
  padding: 15px 18px !important;
  border: 0;
  border-left: 3px solid var(--line-2);
  background: var(--bg-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-3) !important;
  font-size: 13px;
  line-height: 1.65;
  font-style: normal;
}
#landing_page .thread-body blockquote b { color: var(--text-2) !important; }

/* --------------------------------------------------------------------------
   14c. Knowledgebase list (stock #kb markup)
   -------------------------------------------------------------------------- */

#kb { padding: 0 !important; margin: 18px 0 0 !important; list-style: none; }
#kb > li {
  background-image: none !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--djmc-orange) !important;
  border-radius: var(--radius);
  padding: 18px 20px !important;
  margin: 0 0 14px !important;
}
#kb > li > i {
  background-image: none !important;
  width: 14px !important;
  height: 14px !important;
  margin: 6px 0 0 !important;
  background: var(--djmc-orange) !important;
}
#kb > li > div[style] { margin-left: 30px !important; }
#kb > li h4 { margin: 0 0 4px !important; }
#kb > li h4 a { color: var(--text) !important; font-size: 15px !important; font-weight: 700; }
#kb > li h4 a:hover { color: var(--accent-text) !important; }
#kb .faded { margin: 4px 0 12px !important; color: var(--text-3) !important; font-size: 13px; }

.popular-faq {
  background: transparent !important;
  border-top: 1px solid var(--line);
  padding: 9px 0 !important;
  margin: 0 !important;
}
.popular-faq:last-child { padding-bottom: 0 !important; }
.popular-faq i { color: var(--accent-text) !important; margin-right: 8px; opacity: .85; }
.popular-faq a { color: var(--text-2) !important; font-size: 13.5px; }
.popular-faq a:hover { color: var(--accent-text) !important; }

/* sidebar panels */
.sidebar .content {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  padding: 16px !important;
  color: var(--text-2) !important;
}
.sidebar .content:empty { display: none !important; }
.sidebar section .header {
  color: var(--text-2) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px !important;
}
.sidebar .searchbar { background: transparent; border: 0; padding: 0; margin-bottom: 16px; }

/* FAQ article page */
#faq .article-meta,
.article-meta {
  background: var(--bg-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  color: var(--text-3) !important;
  padding: 10px 14px !important;
  font-size: 12.5px;
}
#faq h1 { color: var(--text) !important; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* stock uses fixed-width floated sidebars and percentage spans that collapse
     the main column on phones — unwind all of it */
  .sidebar, .sidebar.pull-right,
  #landing_page .sidebar, #landing_page .sidebar.pull-right {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 20px !important;
  }
  .span8, .span4, .row > div, .main-content {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
  }
  #landing_page { display: block !important; }
  #landing_page .main-content { width: auto !important; }
  #landing_page .front-page-button { display: flex; gap: 10px; flex-wrap: wrap; }
  #landing_page .front-page-button p { flex: 1 1 180px; margin: 0 !important; }
  .pull-right, .pull-left { float: none !important; }
  #landing_page .search-form form { flex-direction: column; }
  #landing_page .search-form .search { width: 100% !important; }
  .djmc-cards { grid-template-columns: 1fr; }
  #reply textarea, #reply input[type="text"] { width: 100% !important; }
  .thread-entry.avatar { margin-left: 0 !important; }
  .thread-entry.response.avatar { margin-right: 0 !important; }
  .thread-entry > .avatar, .thread-entry.response > .avatar { display: none !important; }
  #ticketThread::before { display: none !important; }
  .infoTable, .infoTable tbody, .infoTable tr, .infoTable td, .infoTable th { display: block; width: auto !important; }
  .infoTable th { padding-bottom: 0 !important; }
  table.form_table, table.form_table tbody, table.form_table tr, table.form_table td {
    display: block; width: auto !important;
  }
  input[type="text"], input[type="email"], input[type="password"], select, textarea {
    width: 100% !important;
    box-sizing: border-box;
  }
  input[name*="-ext"], input[type="tel"] + input { width: auto !important; }

  /* stock hard-codes width="800" on the ticket form and ticket-info tables */
  table[width], table#ticketInfo, #ticketForm table, #content table {
    width: 100% !important;
    max-width: 100% !important;
  }
  #ticketInfo td[width="50%"] { display: block; width: 100% !important; }
  #reply textarea, .redactor-box, .redactor-editor { width: auto !important; max-width: 100% !important; }
  #content { overflow-x: hidden; }
  img, table { max-width: 100%; }
}

@media (max-width: 760px) {
  #container { padding: 0 14px 32px !important; }
  #header {
    padding: 16px 0 12px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  #header #logo { order: -1 !important; width: 100%; }
  #header #logo::after { font-size: 16px; letter-spacing: .08em; }
  #header #logo::before { width: 36px; height: 36px; flex-basis: 36px; background-size: 21px auto; }
  #header .pull-right {
    order: 0;
    float: none !important;
    clear: both;
    width: 100%;
    text-align: left !important;
    padding-top: 2px;
  }
  #header .pull-right p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  #nav { flex-direction: column; padding: 4px !important; text-align: left; }
  #nav li a { padding: 12px 12px !important; text-align: left; }
  #nav li a.active::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  #content { padding: 22px 18px !important; }
  #content h1 { font-size: 24px; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list thead { display: none; }
  table.list tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.list td { border-bottom: 0 !important; padding: 5px 14px !important; }
}

/* --------------------------------------------------------------------------
   16. Print — always light, ink-friendly
   -------------------------------------------------------------------------- */

@media print {
  html, body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  #container, #content { background: #fff !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  #nav, .djmc-theme-toggle, #footer #poweredBy,
  #msg_info, #header .pull-right, .djmc-status-line,
  #ticketThread ~ #reply, #reply,
  h1 .pull-right, .pull-right .btn, a.btn { display: none !important; }
  #header { border-bottom: 1px solid #ccc; padding-bottom: 10px !important; }
  #header #logo::before { box-shadow: none !important; }
  #content h1, #content h2, #content h3, #content p, #content td, #content th { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .thread-entry { border: 1px solid #999 !important; background: #fff !important; }
}