/* ============================================
   OsTicket Client Portal — Total Redesign
   Complete theme.css takeover, mobile-first
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

/* ---------- ROOT VARIABLES (dark default) ---------- */
:root {
  --bg: #f4f5f8;
  --bg2: #eef0f4;
  --surface: #ffffff;
  --surface2: #fafafc;
  --hover: #e8eaf0;
  --border: #d8dae4;
  --border-light: #cacdd8;
  --text: #14141e;
  --text2: #404062;
  --text3: #7a7a98;
  --accent: #7c3aed;
  --accent2: #8b5cf6;
  --accent3: #a78bfa;
  --accent-bg: rgba(124,58,237,0.08);
  --accent-glow: rgba(124,58,237,0.18);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 16px;
  --radius2: 12px;
  --radius3: 8px;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --h: 68px;
  --max-w: 1280px;
  --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --toggle-icon: '🌙';
  --page-grad: radial-gradient(ellipse 70% 45% at 50% -12%, rgba(124,58,237,0.04), transparent), radial-gradient(ellipse 40% 35% at 85% 95%, rgba(99,102,241,0.03), transparent);
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"] {
  --bg: #f4f5f8;
  --bg2: #eef0f4;
  --surface: #ffffff;
  --surface2: #fafafc;
  --hover: #e8eaf0;
  --border: #d8dae4;
  --border-light: #cacdd8;
  --text: #14141e;
  --text2: #404062;
  --text3: #7a7a98;
  --accent: var(--accent2);
  --accent2: #6d28d9;
  --accent3: #5b21b6;
  --accent-bg: rgba(109,40,217,0.06);
  --accent-glow: rgba(109,40,217,0.12);
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --page-grad: radial-gradient(ellipse 70% 45% at 50% -12%, rgba(109,40,217,0.03), transparent), radial-gradient(ellipse 40% 35% at 85% 95%, rgba(99,102,241,0.02), transparent);
}

/* ---------- BASE ---------- */
html { height: 100%; font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font) !important;
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Body gradient overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--page-grad);
  pointer-events: none;
  z-index: 0;
}

/* ---------- TYPOGRAPHY ---------- */
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); }
h4 { font-size: 1rem; font-weight: 600; color: var(--text); }
p { color: var(--text2) !important; line-height: 1.7; margin: 0 0 16px; }

a { color: var(--accent2) !important; text-decoration: none; transition: color var(--t); }
a:hover { color: var(--accent3) !important; }

::selection { background: var(--accent-glow); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ---------- CONTAINER ---------- */
#container {
  position: relative;
  z-index: 1;
  background: transparent !important;
  width: 100% !important;
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 24px 80px !important;
  min-height: 100vh;
  box-shadow: none !important;
}

/* ---------- ALERT BARS ---------- */
.notice_bar, .warning_bar, .error_bar,
#msg_error, #msg_notice, #msg_warning {
  padding: 14px 20px !important;
  margin: 0 0 20px !important;
  border-radius: var(--radius2) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  animation: fsd 0.3s ease;
  background-image: none !important;
}
.notice_bar, #msg_notice { background: var(--accent-bg) !important; color: var(--accent3) !important; border: 1px solid rgba(124,58,237,0.2) !important; }
.warning_bar, #msg_warning { background: rgba(245,158,11,0.12) !important; color: #fcd34d !important; border: 1px solid rgba(245,158,11,0.2) !important; }
.error_bar, #msg_error { background: rgba(239,68,68,0.12) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,0.2) !important; }
@keyframes fsd { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- HEADER (full override) ---------- */
#header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--h) !important;
  padding: 0 4px !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative !important;
  z-index: 100 !important;
  background: transparent !important;
  background-image: none !important;
}

/* Logo — HIDE completely */
#logo { display: none !important; }
#header #logo { display: none !important; }
#header #logo img { display: none !important; }
#logo a { display: none !important; }
.valign-helper { display: none !important; }
.pull-left { display: none !important; }

/* User area (right side) */
#header .pull-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  float: none !important;
  order: 3 !important;
}
#header .pull-right p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  color: var(--text3) !important;
  white-space: nowrap !important;
  width: auto !important;
}
#header .pull-right p a {
  color: var(--text2) !important;
  padding: 6px 10px !important;
  border-radius: var(--radius3) !important;
  transition: all var(--t);
}
#header .pull-right p a:hover {
  color: var(--accent2) !important;
  background: var(--accent-bg) !important;
}
.flag { margin: 0 1px !important; vertical-align: middle !important; }
.flush-right { float: none !important; }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  user-select: none;
  margin-left: 8px;
  line-height: 1;
}
.theme-toggle:hover {
  color: var(--accent2);
  border-color: var(--accent-bg);
  background: var(--accent-bg);
}
.clear { display: none !important; }

/* ---------- HAMBURGER ---------- */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-label span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: all var(--t);
}

/* ---------- NAV ---------- */
#nav {
  display: flex !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 2 !important;
  flex: 1 !important;
  justify-content: center !important;
  height: auto !important;
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
  box-shadow: none !important;
  white-space: normal !important;
}
#nav li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: inline-block !important;
}
#nav li a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text2) !important;
  background: transparent !important;
  background-image: none !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  border-radius: var(--radius2) !important;
  text-decoration: none !important;
  height: auto !important;
  line-height: normal !important;
  transition: all var(--t);
  margin: 0 !important;
  text-align: left !important;
  width: auto !important;
  position: relative !important;
}
#nav li a:hover {
  background: var(--hover) !important;
  background-color: var(--hover) !important;
  color: var(--text) !important;
}
#nav li a.active,
#nav li.active a {
  color: var(--accent2) !important;
  background: var(--accent-bg) !important;
  background-color: var(--accent-bg) !important;
}
#nav li a.active::after,
#nav li.active a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Nav link icons — hide old image icons */
#nav li a.home,
#nav li a.kb,
#nav li a.new,
#nav li a.status,
#nav li a.tickets {
  background-image: none !important;
  padding-left: 10px !important;
}
.rtl #nav li a {
  background-position: 0 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin: 0 !important;
}

/* ---------- CONTENT ---------- */
#content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 36px 32px !important;
  margin: 0 !important;
  min-height: 400px;
  animation: fi 0.4s ease;
  height: auto !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
@keyframes fi { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- SIDEBAR ---------- */
#sidebar { float: right; width: 260px; margin-left: 24px; }
#sidebar .sidebar,
#sidebar .content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  margin-left: 0 !important;
  width: auto !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
#sidebar h3 { font-size: 0.9rem; margin: 0 0 12px; color: var(--text); font-weight: 600; }
#sidebar p, #sidebar li { font-size: 0.85rem; color: var(--text2); line-height: 1.6; }
#sidebar ul { list-style: none; padding: 0; margin: 0; }
#sidebar ul li { padding: 4px 0; }
#sidebar ul li a { color: var(--accent2); }
#sidebar .sidebar-button {
  display: block; text-align: center; padding: 12px 20px;
  border-radius: var(--radius2);
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important; font-weight: 600; font-size: 0.9rem;
  transition: all var(--t);
}
#sidebar .sidebar-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow);
}

/* ---------- FORMS ---------- */
form { margin: 0; }

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=search],
textarea,
select {
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  outline: none;
  transition: all var(--t);
  width: 100%;
  max-width: 420px;
  min-height: 46px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-bg) !important;
  background: var(--bg2) !important;
}
input::placeholder, textarea::placeholder { color: var(--text3) !important; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239898b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Override theme.css form backgrounds */
#ticketForm div input,
#clientLogin div input,
#ticketForm div textarea,
#clientLogin div textarea,
#reply input[type=text],
#reply #response_options textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
}
#ticketForm div input[type=file],
#clientLogin div input[type=file] { border: 0 !important; }
#ticketForm div select,
#clientLogin div select { float: none !important; }

/* ---------- BUTTONS ---------- */
input[type=submit],
input[type=reset],
input[type=button],
.action-button,
.button, a.button, .btn, input.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  border: none !important;
  border-radius: var(--radius2) !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
  user-select: none !important;
  min-height: 46px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
input[type=submit]:hover, .action-button:hover, .button:hover, .btn:hover, input.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow) !important;
}

input[type=submit],
.button.primary, .blue.button,
.action-button,
.btn, input.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
}

input[type=reset], input[type=button],
.button.gray, input[type=reset]:hover {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}
input[type=reset]:hover, input[type=button]:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
  border-color: var(--text3) !important;
}

.green.button {
  background: linear-gradient(135deg, var(--success), #059669) !important;
  color: #fff !important;
}
.green.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(16,185,129,0.3) !important;
}

.buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 20px 0 8px;
  flex-wrap: wrap;
}

/* Action buttons in ticket view (print/edit) */
.action-button {
  padding: 8px 16px !important;
  min-height: 36px !important;
  font-size: 0.82rem !important;
  border-radius: var(--radius3) !important;
  margin-left: 8px !important;
  gap: 6px !important;
}
a.action-button,
.action-button span,
.action-button a,
.action-button a:hover,
.action-button span:hover {
  background: transparent !important;
  color: #fff !important;
  float: none !important;
  display: inline !important;
  border: none !important;
  line-height: inherit !important;
  font-size: inherit !important;
}

/* Override theme.css button styles */
.blue.button:hover { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; }
#clientLogin input[type=submit],
#clientLogin .btn,
.login-box .btn,
.login-box input[type=submit] { 
  padding: 12px 28px !important; 
  border-radius: var(--radius2) !important; 
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border: none !important;
}

/* ---------- CLIENT LOGIN / STATUS ---------- */
#clientLogin {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 28px 24px !important;
  margin: 20px 0 !important;
}
#clientLogin div input[type=file] { border: 0 !important; }
.login-box { display: inline-block !important; vertical-align: top !important; padding: 0 !important; width: auto !important; }
.login-box strong { display: block; font-size: 0.85rem; color: var(--text3); margin-bottom: 8px; font-weight: 500; }
.login-box input[type=text],
.login-box input[type=password] {
  width: 100% !important;
  margin-bottom: 12px !important;
}
.instructions {
  display: inline-block !important;
  vertical-align: top !important;
  padding: 12px 16px !important;
  color: var(--text2) !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
}

/* ---------- OPEN TICKET FORM ---------- */
#ticketForm > table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; }
#ticketForm > table td { width: auto !important; border: none !important; padding: 8px 4px !important; }
#ticketForm > table td + td { width: auto !important; }
#content form table td label { display: block; color: var(--text2); font-size: 0.85rem; line-height: 1.6; }
#content form table .required { color: var(--danger); font-weight: 500; }
#content form table .form-header h3 { font-size: 1rem; margin: 0 0 4px; color: var(--text); }
#content form table .form-header div { font-size: 0.8rem; color: var(--text3); }
#content form table hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
#content form table select { width: 100%; max-width: 420px; }
#content form p.buttons input[type=submit] {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border: none !important;
}
#content form p.buttons input[type=reset],
#content form p.buttons input[type=button] {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}
#content form label input[type=text],
#content form label input[type=email],
#content form label input[type=tel] { width: 100%; max-width: 420px; }

/* ---------- TABLES ---------- */
table { width: 100%; border-collapse: collapse; }
table th {
  padding: 16px 18px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--text3) !important;
  text-align: left !important;
  border-bottom: 1px solid var(--border) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent !important;
}
table td {
  padding: 16px 18px !important;
  font-size: 0.88rem !important;
  color: var(--text2) !important;
  border-bottom: 1px solid var(--border) !important;
  border: none !important;
}
table tr:hover td { background: var(--hover) !important; }
table tr.alt td { background: transparent !important; }
table tr.alt:hover td { background: var(--hover) !important; }

#ticketTable {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
  overflow: hidden;
}
#ticketTable td {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- INFO TABLE ---------- */
.infoTable { background: var(--bg2) !important; border-radius: var(--radius2) !important; }
.infoTable th { text-align: left; padding: 8px 12px; color: var(--text3); font-weight: 500; background: transparent !important; }
.infoTable td { padding: 8px 12px; color: var(--text2); }

/* ---------- THREAD BODY (direct override for thread.css) ---------- */
.thread-body {
  background-color: transparent !important;
  color: var(--text2) !important;
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  padding: 0 !important;
}
.thread-body table table { background-color: transparent !important; }
.thread-body pre {
  background: var(--hover) !important;
  background-color: var(--hover) !important;
}

/* ---------- THREAD / TICKET VIEW ---------- */
.thread-entry {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
  margin-bottom: 20px !important;
  overflow: hidden;
  transition: all var(--t);
}
.thread-entry:hover { border-color: var(--text3) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.thread-entry .header,
.thread-entry .thread-info {
  padding: 16px 22px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.02) !important;
  color: var(--text3) !important;
}
.thread-entry .body,
.thread-entry .thread-body {
  padding: 22px !important;
  font-size: 0.9rem !important;
  line-height: 1.8 !important;
  color: var(--text2) !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: none !important;
}
.thread-body .attachments {
  background-color: var(--bg2) !important;
  border-top: 1px dotted var(--border) !important;
  margin: 0 !important;
  padding: 0.3em 0.9em !important;
  border-radius: 0 !important;
}
.thread-event { padding: 0 2px 18px !important; margin-left: 60px !important; color: var(--text2); font-size: 0.85rem; }

/* ---------- TICKET INFO ---------- */
#ticketInfo { width: 100% !important; max-width: 100% !important; }
#ticketInfo h1 {
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 2px dotted rgba(255,255,255,0.1);
}
#ticketInfo h1 small { font-weight: normal; color: var(--text3); }

/* ---------- REPLY SECTION ---------- */
#reply {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  margin-top: 24px !important;
}
#reply h2 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px dotted rgba(255,255,255,0.1) !important;
  color: var(--text);
}
#reply > table { width: 100% !important; }
#reply table td { vertical-align: top !important; padding: 6px 4px !important; }
#reply textarea { width: 100% !important; }

/* ---------- TICKET ROW ---------- */
.ticket-row {
  background: var(--surface) !important;
  border-radius: var(--radius3) !important;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  transition: all var(--t);
  padding: 4px 0;
}
.ticket-row:hover {
  background: var(--hover) !important;
  border-color: var(--border) !important;
}

/* ---------- FAQ / KB ---------- */
#faq { color: var(--text2); padding: 4px 0; }
#faq ol li a:hover { background-color: var(--accent-bg) !important; border-radius: var(--radius3); }
#faq .article-meta { background: var(--bg2) !important; border-radius: var(--radius3) !important; }

#kb { margin: 2px 0; padding: 5px; overflow: hidden; }
#kb > li {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
  margin-bottom: 12px;
  padding: 20px !important;
}
#kb > li h4 span { color: var(--text3); }
#kb > li > i { background-image: none !important; }

/* ---------- LABELS ---------- */
.label {
  background-color: var(--accent-bg) !important;
  color: var(--accent3) !important;
  border-radius: var(--radius3) !important;
  text-shadow: none !important;
  font-size: 11px;
  padding: 2px 8px !important;
  line-height: 1.6 !important;
}
.label-bare {
  background: transparent !important;
  border: 1px solid var(--text3) !important;
  color: var(--text3) !important;
}

/* ---------- ICONS ---------- */
.Icon, .Icon.Ticket, .Icon.webTicket, .Icon.emailTicket,
.Icon.phoneTicket, .Icon.otherTicket, .Icon.apiTicket,
.Icon.attachment, .Icon.file, .Icon.refresh, .Icon.thread {
  background-image: none !important;
  padding-left: 0 !important;
  color: var(--accent2) !important;
}
i.refresh { color: var(--success) !important; }

/* ---------- STATES (ticket filter) ---------- */
.states { color: var(--text2) !important; padding: 8px 0 4px; }
.states a.state { color: var(--text2) !important; font-weight: 500; }
.states a.state.active { color: var(--accent2) !important; font-weight: 600; }
.states span[style] { color: var(--border) !important; }
.well a[style] { color: var(--text2) !important; }
.well a[style]:hover { color: var(--accent2) !important; }

/* ---------- SEARCH ---------- */
.search.well {
  background: var(--bg2) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* ---------- LANDING PAGE (home page) ---------- */
#landing_page {
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
  align-items: flex-start;
}
#landing_page .sidebar.pull-right {
  float: none !important;
  width: 220px !important;
  margin: 0 !important;
  flex-shrink: 0;
}
#landing_page .sidebar.pull-right .content {
  display: none !important;
}
#landing_page .front-page-button {
  padding: 20px;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
}
#landing_page .front-page-button p {
  margin: 0 0 10px !important;
}
#landing_page .front-page-button p:last-child { margin-bottom: 0 !important; }
#landing_page .front-page-button a.button,
#landing_page .front-page-button a.blue.button,
#landing_page .front-page-button a.green.button {
  display: block !important;
  text-align: center !important;
  padding: 14px 20px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius2) !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
}
#landing_page .front-page-button a.blue.button {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
}
#landing_page .front-page-button a.blue.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow) !important;
}
#landing_page .front-page-button a.green.button {
  background: linear-gradient(135deg, var(--success), #059669) !important;
  color: #fff !important;
}
#landing_page .front-page-button a.green.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(16,185,129,0.3) !important;
}
#landing_page .main-content {
  width: auto !important;
  flex: 1;
  min-width: 0;
}
#landing_page .main-content .thread-body {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
  padding: 28px !important;
  color: var(--text2) !important;
  font-family: var(--font) !important;
  font-size: 0.92rem !important;
}
#landing_page .main-content .thread-body h1 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--text);
}
#landing_page .main-content .thread-body p {
  color: var(--text2);
  line-height: 1.7;
  font-size: 0.92rem;
}

/* ---------- FILEDROP ---------- */
.filedrop { border-color: var(--border) !important; background: var(--bg) !important; border-radius: var(--radius2) !important; }
.filedrop .dropzone { color: var(--text3) !important; }
.filedrop .files { padding: 8px !important; }
.filedrop .files .file { background: var(--hover) !important; border-radius: var(--radius3) !important; padding: 8px 12px !important; margin: 4px 0 !important; }

/* ---------- FREETEXT FILES ---------- */
.freetext-files {
  background: var(--bg2) !important;
  border: 1px dotted var(--border) !important;
  border-radius: var(--radius2) !important;
  padding: 12px !important;
  margin-top: 10px !important;
}

/* ---------- PAGINATION ---------- */
.pagination { display: flex; gap: 4px; justify-content: center; padding: 24px 0; }
.pagination a, .pagination strong, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  border-radius: var(--radius3);
  font-size: 0.85rem; font-weight: 500;
  text-decoration: none; color: var(--text2);
  transition: all var(--t);
  border: 1px solid transparent;
}
.pagination a:hover { background: var(--hover); border-color: var(--border); color: var(--text); }
.pagination strong { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- MISC ---------- */
.tip, .info, p.info { color: var(--text2); font-size: 0.9rem; }
.breadcrumbs { padding: 0 0 16px; font-size: 0.82rem; color: var(--text3); }
.breadcrumbs a { color: var(--accent2); }
.flush-left { text-align: left !important; }
.sidebar { margin-bottom: 20px; margin-left: 0 !important; width: auto !important; }
.search-form { padding-top: 12px; }
table.custom-data { margin-top: 10px; }
table.custom-data th { width: 25%; background: transparent !important; padding: 8px 12px !important; color: var(--text3); }
table .headline, table.custom-data .headline {
  border-bottom: 2px solid var(--border) !important;
  font-weight: bold;
  background: transparent !important;
  color: var(--text);
}
.type-icon {
  background-color: var(--hover) !important;
  border-radius: var(--radius3) !important;
  padding: 4px 8px !important;
  margin-right: 5px !important;
}
#ticketThread { border-bottom: 2px solid var(--border) !important; }

/* ---------- SELECT2 ---------- */
.select2-container .select2-selection--single {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius2) !important;
  height: 46px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important;
  line-height: 46px !important;
  padding-left: 14px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow { height: 44px !important; }
.select2-dropdown { background: var(--surface) !important; border-color: var(--border) !important; }
.select2-results__option { color: var(--text2) !important; }
.select2-results__option--highlighted { background: var(--accent-bg) !important; color: var(--text) !important; }

/* ---------- REDACTOR ---------- */
.redactor-box { border-radius: var(--radius2) !important; overflow: hidden; }
.redactor-box.redactor-styles-on { background: var(--bg) !important; }
.redactor-styles { color: var(--text) !important; background: transparent !important; font-family: var(--font) !important; }
/* Toolbar */
.redactor-toolbar { background: var(--surface) !important; border-color: var(--border) !important; }
.redactor-toolbar a, .redactor-air a {
  background: transparent !important;
  color: var(--text2) !important;
  box-shadow: none !important;
  border-radius: var(--radius3) !important;
}
.redactor-toolbar a:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}
/* Source view */
.redactor-source-view.redactor-styles-on { background: var(--bg) !important; }
/* Dropdown */
.redactor-dropdown {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}
.redactor-dropdown a {
  color: var(--text2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.redactor-dropdown a:hover {
  color: var(--text) !important;
  background-color: var(--accent-bg) !important;
  background: var(--accent-bg) !important;
}
.redactor-dropdown a.redactor-dropdown-item-disabled {
  color: var(--text3) !important;
  background: transparent !important;
}
/* Modal */
.redactor-modal { background: var(--surface) !important; color: var(--text) !important; }
.redactor-modal input, .redactor-modal select, .redactor-modal textarea {
  background-color: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.redactor-modal input:hover, .redactor-modal textarea:hover, .redactor-modal select:hover,
.redactor-modal input:focus, .redactor-modal textarea:focus, .redactor-modal select:focus {
  background-color: var(--bg2) !important;
  border-color: var(--accent) !important;
}
/* Statusbar */
.redactor-statusbar { background: var(--surface) !important; border-top: 1px solid var(--border) !important; color: var(--text3) !important; }

/* ---------- UI DATEPICKER & DIALOG ---------- */
.ui-widget-header { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
.ui-state-default, .ui-widget-content .ui-state-default { background: var(--bg) !important; color: var(--text2) !important; border-color: var(--border) !important; }
.ui-state-highlight { background: var(--accent-bg) !important; color: var(--accent3) !important; }
.ui-state-active { background: var(--accent) !important; color: #fff !important; }
.ui-widget-content { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text2); }
.ui-widget { font-family: var(--font) !important; }
.ui-dialog { background: var(--surface) !important; border-color: var(--border) !important; }
.ui-dialog .ui-dialog-titlebar { background: var(--surface) !important; border-color: var(--border) !important; }
.ui-dialog .ui-dialog-content { background: var(--surface) !important; color: var(--text2); }
.ui-dialog .ui-dialog-buttonpane { background: var(--bg2) !important; border-color: var(--border) !important; }
.ui-corner-all { border-radius: var(--radius2) !important; }
.ui-state-hover, .ui-widget-content .ui-state-hover { background: var(--hover) !important; color: var(--text) !important; }
.ui-datepicker { background: var(--surface) !important; border-color: var(--border) !important; }
.ui-datepicker th { color: var(--text3) !important; }
.ui-datepicker td span, .ui-datepicker td a { text-align: center !important; }

/* ---------- FOOTER (hidden) ---------- */
#footer { display: none !important; }
#footer p, #footer a, #poweredBy { display: none !important; }

/* ---------- OVERLAY / LOADING (hidden) ---------- */
#overlay, #loading { display: none !important; }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  #content { padding: 24px 20px !important; }
  #sidebar { float: none !important; width: 100% !important; margin: 0 0 20px !important; }
  #landing_page { flex-direction: column !important; }
  #landing_page .sidebar.pull-right { width: 100% !important; }
}

@media (max-width: 768px) {
  #container { padding: 0 12px 40px !important; }
  #content { padding: 20px 16px !important; border-radius: var(--radius2) !important; }

  .nav-toggle-label { display: flex !important; }

  #nav {
    display: none !important;
    position: absolute !important;
    top: var(--h);
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius2) !important;
    padding: 8px !important;
    gap: 2px !important;
    z-index: 99 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  }
  #nav li { display: block !important; }
  #nav li a { padding: 14px 16px !important; font-size: 0.9rem !important; justify-content: flex-start !important; }
  #nav li a.active::after, #nav li a.active::after { display: none !important; }

  .nav-toggle:checked ~ #nav { display: flex !important; }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  #header { height: 56px !important; }
  h1 { font-size: 1.3rem; }

  table { max-width: 100vw; overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
  table th, table td { white-space: nowrap; }
  /* But NOT for form tables — let them wrap normally */
  #ticketForm > table,
  #ticketForm table,
  #content form table,
  table.form-table { display: table !important; overflow: visible !important; }
#ticketForm > table td,
#content form table td { white-space: normal !important; }
  tbody#dynamic-form { display: table-row-group !important; }

  input[type=text], input[type=password],
  input[type=email], input[type=tel],
  input[type=search], textarea, select {
    max-width: 100% !important;
  }
  .login-box input[type=text],
  .login-box input[type=password] { max-width: 100% !important; }
  #clientLogin div[style*="display:table-row"] { display: block !important; }
  #clientLogin div[style*="display:table-cell"] { display: block !important; padding: 12px 0 !important; width: auto !important; }
  .login-box { display: block !important; width: auto !important; }
  .login-box input[type=text],
  .login-box input[type=password] { width: 100% !important; max-width: 100% !important; }
  .instructions { display: block !important; padding: 12px 0 !important; width: auto !important; }

  .buttons { flex-direction: column; }
  .buttons input, .buttons .btn, .buttons .button { width: 100%; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
  #content { padding: 16px 12px !important; }
  #header .pull-right p { font-size: 0.75rem !important; }
}