/* ============================================================
   SmartStream Colour Palette
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;900&display=swap');

:root {
  --brand-primary:   #002F6C;
  --brand-secondary: #0858FF;
  --brand-light:     #E6F2FA;
  --text-dark:       #000000;
  --black:           #141414;
  --text-muted:      #DDDDDD;
  --white:           #FFFFFF;
  --hover:           #29ffc0;
  --surface:         #1c1c1c;
  --surface-raised:  #242424;
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-mid:      rgba(255, 255, 255, 0.12);
  --border-faint:    rgba(255, 255, 255, 0.22);
  --shadow-sm:       rgba(0, 0, 0, 0.45);
  --shadow-md:       rgba(0, 0, 0, 0.55);
  --font-body:       'Outfit', sans-serif;
  --font-heading:    'Outfit', sans-serif;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  36px;
}

/* ============================================================
   Global
   ============================================================ */
html { min-height: 100vh; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--white);
  background-color: var(--black);
}

/* ── Links ── */
a {
  text-decoration: none;
  font-weight: 400;
  color: var(--brand-secondary);
  transition: color 0.15s;
}
a:hover {
  text-decoration: underline;
  color: var(--hover);
}

/* ── Headings ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 0.4em;
}
h1 { font-size: 2.8em; margin-top: 0; margin-bottom: 0.8em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }

h1.underline,
h4.underline {
  border-bottom: 1px solid var(--hover);
  padding-bottom: 21px;
}

footer { margin-top: auto; flex-shrink: 0; }

/* Bootstrap text-muted fix */
.text-muted { color: var(--text-muted) !important; }

.ss-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-style: italic;
  padding: 32px 0;
  margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 20px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.ss-btn--primary {
  background: var(--brand-secondary);
  color: var(--white) !important;
  border-color: var(--brand-secondary);
}
.ss-btn--primary:hover {
  background: var(--hover);
  border-color: var(--hover);
  color: var(--black) !important;
  text-decoration: none !important;
}

.ss-btn--secondary {
  background: transparent;
  color: var(--hover) !important;
  border-color: var(--hover);
}
.ss-btn--secondary:hover {
  background: var(--hover);
  color: var(--black) !important;
  text-decoration: none !important;
}

/* Block variant — full width */
.ss-btn--block { display: flex; width: 100%; }

/* Bootstrap .btn-primary override — maps to unified style */
.btn-primary,
#mainContent .btn-primary {
  background: var(--brand-secondary) !important;
  color: var(--white) !important;
  border-color: var(--brand-secondary) !important;
  border-radius: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 28px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary:hover,
#mainContent .btn-primary:hover {
  background: var(--hover) !important;
  border-color: var(--hover) !important;
  color: var(--black) !important;
}

/* ============================================================
   Cards / Panels
   ============================================================ */
.ss-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 24px;
  transition: background 0.12s, box-shadow 0.15s;
}
.ss-card:hover {
  background: var(--surface-raised);
  box-shadow: 0 6px 24px var(--shadow-md);
}
.ss-card--raised {
  background: var(--surface-raised);
}

/* Bootstrap .card override */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

/* Bootstrap .panel override (home knowledge panels) */
.panel {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 12px 16px !important;
}
.panel-body {
  background: transparent !important;
  padding: 16px !important;
}

/* ============================================================
   Labels (small uppercase muted text)
   ============================================================ */
.ss-label,
.sp-label,
.panel-title,
.panel-heading,
.sd-cases-table th,
#mainContent label,
.col-lg-8 label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============================================================
   List items
   ============================================================ */
.ss-list-item,
.list-group-item,
.list-group.unstyled .list-group-item {
  background: transparent !important;
  border-color: var(--border-subtle) !important;
  color: var(--white) !important;
  font-size: var(--fs-md);
  font-weight: 300;
  transition: background 0.12s, color 0.12s;
  padding: 10px 0;
}
.ss-list-item:hover,
.list-group-item:hover,
.list-group.unstyled .list-group-item:hover {
  background: transparent !important;
  color: var(--hover) !important;
  text-decoration: none !important;
}
.list-group .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.list-group .list-group-item:last-child  { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; }

/* Links inside Bootstrap list items */
.list-group-item a.title,
.list-group-item > a {
  color: var(--white) !important;
  font-weight: 300;
  text-decoration: none !important;
  transition: color 0.15s;
}
.list-group-item a.title:hover,
.list-group-item > a:hover { color: var(--hover) !important; }

/* Description inside Bootstrap list items */
.list-group-item p.description {
  color: var(--text-muted) !important;
  font-size: var(--fs-sm);
  margin: 2px 0 0;
  transition: color 0.15s;
}
/* .list-group-item:hover p.description { color: var(--hover) !important; } */

/* Meta/date inside Bootstrap list items */
.list-group-item .text-muted,
.list-group-item .knowledge-date {
  color: var(--text-muted) !important;
  font-size: var(--fs-sm);
}

/* ============================================================
   List
   ============================================================ */
.ss-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-list__item {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px 0;
  transition: color 0.15s;
}

.ss-list__item:last-child { border-bottom: none; }

/* Title — white, green on hover */
.ss-list__title {
  color: var(--white) !important;
  font-size: var(--fs-md);
  font-weight: 300;
  text-decoration: none !important;
  display: block;
  transition: color 0.15s;
}
.ss-list__title:hover { color: var(--hover) !important; text-decoration: none !important; }

/* Description — blue, green on hover */
.ss-list__desc {
  color: var(--text-muted) !important;
  font-size: var(--fs-sm);
  margin: 2px 0 0;
  transition: color 0.15s;
}
/* .ss-list__item:hover .ss-list__desc { color: var(--hover) !important; } */

/* Meta/date — always muted */
.ss-list__meta {
  color: var(--text-muted) !important;
  font-size: var(--fs-sm);
  display: block;
  margin: 2px 0 0;
}

/* ============================================================
   Form controls
   ============================================================ */
input[type="text"],
input[type="email"],
textarea,
select,
.form-control {
  background: var(--surface);
  color: var(--white);
  border-color: var(--border-mid);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder,
.form-control::placeholder { color: var(--text-muted); }

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px var(--border-faint);
  outline: none;
}

/* ============================================================
   Tabs
   ============================================================ */
.ss-tabs,
.sp-tabs,
.sd-cases-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-subtle);
  margin-bottom: 0;
}

.ss-tab,
.sp-tab,
.sd-cases-tab {
  background: none;
  border: none;
  padding: 10px 20px 12px;
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.sd-cases-tab {
  padding: 12px 18px 14px;
  font-size: var(--fs-base);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ss-tab:hover,
.sp-tab:hover,
.sd-cases-tab:hover { color: var(--hover); }

.ss-tab--active,
.sp-tab--active,
.sd-cases-tab--active { color: var(--brand-secondary); border-bottom-color: var(--brand-secondary); }

/* ============================================================
   Tables
   ============================================================ */
.table,
.sd-cases-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  color: var(--white);
  background: transparent;
}
.table > thead > tr > th,
.sd-cases-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  border-color: var(--border-subtle);
}
.table > tbody > tr > td,
.sd-cases-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  border-color: var(--border-subtle);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > td,
.sd-cases-table tbody tr:hover td { background: var(--surface-raised); }
.sd-cases-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   Header & Navbar Shell
   ============================================================ */
.navbar.ss-navbar {
  background: var(--black);
  border: 0;
  border-top: 6px solid var(--brand-secondary);
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1000;
}

.ss-header-desktop {
  padding: 12px 0 0 0;
}

.ss-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  flex-wrap: nowrap;
  width: 100%;
}

/* Logo — never shrinks */
.ss-header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 24px;
}
.ss-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Search — fills available space */
.ss-header-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px;
}
.ss-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.ss-search form,
.ss-search .form-search {
  width: 100%;
  max-width: 780px;
  min-width: 0;
}
.ss-search label,
.ss-search .title-search,
.ss-search .header-search,
.ss-search .help-block,
.ss-search .search-description,
.ss-search p { display: none !important; }

.ss-search .input-group {
  display: flex !important;
  align-items: stretch !important;
  height: 38px !important;
  width: 100%;
}
.ss-search .input-group .form-control {
  height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 8px 8px 8px 8px !important;
  flex: 1 1 auto !important;
}
.ss-search .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
  width: auto !important;
  height: 38px !important;
}
.ss-search .input-group-btn .btn,
.ss-search .btn.btn-primary {
  height: 38px !important;
  width: 38px !important;
  padding: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 14px !important;
}

/* User — never shrinks */
.ss-header-right {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 24px;
}
.ss-homelink {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  font-size: 0;
}
.ss-homelink:hover .ss-usericon {
  color: var(--hover);
  border-color: var(--hover);
}
.ss-user {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ss-user .username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  min-width: 0;
  display: inline-block;
  vertical-align: bottom;
  transition: max-width 0.2s;
}
.ss-user .ss-userlink {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white) !important;
  font-weight: 400;
  font-size: var(--fs-md);
  text-decoration: none !important;
  background: transparent !important;
  padding: 6px 8px;
  border-radius: 6px;
}
.ss-user .ss-userlink:hover,
.ss-user-dropdown.ss-open .ss-userlink {
  color: var(--hover) !important;
  text-decoration: none !important;
}
.ss-usericon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-faint);
  border-radius: 50%;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.ss-user .ss-userlink:hover .ss-usericon,
.ss-user-dropdown.ss-open .ss-usericon {
  color: var(--hover);
  border-color: var(--hover);
}
.ss-user .ss-nav-caret svg {
  transition: transform 0.2s ease;
  color: var(--text-muted);
  vertical-align: middle;
}

.ss-header-row .col-sm-2,
.ss-header-row .col-sm-7,
.ss-header-row .col-sm-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  width: auto !important;
}

/* Progressive username shrink */
@media (max-width: 1100px) {
  .ss-user .username { max-width: 80px; }
}
@media (max-width: 960px) {
  .ss-user .username { max-width: 0; overflow: hidden; }
}
@media (max-width: 860px) {
  .ss-user .ss-userlink > span:not(.ss-usericon):not(.ss-nav-caret) {
    display: none;
  }
}

/* ============================================================
   User Dropdown
   ============================================================ */
.ss-user-dropdown { position: relative; }
.ss-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  min-width: 210px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 32px var(--shadow-md);
  border-radius: 10px;
  z-index: 1100;
  animation: megaFadeIn 0.15s ease;
}
.ss-user-dropdown.ss-open .ss-user-menu { display: block; }
.ss-user-menu__divider { height: 1px; background: var(--border-subtle); margin: 0; }
.ss-user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--white) !important;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s;
}
.ss-user-menu__item:hover { background: var(--surface); color: var(--hover) !important; text-decoration: none !important; }
.ss-user-menu__icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-faint);
  border-radius: 50%;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.ss-user-menu__item:hover .ss-user-menu__icon { color: var(--hover); border-color: var(--hover); }
.ss-user-menu__item--signout svg { flex-shrink: 0; color: var(--text-muted); transition: color 0.12s; }
.ss-user-menu__item--signout:hover svg { color: var(--hover); }

/* ============================================================
   Primary Navigation Bar
   ============================================================ */
.ss-navrow { border-top: 1px solid var(--border-mid); display: flex; justify-content: center; }
.ss-nav-menu { width: 100%; }
.ss-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.ss-nav-item { position: static; display: flex; align-items: stretch; }
.ss-nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 14px;
  font-size: var(--fs-md); font-weight: 300;
  color: var(--white) !important;
  text-decoration: none !important;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.ss-nav-link:hover,
.ss-nav-item.ss-open > .ss-nav-link {
  color: var(--hover) !important;
  border-bottom-color: var(--hover);
  text-decoration: none !important;
}
.ss-nav-caret { display: inline-flex; align-items: center; }
.ss-nav-caret svg { transition: transform 0.2s ease; flex-shrink: 0; }
.ss-nav-item.ss-open > .ss-nav-link .ss-nav-caret svg { transform: rotate(180deg); }

/* ============================================================
   Mega Menu
   ============================================================ */
.ss-mega-menu {
  display: none; position: absolute; top: 100%; left: 0; width: 100%;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 12px 40px var(--shadow-sm);
  z-index: 999;
  animation: megaFadeIn 0.15s ease;
}
@keyframes megaFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ss-nav-item.ss-open > .ss-mega-menu { display: block; }
.ss-mega-inner { display: flex; align-items: flex-start; padding: 28px 32px 32px; max-width: 960px; margin: 0 auto; gap: 0; }
.ss-mega-left  { flex: 0 0 160px; padding-right: 24px; border-right: 1px solid var(--border-subtle); }
.ss-mega-category { font-size: var(--fs-lg); font-weight: 300; color: var(--white); margin: 0; line-height: 1.4; }
.ss-mega-right { flex: 1 1 auto; padding-left: 24px; overflow: hidden;}
.ss-mega-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;  overflow: hidden; }
.ss-mega-item  { padding: 10px 0 10px 14px; border-left: 3px dotted var(--brand-secondary); margin-bottom: 6px; transition: border-color 0.15s; }
.ss-mega-item:hover { border-left-color: var(--hover); }
.ss-mega-link  { display: block; font-size: var(--fs-md); font-weight: 300; color: var(--brand-secondary) !important; text-decoration: none !important; margin-bottom: 3px; transition: color 0.15s; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.ss-mega-link:hover { color: var(--hover) !important; text-decoration: none !important; }
.ss-mega-desc  { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); margin: 0; line-height: 1.4; overflow-wrap: break-word; word-break: break-word; }

.ss-mega-menu--subtitle-only .ss-mega-inner { padding: 18px 32px 20px; }
.ss-mega-menu--subtitle-only .ss-mega-left  { flex: 0 0 auto; border-right: none; padding-right: 0; }
.ss-mega-menu--subtitle-only .ss-mega-category { font-size: var(--fs-md); color: var(--text-muted); font-weight: 400; }

/* ============================================================
   Footer
   ============================================================ */
.footer-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  overflow: hidden;
}

.footer-cta .container {
  display: flex;
  justify-content: center;
}

.footer-cta .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.footer-cta .col-md-4 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

.footer-cta .ss-btn,
.footer-cta .btn,
.footer-cta a.btn,
.footer-cta input[type="button"] {
  width: auto !important;
  flex-shrink: 0;
  display: inline-flex !important;
  padding: 9px 20px !important;
  border-radius: 16px !important;
  font-size: var(--fs-sm) !important;
  white-space: nowrap;
}

/* ============================================================
   Support Dashboard
   ============================================================ */
.support-dashboard { padding-top: 10px; }
.support-dashboard__cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 10px 0 26px; }
.support-dashboard__accountline { text-align: center; font-size: var(--fs-xl); font-weight: 400; margin: 10px 0 24px; }
.support-dashboard__block { background: var(--surface); }
.support-dashboard__panel { background: var(--surface-raised); padding: 0; border: 1px solid var(--border-subtle); }
.support-dashboard__sidebar { display: flex; flex-direction: column; gap: 18px; }
.support-card { background: var(--surface-raised); border: 1px solid var(--border-subtle); padding: 16px 16px 14px; }
.support-card__title      { font-size: var(--fs-md); font-weight: 300; }
.support-card__title--big { font-size: var(--fs-xl); }
.support-card__divider    { height: 1px; background: var(--border-subtle); margin: 10px 0 12px; }
.support-card__itemtitle  { font-weight: 400; font-size: var(--fs-base); margin-bottom: 6px; }
.support-card__itemtitle .fa { margin-right: 8px; color: var(--hover); }
.support-card__link       { font-size: var(--fs-base); text-decoration: none; }
.support-dashboard__learning { margin-top: 26px; padding: 20px 0 6px; }
.support-dashboard__learninglink { font-size: var(--fs-2xl); color: var(--text-muted); text-decoration: none; }
.support-dashboard__learninglink:hover,
.support-dashboard__learninglink:focus { color: var(--white); text-decoration: none; }
.support-dashboard__chev { margin-left: 10px; }
.support-dashboard__spacer { background: var(--black); height: 24px; }

/* ============================================================
   Cases panel variant
   ============================================================ */
.sd-cases-panel { padding: 20px 0 8px; }
.sd-cases-viewlink { font-size: var(--fs-sm); font-weight: 400; color: var(--brand-secondary) !important; text-decoration: none !important; white-space: nowrap; }
.sd-cases-viewlink:hover { color: var(--hover) !important; text-decoration: underline !important; }
.support-dashboard__panel .sd-cases-tabs { padding: 0 16px; }
.support-dashboard__panel .sd-cases-tab,
.support-dashboard__panel .sd-cases-tab:focus,
.support-dashboard__panel .sd-cases-tab:active {
  background: none !important; border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important; box-shadow: none !important; outline: none !important;
  padding: 14px 16px 15px; color: var(--text-muted) !important;
}
.support-dashboard__panel .sd-cases-tab:hover { color: var(--white) !important; background: none !important; }
.support-dashboard__panel .sd-cases-tab.sd-cases-tab--active,
.support-dashboard__panel .sd-cases-tab.sd-cases-tab--active:focus { color: var(--hover) !important; border-bottom-color: var(--hover) !important; background: none !important; }
.support-dashboard__panel .sd-cases-panel { padding: 24px 16px 16px; min-height: 120px; }

/* ============================================================
   Page Title Bar
   ============================================================ */
.page-titlebar { background: var(--brand-secondary); padding: 16px 0 20px; margin-bottom: 28px; }
.page-titlebar__crumbs { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; font-size: var(--fs-base); }
.page-titlebar__crumbs li + li::before { content: '/'; padding: 0 8px; color: rgba(255,255,255,0.55); }
.page-titlebar__crumbs a       { color: rgba(255,255,255,0.85); font-weight: 400; text-decoration: none; }
.page-titlebar__crumbs a:hover { color: var(--white); text-decoration: underline; }
.page-titlebar__crumbs .active { color: var(--white); font-weight: 400; }
.page-titlebar__title { font-size: 2em; color: var(--white); margin: 0; }

/* ============================================================
   Search Page
   ============================================================ */
.sp-page-title { background: var(--black); padding: 18px 0 14px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 28px; }
.sp-page-title h1 { margin: 0; color: var(--white); }
.sp-wrap { padding-bottom: 60px; }
.sp-filter-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 22px 24px 18px; margin-bottom: 28px; box-shadow: 0 2px 8px var(--shadow-sm); }
.sp-search-row { margin-bottom: 20px; }
.sp-search-input-wrap { position: relative; max-width: 320px; }
.sp-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.sp-search-input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 4px; font-size: var(--fs-base); transition: border-color 0.15s; box-sizing: border-box; }
.sp-filters-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sp-filters-left  { display: flex; flex-direction: column; }
.sp-filters-right { display: flex; flex-direction: column; }
.sp-filters-group { display: flex; gap: 12px; flex-wrap: wrap; }
.sp-select {
  padding: 8px 32px 8px 12px; border-radius: 4px; font-size: var(--fs-base);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23DDDDDD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer; min-width: 170px; transition: border-color 0.15s;
}
.sp-select--sort { min-width: 140px; }
.sp-results { display: flex; flex-direction: column; gap: 12px; }
.sp-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 2px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: background 0.12s; }
.sp-card:hover { background: var(--surface-raised); }
.sp-card__actions { display: flex; gap: 12px; flex-shrink: 0; }
.sp-card--result  { align-items: flex-start; padding: 18px 24px; }
.sp-card__body    { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.sp-card__title   { font-size: var(--fs-lg); font-weight: 300; color: var(--brand-secondary) !important; text-decoration: none !important; line-height: 1.3; }
.sp-card__title--large { font-size: var(--fs-xl); color: var(--white) !important; }
.sp-card__title:hover  { color: var(--hover) !important; text-decoration: underline !important; }
.sp-card__fragment { font-size: var(--fs-base); color: var(--text-muted); margin: 0; line-height: 1.5; }
.sp-card__url      { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-result-count   { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: 16px; }
.sp-result-count strong { color: var(--white); }

/* Search action buttons (filled/outline) */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 12px 22px; font-size: var(--fs-sm); font-weight: 300; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; line-height: 1.3; min-width: 130px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.sp-btn--filled  { background: var(--brand-secondary); color: var(--white) !important; border: 2px solid var(--brand-secondary); border-radius: 20px; }
.sp-btn--filled:hover { background: var(--hover); border-color: var(--hover); color: var(--black) !important; }
.sp-btn--outline { background: transparent; color: var(--brand-secondary) !important; border: 2px solid var(--brand-secondary); border-radius: 20px; }
.sp-btn--outline:hover { background: var(--hover); border-color: var(--hover); color: var(--black) !important; }

/* Pagination */
.sp-pagination-wrap { margin-top: 28px; display: flex; justify-content: center; }
.sp-pagination-wrap .pagination { margin: 0; }
.sp-pagination-wrap .pagination > li > a,
.sp-pagination-wrap .pagination > li > span { color: var(--brand-secondary); border-color: var(--border-mid); background: var(--surface); }
.sp-pagination-wrap .pagination > .active > a,
.sp-pagination-wrap .pagination > .active > span { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--white); }
.sp-pagination-wrap .pagination > li > a:hover { background: var(--surface-raised); color: var(--hover); border-color: var(--border-mid); }

/* No results card */
.sp-noresults-card { display: flex; align-items: flex-start; gap: 20px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 32px 28px; color: var(--white); }
.sp-noresults-card p { color: var(--text-muted); font-size: var(--fs-base); margin: 6px 0 0; }

/* ============================================================
   CEA Cards
   ============================================================ */
.cea-wrap { padding: 0 0 48px; }
.cea-hero { background: var(--brand-secondary); padding: 28px 36px; margin-bottom: 28px; }
.cea-hero__title { font-size: 2em; color: var(--white); margin: 0; }
.cea-intro { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.6; margin-bottom: 32px; }
.cea-cards { display: flex; gap: 20px; flex-wrap: wrap; }
.cea-card  { flex: 1 1 260px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 28px 24px 24px; display: flex; flex-direction: column; transition: box-shadow 0.15s, background 0.15s; }
.cea-card:hover { background: var(--surface-raised); box-shadow: 0 6px 24px var(--shadow-md); }
.cea-card__icon  { margin-bottom: 18px; color: var(--hover); }
.cea-card__title { font-size: 1.1em; font-weight: 300; color: var(--white); margin: 0 0 12px; }
.cea-card__desc  { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.6; flex: 1 1 auto; margin: 0 0 20px; }
.cea-card__link  { font-size: var(--fs-base); font-weight: 400; color: var(--brand-secondary) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s; }
.cea-card__link:hover { color: var(--hover) !important; text-decoration: none !important; }

/* ============================================================
   Newsletter Archive
   ============================================================ */
.nl-wrap    { padding: 0 0 60px; }
.nl-section { margin-bottom: 52px; }
.nl-heading { font-size: 2em; color: var(--white); text-align: center; margin: 0 0 20px; }
.nl-download-btn { display: block; width: 100%; padding: 16px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border-mid); color: var(--white); font-size: var(--fs-md); font-weight: 400; text-decoration: none !important; transition: background 0.15s, color 0.15s; box-sizing: border-box; }
.nl-download-btn:hover { background: var(--surface-raised); color: var(--hover); text-decoration: none !important; }
.nl-table   { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle); }
.nl-table tr          { border-bottom: 1px solid var(--border-subtle); }
.nl-table tr:last-child { border-bottom: none; }
.nl-table tr:hover td   { background: var(--surface-raised); }
.nl-table td { padding: 14px 20px; text-align: center; }
.nl-table a  { color: var(--brand-secondary); font-size: var(--fs-md); font-weight: 400; text-decoration: none !important; transition: color 0.15s; }
.nl-table a:hover { color: var(--hover); text-decoration: underline !important; }

/* ============================================================
   Profile / System Page Overrides
   ============================================================ */
.page-heading h1, .page-header h1,
.page-heading h2, .page-header h2 { color: var(--white); }
.profile-nav .nav > li > a { background-color: var(--black); color: var(--white); border-radius: 4px; }
.profile-nav .nav > li.active > a { background-color: var(--hover); }
.profile-picture-block { background-color: var(--black); border-radius: 4px; }
#mainContent legend,
#mainContent h1, #mainContent h2, #mainContent h3,
.col-lg-8 legend,
.col-lg-8 fieldset legend { color: var(--white) !important; border-color: var(--border-subtle); }
#mainContent .required-field-marker { color: var(--hover); }
.col-lg-4 .card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 16px; }
.col-lg-4 .profile-picture img,
.col-lg-4 .gravatar img { border-radius: 50%; border: 2px solid var(--border-faint); }
.col-lg-4 .card h4,
.col-lg-4 .card .profile-name { color: var(--white); font-size: var(--fs-lg); }
.col-lg-4 .card.nav-profile { background: var(--surface); border: 1px solid var(--border-subtle); padding: 0; margin-top: 12px; }
.col-lg-4 .nav-profile .list-group-item,
.col-lg-4 .card .list-group-item { background: transparent; border-color: var(--border-subtle); color: var(--text-muted); font-size: var(--fs-base); font-weight: 300; padding: 12px 16px; transition: color 0.15s, background 0.15s; }
.col-lg-4 .nav-profile .list-group-item:hover,
.col-lg-4 .card .list-group-item:hover { background: var(--surface-raised); color: var(--white); }
.col-lg-4 .nav-profile .list-group-item.active,
.col-lg-4 .card .list-group-item.active { background: var(--surface-raised); color: var(--hover); border-left: 3px solid var(--hover); }
.col-lg-4 .card .list-group-item .fa-lock,
.col-lg-4 .card .list-group-item .glyphicon-lock { color: var(--hover); margin-right: 8px; }
#mainContent input[type="checkbox"],
#mainContent input[type="radio"] { accent-color: var(--hover); width: 14px; height: 14px; }
#mainContent .checkbox label,
#mainContent .radio label { color: var(--white); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-base); }

tr:has([id*="tri_swiftdetails"]) {
  display: block;
  float: left;
  clear: both;
  width: 50%;
  margin-top: 16px;
}

tr:has([id*="tri_swiftdetails"]) td {
  display: block !important;
  text-align: left !important;
  padding-left: 0 !important;
}

.visually-hidden,
span.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

label[for*="tri_swiftdetails"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 8px !important;
}

.form-check:has([title="Mail"]),
.form-check:has([aria-label="Mail"]) {
  display: none !important;
}

span[id*="tri_swiftdetails"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

span[id*="tri_swiftdetails"] label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

tr:has([id*="tri_swiftdetails"]) td.cell.boolean-radio-cell {
  display: block;
  width: auto;
}

tr:has([id*="tri_swiftdetails"]) {
  display: flex;
  justify-content: flex-start;
}

tr:has([id*="tri_swiftdetails"]) .table-info {
  min-width: 160px;
}

#mainContent .row.mb-3:last-of-type {
  margin-bottom: 32px !important;
}

#mainContent tr:has([data-logical-name="nickname"]),
#mainContent tr:has([data-logical-name="websiteurl"]),
#mainContent tr:has([data-logical-name="adx_publicprofilecopy"]),
#mainContent tr:has([data-logical-name="adx_organizationname"]) {
  display: none !important;
}

/* ============================================================
   Profile — Email Confirmation Banner
   ============================================================ */

#mainContent .alert.alert-info.clearfix {
  background: var(--brand-primary) !important;
  border: 1px solid var(--brand-secondary) !important;
  color: var(--white) !important;
}

#mainContent .alert.alert-info.clearfix span {
  color: var(--white) !important;
}

#mainContent .alert.alert-info.clearfix .fa {
  color: var(--brand-secondary) !important;
}

/* Confirm Email button */
#mainContent .alert.alert-info.clearfix .btn.btn-info {
  background: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--white) !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#mainContent .alert.alert-info.clearfix .btn.btn-info:hover {
  background: var(--hover) !important;
  border-color: var(--hover) !important;
  color: var(--black) !important;
}

#mainContent .alert:not(.alert-danger):not(.alert-success) {
  background: var(--brand-primary) !important;
  border: 1px solid var(--brand-secondary) !important;
  color: var(--white) !important;
}

#mainContent .alert .fa-inbox {
  color: var(--brand-secondary) !important;
}

#mainContent .alert span {
  color: var(--white) !important;
}

/* ============================================================
   Global Breadcrumb
   ============================================================ */
.page-heading ul,
.page-heading ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: var(--fs-base); }
.page-heading ul li,
.page-heading ol li { display: flex; align-items: center; color: var(--text-muted); font-weight: 300; }
.page-heading ul li + li::before,
.page-heading ol li + li::before { content: '/'; padding: 0 6px; color: var(--text-muted); font-weight: 300; }
.page-heading ul li a,
.page-heading ol li a { color: var(--text-muted); font-weight: 300; text-decoration: none; }
.page-heading ul li a:hover,
.page-heading ol li a:hover { color: var(--hover); text-decoration: underline; }
.page-heading ul li:last-child,
.page-heading ol li:last-child { color: var(--white); font-weight: 400; }
.page-heading ul li::marker,
.page-heading ol li::marker { display: none; content: ''; }
.breadcrumb,
.sp-breadcrumb {
  margin: 0; padding: 0; background: none; border-radius: 0; font-size: var(--fs-base);
}
.breadcrumb > li + li::before,
.sp-breadcrumb li + li::before { content: '/'; padding: 0 6px; color: var(--text-muted); font-weight: 400; }
.breadcrumb > li a,
.sp-breadcrumb li a { color: var(--text-muted); font-weight: 400; text-decoration: none; }
.breadcrumb > li a:hover,
.sp-breadcrumb li a:hover { color: var(--hover); text-decoration: underline; }
.breadcrumb > .active,
.sp-breadcrumb li.active { color: var(--white); font-weight: 400; }

/* ============================================================
   Home Page
   ============================================================ */
.whitebg,
.content-home,
.sidebar-home { background: transparent !important; }

.section-knowledge { background: var(--black) !important; }

.section-landing-heading  { color: var(--white) !important; font-size: 2.8em; }
.section-landing-sub-heading { color: var(--white) !important; font-size: 1.4em; font-weight: 300; }

h2.blue_border { color: var(--white) !important; border-bottom: 1px solid var(--hover); padding-bottom: 12px; }

/* ============================================================
   Home — Hero Banner
   ============================================================ */
.section-landing {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px;
  display: flex;
  align-items: center;
  position: relative;
}
.section-landing::before { display: none; }
.section-landing .container { position: relative; z-index: 1; }

/* ============================================================
   Contact Us Page
   ============================================================ */
.tabListLocation {
  width: 100%;
  border-collapse: collapse;
}

.ListLocationName h2 {
  color: var(--white);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
  margin-bottom: 0;
}

.ListLocationText td {
  padding: 16px 24px 24px 0;
  vertical-align: top;
  color: var(--white);
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--border-subtle);
}

.ListLocationContact {
  padding-left: 24px !important;
}

.ListLocationContact a {
  color: var(--brand-secondary);
}

.ListLocationContact a:hover {
  color: var(--hover);
}

.HeadingLight {
  color: var(--text-muted);
  font-weight: 300;
}

/* ============================================================
   Mobile Navigation
   ============================================================ */
.ss-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.ss-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: all 0.2s ease;
}
.ss-nav-toggle.ss-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ss-nav-toggle.ss-open span:nth-child(2) { opacity: 0; }
.ss-nav-toggle.ss-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ss-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

@media (max-width: 1024px) {
  .ss-nav-link {
    padding: 10px 8px;
    font-size: 12px;
  }
  .ss-search form,
  .ss-search .form-search {
    max-width: 460px;
  }

  .ss-mega-menu {
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .ss-mega-inner {
    max-width: 100%;
    padding: 16px 20px 20px;
    gap: 0;
    flex-wrap: nowrap;
  }
  .ss-mega-left {
    flex: 0 0 120px;
    padding-right: 14px;
  }
  .ss-mega-right {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 14px;
    overflow: hidden;
  }
  .ss-mega-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ss-mega-link {
    font-size: 12px;
    white-space: normal;
    word-break: break-word;
  }
  .ss-mega-desc {
    font-size: 11px;
  }
}

@media (max-width: 860px) {
  .ss-nav-link {
    padding: 10px 6px;
    font-size: 11px;
  }
  .ss-search form,
  .ss-search .form-search {
    max-width: 260px;
    min-width: 100px;
  }

  .ss-mega-right {
    padding-left: 0;
    flex: 1 1 auto;
  }
  .ss-mega-inner {
    padding: 14px 16px 18px;
  }
  .ss-mega-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .ss-mega-left {
    flex: 0 0 140px;
    padding-right: 16px;
  }
}

@media (max-width: 767px) {
  .ss-header-row { display: none; }

  .ss-nav-list { flex-direction: column; }
  .ss-nav-item { flex-direction: column; }
  .ss-nav-link {
    padding: 12px 16px;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--border-subtle);
  }

  .ss-mega-menu {
    position: static;
    box-shadow: none;
    border-top: none;
    animation: none;
  }

  .ss-mega-inner {
    flex-direction: column;
    padding: 8px 16px 16px;
  }
  .ss-mega-right { padding-left: 0; }
  .ss-mega-grid { grid-template-columns: 1fr; }

  .ss-search form,
  .ss-search .form-search {
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Faceted Search
   ============================================================ */
.facet-list-group-item {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--white) !important;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.facet-list-group-item.active,
.facet-list-group-item:hover {
  background: var(--surface-raised) !important;
  color: var(--hover) !important;
}

.facet-list-group-item-count {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.show-more,
.show-less {
  color: var(--brand-secondary) !important;
  font-size: var(--fs-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
}

.show-more:hover,
.show-less:hover {
  color: var(--hover) !important;
}

.rating-star-filled { color: var(--hover); }
.rating-star-empty  { color: var(--text-muted); }

/* ============================================================
   Support — Case Status Labels
   ============================================================ */
.label-default { background: var(--surface-raised); color: var(--text-muted); border-radius: 4px; padding: 2px 8px; font-size: var(--fs-xs); }
.label-success { background: var(--hover); color: var(--black); border-radius: 4px; padding: 2px 8px; font-size: var(--fs-xs); }
.label-info    { background: var(--brand-secondary); color: var(--white); border-radius: 4px; padding: 2px 8px; font-size: var(--fs-xs); }
.label-danger  { background: #c0392b; color: var(--white); border-radius: 4px; padding: 2px 8px; font-size: var(--fs-xs); }
.label-primary { background: var(--brand-secondary); color: var(--white); border-radius: 4px; padding: 2px 8px; font-size: var(--fs-xs); }

/* ============================================================
   Form
   ============================================================ */

.ss-form .form-group { margin-bottom: 18px; }

.ss-form label,
.ss-form .control-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ss-form input[type="text"],
.ss-form input[type="email"],
.ss-form input[type="url"],
.ss-form input[type="tel"],
.ss-form textarea,
.ss-form select,
.ss-form .form-control {
  background: var(--surface);
  color: var(--white);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ss-form input[type="text"]:focus,
.ss-form input[type="email"]:focus,
.ss-form textarea:focus,
.ss-form select:focus,
.ss-form .form-control:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px var(--border-faint);
  outline: none;
}

.ss-form input[type="text"]::placeholder,
.ss-form textarea::placeholder { color: var(--text-muted); }

/* Lookup fields (the paired input+button combos Power Pages generates) */
.ss-form .input-group .form-control { border-right: none; border-radius: 4px 0 0 4px; }
.ss-form .input-group-btn .btn      {
  background: var(--surface-raised);
  border: 1px solid var(--border-mid);
  border-left: none;
  border-radius: 0 4px 4px 0;
  color: var(--text-muted);
  padding: 8px 12px;
  transition: background 0.12s, color 0.12s;
}
.ss-form .input-group-btn .btn:hover { background: var(--surface); color: var(--hover); }

/* Radio & checkbox */
.ss-form input[type="checkbox"],
.ss-form input[type="radio"] { accent-color: var(--hover); width: 14px; height: 14px; }
.ss-form .checkbox label,
.ss-form .radio label {
  color: var(--white);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-base);
}

/* Required marker */
.ss-form .required-field-marker,
.ss-form .required { color: var(--hover); }

/* Validation messages */
.ss-form .field-validation-error { color: #e74c3c; font-size: var(--fs-sm); margin-top: 4px; display: block; }

.validation-summary.alert-error .validation-header {
  color: #e74c3c;
}

/* Alerts */
.alert.alert-danger,
.alert.alert-danger span {
  color: #e74c3c;
}

/* Submit / action buttons row */
.ss-form .actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.ss-form .actions input[type="submit"],
.ss-form .actions input[type="button"],
.ss-form .actions .btn-primary {
  background: var(--brand-secondary) !important;
  color: var(--white) !important;
  border: 2px solid var(--brand-secondary) !important;
  border-radius: 20px !important;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ss-form .actions input[type="submit"]:hover,
.ss-form .actions input[type="button"]:hover,
.ss-form .actions .btn-primary:hover {
  background: var(--hover) !important;
  border-color: var(--hover) !important;
  color: var(--black) !important;
}
.ss-form .actions .btn-default,
.ss-form .actions .btn-cancel {
  background: transparent !important;
  color: var(--hover) !important;
  border: 2px solid var(--hover) !important;
  border-radius: 20px !important;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ss-form .actions .btn-default:hover,
.ss-form .actions .btn-cancel:hover {
  background: var(--hover) !important;
  color: var(--black) !important;
}

/* Fieldset / legend */
.ss-form fieldset { border: 1px solid var(--border-subtle); border-radius: 4px; padding: 20px; margin-bottom: 24px; }
.ss-form legend   { color: var(--white) !important; border-color: var(--border-subtle); font-size: var(--fs-lg); font-weight: 300; padding: 0 8px; width: auto; }

/* Alert messages inside forms */
.ss-form .alert-success { background: rgba(41,255,192,0.1); border-color: var(--hover); color: var(--hover); }
.ss-form .alert-danger  { background: rgba(192,57,43,0.1);  border-color: #c0392b;      color: #e74c3c; }

/* Read-only fields (case detail view) */
.form-control[readonly],
.form-control[disabled],
.form-control[aria-disabled="true"],
.ss-form .form-control[readonly],
.ss-form .form-control[disabled],
#mainContent .form-control[readonly],
#mainContent .form-control[disabled],
#mainContent .form-control[aria-disabled="true"] {
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: default;
  border-color: var(--border-subtle);
  opacity: 1 !important;
}

.form-control.lookup[readonly],
input.lookup.form-control,
#mainContent input.lookup {
  color: var(--white) !important;
  background: var(--surface-raised) !important;
  opacity: 1 !important;
}

/* ============================================================
   Modal — Fade & Position Fix
   ============================================================ */

section.modal.fade.modal-lookup.show,
section.modal.fade.modal-addnote.show {
  opacity: 1 !important;
  transition: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

section.modal.fade.modal-lookup.show .modal-dialog,
section.modal.fade.modal-addnote.show .modal-dialog {
  transform: none !important;
  transition: none !important;
  margin: 30px auto !important;
  top: 0 !important;
}

section.modal.fade.modal-lookup.show .modal-content,
section.modal.fade.modal-addnote.show .modal-content {
  background: var(--surface) !important;
  color: var(--white) !important;
  border: 1px solid var(--border-subtle) !important;
}

section.modal.fade.modal-lookup.show .modal-header,
section.modal.fade.modal-addnote.show .modal-header {
  background: var(--surface-raised) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--white) !important;
}

section.modal.fade.modal-lookup.show .modal-body,
section.modal.fade.modal-addnote.show .modal-body {
  background: var(--surface) !important;
  color: var(--white) !important;
}

section.modal.fade.modal-addnote.show .modal-header h1 {
  color: var(--white) !important;
  font-size: var(--fs-lg) !important;
}

section.modal.fade.modal-addnote.show label {
  color: var(--text-muted) !important;
}

section.modal.fade.modal-addnote.show textarea {
  background: var(--surface-raised) !important;
  color: var(--white) !important;
  border-color: var(--border-mid) !important;
}

section.modal.fade.modal-lookup.show .modal-footer,
section.modal.fade.modal-addnote.show .modal-footer {
  background: var(--surface-raised) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

section.modal.fade.modal-addnote.show .btn-primary {
  background: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--white) !important;
  border-radius: 20px !important;
}

section.modal.fade.modal-addnote.show .btn-primary:hover {
  background: var(--hover) !important;
  border-color: var(--hover) !important;
  color: var(--black) !important;
}

section.modal.fade.modal-addnote.show .btn-default {
  background: transparent !important;
  color: var(--hover) !important;
  border-color: var(--hover) !important;
  border-radius: 20px !important;
}

section.modal.fade.modal-lookup.show table td,
section.modal.fade.modal-lookup.show table th {
  color: var(--white) !important;
  border-color: var(--border-subtle) !important;
  background: transparent !important;
}

section.modal.fade.modal-lookup.show table tr:hover td {
  background: var(--surface-raised) !important;
  color: var(--hover) !important;
}

section.modal.fade.modal-lookup.show input[type="text"],
section.modal.fade.modal-addnote.show input[type="text"] {
  background: var(--surface-raised) !important;
  color: var(--white) !important;
  border-color: var(--border-mid) !important;
}

/* ============================================================
   Case Deflection Panel
   ============================================================ */
.case-deflection .panel {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

.case-deflection .list-group-item {
  background: var(--surface-raised) !important;
  border-color: var(--border-subtle) !important;
  color: var(--white) !important;
}

.case-deflection .list-group-item h4 a {
  color: var(--brand-secondary) !important;
}

.case-deflection .list-group-item h4 a:hover {
  color: var(--hover) !important;
}

/* ============================================================
   Knowledge Article Content
   ============================================================ */

/* Hoofdcontainer */
.knowledge-article,
.knowledge-article-content,
#main-content {
  background: transparent !important;
  color: var(--white) !important;
}

/* Inline font/color overrides van de wiki renderer */
.knowledge-article-content [style*="font-family"],
.knowledge-article-content [style*="color"],
.knowledge-article-content div[data-wrapper],
#main-content [style*="font-family"],
#main-content [style*="color"] {
  font-family: var(--font-body) !important;
  color: var(--white) !important;
  background: transparent !important;
}

/* Lichtblauwe achtergrond fix */
.knowledge-article-content [style*="background"],
#main-content [style*="background-color"] {
  background: transparent !important;
}

/* Tekst elementen */
.knowledge-article-content p,
.knowledge-article-content li,
.knowledge-article-content td,
.knowledge-article-content th,
.knowledge-article-content h1,
.knowledge-article-content h2,
.knowledge-article-content h3,
.knowledge-article-content h4 {
  color: var(--white) !important;
  font-family: var(--font-body) !important;
}

/* Links */
.knowledge-article-content a {
  color: var(--brand-secondary) !important;
}
.knowledge-article-content a:hover {
  color: var(--hover) !important;
}

/* Related attachments card */
.knowledge-article .card {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--white) !important;
}

/* Views counter */
.knowledge-article [class*="wiki-conten"] {
  background: transparent !important;
  color: var(--white) !important;
}

.knowledge-article-content .ssdpage {
  width: 100% !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tabel achtergronden van Word/PDF import */
.knowledge-article-content td[style*="background-color"],
.knowledge-article-content th[style*="background-color"],
.knowledge-article-content tr[style*="background-color"] {
  background-color: var(--surface-raised) !important;
}

/* Tabel borders */
.knowledge-article-content table[style*="border"],
.knowledge-article-content td[style*="border"],
.knowledge-article-content th[style*="border"] {
  border-color: var(--border-subtle) !important;
}

/* Tekst kleuren van Word import */
.knowledge-article-content span[style*="color"],
.knowledge-article-content p[style*="color"],
.knowledge-article-content div[style*="color"] {
  color: var(--white) !important;
}

/* Font families van Word import */
.knowledge-article-content span[style*="font-family"],
.knowledge-article-content p[style*="font-family"],
.knowledge-article-content div[style*="font-family"] {
  font-family: var(--font-body) !important;
}

/* Data wrapper van renderer */
.knowledge-article-content div[data-wrapper] {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  color: var(--white) !important;
  background: transparent !important;
}

/* ============================================================
  Reorder toolbar: Search + Account filter above View tabs
  ============================================================ */
.view-toolbar.grid-actions {
  display: flex;
  flex-wrap: wrap;
}

.view-toolbar .toolbar-actions {
  order: 1;
  flex: 0 0 100%;
  margin-bottom: 12px;
  float: none !important;
}

.view-toolbar .view-filter-select {
  order: 2;
  flex: 0 0 100%;
  margin-bottom: 12px;
  float: none !important;
}

.view-toolbar .view-select {
  order: 3;
  flex: 0 0 100%;
  float: none !important;
}

/* ============================================================
  "My Open Incidents"
  ============================================================ */
#filterDropdownId .dropdown-toggle { display: none; }

#filterDropdownId .dropdown-menu {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid var(--border-mid);
  background: transparent;
  padding: 0;
  margin: 0 0 16px 0;
  gap: 24px;
}

#filterDropdownId .dropdown-menu li { list-style: none; }

#filterDropdownId .dropdown-item {
  display: inline-block;
  padding: 8px 0 !important;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  background: transparent !important;
}

#filterDropdownId .dropdown-menu li.active .dropdown-item {
  color: var(--hover);
  border-bottom-color: var(--hover);
}

.entitylist a.details-link,
.entity-grid a.details-link {
  color: var(--white) !important;
}

.entitylist a.details-link:hover,
.entity-grid a.details-link:hover {
  color: var(--hover) !important;
}



/* ============================================================
  Account filter ("My ▾ Smartstream...")
  ============================================================ */
.view-filter-select .dropdown-toggle { display: none; }

.view-filter-select .dropdown-menu {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0 0 12px 0;
}

.view-filter-select .dropdown-menu li,
.view-filter-select .dropdown-menu li.active {
  list-style: none;
}

.view-filter-select .filter-user,
.view-filter-select .filter-account,
.view-filter-select li.active .filter-user,
.view-filter-select li.active .filter-account {
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  color: var(--white) !important;
  text-decoration: none !important;
  background: var(--surface) !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.view-filter-select .filter-user:hover,
.view-filter-select .filter-account:hover {
  background: var(--hover) !important;
  color: var(--black) !important;
  text-decoration: none !important;
}

.view-filter-select li.active .filter-user,
.view-filter-select li.active .filter-account {
  background: var(--surface-raised) !important;
  color: var(--hover) !important;
  font-weight: 600 !important;
}

/* ============================================================
  Remove per-row dropdown chevron button
  ============================================================ */
td[aria-label="action menu"] .dropdown.action,
.dropdown.action {
  display: none !important;
}

/* ============================================================
   Entity Lists
   ============================================================ */

   .entitylist-filter-option-group-box-overflow {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  overflow: visible;
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.entitylist-filter-option {
  list-style: none;
}

.entitylist-filter-option a {
  color: var(--white);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 4px;
  display: inline-block;
  transition: background-color 0.15s ease;
}

.entitylist-filter-option a:hover {
  background-color: var(--border-mid);
}

/* Highlight the currently active option — adjust selector once we confirm it */
.entitylist-filter-option.active a,
.entitylist-filter-option[aria-selected="true"] a {
  font-weight: 700;
  background-color: var(--border-subtle);
}

/* ============================================================
   Catch-all: remove striping from any table anywhere on the site
   ============================================================ */
table.table-striped tbody tr,
table.table-striped tbody tr:nth-child(odd),
table.table-striped tbody tr:nth-child(even) {
  background-color: transparent !important;
}

table.table-striped tbody tr td,
table.table-striped tbody tr th {
  color: inherit !important;
  border-color: var(--border-mid);
}

/* ============================================================
   Copilot Chat Widget (SmartBot)
   ============================================================ */

/* Backgrounds + base text, catch-all */
[class*="webchat"] {
  background-color: var(--white) !important;
  color: var(--black) !important;
}

/* Message bubbles */
.webchat__bubble__content,
.webchat__text-content,
.webchat__render-markdown {
  background-color: var(--white) !important;
  color: var(--black) !important;
}

.webchat__render-markdown p,
.webchat__render-markdown li,
.webchat__render-markdown ol,
.webchat__render-markdown ul,
.webchat__render-markdown strong {
  color: var(--black) !important;
}

/* User's own messages */
.webchat__bubble--from-user .webchat__bubble__content {
  background-color: var(--white) !important;
  color: var(--black) !important;
}
.webchat__bubble--from-user .webchat__render-markdown,
.webchat__bubble--from-user .webchat__render-markdown p {
  color: var(--black) !important;
}

/* Input box */
.webchat__send-box-text-box,
.webchat__send-box-text-box__input {
  background-color: var(--white) !important;
  color: var(--black) !important;
}
.webchat__send-box-text-box__input::placeholder {
  color: var(--border-mid) !important;
}

/* Suggested actions / quick reply buttons */
.webchat__suggested-action {
  background-color: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--border-faint) !important;
}
.webchat__suggested-action:hover {
  background-color: var(--white) !important;
  color: var(--black) !important;
}

/* Timestamps / secondary text */
.webchat__bubble__from-name,
.webchat__timestamp {
  color: var(--border-faint) !important;
}

/* Header / consent wrapper
.pva-embedded-web-chat-window,
.pva-embedded-web-chat {
  background: var(--white) !important;
  color: var(--black) !important;
} */

/* Tooltips */
.fui-Tooltip__content {
  background-color: var(--white) !important;
  color: var(--black) !important;
  border: 1px solid var(--border-mid) !important;
}
.fui-Tooltip__content * {
  color: var(--black) !important;
}