/* =============================================================================
   M2I Services — osTicket Client Theme (Direction B: "Quiet Confidence")
   Drop-in replacement for /scp/css/theme.css (or wherever your client theme.css
   lives — typically `include/client/css/theme.css` or a custom theme override).

   Preserves EVERY selector osTicket emits, so the page never breaks.
   Pure CSS — no HTML changes required.

   Aesthetic: warm paper background, all-Inter type, brick-red accent used as
   a deliberate signature mark (vertical rule on logo, primary CTA, focus ring).
   ============================================================================= */

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

:root {
  --bg:        oklch(0.93 0 0);
  --bg-2:      oklch(0.96 0.008 75);
  --surface:   oklch(0.995 0.003 75);
  --line:      oklch(0.90 0.008 75);
  --line-2:    oklch(0.94 0.006 75);
  --ink:       oklch(0.22 0.01 50);
  --ink-2:     oklch(0.42 0.012 50);
  --ink-3:     oklch(0.60 0.012 50);
  --accent:    #E30613;
  --accent-2:  oklch(0.42 0.13 28);
  --accent-bg: oklch(0.96 0.02 28);
  --focus:     oklch(0.50 0.14 28 / 0.22);
  --ok:        oklch(0.55 0.13 145);
  --warn:      oklch(0.62 0.15 60);
  --err:       oklch(0.55 0.18 28);
  --info:      oklch(0.55 0.13 230);
  --radius:    6px;
  --radius-lg: 10px;
}

/* ============================================================
   Reset + base typography
   ============================================================ */
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', "Helvetica Neue", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
body, input, select, textarea {
  font-family: 'Inter', "Helvetica Neue", system-ui, sans-serif;
  color: var(--ink);
}

/* faint paper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(oklch(0 0 0 / 0.012) 1px, transparent 1px) 0 0 / 24px 24px;
  z-index: 0;
}

b, strong { font-weight: 600; }
blockquote { margin: 1em 24px; color: var(--ink-2); border-left: 3px solid var(--line); padding-left: 14px; }
hr {
  display: block; height: 1px; border: 0;
  border-top: 1px solid var(--line);
  margin: 1.5em 0; padding: 0;
}
small { font-size: 85%; color: var(--ink-2); }
ul, ol { margin: 1em 0; padding: 0 0 0 24px; }
img { border: 0; vertical-align: middle; max-width: 100%; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }

input, select, textarea {
  font-size: 14px;
  margin: 0;
  vertical-align: baseline;
}
input { line-height: normal; }
input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
}
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  accent-color: var(--accent);
}
textarea { overflow: auto; vertical-align: top; resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; font-weight: 500; }
h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; }

/* Links */
a, .link {
  color: var(--accent);
  text-decoration: none;
  display: inline;
  margin-bottom: 0;
  transition: color .15s;
}
a:hover, .link:hover {
  border-bottom: none;
  color: var(--accent-2);
  cursor: pointer;
}

/* Headings */
h1 {
  color: var(--ink);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}
h2, .subject {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Helpers */
.centered { text-align: center; }
.clear { clear: both; height: 1px; visibility: hidden; }
.hidden { display: none; }
.faded { color: var(--ink-3); }
.flush-right { text-align: right; }
.flush-left { text-align: left; }

/* ============================================================
   Layout: container, header, nav, content, footer
   ============================================================ */
#container {
  position: relative;
  z-index: 1;
  background: transparent;
  width: auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

#header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: auto;
  padding: 24px 0;
}

#logo {
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding-left: 14px;
  border-bottom: none;
}
#logo:hover { border-bottom: none; }
#logo::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}
#header #logo img {
  max-height: 36px;
  max-width: 200px;
  width: auto;
  height: auto;
  vertical-align: middle;
  border-radius: 5px;
}
.valign-helper {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

#header p {
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#header p:empty { display: none; }
#header a {
  color: var(--ink-2);
  font-weight: 500;
}
#header a:hover { color: var(--accent); }
#header strong {
  display: inline-block;
  font-weight: 600;
  font-size: 11px;
  background: var(--accent);
  color: white;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 4px;
  font-feature-settings: "tnum";
}

/* ----- Navigation pill ----- */
#nav {
  margin: 0 0 40px;
  padding: 4px;
  height: auto;
  display: inline-flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.02);
  white-space: nowrap;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
#nav li {
  margin: 0; padding: 0; list-style: none; display: inline;
}
#nav li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  line-height: 1;
  text-align: left;
  padding: 9px 14px;
  margin-left: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 6px;
  background: none !important;
  background-position: initial;
  background-repeat: no-repeat;
  border-bottom: none;
  transition: background .15s, color .15s;
}
#nav li a:hover {
  background-color: var(--bg-2) !important;
  color: var(--ink);
  border-bottom: none;
}
#nav li a.active {
  background-color: var(--ink) !important;
  color: var(--bg);
}

/* Replace osTicket's PNG nav icons with crisp Lucide-style line icons via mask */
#nav li a::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
}
#nav li a.home {
  background-image: none !important;
}
#nav li a.home::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/></svg>");
}
#nav li a.kb { background-image: none !important; }
#nav li a.kb::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h12a3 3 0 013 3v13H7a3 3 0 01-3-3z'/><path d='M4 17a3 3 0 013-3h12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h12a3 3 0 013 3v13H7a3 3 0 01-3-3z'/><path d='M4 17a3 3 0 013-3h12'/></svg>");
}
#nav li a.new { background-image: none !important; }
#nav li a.new::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}
#nav li a.status { background-image: none !important; }
#nav li a.status::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}
#nav li a.tickets { background-image: none !important; }
#nav li a.tickets::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2a2 2 0 100-4z'/><path d='M9 6v12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2a2 2 0 100-4z'/><path d='M9 6v12'/></svg>");
}

/* RTL — keep flowing the same in flex */
.rtl #nav li a {
  background-position: initial;
  padding-left: 14px;
  padding-right: 14px;
  margin-right: 0;
  margin-left: 0;
}

/* Active count badge inside nav */
#nav li a strong {
  display: inline-block;
  font-weight: 500;
  font-size: 11px;
  background: var(--line);
  color: var(--ink-2);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 2px;
  font-feature-settings: "tnum";
}
#nav li a.active strong {
  background: oklch(1 0 0 / 0.18);
  color: var(--bg);
}

/* ----- Content area ----- */
#content {
  padding: 8px 0 64px;
  margin: 0;
  height: auto !important;
  min-height: 320px;
  background: transparent;
}

/* ----- Footer ----- */
#footer {
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 22px 40px 36px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  position: relative;
  z-index: 1;
}
#footer a { color: var(--ink-3); }
#footer a:hover { color: var(--accent); }
#footer p { margin: 6px 0 0; }
#footer #poweredBy {
  display: block;
  width: 126px; height: 23px;
  outline: none; text-indent: -9999px;
  margin: 8px auto 0;
  background: url('../images/poweredby.png') top left no-repeat;
  background-size: auto 18px;
  opacity: 0.4;
}

/* ============================================================
   Buttons
   ============================================================ */
.button,
.button:visited {
  background: var(--ink);
  border: 1px solid var(--ink);
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  max-width: 320px;
  text-align: center;
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  text-shadow: none;
  border-bottom: 1px solid var(--ink);
  position: relative;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, transform .05s;
}
.button:hover {
  background-color: oklch(0.30 0.01 50);
  color: var(--bg);
  border-bottom: 1px solid var(--ink);
}
.button:active {
  top: 0;
  transform: translateY(1px);
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

/* Primary brand button (green in original) — now brick-red */
.green.button,
.green.button:visited {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white;
}
.green.button:hover {
  background-color: var(--accent-2);
  border-color: var(--accent-2);
}

/* Secondary action (blue in original) — now neutral outline */
.blue.button,
.blue.button:visited {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.blue.button:hover {
  background-color: var(--bg-2);
  border-color: var(--ink-3);
  color: var(--ink);
}

/* Generic submit / native button override */
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: opacity .15s;
}
input[type="submit"]:hover {
  opacity: 0.88;
}

/* ============================================================
   Forms
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
select,
textarea {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }

label.required, span.required { font-weight: 600; }
label.required::after, span.required::after {
  content: " *";
  color: var(--accent);
  font-weight: 500;
}

/* ============================================================
   Alerts & notices
   ============================================================ */
#msg_notice,
#msg_warning,
.warning-banner,
#msg_error,
#msg_info {
  margin: 0 0 14px;
  padding: 12px 16px 12px 40px;
  height: auto;
  line-height: 1.5;
  border-radius: var(--radius);
  border: 1px solid;
  background-color: var(--surface);
  background-position: 14px 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  font-size: 13.5px;
}
#msg_notice {
  border-color: oklch(0.85 0.08 145);
  background-color: oklch(0.97 0.03 145);
  color: oklch(0.30 0.10 145);
}
#msg_warning, .warning-banner {
  border-color: oklch(0.82 0.10 60);
  background-color: oklch(0.97 0.03 60);
  color: oklch(0.35 0.10 60);
}
#msg_error {
  border-color: oklch(0.80 0.13 28);
  background-color: var(--accent-bg);
  color: var(--accent-2);
}
#msg_info {
  border-color: oklch(0.85 0.08 230);
  background-color: oklch(0.97 0.02 230);
  color: oklch(0.35 0.10 230);
}

.warning {
  background: oklch(0.97 0.03 60);
  font-style: italic;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid oklch(0.85 0.08 60);
}
.warning strong {
  text-transform: uppercase;
  color: var(--accent-2);
  font-style: normal;
  font-weight: 600;
}
.error { color: var(--err); }
.error input { border-color: var(--err); }

/* ============================================================
   Pagination
   ============================================================ */
#pagination {
  border: 0;
  margin: 0 0 32px;
  padding: 0;
  display: inline-flex;
  gap: 4px;
}
#pagination li {
  border: 0; margin: 0; padding: 0;
  font-size: 13px;
  list-style: none; display: inline-block;
}
#pagination li a,
#pagination .active,
#pagination .previousOff,
#pagination .nextOff {
  display: inline-block;
  float: none;
  padding: 6px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--surface);
  text-decoration: none;
  font-weight: 500;
  margin-right: 0;
}
#pagination li a:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--bg-2);
}
#pagination .active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
#pagination .previousOff,
#pagination .nextOff {
  color: var(--ink-3);
  background: transparent;
}

/* ============================================================
   Landing page (home)
   ============================================================ */
.main-content { width: auto; max-width: 720px; }

#landing_page #new_ticket,
#landing_page #check_status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  max-width: 360px;
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--surface);
  background-image: none !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
#landing_page #new_ticket {
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent);
  color: white;
}
#landing_page #new_ticket:hover {
  background: var(--accent-2) !important;
  border-color: var(--accent-2);
}
#landing_page #check_status:hover {
  border-color: var(--ink-3);
}
#landing_page #new_ticket::after,
#landing_page #check_status::after {
  content: "→";
  font-size: 16px;
  opacity: 0.7;
  transition: transform .2s;
}
#landing_page #new_ticket:hover::after,
#landing_page #check_status:hover::after {
  transform: translateX(3px);
  opacity: 1;
}

#landing_page h1, #landing_page h2, #landing_page h3 {
  margin-bottom: 12px;
}
#landing_page h1 {
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 18ch;
  margin-bottom: 18px;
  position: relative;
  padding-top: 28px;
}
#landing_page h1::before {
  content: "CENTRE DE SUPPORT";
  position: absolute;
  top: 0; left: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding-left: 14px;
}
#landing_page h1::after {
  content: "";
  position: absolute;
  top: 4px; left: 0;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--accent);
}

/* ============================================================
   FAQ + sidebar (Questions fréquentes / Autres ressources)
   ============================================================ */
#faq {
  clear: both;
  margin: 0;
  padding: 0;
}
#faq ol {
  font-size: 14px;
  margin-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--line);
}
#faq ol li {
  list-style: none;
  margin: 0; padding: 0;
  color: var(--ink-2);
}
#faq ol li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 0;
  height: auto !important;
  overflow: hidden;
  margin: 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
  background: none !important;
  color: var(--ink);
  transition: color .15s, padding-left .15s;
}
#faq ol li a::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><path d='M14 2v6h6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><path d='M14 2v6h6'/></svg>") center/contain no-repeat;
  opacity: 0.6;
  flex-shrink: 0;
}
#faq ol li a:hover {
  color: var(--accent);
  padding-left: 6px;
  background: none !important;
  border-bottom-color: var(--accent);
}
#faq .article-meta {
  padding: 10px 14px;
  background: var(--bg-2);
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: 12.5px;
}

/* Sidebar (right column FAQ box on home, etc.) */
.sidebar {
  margin-bottom: 20px;
  margin-left: 24px;
  width: 260px;
}
.rtl .sidebar { margin-left: 0; margin-right: 24px; }
.sidebar .content {
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-lg);
}
.sidebar .content:empty { display: none; }
.sidebar section .header {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar section .header::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}
.sidebar section + section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.sidebar a {
  display: block;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--ink);
}
.sidebar a:hover { color: var(--accent); }

/* ============================================================
   Knowledge Base
   ============================================================ */
#kb {
  margin: 4px 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
#kb > li {
  padding: 16px 18px;
  height: auto !important;
  overflow: hidden;
  margin: 0 0 8px;
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: block;
  transition: border-color .15s;
}
#kb > li:hover { border-color: var(--ink-3); }
#kb > li h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}
#kb > li h4 span { color: var(--ink-3); font-weight: 400; }
#kb > li h4 a { font-size: 15px; color: var(--ink); }
#kb > li h4 a:hover { color: var(--accent); }
#kb > li > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  float: left;
  margin-right: 12px;
  background: var(--accent-bg) !important;
  color: var(--accent);
  border-radius: var(--radius);
  font-style: normal;
  text-shadow: none !important;
}

.featured-category {
  margin-top: 12px;
  width: 49%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.category-name {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.featured-category i {
  color: var(--accent) !important;
  text-shadow: none !important;
  display: inline-block;
  vertical-align: middle;
}
.article-headline { margin-left: 0; }
.rtl .article-headline { margin-left: 0; margin-right: 0; }
.article-teaser {
  font-size: 13.5px;
  line-height: 1.6;
  height: auto;
  max-height: 4.8em;
  overflow: hidden;
  color: var(--ink-2);
  margin-top: 4px;
}
.article-title { font-weight: 600; color: var(--ink); }
.faq-content .article-title {
  font-size: 22px;
  margin-top: 18px;
  letter-spacing: -0.015em;
}

/* KB search bar */
#kb-search {
  padding: 4px 0 18px;
  overflow: hidden;
}
#kb-search div { clear: both; overflow: hidden; padding-top: 6px; }
#kb-search #query {
  margin: 0; display: inline-block; float: left;
  width: 240px; margin-right: 8px;
}
#kb-search #cid {
  margin: 0; display: inline-block; float: left;
  width: 220px; margin-right: 8px;
  position: relative; top: 0;
}
#kb-search #topic-id {
  margin: 0; display: inline-block; float: left;
  width: 460px;
}
#kb-search #searchSubmit {
  margin: 0; display: inline-block; float: left;
  position: relative; top: 0;
}
#kb-search #breadcrumbs {
  color: var(--ink-2);
  margin-bottom: 16px;
  font-size: 13px;
}
#kb-search #breadcrumbs a { color: var(--ink-2); }
#kb-search #breadcrumbs a:hover { color: var(--accent); }

/* ============================================================
   Ticket form + login form
   ============================================================ */
#ticketForm, #clientLogin { font-size: 14px; }

#ticketForm div.clear,
#clientLogin div.clear {
  clear: both;
  padding: 6px 0;
  overflow: hidden;
  height: auto;
  visibility: visible;
}
#ticketForm div label,
#clientLogin div label {
  display: block;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 13.5px;
}
#ticketForm div label.required,
#clientLogin div label.required { text-align: left; }

#ticketForm div input,
#clientLogin div input,
#ticketForm div textarea,
#clientLogin div textarea {
  width: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  display: block;
  border-radius: var(--radius);
  padding: 10px 12px;
}
#ticketForm div input[type=file],
#clientLogin div input[type=file] {
  border: 0; padding: 0; background: transparent;
}
#ticketForm div select,
#clientLogin div select {
  display: block;
  float: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
}
#ticketForm div div.captchaRow,
#clientLogin div div.captchaRow {
  line-height: 36px;
}
#ticketForm div div.captchaRow input,
#clientLogin div div.captchaRow input {
  position: relative; top: 6px;
}
#ticketForm > table { table-layout: fixed; }
#ticketForm > table td { width: 180px; padding-bottom: 14px; }
#ticketForm > table td + td { width: auto; }

#ticketForm td textarea,
#clientLogin td textarea,
#ticketForm div textarea,
#clientLogin div textarea {
  width: 600px;
  max-width: 100%;
  min-height: 140px;
}
#ticketForm td em,
#clientLogin td em,
#ticketForm div em,
#clientLogin div em {
  color: var(--ink-3);
  font-style: normal;
  font-size: 12.5px;
}
#ticketForm td .captcha,
#clientLogin td .captcha,
#ticketForm div .captcha,
#clientLogin div .captcha {
  width: 96px; height: 36px;
  background: var(--ink);
  border-radius: var(--radius);
  display: block; float: left;
  margin-right: 16px;
}
#ticketForm td label.inline,
#clientLogin td label.inline,
#ticketForm div label.inline,
#clientLogin div label.inline {
  width: auto;
  padding: 0 12px;
  font-weight: 400;
  display: inline-block;
}
#ticketForm div.error input,
#clientLogin div.error input {
  border: 1px solid var(--err);
  background: oklch(0.99 0.01 28);
}
#ticketForm div.error label,
#clientLogin div.error label { color: var(--err); }

/* Login card */
#clientLogin {
  display: block;
  margin-top: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  background: var(--surface);
  background-image: none;
  position: relative;
}
#clientLogin::before {
  content: "";
  position: absolute;
  top: 22px; right: 22px;
  width: 28px; height: 28px;
  background: var(--accent-bg);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0110 0v4'/></svg>") center/16px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0110 0v4'/></svg>") center/16px no-repeat;
  background-color: var(--accent);
  background-image: none;
  display: none; /* keep clean — comment back in if you want a lock icon */
}
.rtl #clientLogin { background-position: 5% 50%; }
#clientLogin .instructions {
  display: table-cell;
  padding-left: 2em;
  padding-right: 90px;
  color: var(--ink-2);
}
.rtl #clientLogin .instructions {
  padding-left: 0;
  padding-right: 2em;
  padding-left: 90px;
}
#clientLogin p { clear: both; }
#clientLogin strong {
  font-size: 11px;
  color: var(--err);
  display: block;
}
#clientLogin #email,
#clientLogin #ticketno { margin-right: 0; }
#clientLogin input[type=text],
#clientLogin input[type=password] {
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}
#clientLogin input[type=submit] {
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
#clientLogin input[type=submit]:hover {
  background: var(--accent-2);
}

.login-box {
  width: 50%;
  display: table-cell;
  box-shadow: none;
  padding: 4px;
}
.rtl .login-box { box-shadow: none; }

/* External auth */
.external-auth + .external-auth { margin-top: 6px; }
a.external-sign-in { text-decoration: none; }
.external-auth-box {
  vertical-align: middle;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .15s;
}
.external-auth-box:hover { border-color: var(--ink-3); }
.external-auth-icon {
  display: inline-block;
  color: var(--ink);
  width: 30px;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
}
.external-auth-name {
  color: var(--ink);
  width: 140px;
  padding: 8px 12px;
  line-height: 30px;
  font-size: 13.5px;
  font-weight: 500;
}
img.sign-in-image {
  border: none;
  max-height: 40px;
  max-width: 200px;
  width: auto; height: auto;
}

/* ============================================================
   Reply box
   ============================================================ */
#reply {
  margin-top: 8px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
#reply h2 {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
#reply > table { width: auto; }
#reply table td { vertical-align: top; padding-bottom: 10px; }
#reply textarea { width: 628px !important; max-width: 100%; min-height: 160px; }
#reply input[type=text],
#reply #response_options textarea {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* ============================================================
   Ticket icons (preserve background-image hooks osTicket emits)
   ============================================================ */
.Icon {
  width: auto;
  padding-left: 22px;
  background-position: top left;
  background-repeat: no-repeat;
  color: var(--accent);
  text-decoration: none;
}
.Icon.Ticket       { background-image: url('../images/icons/ticket.gif'); }
.Icon.webTicket    { background-image: url('../images/icons/ticket_source_web.gif'); }
.Icon.emailTicket  { background-image: url('../images/icons/ticket_source_email.gif'); }
.Icon.phoneTicket  { background-image: url('../images/icons/ticket_source_phone.gif'); }
.Icon.otherTicket,
.Icon.apiTicket    { background-image: url('../images/icons/ticket_source_other.gif'); }
.Icon.attachment,
.Icon.file         { background-image: url('../images/icons/attachment.gif'); }
.Icon.refresh      { background-image: url('../images/icons/refresh.gif'); }
.Icon.thread {
  font-weight: 600;
  font-size: 1em;
  background-image: url('../images/icons/thread.gif');
}

/* ============================================================
   Ticket table (list view)
   ============================================================ */
#ticketTable {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  width: 100%;
}
#ticketTable caption {
  padding: 12px 14px;
  text-align: left;
  color: var(--ink);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
#ticketTable th {
  height: auto;
  line-height: 1.3;
  padding: 10px 12px;
  background: var(--bg-2);
  border: none;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
#ticketTable th a { color: var(--ink-2); }
#ticketTable th a:hover { color: var(--ink); }
#ticketTable th.required,
#ticketTable td.required { font-weight: 600; text-align: left; }
#ticketTable td {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px;
}
#ticketTable tr:last-child td { border-bottom: none; }
#ticketTable tr.alt td { background: var(--bg-2); }
#ticketTable tr:hover td { background: var(--accent-bg); }

i.refresh {
  color: var(--ok);
  font-size: 80%;
  vertical-align: middle;
}
.states small { font-size: 70%; color: var(--ink-3); }
.active.state { font-weight: 600; color: var(--accent); }

.search.well {
  padding: 14px;
  background-color: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  margin-top: 0;
}

.infoTable {
  background: var(--bg-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.infoTable th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 500;
  color: var(--ink-2);
  font-size: 13px;
}
.infoTable td { padding: 8px 12px; font-size: 13.5px; }

/* Action buttons (small) */
.action-button {
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  border-radius: var(--radius);
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  color: var(--ink-2) !important;
  display: inline-block;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  background-color: var(--surface);
  background-image: none;
  padding: 4px 10px;
  text-decoration: none;
  line-height: 20px;
  margin-left: 6px;
  transition: border-color .15s, background .15s;
}
.action-button:hover {
  border-color: var(--ink-3);
  background-color: var(--bg-2);
}
.action-button span,
.action-button a {
  color: var(--ink-2) !important;
  display: inline-block;
  float: left;
}
.action-button a { text-decoration: none; }

table.padded tr > td,
table.padded tr > th {
  height: 22px;
  padding-bottom: 8px;
}

/* ============================================================
   Search forms
   ============================================================ */
.search-form { padding-top: 14px; }
.searchbar .search,
.search-form .search {
  display: inline-block;
  width: 460px;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 9px 14px;
  box-shadow: none;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.searchbar .search:focus,
.search-form .search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus);
  outline: none;
}
.searchbar .search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

/* ============================================================
   Grid helpers (Bootstrap-ish)
   ============================================================ */
.bleed { margin: 0 !important; padding: 0 !important; }
.row {}
.span4 {
  display: inline-block;
  width: 31%;
  margin: 0 1%;
  vertical-align: top;
}
.span8 {
  display: inline-block;
  width: 65.5%;
  margin: 0 1%;
  vertical-align: top;
}
.truncate {
  display: inline-block;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.image-hover a.action-button:hover,
.image-hover a.action-button {
  color: initial !important;
  text-decoration: none;
}

/* ============================================================
   Custom data tables
   ============================================================ */
table.custom-data { margin-top: 14px; }
table.custom-data th { width: 25%; }
table.custom-data th {
  background-color: var(--bg-2);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
table.custom-data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
}
table .headline,
table.custom-data .headline {
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  background-color: var(--surface);
  color: var(--ink);
}

/* ============================================================
   Ticket info / thread
   ============================================================ */
#ticketInfo h1 {
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 24px;
}
#ticketInfo h1 small {
  font-weight: 400;
  color: var(--ink-3);
  font-size: 14px;
  margin-left: 8px;
}

.thread-entry { margin-bottom: 18px; }
.thread-entry.avatar { margin-left: 60px; }
.thread-entry.response.avatar { margin-right: 60px; margin-left: 0; }
.thread-entry > .avatar {
  margin-left: -60px;
  display: inline-block;
  width: 44px; height: auto;
  border-radius: var(--radius);
}
.thread-entry.response > .avatar {
  margin-left: initial;
  margin-right: -60px;
}
img.avatar { border-radius: inherit; }
.avatar > img.avatar { width: 100%; height: auto; }

.thread-entry .header {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 13.5px;
  background: var(--bg-2);
}
.thread-entry.avatar .header { position: relative; }
.thread-entry.avatar .header:before,
.thread-entry.avatar .header:after { display: none; } /* clean — drop the speech-bubble tails */

.thread-entry.response .header {
  background: var(--bg-2);
  color: var(--ink);
}
.thread-entry.message .header {
  background: var(--accent-bg);
  color: var(--accent-2);
  border-color: oklch(0.88 0.05 28);
}

.thread-entry .header .title {
  max-width: 500px;
  vertical-align: bottom;
  display: inline-block;
  margin-left: 16px;
  font-weight: 600;
  color: inherit;
}

.thread-entry .thread-body {
  border: 1px solid var(--line);
  border-top: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 14px;
  background: var(--surface);
}

.thread-body .attachments {
  background-color: var(--bg-2);
  margin: 12px -14px -14px;
  position: relative;
  top: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.thread-body .attachments .filesize { margin-left: 8px; color: var(--ink-3); }
.thread-body .attachments a,
.thread-body .attachments a:hover { text-decoration: none; }
.thread-body .attachment-info {
  margin-right: 12px;
  display: inline-block;
  width: 48%;
}
.thread-body .attachment-info .filename {
  max-width: 80%;
  max-width: calc(100% - 80px);
}

/* Labels (status pills) */
.label {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
  line-height: 16px;
  color: white;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: none;
  background-color: var(--ink-3);
  font-feature-settings: "tnum";
}
.label-bare {
  background-color: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-shadow: none;
}

/* Thread events */
.thread-event {
  padding: 0 4px 16px;
  margin-left: 60px;
  font-size: 13px;
  color: var(--ink-2);
}
.type-icon {
  border-radius: 6px;
  background-color: var(--bg-2);
  padding: 4px 7px;
  margin-right: 8px;
  text-align: center;
  display: inline-block;
  font-size: 1em;
  border: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.type-icon.dark {
  border-color: var(--ink);
  background-color: var(--ink);
  color: var(--bg);
}
.thread-event img.avatar {
  vertical-align: middle;
  border-radius: 4px;
  width: auto;
  max-height: 22px;
  margin: -3px 4px 0;
}
.thread-event .description {
  margin-left: -30px;
  padding-top: 4px;
  padding-left: 30px;
  display: inline-block;
  width: 642px;
  width: calc(100% - 95px);
  line-height: 1.55;
}
.thread-event .type-icon { position: relative; }
.thread-event .type-icon::after {
  content: "";
  border: 16px solid transparent;
  position: absolute;
  top: -3px; bottom: 0; left: -3px; right: 0;
  z-index: -1;
}

.thread-entry::after {
  content: "";
  border-bottom: 2px solid transparent;
  display: block;
}
.thread-entry::before {
  content: "";
  display: block;
  border-top: 2px solid transparent;
}
#ticketThread::before {
  border-left: 1px dashed var(--line);
  position: absolute;
  margin-left: 78px;
  z-index: -1;
  content: "";
  top: 0; bottom: 0; right: 0; left: 0;
}
#ticketThread {
  z-index: 0;
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

/* Freetext attachments */
.freetext-files {
  padding: 12px 14px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--bg-2);
}
.freetext-files .file {
  margin-right: 12px;
  display: inline-block;
  width: 48%;
  padding-top: 0.2em;
}
.freetext-files .title {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 1em;
  color: var(--ink);
}