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

/* ── Base ── */
body {
  background-color: #0A0A0A !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 40%, rgba(232,97,26,0.07) 0%, transparent 60%),
    radial-gradient(circle, rgba(232,97,26,0.12) 1px, transparent 1px) !important;
  background-size: auto, 32px 32px !important;
  background-attachment: fixed !important;
  color: #E8E8E8 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
p, li, td, th, span, div {
  font-size: 15px !important;
}

/* ── Header ── */
#header {
  background:
    linear-gradient(to right, rgba(10,10,10,0.97) 0%, rgba(10,10,10,0.85) 45%, rgba(10,10,10,0.3) 100%),
    url('https://international.imgix.net/-/media/project/tratongroup/international/international/common-media/legacy-models/international-lonestar-on-highway_3330x2223.jpg?rev=ffa5068c5b7b405495b1ffc9c9b4ce21&ar=3:2&auto=format&fit=crop&q=85&fp-x=0.79&fp-y=0.54&crop=focalpoint&w=3330&h=2223')
    center right / cover no-repeat !important;
  border-bottom: 2px solid #E8611A !important;
  border-top: none !important;
  padding: 24px 20px !important;
  min-height: 90px !important;
}
#header .pull-right p {
  color: #9CA3AF !important;
  font-size: 13px;
  margin: 0;
  padding-top: 18px;
}
#header .pull-right a {
  color: #E8611A !important;
}
#header .pull-right a:hover {
  color: #F07230 !important;
}

/* Logo box — remove the default border/box */
#logo {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-block;
  padding: 0 !important;
}
#logo img {
  max-height: 52px;
  width: auto;
}

/* ── Navigation ── */
#nav {
  background: #060606 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-top: 3px solid #E8611A !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#nav li {
  display: inline-block !important;
  margin: 0 !important;
}
#nav li a {
  display: inline-block !important;
  padding: 12px 20px !important;
  color: #9CA3AF !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color 0.15s ease !important;
}
#nav li a:hover {
  color: #E8611A !important;
  background: rgba(232,97,26,0.06) !important;
}
#nav li a.active,
#nav li a.active:hover {
  color: #E8611A !important;
  background: rgba(232,97,26,0.1) !important;
  border-bottom: 2px solid #E8611A !important;
}
/* Hide the little icons in nav tabs */
#nav li a img { display: none !important; }

/* ── Content area ── */
#container {
  background: #0A0A0A !important;
}
#content {
  background: transparent !important;
  padding: 28px 20px !important;
  max-width: 900px;
  margin: 0 auto;
}

/* ── Form table ── */
#content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
#content table td,
#content table th {
  background: transparent !important;
  padding: 8px 4px !important;
  vertical-align: top !important;
}

/* Each tbody = one section card */
#content tbody {
  background: #131313 !important;
  outline: 1px solid rgba(255,255,255,0.07) !important;
  display: table-row-group !important;
}
#content tbody + tbody {
  margin-top: 12px !important;
}
#content tbody tr:first-child td {
  border-top: 3px solid #E8611A !important;
  padding-top: 16px !important;
}
#content tbody tr:last-child td {
  padding-bottom: 16px !important;
}
#content tbody td {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Section heading style */
.form-header {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
  padding-left: 10px !important;
  border-left: 3px solid #E8611A !important;
  margin-bottom: 4px !important;
}
.form-header b { font-weight: 600 !important; }

h2, .section {
  color: #FFFFFF !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 16px !important;
  padding-left: 12px !important;
  border-left: 3px solid #E8611A !important;
  margin-bottom: 20px !important;
}

/* Inputs — more visible borders */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select,
.form-control {
  background: #0D0D0D !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #E8E8E8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
  width: 100% !important;
  max-width: 480px !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #E8611A !important;
  box-shadow: 0 0 0 2px rgba(232,97,26,0.2) !important;
  outline: none !important;
}

/* Separators between form blocks */
hr {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  margin: 24px 0 !important;
}

/* Catch any nested wrappers osTicket adds */
.content-box, .box {
  background: #131313 !important;
  border-color: rgba(255,255,255,0.07) !important;
  color: #E8E8E8 !important;
}

/* ── Headings ── */
h1, h2, h3, h4 {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  letter-spacing: 0.05em;
}
h1 { font-size: 28px !important; border-left: 3px solid #E8611A; padding-left: 12px; }

/* ── Section dividers ── */
hr {
  border-color: rgba(255,255,255,0.06) !important;
  margin: 24px 0 !important;
}
.section {
  color: #E8E8E8 !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* ── Forms ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select,
.form-control {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #E8E8E8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Open Sans', sans-serif !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: #E8611A !important;
  box-shadow: 0 0 0 1px rgba(232,97,26,0.2) !important;
  outline: none !important;
}
label, .label {
  color: #9CA3AF !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
}
select option { background: #111 !important; }

/* Required star */
.required, .require { color: #E8611A !important; }

/* ── Buttons ── */
a.btn, input[type="submit"], button,
.btn, .button {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 0 !important;
}
input[type="submit"],
a.btn-primary, .btn-primary,
a.btn-success, .btn-success {
  background: #E8611A !important;
  border-color: #E8611A !important;
  color: #fff !important;
}
input[type="submit"]:hover,
a.btn-primary:hover, .btn-primary:hover,
a.btn-success:hover, .btn-success:hover {
  background: #F07230 !important;
  border-color: #F07230 !important;
  box-shadow: 0 0 20px rgba(232,97,26,0.35) !important;
}
a.btn-default, .btn-default {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #E8E8E8 !important;
}
a.btn-default:hover, .btn-default:hover {
  border-color: #E8611A !important;
  color: #E8611A !important;
}

/* ── Links ── */
a { color: #E8611A !important; text-decoration: none !important; }
a:hover { color: #F07230 !important; }

/* ── Message bars ── */
#msg_error, .error_bar {
  background: rgba(220,38,38,0.12) !important;
  border: 1px solid rgba(220,38,38,0.3) !important;
  color: #F87171 !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
}
#msg_notice, .notice_bar {
  background: rgba(59,130,246,0.1) !important;
  border: 1px solid rgba(59,130,246,0.25) !important;
  color: #93C5FD !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
}
#msg_warning, .warning_bar {
  background: rgba(232,97,26,0.1) !important;
  border: 1px solid rgba(232,97,26,0.3) !important;
  color: #E8611A !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
}

/* ── Rich text editor ── */
.redactor-toolbar {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.redactor-box {
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  background: #111111 !important;
}
.redactor-editor,
.redactor-editor[contenteditable],
div[contenteditable="true"] {
  background: #111111 !important;
  color: #E8E8E8 !important;
  caret-color: #E8611A !important;
}

/* ── Tables ── */
table { color: #E8E8E8 !important; }
th {
  background: #111111 !important;
  border-bottom: 2px solid #E8611A !important;
  color: #E8E8E8 !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
td { border-color: rgba(255,255,255,0.06) !important; }
tr:hover td { background: rgba(232,97,26,0.04) !important; }

/* ── Footer ── */
#footer {
  background: #060606 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  color: #4B5563 !important;
  font-size: 12px !important;
  padding: 16px 20px !important;
  margin-top: 40px !important;
}
#footer a { color: #6B7280 !important; }
#footer a:hover { color: #E8611A !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #E8611A; border-radius: 3px; }