/* ==========================================================================
   Swedron Custom Theme — osTicket v1.18 Paris Override
   Brand: Rich Black #000, Matte White #FFF, Silver #999
   Gradient: #9469F9 → #676BF8 (sparsamt — CTA, accenter)
   Typsnitt: Neue Montreal → fallback system sans-serif
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
  --sw-black: #000000;
  --sw-white: #FFFFFF;
  --sw-silver: #999999;
  --sw-gray-light: #F5F5F5;
  --sw-gray-border: #E0E0E0;
  --sw-gray-dark: #333333;
  --sw-gradient: linear-gradient(135deg, #9469F9, #676BF8);
  --sw-purple: #9469F9;
  --sw-blue: #676BF8;
  --sw-font: 'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sw-radius: 6px;
  --sw-transition: 0.2s ease;
}

/* --- Base Reset --- */
body {
  background: var(--sw-gray-light) !important;
  color: var(--sw-gray-dark) !important;
  font-family: var(--sw-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--sw-black);
  transition: color var(--sw-transition);
}
a:hover {
  color: var(--sw-purple);
}

/* --- Topbar --- */
.topbar {
  background: var(--sw-black) !important;
  border-bottom: 2px solid transparent;
  border-image: var(--sw-gradient);
  border-image-slice: 1;
}
.topbar .user-data {
  font-family: var(--sw-font) !important;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topbar .user-data a {
  color: var(--sw-white) !important;
  text-decoration: none;
}
.topbar .user-data a:hover {
  color: var(--sw-silver) !important;
}

/* --- Header --- */
#header {
  background: var(--sw-white) !important;
  border-bottom: 1px solid var(--sw-gray-border);
}
#header a#logo {
  margin: 24px 0 !important;
}
#header a#logo img {
  max-height: 44px;
  width: auto;
}
#header ul#nav {
  font-family: var(--sw-font) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 30px 0 !important;
}
#header ul#nav li {
  margin: 8px 0 8px 24px !important;
}
#header ul#nav li a {
  color: var(--sw-black) !important;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--sw-transition), color var(--sw-transition);
}
#header ul#nav li a:hover,
#header ul#nav li a.active {
  border-bottom-color: var(--sw-purple);
  color: var(--sw-black) !important;
}

/* --- Page Title (subpages) --- */
.page-title {
  background: var(--sw-black) url("../images/pattern-small.jpg") center center / cover no-repeat !important;
  padding: 48px 0 !important;
  position: relative;
  overflow: hidden;
}
.page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sw-gradient);
}
.page-title h1,
.page-title h2,
.page-title h3 {
  color: var(--sw-white) !important;
  font-family: var(--sw-font) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
}
.page-title h1 {
  font-size: 28px !important;
}
.page-title p {
  color: var(--sw-silver) !important;
  font-size: 15px;
}

/* --- Welcome / Hero (landing page) --- */
.welcome-section {
  background: var(--sw-black) url("../images/pattern-small.jpg") center center / cover no-repeat !important;
  padding: 72px 0 56px !important;
  position: relative;
}
.welcome-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sw-gradient);
}
.welcome-section .welcome-post {
  text-align: center !important;
  max-width: 680px;
  margin: 0 auto;
}
.welcome-section h1 {
  color: var(--sw-white) !important;
  font-family: var(--sw-font) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  line-height: 1.15 !important;
  margin-bottom: 12px !important;
}
.welcome-section p {
  color: rgba(255,255,255,0.65) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.welcome-section .welcome-post {
  color: rgba(255,255,255,0.65) !important;
}

/* --- CTA Boxes (landing page) --- */
.cta-box-cover {
  padding: 48px 0 !important;
  background: var(--sw-gray-light) !important;
}
.cta-box-cover .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px;
}
.cta-box-cover .col-md-6 {
  flex: 1 1 300px;
}
.cta-box-cover .action-box {
  background: var(--sw-white) !important;
  border: 1px solid var(--sw-gray-border) !important;
  border-top: 3px solid var(--sw-black) !important;
  border-radius: var(--sw-radius) !important;
  padding: 32px !important;
  height: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--sw-transition), border-color var(--sw-transition);
}
.cta-box-cover .action-box:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-top-color: var(--sw-purple) !important;
}
.cta-box-cover .action-box .act-text h3 {
  font-family: var(--sw-font) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--sw-black) !important;
  margin-bottom: 8px !important;
}
.cta-box-cover .action-box .act-text h3::after {
  display: none !important;
}
.cta-box-cover .action-box .act-text div {
  color: #555 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* --- Buttons --- */
.cta-box-cover .action-box .act-text a.button,
a.button,
.green.button,
.blue.button {
  display: inline-block !important;
  background: var(--sw-black) !important;
  color: var(--sw-white) !important;
  border: none !important;
  border-radius: var(--sw-radius) !important;
  padding: 12px 28px !important;
  font-family: var(--sw-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background var(--sw-transition), transform var(--sw-transition) !important;
}
.cta-box-cover .action-box .act-text a.button:hover,
a.button:hover,
.green.button:hover,
.blue.button:hover {
  background: var(--sw-gradient) !important;
  color: var(--sw-white) !important;
  transform: translateY(-1px);
}

/* --- KB Home (landing page search) --- */
.kb-home-cover {
  background: var(--sw-white) !important;
  padding: 40px 0 !important;
  border-top: 1px solid var(--sw-gray-border);
}
.kb-home-cover p {
  font-family: var(--sw-font) !important;
  font-size: 16px !important;
  color: var(--sw-gray-dark) !important;
  margin-bottom: 16px !important;
}
.kb-home-cover a {
  color: var(--sw-black) !important;
  font-weight: 500;
}
.kb-home-cover a:hover {
  color: var(--sw-purple) !important;
}
.kb-search-form .form-control,
.kb-search-form input[type="text"] {
  border: 1px solid var(--sw-gray-border) !important;
  border-radius: var(--sw-radius) !important;
  padding: 10px 16px !important;
  font-family: var(--sw-font) !important;
  font-size: 14px !important;
  transition: border-color var(--sw-transition);
}
.kb-search-form .form-control:focus,
.kb-search-form input[type="text"]:focus {
  border-color: var(--sw-purple) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 105, 249, 0.12);
}
.kb-search-form .btn,
.kb-search-form button {
  background: var(--sw-black) !important;
  color: var(--sw-white) !important;
  border: none !important;
  border-radius: var(--sw-radius) !important;
  padding: 10px 24px !important;
  font-family: var(--sw-font) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background var(--sw-transition);
}
.kb-search-form .btn:hover,
.kb-search-form button:hover {
  background: var(--sw-gradient) !important;
}

/* --- Form Styles (open.php) --- */
.cover {
  padding: 24px 0 !important;
  background: var(--sw-gray-light) !important;
}
.form-cover {
  background: var(--sw-white);
  border: 1px solid var(--sw-gray-border);
  border-radius: var(--sw-radius);
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}

/* Form section headers — clean minimal like swedron.se */
/* Hide hr separators before form headers */
#ticketForm hr {
  display: none !important;
}
.form-header,
#ticketForm .form-header {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 24px 0 8px !important;
  margin-bottom: 8px !important;
}
.form-header h3,
#ticketForm .form-header h3 {
  color: var(--sw-black) !important;
  font-family: var(--sw-font) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
}
.form-header div,
.form-header span,
#ticketForm .form-header div,
#ticketForm .form-header span {
  color: var(--sw-silver) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-top: 2px;
}

/* Form inputs — full width, override HTML size attribute */
.form-cover input[type="text"],
.form-cover input[type="email"],
.form-cover input[type="tel"],
.form-cover input[type="password"],
.form-cover textarea,
.form-cover select,
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm input[type="tel"],
#ticketForm textarea,
#ticketForm select,
#ticketForm td input[type="text"],
#ticketForm td input[type="email"],
#ticketForm td input[type="tel"],
#ticketForm td textarea,
#ticketForm td select,
input[name*="f0"],
input[name*="81"],
input[name*="a4"],
input[name*="d7"] {
  border: 1px solid var(--sw-gray-border) !important;
  border-radius: var(--sw-radius) !important;
  padding: 10px 14px !important;
  font-family: var(--sw-font) !important;
  font-size: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transition: border-color var(--sw-transition);
  -webkit-appearance: none;
}

/* Nuclear override: any input/select/textarea inside the ticket form */
#ticketForm input[type="text"][size],
#ticketForm input[type="email"][size],
#ticketForm input[type="tel"],
#ticketForm textarea[cols] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Form table — force block layout so inputs can be full width */
#ticketForm > table,
#ticketForm table {
  display: block !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
#ticketForm table tbody {
  display: block !important;
  width: 100% !important;
}
#ticketForm table tr {
  display: block !important;
  width: 100% !important;
}
#ticketForm table td {
  display: block !important;
  width: 100% !important;
  padding: 4px 0 !important;
  box-sizing: border-box !important;
}
/* Labels should also span full width */
#ticketForm label {
  display: block !important;
  width: 100% !important;
}
/* Select/dropdown — clear arrow indicator */
#ticketForm select,
.form-cover select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-color: var(--sw-white) !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
.form-cover input[type="text"]:focus,
.form-cover input[type="email"]:focus,
.form-cover textarea:focus,
.form-cover select:focus,
#ticketForm input:focus,
#ticketForm textarea:focus,
#ticketForm select:focus {
  border-color: var(--sw-purple) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 105, 249, 0.12);
}

/* Checkbox layout — inline with label */

/* Select2 — constrain to container width */
#ticketForm .select2-container,
.form-cover .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#ticketForm .select2-container .select2-selection,
.form-cover .select2-container .select2-selection {
  border: 1px solid var(--sw-gray-border) !important;
  border-radius: var(--sw-radius) !important;
  min-height: 40px !important;
  padding: 4px 8px !important;
  font-family: var(--sw-font) !important;
  font-size: 14px !important;
}
#ticketForm .select2-container--focus .select2-selection {
  border-color: var(--sw-purple) !important;
  box-shadow: 0 0 0 3px rgba(148, 105, 249, 0.12);
}

#ticketForm input[type="checkbox"] {
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}
#ticketForm .form-group td label {
  display: inline !important;
}
/* Checkbox rows: keep checkbox + text on same line */
tr.form-group td > input[type="checkbox"],
td > input[type="checkbox"] {
  width: auto !important;
  display: inline !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* Links in form — make visible */
#ticketForm a,
.form-cover a {
  color: var(--sw-purple) !important;
  text-decoration: underline !important;
}
#ticketForm a:hover,
.form-cover a:hover {
  color: var(--sw-black) !important;
}

/* Submit button — left aligned */
.buttons,
p.buttons {
  text-align: left !important;
}
.buttons input[type="submit"],
input[type="submit"] {
  background: var(--sw-black) !important;
  color: var(--sw-white) !important;
  border: none !important;
  border-radius: var(--sw-radius) !important;
  padding: 12px 32px !important;
  font-family: var(--sw-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--sw-transition) !important;
}
.buttons input[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--sw-gradient) !important;
}
/* Hide reset and cancel buttons */
.buttons input[type="reset"],
.buttons input[type="button"],
.buttons input[name="reset"],
.buttons input[name="cancel"] {
  display: none !important;
}

/* --- Info box on open.php --- */
.cover .col-md-12 > div[style*="background-color"] {
  border: 1px solid var(--sw-gray-border) !important;
  border-radius: var(--sw-radius) !important;
  background: var(--sw-white) !important;
}

/* --- KB Categories page --- */
.kb-search .form-control {
  border: 1px solid var(--sw-gray-border) !important;
  border-radius: var(--sw-radius) !important;
  font-family: var(--sw-font) !important;
}
.kb-search .form-control:focus {
  border-color: var(--sw-purple) !important;
  box-shadow: 0 0 0 3px rgba(148, 105, 249, 0.12);
}
.kb-search .btn {
  background: var(--sw-black) !important;
  color: var(--sw-white) !important;
  border: none !important;
  border-radius: var(--sw-radius) !important;
  font-family: var(--sw-font) !important;
  font-weight: 500 !important;
}
.kb-search .btn:hover {
  background: var(--sw-gradient) !important;
}
.kb-box {
  background: var(--sw-white) !important;
  border: 1px solid var(--sw-gray-border) !important;
  border-radius: var(--sw-radius) !important;
  padding: 24px !important;
}
ul#kb {
  list-style: none !important;
  padding: 0 !important;
}
ul#kb li {
  border-bottom: 1px solid var(--sw-gray-border);
  padding: 16px 0;
}
ul#kb li:last-child {
  border-bottom: none;
}
ul#kb li h4 a {
  color: var(--sw-black) !important;
  font-family: var(--sw-font) !important;
  font-weight: 500 !important;
  text-decoration: none;
}
ul#kb li h4 a:hover {
  color: var(--sw-purple) !important;
}
.popular-faq a {
  color: var(--sw-gray-dark) !important;
  text-decoration: none;
}
.popular-faq a:hover {
  color: var(--sw-purple) !important;
}
.popular-faq i {
  color: var(--sw-silver) !important;
  margin-right: 6px;
}

/* --- Footer Columns --- */
#footer-columns {
  background: var(--sw-black) !important;
  padding: 56px 0 40px !important;
  position: relative;
}
#footer-columns::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sw-gradient);
}
#footer-columns .footer-column h3 {
  color: var(--sw-white) !important;
  font-family: var(--sw-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 20px !important;
}
#footer-columns .footer-column p,
#footer-columns .footer-column p span {
  color: var(--sw-silver) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
#footer-columns .footer-column ul li a,
#footer-columns .footer-column ul li a span {
  color: var(--sw-silver) !important;
  text-decoration: none !important;
  transition: color var(--sw-transition);
}
#footer-columns .footer-column ul li a:hover,
#footer-columns .footer-column ul li a:hover span {
  color: var(--sw-white) !important;
}
#footer-columns .footer-column i {
  color: var(--sw-silver) !important;
}
#footer-columns .footer-column a {
  color: var(--sw-silver) !important;
  text-decoration: none;
  transition: color var(--sw-transition);
}
#footer-columns .footer-column a:hover {
  color: var(--sw-white) !important;
}

/* --- Bottom Footer --- */
#footer {
  background: var(--sw-black) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 24px 0 !important;
}
#footer p,
#footer p span {
  color: var(--sw-silver) !important;
  font-size: 13px !important;
}

/* --- Login Box --- */
.login-box .submit {
  background: var(--sw-black) !important;
  transition: background var(--sw-transition);
}
.login-box .submit:hover {
  background: var(--sw-gradient) !important;
}
.sublog .accreg {
  background: var(--sw-black) !important;
}
.sublog .accreg:hover {
  background: var(--sw-gradient) !important;
}

/* --- Search form (ticket search) --- */
#ticketSearchForm .submit {
  background: var(--sw-black) !important;
}
#ticketSearchForm .submit:hover {
  background: var(--sw-gradient) !important;
}

/* --- Ticket list header --- */
.ticklist-title {
  background: var(--sw-black) !important;
  font-family: var(--sw-font) !important;
}

/* --- Alerts --- */
#msg_notice {
  background: var(--sw-black) !important;
}
#msg_error {
  background: #DC2626 !important;
}

/* --- Misc: tables, pagination --- */
.table-cover table thead {
  background: var(--sw-gray-light) !important;
}
.table-cover table thead th a {
  color: var(--sw-black) !important;
}

/* --- FAQs --- */
.faq-list {
  background: var(--sw-white) !important;
  border: 1px solid var(--sw-gray-border);
  border-radius: var(--sw-radius);
}

/* --- Mobile Nav: horizontal links instead of dropdown --- */
#header .tinynav {
  display: none !important;
}
@media (max-width: 767px) {
  #header {
    text-align: center;
  }
  #header a#logo {
    display: block;
    text-align: center;
    margin: 16px auto !important;
  }
  #header ul#nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  #header ul#nav li {
    margin: 0 !important;
  }
  #header ul#nav li a {
    padding: 6px 0 !important;
    font-size: 12px !important;
  }
  .topbar .container {
    text-align: center;
  }
  .topbar .user-data {
    text-align: center !important;
    line-height: 36px !important;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 767px) {
  .welcome-section {
    padding: 40px 16px 32px !important;
  }
  .welcome-section h1 {
    font-size: 24px !important;
  }
  .cta-box-cover {
    padding: 24px 0 !important;
  }
  .cta-box-cover .action-box {
    padding: 24px !important;
  }
  .page-title {
    padding: 32px 0 !important;
  }
  .page-title h1 {
    font-size: 22px !important;
  }
  .form-cover {
    padding: 16px;
    margin: 0 8px;
  }
  #ticketForm table,
  #ticketForm table tbody,
  #ticketForm table tr,
  #ticketForm table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #ticketForm input[type="text"],
  #ticketForm input[type="email"],
  #ticketForm input[type="tel"],
  #ticketForm textarea,
  #ticketForm select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
  .form-header h3,
  #ticketForm .form-header h3 {
    font-size: 18px !important;
  }
  .cover {
    padding: 16px 0 !important;
  }
  .cover .container {
    padding: 0 12px !important;
  }
  #footer-columns {
    padding: 32px 0 !important;
  }
  /* Prevent overflow on mobile */
  .container {
    overflow-x: hidden;
  }
  #content,
  .form-cover,
  .action-box {
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* ===== TICKET VIEW (view.inc.php) ===== */

/* Top meta line under subject */
.ticket-meta {
  color: #999;
  font-size: 14px;
  margin-top: 4px;
}

/* Status badges */
.ticket-status-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ticket-status-badge.status-open {
  background: #e8f5e9;
  color: #2e7d32;
}
.ticket-status-badge.status-closed {
  background: #f3e5f5;
  color: #6a1b9a;
}
.ticket-status-badge.status-resolved {
  background: #e3f2fd;
  color: #1565c0;
}

/* Action links (print, edit) */
.ticket-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.ticket-actions a {
  color: #666;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}
.ticket-actions a:hover {
  color: #000;
}

/* Two-column info grid */
.ticket-info-grid {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}
.ticket-info-card {
  flex: 1;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 24px;
}
.ticket-info-card h3,
.ticket-details-card h3,
.ticket-reply-card h3 {
  font-family: 'Neue Montreal', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 16px 0;
  padding: 0;
  border: none;
  background: none;
}
.ticket-info-card dl {
  margin: 0;
}
.ticket-info-card dt {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 12px;
}
.ticket-info-card dt:first-child {
  margin-top: 0;
}
.ticket-info-card dd {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #333;
}

/* Details card — field-based layout (no tables) */
.ticket-details-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.ticket-field {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.ticket-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ticket-field:first-of-type {
  padding-top: 0;
}
.ticket-field-label {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ticket-field-value {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* Thread overrides */
#ticketThread {
  margin-bottom: 32px;
}
#ticketThread .thread-entry {
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  background: #fff !important;
  overflow: hidden;
}
#ticketThread .thread-entry .header {
  background: #fafafa !important;
  border-bottom: 1px solid #eee !important;
  padding: 12px 20px !important;
  color: #333 !important;
}
#ticketThread .thread-entry .header .pull-right {
  color: #999 !important;
  font-size: 13px !important;
}
#ticketThread .thread-entry .thread-body {
  padding: 20px !important;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

/* Reply card */
.ticket-reply-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}
.ticket-reply-card .reply-hint {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}
.ticket-reply-card textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  box-sizing: border-box;
}
.reply-actions {
  margin-top: 16px;
  text-align: left;
}
.reply-actions input[type="submit"] {
  background: linear-gradient(135deg, #9469F9, #676BF8);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.reply-actions input[type="submit"]:hover {
  opacity: 0.9;
}

/* Notice box */
.sw-notice {
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
}

/* Hide any remaining old table artifacts */
table#ticketInfo,
table.infoTable,
table.custom-data {
  display: none !important;
}

/* Responsive ticket view */
@media (max-width: 768px) {
  .ticket-info-grid {
    flex-direction: column;
    gap: 16px;
  }
  .ticket-info-card,
  .ticket-details-card,
  .ticket-reply-card {
    padding: 16px;
  }
  .ticket-actions {
    flex-wrap: wrap;
  }
}

/* ── Inline validation errors (red text) ─────────────── */
div.error,
font.error,
.form-cover .error {
  color: #DC2626 !important;
  font-size: 13px;
  font-weight: 500;
}