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

/* ================= Enid portal theme =================
   Brand type applies to both themes. Everything else is scoped to
   .e-dark-mode (the default) so the visitor light toggle still works. */

body, body.e-dark-mode, .e-control, .e-btn { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.kb-banner-title { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }

/* ---------------- Operator Dark ---------------- */
body.e-dark-mode {
  --e-bg: #1E1712; --e-sur: #2A211A; --e-sur2: #362B21;
  --e-ink: #F6EFE2; --e-mut: #9A8F7E; --e-line: #3D3227;
  --e-amb: #E0A94A; --e-amb2: #A67628;
}

/* page + layout containers */
body.e-dark-mode,
body.e-dark-mode main,
body.e-dark-mode section,
body.e-dark-mode .center-content,
body.e-dark-mode .body-container,
body.e-dark-mode .create-ticket-container,
body.e-dark-mode .create-ticket-fields,
body.e-dark-mode .ticket-list-container,
body.e-dark-mode .article-container,
body.e-dark-mode .category-container,
body.e-dark-mode .article-list,
body.e-dark-mode footer.app-footer-container { background-color: var(--e-bg) !important; }
body.e-dark-mode div:not([class]), body.e-dark-mode div[class=""] { background-color: transparent !important; }

/* raised chrome */
body.e-dark-mode .app-header-container,
body.e-dark-mode .mobile-view-header { background-color: var(--e-sur) !important; border-bottom: 1px solid var(--e-line) !important; }
body.e-dark-mode .e-toolbar,
body.e-dark-mode .e-toolbar-wrapper,
body.e-dark-mode .e-rte-toolbar,
body.e-dark-mode .e-list-header,
body.e-dark-mode .e-popup,
body.e-dark-mode .e-dropdownbase { background-color: var(--e-sur) !important; border-color: var(--e-line) !important; }

/* text */
body.e-dark-mode h1, body.e-dark-mode h2, body.e-dark-mode h3, body.e-dark-mode h4 { color: var(--e-ink) !important; }
body.e-dark-mode p, body.e-dark-mode li, body.e-dark-mode td { color: #E6DCCB !important; }
body.e-dark-mode .profile-text { color: var(--e-ink) !important; }

/* inputs */
body.e-dark-mode .e-input-group,
body.e-dark-mode .e-input-group input,
body.e-dark-mode input.e-input,
body.e-dark-mode textarea.e-input { background-color: var(--e-sur2) !important; color: var(--e-ink) !important; border-color: var(--e-line) !important; }
body.e-dark-mode .e-input-group.e-input-focus { border-color: var(--e-amb) !important; box-shadow: 0 0 0 3px rgba(224,169,74,.12) !important; }

/* primary action - amber fill, dark ink (white on amber fails contrast) */
body.e-dark-mode .e-btn.e-primary,
body.e-dark-mode .e-btn.e-primary:focus { background-color: var(--e-amb) !important; border-color: var(--e-amb) !important; color: #1E1712 !important; font-weight: 600 !important; }
body.e-dark-mode .e-btn.e-primary:hover { background-color: #F0C277 !important; border-color: #F0C277 !important; color: #1E1712 !important; }
body.e-dark-mode button.brand-primary { color: var(--e-amb) !important; }

/* radio + checkbox */
body.e-dark-mode .e-radio:checked + label::before { border-color: var(--e-amb) !important; }
body.e-dark-mode .e-radio:checked + label::after { background-color: var(--e-amb) !important; }
body.e-dark-mode .e-radio:focus + label::before { box-shadow: 0 0 0 3px rgba(224,169,74,.25) !important; }
body.e-dark-mode .e-checkbox-wrapper .e-frame.e-check,
body.e-dark-mode .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--e-amb) !important; border-color: var(--e-amb) !important; color: #1E1712 !important; }

/* links */
body.e-dark-mode a:not(.e-btn):not(.article-anchor-tag) { color: var(--e-amb) !important; }
body.e-dark-mode a:not(.e-btn):not(.article-anchor-tag):hover { color: #F0C277 !important; }

/* cards */
body.e-dark-mode .category-item,
body.e-dark-mode .article-anchor-tag,
body.e-dark-mode .e-card { background-color: var(--e-sur) !important; border: 1px solid var(--e-line) !important; border-radius: 10px !important; }
body.e-dark-mode .article-anchor-tag { color: var(--e-ink) !important; }
body.e-dark-mode .category-item:hover,
body.e-dark-mode .article-anchor-tag:hover { border-color: var(--e-amb) !important; box-shadow: 0 6px 24px rgba(0,0,0,.40) !important; }

/* icons + misc accents */
body.e-dark-mode [class*="kb-category-item-icon-bg-color-"] { background-color: var(--e-amb2) !important; color: #F6EFE2 !important; }
body.e-dark-mode .article-logo { background-color: var(--e-sur2) !important; color: var(--e-amb) !important; }
body.e-dark-mode .bd-icon-front-arrow { color: var(--e-amb) !important; }
body.e-dark-mode .article-progress-bar { background-color: var(--e-amb) !important; }
body.e-dark-mode .email-phone-info { background-color: var(--e-sur2) !important; }
body.e-dark-mode .active-tab { background-color: var(--e-sur2) !important; color: var(--e-amb) !important; }
body.e-dark-mode .switch-theme { background-color: transparent !important; color: var(--e-mut) !important; }

/* ---------------- Light theme (visitor toggle) ---------------- */
body:not(.e-dark-mode) .e-btn.e-primary { background-color: #A67628 !important; border-color: #A67628 !important; color: #FFFFFF !important; font-weight: 600 !important; }
body:not(.e-dark-mode) .e-btn.e-primary:hover { background-color: #8A6220 !important; border-color: #8A6220 !important; }
body:not(.e-dark-mode) a:not(.e-btn):not(.article-anchor-tag) { color: #8A6220 !important; }
body:not(.e-dark-mode) .bd-icon-front-arrow { color: #8A6220 !important; }
body:not(.e-dark-mode) [class*="kb-category-item-icon-bg-color-"] { background-color: #A67628 !important; color: #FFFFFF !important; }
body:not(.e-dark-mode) .e-radio:checked + label::before { border-color: #A67628 !important; }
body:not(.e-dark-mode) .e-radio:checked + label::after { background-color: #A67628 !important; }
body:not(.e-dark-mode) .e-checkbox-wrapper .e-frame.e-check { background-color: #A67628 !important; border-color: #A67628 !important; }

/* radio + checkbox wells */
body.e-dark-mode .e-radio + label::before,
body.e-dark-mode .e-radio:checked + label::before { background-color: var(--e-sur2) !important; }
body.e-dark-mode .e-radio + label::before { border-color: var(--e-line) !important; }
body.e-dark-mode .e-radio:checked + label::after { border-color: var(--e-amb) !important; }
body.e-dark-mode .e-checkbox-wrapper .e-frame { background-color: var(--e-sur2) !important; border-color: var(--e-line) !important; }

/* secondary buttons */
body.e-dark-mode .e-btn:not(.e-primary):not(.e-tbar-btn):not(.switch-theme):not(.e-flat) { background-color: var(--e-sur2) !important; border-color: var(--e-line) !important; color: var(--e-ink) !important; }