/* =============================================
   SOLBUILD HELPDESK — CUSTOM THEME
   Primary  : #F77F00 (orange)
   Secondary: #003049 (navy)
   Accent   : #2EA3F2 (blue)
   ============================================= */

/* ── CSS Variable Overrides ─────────────────── */
/* Swap Zammad's dark panel backgrounds to our navy brand colour.
   All dark sidebars/nav panels use var(--background-tertiary/quaternary),
   so changing those here cascades through Zammad's own selectors.        */
:root {
  --background-tertiary:           #003049;  /* main dark nav bg */
  --background-quaternary:         #002538;  /* secondary dark nav bg */
  --menu-text-active:              #F77F00;  /* active nav-tab text → orange */
  --menu-background-active:        rgba(247,127,0,0.18);
  --menu-background-primary-hover: rgba(247,127,0,0.10);
  --button-primary-background:         #F77F00;
  --button-primary-background-active:  #d96e00;
  --button-primary-text:               #ffffff;
}

/* ── Dark nav panels: white link/text colour ── */
/* Override --text-link (teal by default) so ticket-list titles
   and other links inside dark panels render white, not teal.  */
#navigation,
.navigation,
.navigation-taskbar,
.tasks-navigation {
  --text-link:   rgba(255,255,255,0.85);
  --text-normal: rgba(255,255,255,0.85);
  --text:        rgba(255,255,255,0.85);
  --nav-icon:    rgba(255,255,255,0.60);
  --menu-icon:   rgba(255,255,255,0.60);
}

/* ── Navigation Sidebar structure ───────────── */
#navigation {
  background: #003049 !important;
}
#navigation .menu-item > a,
#navigation .menu-item span {
  color: rgba(255,255,255,0.75) !important;
}
#navigation .menu-item.active > a,
#navigation .menu-item:hover > a {
  color: #F77F00 !important;
  background: rgba(247,127,0,0.12) !important;
}
#navigation .menu-item.active .icon,
#navigation .menu-item:hover .icon {
  color: #F77F00 !important;
}
#navigation .logo {
  filter: brightness(0) invert(1);
}

/* ── Topbar ─────────────────────────────────── */
.topbar {
  background: #003049 !important;
  border-bottom: 3px solid #F77F00 !important;
}
.topbar .brand {
  color: #F77F00 !important;
  font-weight: 700 !important;
}

/* ── Buttons ────────────────────────────────── */
.btn.btn--primary {
  background: #F77F00 !important;
  border-color: #d96e00 !important;
  color: #fff !important;
}
.btn.btn--primary:hover,
.btn.btn--primary:focus {
  background: #d96e00 !important;
  border-color: #b85e00 !important;
}
.btn.btn--secondary {
  border-color: #003049 !important;
  color: #003049 !important;
}
.btn.btn--secondary:hover {
  background: #003049 !important;
  color: #fff !important;
}

/* ── Top task-bar nav tabs ───────────────────── */
/* Text lives in child divs, must target them explicitly */
.nav-tab .nav-tab-name,
.nav-tab .nav-tab-icon {
  color: rgba(255,255,255,0.65) !important;
}
.nav-tab.is-active .nav-tab-name,
.nav-tab.is-active .nav-tab-icon {
  color: #003049 !important;
}
.nav-tab:hover .nav-tab-name {
  color: #ffffff !important;
}
.nav-tab svg {
  fill: currentColor !important;
}

/* ── Ticket List ────────────────────────────── */
.ticket-list-item:hover {
  background: rgba(247,127,0,0.05) !important;
}
.ticket-list-item.is-active,
.ticket-list-item.is-selected {
  border-left: 3px solid #F77F00 !important;
  background: rgba(247,127,0,0.08) !important;
}

/* ── Priority indicator strip on list items ─── */
.ticket-priority-2 .icon-priority { color: rgba(255,255,255,0.5) !important; }
.ticket-priority-3 .icon-priority { color: #F77F00 !important; }
.ticket-priority-4 .icon-priority { color: #e53935 !important; }

/* ── Ticket Articles ────────────────────────── */
.ticket-article-item .article-content-body {
  border-radius: 4px;
}
/* All inbound/customer articles — consistent light blue-grey */
.ticket-article-item.is-sender-customer .article-content {
  background: #eaeff5 !important;
  border-left: 4px solid #003049 !important;
  border-radius: 4px !important;
}
/* Agent note */
.ticket-article-item.is-type-note .article-content {
  background: #fff8f0 !important;
  border-left: 4px solid #F77F00 !important;
  border-radius: 4px !important;
}
/* Outbound — agent replies */
.ticket-article-item.is-sender-agent:not(.is-type-note) .article-content {
  background: #f0fff4 !important;
  border-left: 4px solid #4caf50 !important;
  border-radius: 4px !important;
}

/* Article body has light background — links should be navy */
.ticket-article-item .article-content a {
  color: #003049 !important;
}
.ticket-article-item .article-content a:hover {
  color: #F77F00 !important;
}

/* Strip aggressive inline styles from Freshservice-imported tickets */
.ticket-article-item .article-content [style*="background"] {
  background: transparent !important;
}
.ticket-article-item .article-content table {
  border: none !important;
  background: transparent !important;
}
.ticket-article-item .article-content td,
.ticket-article-item .article-content th {
  background: transparent !important;
  border-color: #e0e0e0 !important;
}

/* ── Status Badges ──────────────────────────── */
.badge.badge--new     { background: #F77F00 !important; color: #fff !important; }
.badge.badge--open    { background: #003049 !important; color: #fff !important; }
.badge.badge--pending { background: #7986cb !important; color: #fff !important; }
.badge.badge--closed  { background: #66bb6a !important; color: #fff !important; }

/* ── Form inputs ────────────────────────────── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: #F77F00 !important;
  box-shadow: 0 0 0 2px rgba(247,127,0,0.18) !important;
  outline: none !important;
}

/* ── Tabs / active nav ──────────────────────── */
.nav-tabs .nav-link.active,
.tabs .tab.is-active {
  border-bottom: 3px solid #F77F00 !important;
  color: #F77F00 !important;
}

/* ── Sidebar panel headers (right sidebar) ──── */
.sidebar .sidebar-header,
.sidebar-header {
  background: #003049 !important;
  color: #fff !important;
  border-radius: 3px 3px 0 0;
}
.sidebar .sidebar-header a,
.sidebar .sidebar-header span,
.sidebar .sidebar-header h1,
.sidebar .sidebar-header h2,
.sidebar .sidebar-header h3,
.sidebar-header a,
.sidebar-header span,
.sidebar-header h1,
.sidebar-header h2,
.sidebar-header h3,
.sidebar-header-headline {
  color: #fff !important;
}
/* Right sidebar field labels */
.sidebar .sidebar-body label,
.sidebar-body label,
.ticket-zoom-sidebar label {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* ── Page header accent line ────────────────── */
.page-header {
  border-bottom: 2px solid #F77F00 !important;
}

/* ── Login page ─────────────────────────────── */
.login.fullscreen {
  background: #003049 !important;
}
/* Hide "Log in to helpdesk.solbuild.co.za" above the card */
.login .fullscreen-body > p:first-child {
  display: none !important;
}
/* Title goes INSIDE the card, after the logo, before the form — mirrors Monitoring Portal */
.login .hero-unit .js-form::before {
  content: 'Helpdesk Portal';
  display: block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #fff !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.02em !important;
}
.login .hero-unit {
  background: rgba(0,0,0,0.40) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-top: 4px solid #F77F00 !important;
  color: rgba(255,255,255,0.85) !important;
}
/* Labels — small, muted, lowercase like Grafana */
.login .hero-unit label,
.login .hero-unit .formGroup-label label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* Input fields — dark like Grafana */
.login .hero-unit .form-control {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.login .hero-unit .form-control::placeholder {
  color: rgba(255,255,255,0.35) !important;
}
.login .hero-unit .form-control:focus {
  border-color: #F77F00 !important;
  box-shadow: 0 0 0 2px rgba(247,127,0,0.2) !important;
  outline: none !important;
}
.login .btn.btn--primary {
  width: 100% !important;
  font-size: 1rem !important;
  padding: 10px !important;
}
.login .js-footer {
  color: rgba(255,255,255,0.65) !important;
}
.login .js-footer a {
  color: #F77F00 !important;
}
.login .hero-unit a[href*="password"] {
  color: #F77F00 !important;
}
.login .poweredBy {
  display: none !important;
}
/* "Powered by " — muted white, right-aligned into the centre */
.login.fullscreen::before {
  content: 'Powered by \00a0';
  position: fixed !important;
  bottom: 12px !important;
  left: 0 !important;
  right: 50% !important;
  text-align: right !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.04em !important;
  font-family: sans-serif !important;
  pointer-events: none !important;
  z-index: 9998 !important;
}
/* "Solbuild" — orange, left-aligned from the centre */
.login.fullscreen::after {
  content: 'Solbuild';
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  right: 0 !important;
  text-align: left !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #F77F00 !important;
  letter-spacing: 0.04em !important;
  font-family: sans-serif !important;
  pointer-events: none !important;
  z-index: 9998 !important;
}

/* ── Scrollbar (Webkit) ─────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0,48,73,0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #F77F00; }

/* ── Navigation Logo ── */
#navigation .logo {
  filter: none !important;
}

/* ── Ticket state circles — solid filled colours ── */
.icon-task-state.open       { color: #2EA3F2 !important; fill: #2EA3F2 !important; }
.icon-task-state.escalating { color: #e53935 !important; fill: #e53935 !important; }
.icon-task-state.pending    { color: #7986cb !important; fill: #7986cb !important; }
.icon-task-state.closed     { color: #66bb6a !important; fill: #66bb6a !important; }

/* ── Activity Stream — alternating row colours ── */
.activity-entry:nth-child(odd) {
  background: rgba(0, 48, 73, 0.08) !important;
}
.activity-entry:nth-child(even) {
  background: #f7f7f7 !important;
}

/* ── Zammad nav logo — thin circular outline, no fill ── */
#navigation svg.icon.icon-logo,
.navigation svg.icon.icon-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-sizing: border-box !important;
}

/* ── Required Field Error Highlighting ─────────────────────────────────────
   Fires when Zammad's validation marks a field invalid on submit attempt.
   Covers both old (has-error class) and new (aria-invalid) patterns.       */

/* Wrapper-level error — the whole formGroup gets a red left border */
.formGroup.has-error,
.form-group.has-error,
.ticket-zoom-sidebar .formGroup.has-error {
  border-left: 3px solid #e53935 !important;
  padding-left: 6px !important;
  border-radius: 2px !important;
  background: rgba(229,57,53,0.05) !important;
  animation: shake 0.35s ease !important;
}

/* Label turns red so you know exactly which field it is */
.formGroup.has-error label,
.form-group.has-error label,
.formGroup.has-error .formGroup-label {
  color: #e53935 !important;
  font-weight: 700 !important;
}

/* Input/select/textarea with aria-invalid — broadest possible net */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.form-control[aria-invalid="true"],
.formGroup.has-error input,
.formGroup.has-error select,
.formGroup.has-error textarea,
.formGroup.has-error .form-control,
.form-group.has-error .form-control {
  border: 2px solid #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,0.20) !important;
  background: rgba(229,57,53,0.04) !important;
}

/* Choice/Select2 dropdowns */
.formGroup.has-error .choices__inner,
.formGroup.has-error .select2-selection,
.formGroup.has-error .select2-selection--single {
  border: 2px solid #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,0.20) !important;
}

/* Inline error message text */
.formGroup.has-error .help-inline,
.formGroup.has-error .form-text,
.form-group.has-error .help-inline {
  color: #e53935 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* Subtle shake animation on invalid submit */
@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  75%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}


/* Always show article FROM/SUBJECT header and CHANNEL footer */
.article-content-meta.top,
.article-content-meta.bottom {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  position: relative !important;
  width: 100% !important;
}

.article-meta-clip.top,
.article-meta-clip.bottom {
  height: auto !important;
  overflow: visible !important;
}

/* Article sender avatar — override sprite with solid brand colour for visibility */
.ticket-article-item .avatar--unique {
  background-image: none !important;
  background-color: #013148 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Force article sender avatar visible — position explicitly in left gutter */
.ticket-article-item.agent .js-avatar {
  position: absolute !important;
  left: 7px !important;
  top: 7px !important;
  width: 40px !important;
  height: 40px !important;
  z-index: 5 !important;
}

.ticket-article-item.agent .js-avatar .avatar {
  position: static !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: none !important;
  background-color: #013148 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  text-shadow: none !important;
}

.ticket-article-item.customer .js-avatar {
  position: absolute !important;
  right: 7px !important;
  top: 7px !important;
  width: 40px !important;
  height: 40px !important;
  z-index: 5 !important;
}

.ticket-article-item.customer .js-avatar .avatar {
  position: static !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: none !important;
  background-color: #F97C22 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  text-shadow: none !important;
}

/* ── Freshservice Migration Badge ───────────────────────────────────────── */

/* Badge injected by solbuild-custom.js on articles that contain FS migration text */
.fs-migration-badge {
  display: inline-block;
  background: #c07800;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.75;
}

/* De-emphasize the HTML migration footer (pilot ticket articles):
   the <hr><p><em>Migrated from Freshservice…</em></p> block */
.ticket-article-item .js-html-content hr ~ p > em,
.ticket-article-item .article-content hr ~ p > em {
  color: #aaa !important;
  font-size: 0.82em !important;
}