/* =========================
   Final Brand Layer
   Loaded after main.css to override all prior experiments cleanly.
   Login page keeps its own dedicated design and is excluded here.
========================= */

:root {
  --brand-blue-900: #0078d4;          /* Fluent Office Blue */
  --brand-blue-800: #106ebe;          /* Fluent Blue Hover */
  --brand-blue-700: #005a9e;          /* Fluent Blue Active */
  --brand-blue-600: #0078d4;
  --brand-dhl-yellow: #0078d4;        /* Primary accent action colour */
  --brand-dhl-yellow-soft: #deecf9;   /* Soft Fluent Blue Tint */
  --brand-dhl-red: #a80000;
  --brand-dhl-charcoal: #323130;
  --brand-blue-100: #edebe9;
  --brand-blue-050: #f3f2f1;
  --brand-surface: #ffffff;           /* Clean, pure white cards */
  --brand-surface-2: #faf9f8;         /* Neutral light background */
  --brand-border: #e1dfdd;            /* Crisp, professional Fluent border */
  --brand-text: #323130;              /* Carbon/Charcoal readable text */
  --brand-text-soft: #605e5c;         /* Soft secondary text */
  --brand-shadow: 0 4px 16px rgba(50, 49, 48, 0.05), 0 1px 4px rgba(50, 49, 48, 0.03);
}

body:not(.login-body) {
  background: #f3f2f1 !important;     /* Bright, clean, premium neutral background */
  color: var(--brand-text);
  font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

body:not(.login-body) .sidebar {
  background: #faf9f8 !important;     /* Light premium Fluent sidebar */
  color: #323130 !important;
  border-right: 1px solid #e1dfdd !important;
  box-shadow: 0 4px 16px rgba(50, 49, 48, 0.05) !important;
}

body:not(.login-body) .sidebar-inner,
body:not(.login-body) .sidebar-scroll {
  background: transparent !important;
}

body:not(.login-body) .sidebar-scroll {
  width: 100% !important;
  min-height: 100% !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  scrollbar-gutter: stable both-edges;
}

body:not(.login-body) .brand-mini h2,
body:not(.login-body) .sidebar-summary-card strong,
body:not(.login-body) .sidebar-support-card strong,
body:not(.login-body) .nav-group-toggle,
body:not(.login-body) .nav-item,
body:not(.login-body) .logout-btn {
  color: #323130 !important;
}

body:not(.login-body) .brand-mini h2 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

body:not(.login-body) .brand-mini p,
body:not(.login-body) .sidebar-summary-card small,
body:not(.login-body) .sidebar-support-card small,
body:not(.login-body) .sidebar-summary-label,
body:not(.login-body) .sidebar-support-title {
  color: #605e5c !important;
}

body:not(.login-body) .brand-mini p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

body:not(.login-body) .brand-mini-logo,
body:not(.login-body) .brand-mini-logo-image-shell {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

body:not(.login-body) .sidebar-top {
  padding: 26px 18px 18px !important;
}

body:not(.login-body) .brand-mini-rich {
  align-items: flex-start !important;
  gap: 16px !important;
}

body:not(.login-body) .brand-mini-logo-image-shell {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

body:not(.login-body) .brand-mini-logo-image {
  width: auto !important;
  height: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

body:not(.login-body) .sidebar-summary-card,
body:not(.login-body) .sidebar-support-card {
  background: #ffffff !important;
  border: 1px solid #e1dfdd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
  padding: 18px 18px 16px !important;
}

body:not(.login-body) .nav-group-toggle {
  background: #faf9f8 !important;
  border: 1px solid #e1dfdd !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
}

body:not(.login-body) .nav-group-toggle:hover,
body:not(.login-body) .nav-group.is-open .nav-group-toggle {
  background: #f3f2f1 !important;
  border-color: #d2d0ce !important;
  box-shadow: none !important;
}

body:not(.login-body) .nav-group {
  padding: 0 !important;
  margin-bottom: 12px !important;
}

body:not(.login-body) .sidebar-footer {
  padding-top: 12px !important;
  margin-top: 10px !important;
}

body:not(.login-body) .logout-btn {
  width: 100% !important;
}

body:not(.login-body) .nav-submenu {
  margin-top: 6px !important;
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e1dfdd !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

body:not(.login-body) .nav-item {
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin-bottom: 4px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease-in-out !important;
}

body:not(.login-body) .nav-item:hover,
body:not(.login-body) .nav-item.active {
  background: #f3f2f1 !important;
  color: #0078d4 !important;
  box-shadow: none !important;
  transform: none !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

body:not(.login-body) .logout-btn {
  background: #ffffff !important;
  border: 1px solid #8a8886 !important;
  border-radius: 6px !important;
  color: #323130 !important;
}

body:not(.login-body) .logout-btn:hover {
  background: #f3f2f1 !important;
}

body:not(.login-body) .nav-group-toggle strong,
body:not(.login-body) .nav-label,
body:not(.login-body) .sidebar-summary-card strong,
body:not(.login-body) .sidebar-support-card strong {
  color: #323130 !important;
  font-weight: 600 !important;
}

body:not(.login-body) .nav-group-toggle strong {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

body:not(.login-body) .nav-label {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

body:not(.login-body) .sidebar-summary-card strong,
body:not(.login-body) .sidebar-support-card strong {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

body:not(.login-body) .nav-group-toggle small,
body:not(.login-body) .sidebar-summary-card small,
body:not(.login-body) .sidebar-support-card small,
body:not(.login-body) .nav-item small {
  color: #605e5c !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

@media (min-width: 993px) {
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    width: 214px !important;
    min-width: 214px !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 80 !important;
    position: sticky !important;
    top: 0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-scroll {
    padding: 18px 12px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-top {
    margin-bottom: 16px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .brand-mini {
    gap: 10px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .brand-mini-copy h2 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-nav-flyout {
    gap: 10px !important;
    padding: 0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group {
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-toggle {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-toggle small {
    display: none !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-meta {
    gap: 10px !important;
    min-width: 0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-meta > span:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-toggle strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-chevron {
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-panel {
    display: none !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group .nav-item {
    margin-bottom: 0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage {
    position: absolute !important;
    top: 16px !important;
    left: calc(100% + 14px) !important;
    width: 320px !important;
    max-width: min(340px, 30vw) !important;
    height: auto !important;
    max-height: calc(100vh - 36px) !important;
    display: none !important;
    z-index: 120 !important;
    pointer-events: none !important;
  }

  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage {
    left: auto !important;
    right: calc(100% + 14px) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage.is-visible {
    display: block !important;
    pointer-events: auto !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-shell {
    height: auto !important;
    max-height: calc(100vh - 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e1dfdd !important;
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.1) !important;
    pointer-events: auto !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #e1dfdd !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0078d4 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-copy strong,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-copy small {
    display: block !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-copy strong {
    color: #323130 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-copy small {
    color: #605e5c !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin-top: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0078d4 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links {
    flex: 0 1 auto !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 2px !important;
    pointer-events: auto !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    pointer-events: auto !important;
  }
}

body:not(.login-body) .sidebar-summary-label,
body:not(.login-body) .sidebar-support-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  color: #605e5c !important;
  opacity: 1 !important;
}

body:not(.login-body).sidebar-fullscreen .app-layout {
  width: 100% !important;
}

body:not(.login-body).sidebar-fullscreen .sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.login-body).sidebar-fullscreen .sidebar-overlay {
  display: none !important;
}

body:not(.login-body).sidebar-fullscreen .main-wrapper {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body:not(.login-body).sidebar-fullscreen .topbar,
body:not(.login-body).sidebar-fullscreen .topbar.topbar-enterprise {
  width: 100% !important;
  margin-left: 0 !important;
}

body:not(.login-body).sidebar-fullscreen .page-content {
  width: 100% !important;
  max-width: 100% !important;
}

body:not(.login-body) .topbar.topbar-enterprise {
  background: #133b66 !important;    /* Deep Corporate Cobalt Navy (Rich dark but not heavy black) */
  border-bottom: 1px solid #0c2b4d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body:not(.login-body) .topbar.topbar-enterprise .page-title,
body:not(.login-body) .topbar.topbar-enterprise .page-subtitle,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs span,
body:not(.login-body) .topbar.topbar-enterprise .topbar-module-chip,
body:not(.login-body) .topbar.topbar-enterprise .topbar-date-chip {
  color: #ffffff !important;          /* Clean white text */
}

body:not(.login-body) .topbar.topbar-enterprise .page-title,
body:not(.login-body) .topbar.topbar-enterprise .page-subtitle,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs span {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .page-title {
  display: block !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .page-subtitle {
  color: #d1e4f5 !important;          /* Soft light blue text */
}

body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs span {
  color: #79bdf2 !important;          /* Soft bright blue text */
}

body:not(.login-body) .topbar.topbar-enterprise .page-title::selection,
body:not(.login-body) .topbar.topbar-enterprise .page-subtitle::selection,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs::selection,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs span::selection {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-module-chip,
body:not(.login-body) .topbar.topbar-enterprise .topbar-date-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn,
body:not(.login-body) .topbar.topbar-enterprise .menu-toggle {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn-back {
  background: #0078d4 !important;
  color: #ffffff !important;
  border-color: #0078d4 !important;
  border-radius: 4px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn:hover,
body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn:hover,
body:not(.login-body) .topbar.topbar-enterprise .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body:not(.login-body) .topbar-search {
  position: relative;
}

body:not(.login-body) .topbar-search-toggle {
  min-width: 48px !important;
  padding-inline: 0 !important;
}

body:not(.login-body) .topbar-search-toggle-icon {
  font-size: 18px;
  line-height: 1;
}

body:not(.login-body) .topbar-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, calc(100vw - 48px));
  padding: 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e1dfdd;
  box-shadow: 0 8px 16px rgba(0,0,0,0.14);
  z-index: 50;
}

body:not(.login-body) .topbar-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 4px;
  background: #f3f2f1;
  border: 1px solid #e1dfdd;
}

body:not(.login-body) .topbar-search-input-icon {
  color: #605e5c;
  font-size: 15px;
}

body:not(.login-body) .topbar-search-input {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: #323130;
  font-size: 14px;
  outline: none;
}

body:not(.login-body) .topbar-search-input::placeholder {
  color: #605e5c;
}

body:not(.login-body) .topbar-search-results {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

body:not(.login-body) .topbar-search-result {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #faf9f8;
  border: 1px solid #e1dfdd;
  color: #323130;
  text-decoration: none;
}

body:not(.login-body) .topbar-search-result:hover {
  background: #deecf9;
  border-color: #0078d4;
}

body:not(.login-body) .topbar-search-result-group {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0078d4;
}

body:not(.login-body) .topbar-search-result strong {
  color: #323130;
  font-size: 14px;
}

body:not(.login-body) .topbar-search-empty {
  padding: 14px;
  border-radius: 6px;
  background: #faf9f8;
  color: #605e5c;
  font-size: 13px;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn-back:hover {
  background: #106ebe !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 4px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact h4,
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact p,
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link,
body:not(.login-body) .topbar.topbar-enterprise .user-access-pill {
  color: #ffffff !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link {
  color: #79bdf2 !important;
  font-weight: 600 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-avatar {
  background: #ffffff !important;
  color: #133b66 !important;
}

body:not(.login-body) .topbar-brand-title strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body:not(.login-body) .topbar-brand-title span {
  color: #d1e4f5 !important;
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  body:not(.login-body) .topbar-search-panel {
    right: auto;
    left: 0;
    width: min(100vw - 32px, 420px);
  }
}

@media (min-width: 768px) and (max-width: 1366px) {
  body:not(.login-body) .topbar-search-panel {
    width: min(560px, calc(100vw - 56px));
    max-height: min(72vh, 560px);
  }

  body:not(.login-body) .topbar-search-results {
    max-height: min(56vh, 420px);
  }

  body:not(.login-body) .topbar-action-row {
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.is-tablet-viewport:not(.login-body) .topbar-search-panel {
    position: fixed;
    top: calc(18px + env(safe-area-inset-top));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    z-index: 1200;
  }

  body.lang-ar.is-tablet-viewport:not(.login-body) .topbar-search-panel {
    left: 50%;
    right: auto;
  }

  body.is-tablet-viewport:not(.login-body) .topbar-search.is-open .topbar-search-toggle {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  body.is-tablet-viewport:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact {
    padding: 10px 12px !important;
  }
}

/* Module-specific enterprise header themes (FULLY UNIFIED to Deep Corporate Cobalt Navy) */
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-cbahi,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-cap,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-inspection,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-default {
  background: #133b66 !important;
  border-bottom: 1px solid #0c2b4d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard::before,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl::before,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation::before {
  background: none !important;
}

body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard .topbar-module-chip,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard .topbar-date-chip,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl .topbar-module-chip,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl .topbar-date-chip,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation .topbar-module-chip,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation .topbar-date-chip {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard .user-box.user-box-compact .user-avatar,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl .user-box.user-box-compact .user-avatar,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation .user-box.user-box-compact .user-avatar {
  background: #ffffff !important;
  color: #133b66 !important;
}

body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard .topbar-btn-back,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl .topbar-btn-back,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation .topbar-btn-back {
  background: #0078d4 !important;
  color: #ffffff !important;
  border-color: #0078d4 !important;
}

body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard .topbar-lang-btn,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl .topbar-lang-btn,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation .topbar-lang-btn {
  box-shadow: none !important;
}

/* Shell accents by page family */
body:not(.login-body).page-shell-dashboard {
  background: #f3f2f1 !important;
}

body:not(.login-body).page-shell-sdl {
  background: #f3f2f1 !important;
}

body:not(.login-body).page-shell-accreditation {
  background: #f3f2f1 !important;
}

body:not(.login-body).page-shell-dashboard .inner-page-banner,
body:not(.login-body).page-shell-sdl .inner-page-banner,
body:not(.login-body).page-shell-accreditation .inner-page-banner {
  border-top-width: 0 !important;
}

body:not(.login-body).page-shell-dashboard .inner-page-banner {
  border-top-color: transparent !important;
}

body:not(.login-body) .inner-page-banner,
body:not(.login-body) .card-box,
body:not(.login-body) .stat-card,
body:not(.login-body) .overview-item,
body:not(.login-body) .quality-users-form-block,
body:not(.login-body) .table-wrap {
  background: #ffffff !important;
  border: 1px solid #e1dfdd !important;
  box-shadow: 0 4px 16px rgba(50, 49, 48, 0.04), 0 1px 4px rgba(50, 49, 48, 0.02) !important;
  border-radius: 8px !important;
}

body:not(.login-body) .inner-page-banner h2,
body:not(.login-body) .card-head h3,
body:not(.login-body) .stat-card h3,
body:not(.login-body) .overview-item h4,
body:not(.login-body) .table-title-wrap strong,
body:not(.login-body) .quality-users-block-head strong {
  color: #323130 !important;
  font-weight: 600 !important;
}

body:not(.login-body) .inner-page-banner p,
body:not(.login-body) .notes-box p,
body:not(.login-body) .overview-item span,
body:not(.login-body) .table-title-wrap span,
body:not(.login-body) .quality-users-block-head p {
  color: #605e5c !important;
}

body:not(.login-body) .stat-icon {
  background: #deecf9 !important;
  color: #0078d4 !important;
  border-radius: 4px !important;
}

body:not(.login-body) .btn-primary,
body:not(.login-body) .filter-btn,
body:not(.login-body) button[type="submit"].btn-primary {
  background: #0078d4 !important;
  border: 1px solid #0078d4 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

body:not(.login-body) .btn-outline,
body:not(.login-body) .table-btn,
body:not(.login-body) .quick-btn,
body:not(.login-body) .btn-secondary {
  background: #ffffff !important;
  border: 1px solid #8a8886 !important;
  color: #323130 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

body:not(.login-body) .btn-primary:hover,
body:not(.login-body) .filter-btn:hover,
body:not(.login-body) button[type="submit"].btn-primary:hover {
  background: #106ebe !important;
  border-color: #106ebe !important;
  transform: none !important;
}

body:not(.login-body) .btn-outline:hover,
body:not(.login-body) .table-btn:hover,
body:not(.login-body) .quick-btn:hover,
body:not(.login-body) .btn-secondary:hover {
  background: #f3f2f1 !important;
  border-color: #8a8886 !important;
  color: #323130 !important;
  transform: none !important;
}

body:not(.login-body) .btn-primary:focus-visible,
body:not(.login-body) .filter-btn:focus-visible,
body:not(.login-body) button[type="submit"].btn-primary:focus-visible,
body:not(.login-body) .btn-outline:focus-visible,
body:not(.login-body) .table-btn:focus-visible,
body:not(.login-body) .quick-btn:focus-visible,
body:not(.login-body) .btn-secondary:focus-visible {
  outline: 2px solid #0078d4 !important;
  outline-offset: 2px !important;
}

body:not(.login-body) .badge,
body:not(.login-body) .status-badge,
body:not(.login-body) .pill,
body:not(.login-body) .stat-pill,
body:not(.login-body) .summary-pill {
  background: #fff4ce !important;
  border: 1px solid #f8ebc4 !important;
  color: #323130 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

body:not(.login-body) .table-wrap thead th,
body:not(.login-body) table thead th {
  background: #faf9f8 !important;
  color: #323130 !important;
  border-bottom: 1px solid #e1dfdd !important;
}

body:not(.login-body) .table-wrap tbody tr:hover,
body:not(.login-body) table tbody tr:hover {
  background: #f3f2f1 !important;
}

body:not(.login-body) .filters-bar,
body:not(.login-body) .filter-bar,
body:not(.login-body) .table-toolbar,
body:not(.login-body) .search-toolbar,
body:not(.login-body) .filters-panel {
  background: #ffffff !important;
  border: 1px solid #e1dfdd !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body:not(.login-body) .form-group label,
body:not(.login-body) .form-field label,
body:not(.login-body) .filter-field label {
  color: #323130 !important;
  font-weight: 600 !important;
}

body:not(.login-body) .form-group input,
body:not(.login-body) .form-group select,
body:not(.login-body) .form-group textarea,
body:not(.login-body) .form-field input,
body:not(.login-body) .form-field select,
body:not(.login-body) .form-field textarea,
body:not(.login-body) .filter-field input,
body:not(.login-body) .filter-field select,
body:not(.login-body) .filter-field textarea,
body:not(.login-body) select,
body:not(.login-body) textarea {
  background: #ffffff !important;
  border: 1px solid #8a8886 !important;
  color: #323130 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
}

body:not(.login-body) .form-group input:hover,
body:not(.login-body) .form-group select:hover,
body:not(.login-body) .form-group textarea:hover,
body:not(.login-body) .form-field input:hover,
body:not(.login-body) .form-field select:hover,
body:not(.login-body) .form-field textarea:hover,
body:not(.login-body) .filter-field input:hover,
body:not(.login-body) .filter-field select:hover,
body:not(.login-body) .filter-field textarea:hover,
body:not(.login-body) select:hover,
body:not(.login-body) textarea:hover {
  border-color: #323130 !important;
}

body:not(.login-body) .form-group input:focus,
body:not(.login-body) .form-group select:focus,
body:not(.login-body) .form-group textarea:focus,
body:not(.login-body) .form-field input:focus,
body:not(.login-body) .form-field select:focus,
body:not(.login-body) .form-field textarea:focus,
body:not(.login-body) .filter-field input:focus,
body:not(.login-body) .filter-field select:focus,
body:not(.login-body) .filter-field textarea:focus,
body:not(.login-body) select:focus,
body:not(.login-body) textarea:focus {
  border-color: #0078d4 !important;
  box-shadow: 0 0 0 1px #0078d4 !important;
}

body:not(.login-body) .data-table th {
  color: #323130 !important;
}

body:not(.login-body) .data-table th,
body:not(.login-body) .data-table td {
  border-bottom: 1px solid #e1dfdd !important;
}

body:not(.login-body) .data-table tbody tr:hover {
  background: #f3f2f1 !important;
}

body:not(.login-body) .badge.success {
  background: #dff6dd !important;
  border: 1px solid #dff6dd !important;
  color: #107c41 !important;
}

body:not(.login-body) .badge.warning {
  background: #fff4ce !important;
  border: 1px solid #fff4ce !important;
  color: #795c00 !important;
}

body:not(.login-body) .badge.danger {
  background: #fde7e9 !important;
  border: 1px solid #fde7e9 !important;
  color: #a80000 !important;
}

body:not(.login-body) .badge.info {
  background: #deecf9 !important;
  border: 1px solid #deecf9 !important;
  color: #038387 !important;
}

body:not(.login-body) .alert-success {
  background: #dff6dd !important;
  border-color: #dff6dd !important;
  color: #107c41 !important;
}

body:not(.login-body) .alert-error {
  background: #fde7e9 !important;
  border-color: #fde7e9 !important;
  color: #a80000 !important;
}

.qms-dashboard-page .qms-dashboard-masthead {
  border: 1px solid rgba(20, 80, 106, 0.14) !important;
  background:
    radial-gradient(circle at top right, rgba(93, 174, 201, 0.16), transparent 24%) !important,
    linear-gradient(135deg, var(--brand-blue-900) 0%, var(--brand-blue-700) 56%, var(--brand-blue-600) 100%) !important;
  box-shadow: 0 22px 40px rgba(15, 48, 87, 0.14) !important;
}

.qms-dashboard-page .qms-dashboard-masthead,
.qms-dashboard-page .qms-dashboard-masthead.qms-dashboard-hero {
  background:
    radial-gradient(circle at 88% 18%, rgba(101, 193, 223, 0.16), transparent 20%) !important,
    linear-gradient(135deg, #12344d 0%, #14506a 46%, #176b87 100%) !important;
  border-color: rgba(198, 226, 239, 0.14) !important;
  box-shadow: 0 24px 42px rgba(10, 35, 53, 0.18) !important;
}

.qms-dashboard-page .qms-dashboard-masthead::before {
  background: radial-gradient(circle, rgba(114, 203, 230, 0.16) 0%, rgba(114, 203, 230, 0) 72%) !important;
}

.qms-dashboard-page .qms-dashboard-masthead::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 72%) !important;
}

.qms-dashboard-page .welcome-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(240, 250, 255, 0.16) !important;
  color: #f5fbff !important;
}

.qms-dashboard-page .qms-masthead-copy h2,
.qms-dashboard-page .qms-masthead-copy p,
.qms-dashboard-page .qms-masthead-summary-card span,
.qms-dashboard-page .qms-masthead-summary-card strong,
.qms-dashboard-page .qms-masthead-summary-card small,
.qms-dashboard-page .qms-masthead-chip span,
.qms-dashboard-page .qms-masthead-chip strong,
.qms-dashboard-page .qms-masthead-chip small {
  color: #f5fbff !important;
}

.qms-dashboard-page .qms-masthead-summary-card,
.qms-dashboard-page .qms-masthead-chip {
  background: linear-gradient(180deg, rgba(17, 63, 89, 0.94) 0%, rgba(20, 80, 106, 0.9) 100%) !important;
  border: 1px solid rgba(203, 229, 242, 0.16) !important;
  box-shadow: 0 14px 26px rgba(9, 29, 43, 0.16) !important;
}

.qms-dashboard-page .qms-masthead-summary-card span,
.qms-dashboard-page .qms-masthead-summary-card strong,
.qms-dashboard-page .qms-masthead-summary-card small,
.qms-dashboard-page .qms-masthead-chip span,
.qms-dashboard-page .qms-masthead-chip strong,
.qms-dashboard-page .qms-masthead-chip small {
  color: #f5fbff !important;
}

.qms-dashboard-page .btn-primary {
  background: linear-gradient(135deg, #ffd84d 0%, #ffcc00 100%) !important;
  color: #2b3137 !important;
  border: 1px solid rgba(212, 172, 0, 0.24) !important;
  box-shadow: 0 16px 28px rgba(28, 37, 46, 0.18) !important;
}

.qms-dashboard-page .btn-outline,
.qms-dashboard-page .quick-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fffdf7 !important;
  border: 1px solid rgba(255, 214, 51, 0.18) !important;
}

.qms-dashboard-page .btn-primary:hover {
  background: linear-gradient(135deg, #ffe27a 0%, #ffd633 100%) !important;
  color: #2b3137 !important;
}

.qms-dashboard-page .btn-outline:hover,
.qms-dashboard-page .quick-btn:hover {
  background: rgba(255, 214, 51, 0.16) !important;
  border-color: rgba(255, 214, 51, 0.24) !important;
  color: #ffffff !important;
}

.qms-dashboard-page .qms-stat-highlight {
  background: linear-gradient(135deg, #12455f 0%, #176b87 54%, #2b8ead 100%) !important;
}

.qms-dashboard-page .qms-stat-highlight .stat-label,
.qms-dashboard-page .qms-stat-highlight h3,
.qms-dashboard-page .qms-stat-highlight .stat-meta {
  color: #f5fbff !important;
}

.qms-dashboard-page .card-box,
.qms-dashboard-page .card-box p,
.qms-dashboard-page .card-box span,
.qms-dashboard-page .card-box small,
.qms-dashboard-page .stat-card,
.qms-dashboard-page .stat-card .stat-label,
.qms-dashboard-page .stat-card .stat-meta,
.qms-dashboard-page .stat-card h3,
.qms-dashboard-page .qms-health-tile,
.qms-dashboard-page .qms-health-tile h4,
.qms-dashboard-page .qms-health-tile p,
.qms-dashboard-page .qms-health-tile small,
.qms-dashboard-page .table-wrap,
.qms-dashboard-page .table-wrap td,
.qms-dashboard-page .table-wrap th {
  color: #143247 !important;
}

.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced {
  background-color: #12344d !important;
  background-image: linear-gradient(135deg, #102f44 0%, #14506a 48%, #1d728c 100%) !important;
  border: 1px solid rgba(188, 224, 237, 0.18) !important;
  box-shadow: 0 24px 42px rgba(9, 32, 48, 0.22) !important;
}

.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced::before {
  content: "" !important;
  background: radial-gradient(circle at top left, rgba(118, 204, 230, 0.18) 0%, rgba(118, 204, 230, 0) 64%) !important;
  opacity: 1 !important;
}

.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced::after {
  content: "" !important;
  background: radial-gradient(circle at right center, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 68%) !important;
  opacity: 1 !important;
}

.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .welcome-badge,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-copy h2,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-copy p,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-summary-card span,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-summary-card strong,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-summary-card small,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-chip span,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-chip strong,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-chip small {
  color: #f5fbff !important;
}

.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-summary-card,
.qms-dashboard-page section.qms-dashboard-masthead.qms-dashboard-hero.qms-dashboard-hero-forced .qms-masthead-chip {
  background: linear-gradient(180deg, rgba(14, 56, 79, 0.92) 0%, rgba(19, 74, 100, 0.9) 100%) !important;
  border: 1px solid rgba(202, 231, 241, 0.16) !important;
  box-shadow: 0 14px 26px rgba(8, 27, 40, 0.18) !important;
}

/* =========================
   Global Enterprise Visual Refresh
   Purely visual. No architecture or workflow changes.
========================= */

:root {
  --enterprise-bg: #eef3f7;
  --enterprise-surface: rgba(255, 255, 255, 0.94);
  --enterprise-surface-strong: #ffffff;
  --enterprise-surface-soft: #f7fafc;
  --enterprise-border-soft: rgba(15, 39, 68, 0.10);
  --enterprise-border-strong: rgba(15, 39, 68, 0.16);
  --enterprise-ink: #102433;
  --enterprise-ink-soft: #5f7484;
  --enterprise-accent: #176b87;
  --enterprise-accent-2: #1f7a5a;
  --enterprise-accent-warm: #f0c446;
  --enterprise-accent-warm-soft: #fff3c3;
  --enterprise-shadow-lg: 0 22px 48px rgba(13, 28, 41, 0.10);
  --enterprise-shadow-md: 0 14px 26px rgba(13, 28, 41, 0.08);
  --enterprise-shadow-sm: 0 8px 16px rgba(13, 28, 41, 0.06);
  --enterprise-radius-xl: 28px;
  --enterprise-radius-lg: 22px;
  --enterprise-radius-md: 16px;
  --enterprise-radius-sm: 12px;
}

body:not(.login-body) {
  background:
    radial-gradient(circle at 8% 8%, rgba(23, 107, 135, 0.07), transparent 24%),
    radial-gradient(circle at 92% 4%, rgba(31, 122, 90, 0.06), transparent 20%),
    linear-gradient(180deg, #f3f6f9 0%, #e9eef4 100%) !important;
  color: var(--enterprise-ink) !important;
}

body:not(.login-body) .app-layout {
  background: transparent !important;
}

body:not(.login-body) .main-wrapper {
  background: transparent !important;
}

body:not(.login-body) .page-content {
  color: var(--enterprise-ink) !important;
}

body:not(.login-body) .topbar,
body:not(.login-body) .topbar.topbar-enterprise {
  background:
    linear-gradient(135deg, rgba(18, 29, 40, 0.96), rgba(31, 42, 54, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--enterprise-shadow-lg) !important;
  border-radius: 0 0 var(--enterprise-radius-xl) var(--enterprise-radius-xl) !important;
  overflow: hidden !important;
}

body:not(.login-body) .topbar::before,
body:not(.login-body) .topbar.topbar-enterprise::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.08), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(240, 196, 70, 0.08), transparent 18%) !important;
  pointer-events: none !important;
}

body:not(.login-body) .topbar-heading-meta {
  gap: 8px !important;
}

body:not(.login-body) .topbar-module-chip,
body:not(.login-body) .topbar-date-chip,
body:not(.login-body) .topbar-pill,
body:not(.login-body) .topbar-lang-btn,
body:not(.login-body) .topbar-btn,
body:not(.login-body) .topbar-btn-ghost {
  border-radius: 999px !important;
  border: 1px solid rgba(240, 196, 70, 0.20) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f4f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
}

body:not(.login-body) .topbar-module-chip,
body:not(.login-body) .topbar-date-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

body:not(.login-body) .topbar-enterprise .page-title,
body:not(.login-body) .topbar-enterprise .page-subtitle,
body:not(.login-body) .topbar-enterprise .page-breadcrumbs,
body:not(.login-body) .topbar-enterprise .page-breadcrumbs span {
  color: #f7fafc !important;
}

body:not(.login-body) .topbar-enterprise .page-title {
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

body:not(.login-body) .topbar-enterprise .page-subtitle {
  max-width: 74ch !important;
  color: rgba(240, 246, 250, 0.80) !important;
}

body:not(.login-body) .topbar-enterprise .topbar-btn,
body:not(.login-body) .topbar-enterprise .topbar-lang-btn {
  color: #f7fafc !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body:not(.login-body) .topbar-enterprise .topbar-btn:hover,
body:not(.login-body) .topbar-enterprise .topbar-lang-btn:hover,
body:not(.login-body) .topbar-enterprise .topbar-btn:focus,
body:not(.login-body) .topbar-enterprise .topbar-lang-btn:focus {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

body:not(.login-body) .topbar-btn-back,
body:not(.login-body) .topbar-btn-primary,
body:not(.login-body) .btn-primary {
  background: linear-gradient(135deg, #f3d56a 0%, #e9bf28 100%) !important;
  color: #1c2730 !important;
  border: 1px solid rgba(194, 148, 0, 0.20) !important;
  box-shadow: 0 10px 20px rgba(194, 148, 0, 0.16) !important;
  font-weight: 800 !important;
}

body:not(.login-body) .topbar-btn-back:hover,
body:not(.login-body) .topbar-btn-primary:hover,
body:not(.login-body) .btn-primary:hover {
  background: linear-gradient(135deg, #ffe38c 0%, #f1c63e 100%) !important;
  color: #14202b !important;
}

body:not(.login-body) .topbar-btn-ghost,
body:not(.login-body) .btn-secondary,
body:not(.login-body) .btn-outline {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1c2730 !important;
  border: 1px solid rgba(15, 39, 68, 0.12) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
  font-weight: 700 !important;
}

body:not(.login-body) .topbar-btn-ghost:hover,
body:not(.login-body) .btn-secondary:hover,
body:not(.login-body) .btn-outline:hover {
  background: #ffffff !important;
  border-color: rgba(23, 107, 135, 0.20) !important;
  color: #102433 !important;
}

body:not(.login-body) .sidebar {
  background: #109487 !important;
  box-shadow: 18px 0 38px rgba(16, 36, 51, 0.10) !important;
}

body:not(.login-body) .sidebar-top {
  padding: 24px 18px 16px !important;
}

body:not(.login-body) .brand-mini h2 {
  letter-spacing: -0.03em !important;
  color: #112638 !important;
}

body:not(.login-body) .brand-mini p {
  color: #587184 !important;
}

body:not(.login-body) .brand-mini-logo,
body:not(.login-body) .brand-mini-logo-image-shell {
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 243, 248, 0.98)) !important;
  border: 1px solid rgba(15, 39, 68, 0.10) !important;
  box-shadow: var(--enterprise-shadow-md) !important;
}

body:not(.login-body) .sidebar-summary-card,
body:not(.login-body) .sidebar-support-card {
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 253, 0.95)) !important;
  border: 1px solid rgba(15, 39, 68, 0.10) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
}

body:not(.login-body) .nav-group-toggle {
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(239, 246, 251, 0.96)) !important;
  border: 1px solid rgba(15, 39, 68, 0.10) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
  padding: 13px 16px !important;
}

body:not(.login-body) .nav-group-toggle:hover,
body:not(.login-body) .nav-group.is-open .nav-group-toggle {
  background: linear-gradient(135deg, rgba(255, 248, 215, 0.96), rgba(255, 232, 144, 0.94)) !important;
  border-color: rgba(194, 148, 0, 0.20) !important;
  box-shadow: 0 12px 24px rgba(194, 148, 0, 0.12) !important;
}

body:not(.login-body) .nav-submenu {
  border-radius: 18px !important;
  background: rgba(248, 252, 255, 0.88) !important;
  border: 1px solid rgba(15, 39, 68, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), var(--enterprise-shadow-sm) !important;
}

body:not(.login-body) .nav-item {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(15, 39, 68, 0.08) !important;
  box-shadow: none !important;
}

body:not(.login-body) .nav-item:hover,
body:not(.login-body) .nav-item.active {
  background: linear-gradient(135deg, rgba(255, 247, 205, 0.98), rgba(255, 235, 143, 0.97)) !important;
  border-color: rgba(194, 148, 0, 0.20) !important;
  box-shadow: inset 3px 0 0 #d6401f, 0 10px 20px rgba(194, 148, 0, 0.10) !important;
}

body:not(.login-body) .nav-group-icon,
body:not(.login-body) .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(16, 36, 51, 0.92), rgba(23, 107, 135, 0.90)) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  direction: ltr !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 8px 16px rgba(16, 36, 51, 0.12) !important;
  flex: 0 0 auto !important;
}

body:not(.login-body) .nav-group-toggle,
body:not(.login-body) .nav-item,
body:not(.login-body) .topbar-btn,
body:not(.login-body) .topbar-lang-btn {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body:not(.login-body) .nav-label,
body:not(.login-body) .nav-group-toggle strong {
  color: #112638 !important;
}

body:not(.login-body) .nav-item small,
body:not(.login-body) .nav-group-toggle small,
body:not(.login-body) .sidebar-summary-card small,
body:not(.login-body) .sidebar-support-card small {
  color: #5f7484 !important;
}

body:not(.login-body) .user-box.user-box-compact {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 251, 0.96)) !important;
  border: 1px solid rgba(15, 39, 68, 0.10) !important;
  box-shadow: var(--enterprise-shadow-md) !important;
  border-radius: 20px !important;
}

body:not(.login-body) .user-box.user-box-compact .user-avatar {
  background: linear-gradient(135deg, #ffe27f 0%, #f0c446 100%) !important;
  color: #19222b !important;
}

body:not(.login-body) .user-box-head h4 {
  color: #102433 !important;
}

body:not(.login-body) .user-box p,
body:not(.login-body) .user-box-link {
  color: #5f7484 !important;
}

body:not(.login-body) .card-box,
body:not(.login-body) .inner-page-banner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 252, 0.96)) !important;
  border: 1px solid rgba(15, 39, 68, 0.08) !important;
  border-radius: var(--enterprise-radius-xl) !important;
  box-shadow: var(--enterprise-shadow-md) !important;
}

body:not(.login-body) .inner-page-banner {
  background:
    linear-gradient(135deg, rgba(18, 33, 48, 0.95), rgba(24, 72, 99, 0.95)) !important;
  color: #f7fafc !important;
}

body:not(.login-body) .inner-page-banner h2,
body:not(.login-body) .inner-page-banner p,
body:not(.login-body) .inner-page-banner .welcome-badge {
  color: inherit !important;
}

body:not(.login-body) .welcome-badge,
body:not(.login-body) .topbar-pill,
body:not(.login-body) .tag-pill,
body:not(.login-body) .status-pill,
body:not(.login-body) .summary-pill {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: inherit !important;
}

body:not(.login-body) .data-table thead th,
body:not(.login-body) .data-table th {
  background: linear-gradient(180deg, #eff4f8, #e8eef4) !important;
  color: #355166 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(15, 39, 68, 0.10) !important;
}

body:not(.login-body) .data-table tbody tr:hover {
  background: rgba(240, 244, 247, 0.86) !important;
}

body:not(.login-body) .data-table td,
body:not(.login-body) .data-table th {
  border-color: rgba(15, 39, 68, 0.08) !important;
}

body:not(.login-body) input,
body:not(.login-body) select,
body:not(.login-body) textarea {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 39, 68, 0.12) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #102433 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

body:not(.login-body) input:focus,
body:not(.login-body) select:focus,
body:not(.login-body) textarea:focus {
  outline: none !important;
  border-color: rgba(23, 107, 135, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(23, 107, 135, 0.12) !important;
}

body:not(.login-body) .alert-success,
body:not(.login-body) .alert-error,
body:not(.login-body) .alert-warning,
body:not(.login-body) .flash-message {
  border-radius: 18px !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
}

body:not(.login-body) .page-content .btn-primary,
body:not(.login-body) .page-content .btn-secondary,
body:not(.login-body) .page-content .btn-outline,
body:not(.login-body) .page-content .table-btn {
  border-radius: 999px !important;
}

body:not(.login-body) ::selection {
  background: rgba(240, 196, 70, 0.35) !important;
  color: #102433 !important;
}

body:not(.login-body) ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

body:not(.login-body) ::-webkit-scrollbar-track {
  background: rgba(15, 39, 68, 0.04);
}

body:not(.login-body) ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(23, 107, 135, 0.55), rgba(16, 50, 74, 0.65));
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.36);
}

body:not(.login-body) .table-wrap,
body:not(.login-body) .table-responsive,
body:not(.login-body) .erb-table-wrap,
body:not(.login-body) .training-table-wrap {
  border-radius: 18px !important;
}

body:not(.login-body) .topbar-search-toggle,
body:not(.login-body) .topbar-search-input-wrap {
  border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   Global Enterprise Polish Pass
   -------------------------------------------------------------------------- */
body:not(.login-body) {
  background:
    radial-gradient(circle at top left, rgba(28, 110, 136, 0.10), transparent 34%),
    radial-gradient(circle at top right, rgba(240, 196, 70, 0.08), transparent 26%),
    linear-gradient(180deg, #eff4f8 0%, #edf2f6 36%, #e8eef3 100%) !important;
}

body:not(.login-body) .app-layout {
  gap: 18px !important;
  padding: 12px !important;
}

body:not(.login-body) .page-content {
  padding: 18px 18px 24px !important;
}

body:not(.login-body) .page-content > .card-box,
body:not(.login-body) .page-content > .inner-page-banner,
body:not(.login-body) .page-content > .page-section,
body:not(.login-body) .page-content > .module-section,
body:not(.login-body) .page-content > .content-card {
  margin-bottom: 18px !important;
}

body:not(.login-body) .page-content h1,
body:not(.login-body) .page-content h2,
body:not(.login-body) .page-content h3 {
  letter-spacing: -0.03em !important;
}

body:not(.login-body) .page-content p,
body:not(.login-body) .page-content li,
body:not(.login-body) .page-content td,
body:not(.login-body) .page-content th,
body:not(.login-body) .page-content label {
  color: #34485a !important;
}

body:not(.login-body) .topbar.topbar-enterprise {
  margin: 0 0 14px !important;
  border-radius: 0 0 28px 28px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-left,
body:not(.login-body) .topbar.topbar-enterprise .topbar-right {
  gap: 16px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-action-row {
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn {
  min-height: 42px !important;
  padding: 0 16px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .menu-toggle {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact {
  min-width: 260px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-head {
  gap: 10px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-foot {
  gap: 8px !important;
}

body:not(.login-body) .sidebar {
  padding-top: 10px !important;
  padding-bottom: 18px !important;
}

body:not(.login-body) .sidebar-main {
  padding: 12px 12px 16px !important;
}

body:not(.login-body) .nav-group {
  margin-bottom: 12px !important;
}

body:not(.login-body) .nav-group-panel {
  padding: 10px 4px 4px !important;
}

body:not(.login-body) .nav-item {
  min-height: 52px !important;
  gap: 12px !important;
  overflow: hidden !important;
}

body:not(.login-body) .nav-item.active {
  transform: translateX(2px) !important;
}

body:not(.login-body) .nav-group-toggle strong,
body:not(.login-body) .nav-item .nav-label {
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

body:not(.login-body) .nav-group-toggle small,
body:not(.login-body) .nav-item small {
  line-height: 1.15 !important;
}

body:not(.login-body) .card-box {
  padding: 22px !important;
}

body:not(.login-body) .inner-page-banner {
  padding: 26px !important;
}

body:not(.login-body) .table-wrap,
body:not(.login-body) .table-responsive,
body:not(.login-body) .erb-table-wrap,
body:not(.login-body) .training-table-wrap {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 39, 68, 0.08) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
}

body:not(.login-body) .summary-pill,
body:not(.login-body) .status-pill,
body:not(.login-body) .tag-pill {
  padding: 8px 14px !important;
}

body:not(.login-body) .flash-message {
  margin: 0 18px 18px !important;
}

@media (max-width: 1180px) {
  body:not(.login-body) .page-content {
    padding: 14px 14px 20px !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise {
    margin-bottom: 12px !important;
  }
}

@media (max-width: 920px) {
  body:not(.login-body) .app-layout {
    padding: 0 !important;
    gap: 10px !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise {
    border-radius: 0 0 24px 24px !important;
  }

  body:not(.login-body) .card-box,
  body:not(.login-body) .inner-page-banner {
    padding: 18px !important;
  }
}

/* Global compact header: remove explanatory chrome and keep actions/user in one row. */
body:not(.login-body) .topbar.topbar-enterprise {
  min-height: 70px !important;
  padding: 10px 18px !important;
  margin-bottom: 12px !important;
  align-items: center !important;
  gap: 14px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-heading-meta,
body:not(.login-body) .topbar.topbar-enterprise .page-subtitle,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs,
body:not(.login-body) .topbar.topbar-enterprise .page-breadcrumbs span,
body:not(.login-body) .inner-page-banner .welcome-badge,
body:not(.login-body) .inner-page-banner p,
body:not(.login-body) .accreditation-banner .welcome-badge,
body:not(.login-body) .accreditation-banner p {
  display: none !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-left {
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-heading-stack {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .page-title {
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: min(760px, 56vw) !important;
}

body:not(.login-body) .topbar.topbar-enterprise .menu-toggle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 12px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  margin-left: auto !important;
}

body.lang-ar:not(.login-body) .topbar.topbar-enterprise .topbar-right {
  margin-left: 0 !important;
  margin-right: auto !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-search-toggle {
  min-width: 42px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact {
  min-width: 0 !important;
  width: auto !important;
  padding: 8px 10px !important;
  gap: 9px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-content,
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-head,
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-foot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact h4,
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact p,
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link,
body:not(.login-body) .topbar.topbar-enterprise .user-access-pill {
  white-space: nowrap !important;
  margin: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact h4 {
  max-width: 110px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact p {
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-access-pill {
  min-height: 22px !important;
  padding: 3px 8px !important;
}

body:not(.login-body) .inner-page-banner,
body:not(.login-body) .inner-page-banner.accreditation-banner {
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  min-height: auto !important;
  align-items: center !important;
}

body:not(.login-body) .inner-page-banner h2,
body:not(.login-body) .inner-page-banner.accreditation-banner h2 {
  margin: 0 !important;
  font-size: clamp(22px, 1.8vw, 28px) !important;
  line-height: 1.1 !important;
}

@media (max-width: 1180px) {
  body:not(.login-body) .topbar.topbar-enterprise {
    flex-wrap: wrap !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise .page-title {
    max-width: min(620px, 78vw) !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise .topbar-right {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 720px) {
  body:not(.login-body) .topbar.topbar-enterprise .topbar-action-row,
  body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact,
  body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-content {
    flex-wrap: wrap !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise .page-title {
    white-space: normal !important;
  }
}

/* ==========================================================================
   ROYAL SAUDI NATIONAL PREMIUM ENTERPRISE DESIGN LAYER (2026 UPDATE)
   Blending World-Class Enterprise UX with Royal Saudi Green & Desert Gold Identity
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Readex+Pro:wght@300;400;500;600;700&display=swap');

:root {
  --saudi-font: 'Outfit', 'Readex Pro', system-ui, -apple-system, sans-serif;
  --saudi-green-deep: hsl(160, 85%, 12%);
  --saudi-green-vibrant: hsl(150, 76%, 30%);
  --saudi-gold: hsl(42, 60%, 46%);
  --saudi-gold-hover: hsl(42, 70%, 55%);
  --saudi-sand-bg: hsl(40, 20%, 97%);
  --saudi-card-bg: rgba(255, 255, 255, 0.88);
  --saudi-shadow-ambient: 0 8px 32px rgba(13, 50, 32, 0.03);
  --saudi-shadow-elevate: 0 16px 40px rgba(13, 50, 32, 0.07);
  --saudi-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Apply Royal Saudi Typography & Background Globally */
body:not(.login-body) {
  font-family: var(--saudi-font) !important;
  letter-spacing: -0.010em !important;
  -webkit-font-smoothing: antialiased !important;
  background:
    radial-gradient(circle at top left, rgba(24, 114, 69, 0.06), transparent 36%),
    radial-gradient(circle at bottom right, rgba(180, 140, 70, 0.05), transparent 30%),
    linear-gradient(180deg, #f7f9f7 0%, #f4f6f3 50%, #edf1ec 100%) !important;
}

/* Premium Card-Box Glassmorphism with Saudi Accents */
body:not(.login-body) .card-box,
body:not(.login-body) .content-card,
body:not(.login-body) .page-section,
body:not(.login-body) .module-section,
body:not(.login-body) .table-wrap,
body:not(.login-body) .table-responsive {
  background: var(--saudi-card-bg) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 20px !important;
  box-shadow: var(--saudi-shadow-ambient), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: var(--saudi-transition) !important;
}

body:not(.login-body) .card-box:hover,
body:not(.login-body) .content-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--saudi-shadow-elevate), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(24, 114, 69, 0.15) !important;
}

/* Elegant Royal Saudi Topbar */
body:not(.login-body) .topbar.topbar-enterprise {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 2px solid rgba(180, 140, 70, 0.25) !important; /* Soft Camel/Gold accent line */
  box-shadow: 0 4px 30px rgba(13, 50, 32, 0.02) !important;
  margin: 0 0 18px !important;
  border-radius: 0 0 24px 24px !important;
}

/* Overhaul Sidebar to Deep Saudi Green & Gold Highlights */
body:not(.login-body) .sidebar {
  background: linear-gradient(180deg, var(--saudi-green-deep) 0%, hsl(160, 90%, 6%) 100%) !important;
  border-right: 1px solid rgba(180, 140, 70, 0.15) !important;
  box-shadow: 10px 0 40px rgba(13, 50, 32, 0.2) !important;
}

body.lang-ar:not(.login-body) .sidebar {
  border-right: none !important;
  border-left: 1px solid rgba(180, 140, 70, 0.15) !important;
  box-shadow: -10px 0 40px rgba(13, 50, 32, 0.2) !important;
}

body:not(.login-body) .sidebar-inner {
  background: transparent !important;
}

body:not(.login-body) .sidebar .nav-item a,
body:not(.login-body) .sidebar .nav-group-toggle {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--saudi-font) !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 5px 10px !important;
  transition: var(--saudi-transition) !important;
}

body:not(.login-body) .sidebar .nav-item a:hover,
body:not(.login-body) .sidebar .nav-group-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--saudi-gold-hover) !important;
  transform: translateX(4px) !important;
}

body.lang-ar:not(.login-body) .sidebar .nav-item a:hover,
body.lang-ar:not(.login-body) .sidebar .nav-group-toggle:hover {
  transform: translateX(-4px) !important;
}

/* Active Sidebar Menu Gold Indicator */
body:not(.login-body) .sidebar .nav-item.active a,
body:not(.login-body) .sidebar .nav-item.is-active a {
  background: linear-gradient(90deg, rgba(180, 140, 70, 0.16) 0%, rgba(180, 140, 70, 0.03) 100%) !important;
  color: var(--saudi-gold) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--saudi-gold) !important;
  box-shadow: inset 4px 0 12px rgba(180, 140, 70, 0.05) !important;
}

body.lang-ar:not(.login-body) .sidebar .nav-item.active a,
body.lang-ar:not(.login-body) .sidebar .nav-item.is-active a {
  border-left: none !important;
  border-right: 3px solid var(--saudi-gold) !important;
  background: linear-gradient(-90deg, rgba(180, 140, 70, 0.16) 0%, rgba(180, 140, 70, 0.03) 100%) !important;
  box-shadow: inset -4px 0 12px rgba(180, 140, 70, 0.05) !important;
}

/* Saudi Green & Camel Gold Accent Data Tables */
body:not(.login-body) .data-table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  background: transparent !important;
}

body:not(.login-body) .data-table thead th {
  background: rgba(24, 114, 69, 0.08) !important;
  color: var(--saudi-green-deep) !important;
  font-family: var(--saudi-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  padding: 15px 18px !important;
  letter-spacing: 0.01em !important;
}

body:not(.login-body) .data-table tbody tr {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(13, 50, 32, 0.01) !important;
  transition: var(--saudi-transition) !important;
}

body:not(.login-body) .data-table tbody tr:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(13, 50, 32, 0.05) !important;
  background: #fdfefd !important;
  border-color: rgba(180, 140, 70, 0.2) !important;
}

body:not(.login-body) .data-table tbody td {
  font-family: var(--saudi-font) !important;
  padding: 14px 18px !important;
  border: none !important;
  border-top: 1px solid rgba(24, 114, 69, 0.04) !important;
  border-bottom: 1px solid rgba(24, 114, 69, 0.04) !important;
}

body:not(.login-body) .data-table tbody td:first-child {
  border-left: 1px solid rgba(24, 114, 69, 0.04) !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

body:not(.login-body) .data-table tbody td:last-child {
  border-right: 1px solid rgba(24, 114, 69, 0.04) !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Arabic Specific RTL Adjustments for Tables */
body.lang-ar:not(.login-body) .data-table tbody td:first-child {
  border-left: none !important;
  border-right: 1px solid rgba(24, 114, 69, 0.04) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

body.lang-ar:not(.login-body) .data-table tbody td:last-child {
  border-right: none !important;
  border-left: 1px solid rgba(24, 114, 69, 0.04) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

/* Beautiful Green & Gold Buttons */
body:not(.login-body) .btn-primary,
body:not(.login-body) .page-content .btn-primary {
  background: linear-gradient(135deg, var(--saudi-green-deep) 0%, var(--saudi-green-vibrant) 100%) !important;
  color: white !important;
  border: none !important;
  font-family: var(--saudi-font) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(24, 114, 69, 0.25) !important;
  transition: var(--saudi-transition) !important;
}

body:not(.login-body) .btn-primary:hover,
body:not(.login-body) .page-content .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(24, 114, 69, 0.38) !important;
  filter: brightness(1.08) !important;
  border-bottom: 2px solid var(--saudi-gold) !important;
}

/* Animated Saudi Green Classification Status Badges */
.status-pill.auto-matched {
  background: linear-gradient(135deg, var(--saudi-green-vibrant) 0%, hsl(148, 86%, 17%) 100%) !important;
  color: white !important;
  font-family: var(--saudi-font) !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(24, 114, 69, 0.25) !important;
  position: relative !important;
  padding-left: 22px !important;
  border-radius: 999px !important;
}

body.lang-ar .status-pill.auto-matched {
  padding-left: 14px !important;
  padding-right: 22px !important;
}

.status-pill.auto-matched::before {
  content: '' !important;
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--saudi-gold) !important; /* Camel Gold Pulse Dot */
  border-radius: 50% !important;
  box-shadow: 0 0 8px var(--saudi-gold) !important;
  animation: pulse-badge-saudi 1.8s infinite !important;
}

body.lang-ar .status-pill.auto-matched::before {
  left: auto !important;
  right: 9px !important;
}

@keyframes pulse-badge-saudi {
  0% {
    transform: translateY(-50%) scale(0.9);
    opacity: 0.65;
  }
  50% {
    transform: translateY(-50%) scale(1.35);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(0.9);
    opacity: 0.65;
  }
}

/* Saudi Executive QMS Theme Layer - additive and non-destructive */
body:not(.login-body) {
  --qms-saudi-green: #006c35;
  --qms-saudi-green-deep: #034b30;
  --qms-saudi-green-soft: #e6f3ed;
  --qms-saudi-gold: #c9a227;
  --qms-saudi-gold-soft: #fff5d6;
  --qms-saudi-ink: #102a43;
  --qms-saudi-stone: #f7f4ec;
  --qms-saudi-card: rgba(255, 255, 255, 0.94);
  --qms-saudi-line: rgba(16, 42, 67, 0.12);
  --qms-saudi-shadow-sm: 0 10px 24px rgba(16, 42, 67, 0.08);
  background:
    radial-gradient(circle at 90% 3%, rgba(201, 162, 39, 0.10), transparent 22%),
    linear-gradient(180deg, #faf8f1 0%, #f3efe5 100%) !important;
  color: var(--qms-saudi-ink);
}

body:not(.login-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.20;
  background-image:
    linear-gradient(30deg, rgba(0, 108, 53, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(0, 108, 53, 0.04) 87.5%, rgba(0, 108, 53, 0.04)),
    linear-gradient(150deg, rgba(201, 162, 39, 0.035) 12%, transparent 12.5%, transparent 87%, rgba(201, 162, 39, 0.035) 87.5%, rgba(201, 162, 39, 0.035));
  background-size: 42px 42px;
}

body:not(.login-body) .topbar,
body:not(.login-body) .topbar.topbar-enterprise {
  min-height: 74px !important;
  padding: 12px 18px !important;
  border-radius: 0 0 24px 24px !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(201, 162, 39, 0.16), transparent 24%),
    linear-gradient(135deg, #0d2f25 0%, #102a43 58%, #17324a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 16px 34px rgba(16, 42, 67, 0.20) !important;
}

body:not(.login-body) .topbar.topbar-enterprise.is-compact {
  min-height: 70px !important;
}

body:not(.login-body) .topbar-left {
  min-width: 0 !important;
  gap: 12px !important;
}

body:not(.login-body) .topbar-heading-stack {
  min-width: 0 !important;
}

body:not(.login-body) .topbar-enterprise .page-title {
  max-width: min(760px, 52vw) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(21px, 2vw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

body:not(.login-body) .topbar-right,
body:not(.login-body) .topbar-action-row,
body:not(.login-body) .user-box-content,
body:not(.login-body) .user-box-head,
body:not(.login-body) .user-box-foot {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

body:not(.login-body) .topbar-right {
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body:not(.login-body) .topbar-action-row {
  gap: 8px !important;
}

body:not(.login-body) .topbar-enterprise .topbar-btn,
body:not(.login-body) .topbar-enterprise .topbar-lang-btn,
body:not(.login-body) .topbar-enterprise .menu-toggle {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

body:not(.login-body) .topbar-enterprise .menu-toggle {
  width: 42px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

body:not(.login-body) .topbar-btn-back,
body:not(.login-body) .topbar-btn-primary,
body:not(.login-body) .btn-primary {
  background: linear-gradient(135deg, #f3d76e 0%, var(--qms-saudi-gold) 100%) !important;
  color: #142018 !important;
  box-shadow: 0 10px 20px rgba(201, 162, 39, 0.18) !important;
}

body:not(.login-body) .user-box.user-box-compact {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 7px 10px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

body:not(.login-body) .user-box.user-box-compact .user-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
}

body:not(.login-body) .user-box-content,
body:not(.login-body) .user-box-head,
body:not(.login-body) .user-box-foot {
  gap: 7px !important;
  min-width: 0 !important;
}

body:not(.login-body) .user-box-foot {
  margin-top: 0 !important;
}

body:not(.login-body) .user-box-head h4,
body:not(.login-body) .user-box p,
body:not(.login-body) .user-box-link {
  max-width: 150px !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:not(.login-body) .user-box-head h4 {
  color: #fff !important;
  font-size: 12px !important;
}

body:not(.login-body) .user-box p,
body:not(.login-body) .user-box-link {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 10px !important;
}

body:not(.login-body) .user-access-pill {
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

body:not(.login-body) .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 21%),
    linear-gradient(180deg, #007a4d 0%, #006c35 42%, #064c37 100%) !important;
}

body:not(.login-body) .nav-group-toggle,
body:not(.login-body) .nav-item {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

body:not(.login-body) .nav-group-toggle:hover,
body:not(.login-body) .nav-group.is-open .nav-group-toggle,
body:not(.login-body) .nav-item:hover,
body:not(.login-body) .nav-item.active {
  background: linear-gradient(135deg, #fff8df 0%, #efd27d 100%) !important;
  border-color: rgba(201, 162, 39, 0.38) !important;
  box-shadow: inset 3px 0 0 var(--qms-saudi-green), 0 12px 24px rgba(16, 42, 67, 0.10) !important;
}

body:not(.login-body) .nav-group-icon,
body:not(.login-body) .nav-icon,
body:not(.login-body) .sidebar-flyout-icon {
  background: linear-gradient(135deg, #064c37, #102a43) !important;
}

body:not(.login-body) .card-box,
body:not(.login-body) .content-card,
body:not(.login-body) .inner-page-banner,
body:not(.login-body) .stat-card,
body:not(.login-body) .metric-card {
  background: var(--qms-saudi-card) !important;
  border: 1px solid var(--qms-saudi-line) !important;
  box-shadow: var(--qms-saudi-shadow-sm) !important;
}

body:not(.login-body) .data-table thead th,
body:not(.login-body) table thead th {
  background: linear-gradient(180deg, #f8f4e8 0%, #eee6d3 100%) !important;
  color: var(--qms-saudi-ink) !important;
}

body.page-shell-sdl:not(.login-body) .page-content,
body.page-shell-cbahi:not(.login-body) .page-content,
body.page-shell-cap:not(.login-body) .page-content,
body.page-shell-racs:not(.login-body) .page-content,
body.page-shell-inspection:not(.login-body) .page-content,
body.page-shell-accreditation:not(.login-body) .page-content {
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 108, 53, 0.08), transparent 22%),
    linear-gradient(180deg, #fbf8ef 0%, #f4efe4 100%) !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .cap-shell {
  max-width: 1480px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 16px !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .cap-header {
  margin: 0 !important;
  padding: 24px 26px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(201, 162, 39, 0.18), transparent 24%),
    linear-gradient(135deg, #0d2f25 0%, #102a43 62%, #17324a 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(16, 42, 67, 0.16) !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .cap-header h1 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(24px, 2.3vw, 36px) !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .cap-header p {
  color: rgba(255, 255, 255, 0.84) !important;
  margin: 0 !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .header,
body.page-shell-cap:not(.login-body) .cap-legacy-page .legacy-header {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(201, 162, 39, 0.18), transparent 24%),
    linear-gradient(135deg, #0d2f25 0%, #102a43 62%, #17324a 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(16, 42, 67, 0.16) !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .header h1,
body.page-shell-cap:not(.login-body) .cap-legacy-page .legacy-header h1,
body.page-shell-cap:not(.login-body) .cap-legacy-page .header h2,
body.page-shell-cap:not(.login-body) .cap-legacy-page .legacy-header h2 {
  color: #fff !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .header p,
body.page-shell-cap:not(.login-body) .cap-legacy-page .legacy-header p {
  color: rgba(255, 255, 255, 0.86) !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .cap-nav {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .cap-nav a {
  border-radius: 999px !important;
  border: 1px solid rgba(16, 42, 67, 0.10) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #102a43 !important;
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.08) !important;
  font-weight: 700 !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .cap-nav a.active {
  background: linear-gradient(135deg, #006c35, #034b30) !important;
  color: #fff !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .card {
  border-radius: 22px !important;
  border: 1px solid rgba(16, 42, 67, 0.12) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 28px rgba(16, 42, 67, 0.08) !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .card h1,
body.page-shell-cap:not(.login-body) .cap-legacy-page .card h2,
body.page-shell-cap:not(.login-body) .cap-legacy-page .card h3,
body.page-shell-cap:not(.login-body) .cap-legacy-page .card .value {
  color: #102a43 !important;
}

body.page-shell-cap:not(.login-body) .cap-legacy-page .small {
  color: #64748b !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .inspection-hero {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 86% 42%, rgba(103, 173, 226, 0.58), transparent 21%),
    linear-gradient(135deg, #0d2f25 0%, #102a43 56%, #2f7fc6 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(16, 42, 67, 0.16) !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .inspection-hero h1,
body.page-shell-inspection:not(.login-body) .inspection-module .inspection-hero h2,
body.page-shell-inspection:not(.login-body) .inspection-module .inspection-hero p,
body.page-shell-inspection:not(.login-body) .inspection-module .inspection-hero strong {
  color: #fff !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .inspection-hero p {
  color: rgba(255, 255, 255, 0.86) !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .inspection-badge {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #fff !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .inspection-chip {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .inspection-chip span,
body.page-shell-inspection:not(.login-body) .inspection-module .score-ring-inner small {
  color: rgba(255, 255, 255, 0.76) !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .score-ring-inner {
  background: #102a43 !important;
  color: #fff !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .score-ring-inner span {
  color: #fff !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .card-box,
body.page-shell-inspection:not(.login-body) .inspection-module .inspection-card {
  border-radius: 22px !important;
  border: 1px solid rgba(16, 42, 67, 0.12) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(16, 42, 67, 0.08) !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .card-head h3,
body.page-shell-inspection:not(.login-body) .inspection-module .section-title {
  color: #102a43 !important;
}

body.page-shell-inspection:not(.login-body) .inspection-module .card-head span,
body.page-shell-inspection:not(.login-body) .inspection-module .inspection-note {
  color: #455a64 !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module .accr-kpi-grid {
  gap: 14px !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module .accr-kpi-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(16, 42, 67, 0.12) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 238, 0.94)) !important;
  box-shadow: 0 12px 28px rgba(16, 42, 67, 0.08) !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module .accr-kpi-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 14px 0 14px !important;
  height: 3px !important;
  border-radius: 999px 999px 0 0 !important;
  background: linear-gradient(90deg, var(--qms-saudi-green), var(--qms-saudi-gold)) !important;
  opacity: 0.65 !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module .kpi-label {
  color: rgba(16, 42, 67, 0.72) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module .kpi-value {
  color: var(--qms-saudi-ink) !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module .compliance-inline-note,
body.page-shell-cbahi:not(.login-body) .accreditation-module .note {
  border: 1px solid rgba(201, 162, 39, 0.30) !important;
  background: linear-gradient(180deg, #fff9e7, #fffdf7) !important;
  color: #5b4610 !important;
  border-radius: 16px !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module details summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--qms-saudi-green-deep) !important;
  font-weight: 800 !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module details summary::-webkit-details-marker {
  display: none !important;
}

body.page-shell-cbahi:not(.login-body) .accreditation-module details summary::before {
  content: "▾" !important;
  color: var(--qms-saudi-gold) !important;
}

@media (min-width: 993px) {
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    width: 206px !important;
    min-width: 206px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage {
    width: 330px !important;
    max-width: min(360px, 32vw) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-shell {
    background:
      radial-gradient(circle at 88% 0%, rgba(201, 162, 39, 0.14), transparent 24%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 242, 231, 0.98)) !important;
    border: 1px solid rgba(16, 42, 67, 0.14) !important;
    box-shadow: 0 24px 54px rgba(16, 42, 67, 0.18) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links {
    max-height: calc(100vh - 156px) !important;
  }
}

@media (max-width: 1180px) {
  body:not(.login-body) .topbar-right {
    gap: 6px !important;
  }

  body:not(.login-body) .topbar-enterprise .page-title {
    max-width: 42vw !important;
  }

  body:not(.login-body) .user-box-foot p {
    display: none !important;
  }
}

@media print {
  html, body, body *, html * {
    font-family: "Times New Roman", Times, serif !important;
  }

  body, p, span, td, th, li, a, input, select, textarea, div {
    font-size: 12pt !important;
  }

  h1, h2, h3, h4, h5, h6, strong, th, b {
    font-weight: bold !important;
  }
}

/* ==========================================================================
   PREMIUM GLOBAL SYSTEM-WIDE NIGHT MODE (الوضع الليلي والنهاري)
   ========================================================================== */

/* Redefine global Saudi-Premium theme variables in night mode context */
body.night-mode {
  --brand-surface: #0f172a !important;      /* Deep Slate dark */
  --brand-surface-2: #1e293b !important;    /* Card Slate dark */
  --brand-border: #334155 !important;        /* Slate-700 border */
  --brand-text: #ffffff !important;          /* Pure white headers */
  --brand-text-soft: #cbd5e1 !important;     /* Slate-300 readable text */
  --brand-blue-900: #0f172a !important;
  --brand-blue-800: #1e293b !important;
  --brand-blue-700: #334155 !important;
  --brand-blue-600: #475569 !important;
  --brand-blue-100: #1e293b !important;
  --brand-blue-050: #0f172a !important;
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
}

/* Eliminate fuzzy, murky glassmorphic distortions and browser backdrop-filters */
body.night-mode *,
body.night-mode *::before,
body.night-mode *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

/* Global Link Readability */
body.night-mode a:not(.btn):not(.topbar-btn):not(.tab-item):not(.nav-item) {
  color: #38bdf8 !important; /* Premium readable sky blue */
  transition: color 0.2s ease;
}
body.night-mode a:not(.btn):not(.topbar-btn):not(.tab-item):not(.nav-item):hover {
  color: #7dd3fc !important;
  text-decoration: underline !important;
}

/* Typography, Headings & Bold Text */
body.night-mode h1,
body.night-mode h2,
body.night-mode h3,
body.night-mode h4,
body.night-mode h5,
body.night-mode h6,
body.night-mode strong,
body.night-mode b,
body.night-mode label,
body.night-mode th,
body.night-mode .page-title,
body.night-mode .card-title,
body.night-mode .table-title-wrap strong,
body.night-mode .quality-users-block-head strong {
  color: #ffffff !important;
}

body.night-mode p,
body.night-mode span,
body.night-mode li,
body.night-mode td,
body.night-mode small,
body.night-mode div.card-box p,
body.night-mode div.card-box span,
body.night-mode div.card-box small {
  color: #cbd5e1 !important;
}

/* Core Container Panels & Cards */
body.night-mode .inner-page-banner,
body.night-mode .card-box,
body.night-mode .card,
body.night-mode .stat-card,
body.night-mode .overview-item,
body.night-mode .quality-users-form-block,
body.night-mode .table-wrap,
body.night-mode .panel,
body.night-mode .box,
body.night-mode .widget-box,
body.night-mode .cbahi-panel,
body.night-mode .iso17025-panel,
body.night-mode .surveyor-control-panel,
body.night-mode .chapter-details,
body.night-mode .standard-details,
body.night-mode .evidence-card {
  background: #1e293b !important;
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
  color: #cbd5e1 !important;
}

/* Sidebar and Navigation */
body.night-mode .sidebar {
  background: #1e293b !important;
  border-right: 1px solid #334155 !important;
  border-left: 1px solid #334155 !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}
body.night-mode .sidebar .brand-mini h2 {
  color: #ffffff !important;
}
body.night-mode .sidebar .nav-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
body.night-mode .sidebar .nav-item:hover,
body.night-mode .sidebar .nav-item.active,
body.night-mode .sidebar .nav-item.is-active {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}
body.night-mode .sidebar .nav-item a,
body.night-mode .sidebar .nav-item.active a,
body.night-mode .sidebar .nav-item.is-active a {
  color: #ffffff !important;
}
body.night-mode .sidebar .logout-btn {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}
body.night-mode .sidebar-summary-card,
body.night-mode .sidebar-support-card {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}
body.night-mode .sidebar-summary-card strong,
body.night-mode .sidebar-support-card strong {
  color: #ffffff !important;
}

/* Topbar Styles */
body.night-mode .topbar.topbar-enterprise {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
body.night-mode .topbar.topbar-enterprise .topbar-btn,
body.night-mode .topbar.topbar-enterprise .topbar-lang-btn,
body.night-mode .topbar.topbar-enterprise .topbar-theme-toggle {
  color: #f8fafc !important;
  border-color: #334155 !important;
  background: #0f172a !important;
}
body.night-mode .topbar.topbar-enterprise .topbar-btn:hover,
body.night-mode .topbar.topbar-enterprise .topbar-lang-btn:hover,
body.night-mode .topbar.topbar-enterprise .topbar-theme-toggle:hover {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}
body.night-mode .topbar.topbar-enterprise .topbar-lang-btn.is-active {
  background: linear-gradient(135deg, #f3d56a 0%, #e9bf28 100%) !important;
  color: #1c2730 !important;
  font-weight: bold !important;
}
body.night-mode .topbar-search-panel {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}
body.night-mode .topbar-search-input {
  background-color: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}
body.night-mode .topbar-search-result {
  background-color: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}
body.night-mode .topbar-search-result:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* User Box in Topbar */
body.night-mode .user-box-head h4,
body.night-mode .user-box-compact h4,
body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact h4 {
  color: #ffffff !important;
}
body.night-mode .user-box p,
body.night-mode .user-box-compact p,
body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact p {
  color: #cbd5e1 !important;
}
body.night-mode .user-box-link,
body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link {
  color: #38bdf8 !important;
}
body.night-mode .user-box-link:hover,
body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link:hover {
  color: #7dd3fc !important;
  text-decoration: underline !important;
}
body.night-mode .user-avatar {
  background-color: #334155 !important;
  color: #ffffff !important;
  border: 1px solid #475569 !important;
}
body.night-mode .user-access-pill {
  background-color: #334155 !important;
  color: #f8fafc !important;
}

/* High Contrast Readable Tables */
body.night-mode table,
body.night-mode .table,
body.night-mode .data-table {
  background-color: #1e293b !important;
  border-collapse: collapse !important;
  border-color: #334155 !important;
}
body.night-mode table th,
body.night-mode .table th,
body.night-mode .data-table th {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-bottom: 2px solid #334155 !important;
  border-top: 1px solid #334155 !important;
  border-left: 1px solid #334155 !important;
  border-right: 1px solid #334155 !important;
}
body.night-mode table td,
body.night-mode .table td,
body.night-mode .data-table td {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid #334155 !important;
  border-top: 1px solid #334155 !important;
  border-left: 1px solid #334155 !important;
  border-right: 1px solid #334155 !important;
}
body.night-mode table tr:nth-child(even) td,
body.night-mode .table tr:nth-child(even) td,
body.night-mode .data-table tr:nth-child(even) td {
  background-color: #151f32 !important; /* Slightly darker slate-blue for distinction */
}
body.night-mode table tr:hover td,
body.night-mode .table tr:hover td,
body.night-mode .data-table tr:hover td {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Form Controls (Hardening) */
body.night-mode input[type="text"],
body.night-mode input[type="email"],
body.night-mode input[type="password"],
body.night-mode input[type="search"],
body.night-mode input[type="number"],
body.night-mode input[type="date"],
body.night-mode select,
body.night-mode textarea,
body.night-mode .form-control {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
  border-radius: 8px !important;
}
body.night-mode input[type="text"]:focus,
body.night-mode input[type="email"]:focus,
body.night-mode input[type="password"]:focus,
body.night-mode input[type="search"]:focus,
body.night-mode input[type="number"]:focus,
body.night-mode input[type="date"]:focus,
body.night-mode select:focus,
body.night-mode textarea:focus,
body.night-mode .form-control:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
  outline: none !important;
}

/* Accordion Specific Styling (CBAHI / ISO) */
body.night-mode .chapter-summary,
body.night-mode .standard-summary {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}
body.night-mode .chapter-summary:hover,
body.night-mode .standard-summary:hover {
  background-color: #334155 !important;
}
body.night-mode .chapter-content-box,
body.night-mode .standard-content-box {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
  border-top: 1px solid #334155 !important;
}
body.night-mode .standard-details[open] > .standard-summary {
  border-bottom-color: #334155 !important;
  background-color: #1e293b !important;
}
body.night-mode .substandards-wrapper {
  background-color: #0f172a !important;
  border-color: #0f766e !important;
}
body.night-mode .substandard-item {
  color: #cbd5e1 !important;
  border-bottom: 1px solid #334155 !important;
}
body.night-mode .substandard-item:last-child {
  border-bottom: none !important;
}

/* Badge specific updates for readability */
body.night-mode .surveyor-badge-label,
body.night-mode .badge {
  filter: brightness(0.9) contrast(1.1);
}
body.night-mode .surveyor-badge-label.status-not-applicable {
  background-color: #334155 !important;
  color: #cbd5e1 !important;
}

/* Dashboard Metric Cards */
body.night-mode .metric-card,
body.night-mode .metric-value,
body.night-mode .metric-label {
  color: #ffffff !important;
}
body.night-mode .metric-trend {
  color: #38bdf8 !important;
}

/* ==========================================================================
   Premium Option 3: Microsoft 365 Style iconic rail, grid overlay, & horizontal sub-menu
   ========================================================================== */

@media (min-width: 993px) {
  /* Left Sidebar iconic Rail */
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    width: 70px !important;
    min-width: 70px !important;
    padding: 24px 8px !important;
    overflow: visible !important;
    border-right: 1px solid rgba(0, 108, 53, 0.08) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.01) !important;
    background: #ffffff !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-scroll {
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    border-right: none !important;
    border-left: 1px solid rgba(0, 108, 53, 0.08) !important;
  }

  /* Compact Primary Branding Logo */
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .brand-mini {
    justify-content: center !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    display: flex !important;
  }
  
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .brand-mini-logo-image-shell {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(0, 108, 53, 0.15) !important;
    border: 1px solid rgba(0, 108, 53, 0.1) !important;
  }
  
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .brand-mini-logo-image {
    max-width: 32px !important;
  }
  
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .brand-mini-copy {
    display: none !important;
  }

  /* Compact Toggles */
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-nav-flyout {
    gap: 8px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-toggle {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 6px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
  }
  
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-chevron,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-meta > span:last-child,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-summary-card,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-support-card {
    display: none !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-meta {
    justify-content: center !important;
    width: 100% !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-icon {
    margin: 0 !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-toggle:hover .nav-group-icon {
    background: #e6f3ed !important;
    color: #006c35 !important;
    border-color: rgba(0, 108, 53, 0.2) !important;
    transform: scale(1.05) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group.is-open .nav-group-toggle .nav-group-icon,
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group.is-open .nav-group-icon {
    background: linear-gradient(135deg, #008744 0%, #005c2e 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(0, 108, 53, 0.25) !important;
  }

  /* Compact Footer */
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-footer {
    padding: 16px 0 0 !important;
    margin: 12px 0 0 !important;
    border-top: 1px solid rgba(0, 108, 53, 0.08) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .logout-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; /* Hide text */
    margin: 0 auto !important;
    background: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    color: #ef4444 !important;
    transition: all 0.2s ease !important;
  }
  
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .logout-btn::before {
    content: "→" !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .logout-btn::before {
    content: "←" !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .logout-btn:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
  }

  /* Smart Floating Expandable Grid Panel (Flyout Stage) */
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage {
    position: absolute !important;
    top: 16px !important;
    left: calc(100% + 14px) !important;
    width: 340px !important;
    height: auto !important;
    max-height: calc(100vh - 36px) !important;
    z-index: 120 !important;
    display: none !important;
    pointer-events: none !important;
  }

  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage {
    left: auto !important;
    right: calc(100% + 14px) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage.is-visible {
    display: block !important;
    pointer-events: auto !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-shell {
    height: auto !important;
    max-height: calc(100vh - 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 20px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 108, 53, 0.12) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    pointer-events: auto !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-icon {
    display: none !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-copy strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #006c35 !important;
    display: block !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-copy small {
    color: #64748b !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-top: 3px !important;
    display: block !important;
  }

  /* 2-Column interactive grid */
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    max-height: calc(100vh - 160px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    scrollbar-width: thin !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #fafafc !important;
    border: 1px solid #f1f5f9 !important;
    color: #475569 !important;
    margin-bottom: 0 !important;
    transition: all 0.2s ease !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item:hover {
    background: #e6f3ed !important;
    border-color: rgba(0, 108, 53, 0.2) !important;
    color: #006c35 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 108, 53, 0.05) !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item.active {
    background: #e6f3ed !important;
    border-color: rgba(0, 108, 53, 0.3) !important;
    color: #006c35 !important;
    box-shadow: inset 0 0 0 1px #006c35 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item .nav-icon {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    background: #e2e8f0 !important;
    color: #475569 !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item.active .nav-icon {
    background: #006c35 !important;
    color: #ffffff !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item .nav-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
}

/* ==========================================================================
   Horizontal Menu Bar below the Header (.topbar-sub-menu)
   ========================================================================== */

@media (min-width: 993px) {
  .topbar-sub-menu {
    position: fixed !important;
    top: 74px !important; /* directly under topbar */
    left: 70px !important;
    right: 0 !important;
    height: 50px !important;
    z-index: 100 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 108, 53, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: left 0.3s ease, right 0.3s ease !important;
  }

  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .topbar-sub-menu {
    left: 0 !important;
    right: 70px !important;
  }

  body.sidebar-fullscreen .topbar-sub-menu {
    left: 0 !important;
    right: 0 !important;
  }

  body.topbar-sub-menu-visible:not(.login-body) .page-content {
    padding-top: 68px !important; /* Dynamic offset to push content down */
  }

  .topbar-sub-menu-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    overflow-x: auto !important;
    height: 100% !important;
    scrollbar-width: none !important;
  }
  
  .topbar-sub-menu-container::-webkit-scrollbar {
    display: none !important;
  }

  .topbar-sub-menu-item {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.2s ease !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
  }

  .topbar-sub-menu-item:hover {
    color: #006c35 !important;
  }

  .topbar-sub-menu-item.active {
    color: #006c35 !important;
    border-bottom-color: #006c35 !important;
  }
  
  /* Render a subtle down chevron on LTR & RTL horizontal menu links */
  .topbar-sub-menu-item::after {
    content: "▾" !important;
    font-size: 10px !important;
    margin-left: 5px !important;
    opacity: 0.6 !important;
  }
  body.lang-ar .topbar-sub-menu-item::after {
    margin-left: 0 !important;
    margin-right: 5px !important;
  }
}

/* ==========================================================================
   Premium CSS Hover Tooltips ([data-tooltip])
   ========================================================================== */

@media (min-width: 993px) {
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    background: #1e293b;
    color: #ffffff;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 999;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  body.lang-ar [data-tooltip]::after {
    left: auto;
    right: calc(100% + 10px);
  }

  [data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* ==========================================================================
   Night Mode / Dark Mode Integration (Option 3 Balanced Overrides)
   ========================================================================== */

@media (min-width: 993px) {
  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    border-right-color: #334155 !important;
    background: #1e293b !important;
  }

  body.night-mode.lang-ar:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    border-left-color: #334155 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .brand-mini-logo-image-shell {
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-icon {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group-toggle:hover .nav-group-icon {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group.is-open .nav-group-toggle .nav-group-icon,
  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .nav-group.is-open .nav-group-icon {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-stage {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: #334155 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-copy strong {
    color: #10b981 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-head {
    border-bottom-color: #334155 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item.active {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item .nav-icon {
    background: #0f172a !important;
    color: #cbd5e1 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-flyout-links .nav-item.active .nav-icon {
    background: #10b981 !important;
    color: #0f172a !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .sidebar-footer {
    border-top-color: #334155 !important;
  }

  body.night-mode:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout .logout-btn {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
  }

  /* Night Mode for Topbar Sub-Menu */
  body.night-mode .topbar-sub-menu {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }

  body.night-mode .topbar-sub-menu-item {
    color: #cbd5e1 !important;
  }

  body.night-mode .topbar-sub-menu-item:hover {
    color: #10b981 !important;
  }

  body.night-mode .topbar-sub-menu-item.active {
    color: #10b981 !important;
    border-bottom-color: #10b981 !important;
  }
}

/* ==========================================================================
   Premium Topbar Mega Menu System (Microsoft 365 Style - Sidebar-Free)
   ========================================================================== */

@media (min-width: 993px) {
  /* Cancel the sidebar completely */
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    display: none !important;
  }

  /* Expand main-wrapper to fill 100% screen width */
  body:not(.login-body):not(.sidebar-fullscreen) .main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:not(.login-body) .app-layout {
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Hide default vertical hamburger toggle */
  .menu-toggle {
    display: none !important;
  }

  /* Style topbar branding inside Row 1 */
  .topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .topbar-brand-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
  }

  /* Secure aspect containment for the brand logo to prevent any distortion */
  .topbar-brand-link .brand-mini-logo-image-shell {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 108, 53, 0.1) !important;
    border: 1px solid rgba(0, 108, 53, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  .topbar-brand-link .brand-mini-logo-image {
    max-width: 26px !important;
    max-height: 26px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .topbar-brand-title {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
  }

  .topbar-brand-title strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #006c35 !important;
    letter-spacing: -0.02em !important;
  }

  body.night-mode .topbar-brand-title strong {
    color: #10b981 !important;
  }

  .topbar-brand-title span {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  /* Row 2: Dedicated spacious Horizontal Navigation Bar (Sits fixed/sticky below Row 1) */
  .topbar-nav-bar {
    position: fixed !important;
    top: 74px !important; /* directly below topbar header */
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0, 108, 53, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
  }

  .topbar-nav-bar-container {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
    display: flex !important;
    justify-content: center !important; /* Beautifully center links for balance */
  }

  body.night-mode .topbar-nav-bar {
    background: rgba(30, 41, 59, 0.98) !important;
    border-bottom-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }

  /* Topbar Horizontal Nav Links */
  .topbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .topbar-nav-dropdown {
    position: relative !important;
  }

  .topbar-nav-item {
    background: transparent !important;
    border: none !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: inherit !important;
  }

  /* Navigation icon scaling / micro-interactions */
  .nav-item-icon {
    display: inline-block !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .topbar-nav-item:hover .nav-item-icon {
    transform: scale(1.18) rotate(5deg) !important;
  }

  .topbar-nav-item:hover,
  .topbar-nav-dropdown.is-active .topbar-nav-item,
  .topbar-nav-item.active {
    color: #006c35 !important;
    background: rgba(0, 108, 53, 0.05) !important;
  }

  body.night-mode .topbar-nav-item {
    color: #cbd5e1 !important;
  }

  body.night-mode .topbar-nav-item:hover,
  body.night-mode .topbar-nav-dropdown.is-active .topbar-nav-item,
  body.night-mode .topbar-nav-item.active {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
  }

  .dropdown-chevron {
    font-size: 9px !important;
    opacity: 0.6 !important;
    transition: transform 0.25s ease !important;
    margin-left: 2px !important;
  }

  body.lang-ar .dropdown-chevron {
    margin-left: 0 !important;
    margin-right: 2px !important;
  }

  .topbar-nav-dropdown.is-active .dropdown-chevron {
    transform: rotate(180deg) !important;
  }

  /* Full-Width Mega Menu Dropdown Panel (Sits perfectly at top: 124px directly below Row 2) */
  .topbar-mega-menu {
    position: fixed !important;
    top: 124px !important; /* Row 1 (74px) + Row 2 (50px) = 124px */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 124px) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 2px solid rgba(0, 108, 53, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .topbar-mega-menu.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .topbar-mega-menu-content {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 30px !important;
    padding: 36px 48px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    direction: ltr !important;
  }

  body.lang-ar .topbar-mega-menu-content {
    direction: rtl !important;
  }

  .mega-menu-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .mega-column-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(0, 108, 53, 0.1) !important;
    color: #006c35 !important;
  }

  body.night-mode .mega-column-header {
    border-bottom-color: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
  }

  .mega-column-icon {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: rgba(0, 108, 53, 0.08) !important;
    color: #006c35 !important;
  }

  body.night-mode .mega-column-icon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
  }

  .mega-column-header strong {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .mega-column-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .mega-sub-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
  }

  .mega-sub-link:hover,
  .mega-sub-link.active {
    background: rgba(0, 108, 53, 0.05) !important;
    color: #006c35 !important;
    transform: translateX(4px) !important;
  }

  body.lang-ar .mega-sub-link:hover,
  body.lang-ar .mega-sub-link.active {
    transform: translateX(-4px) !important;
  }

  body.night-mode .mega-sub-link {
    color: #cbd5e1 !important;
  }

  body.night-mode .mega-sub-link:hover,
  body.night-mode .mega-sub-link.active {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
  }

  .mega-sub-link-icon {
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: #64748b !important;
  }

  body.night-mode .mega-sub-link-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
  }

  /* Blurry Translucent Dropdown Overlay */
  .topbar-mega-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 124px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease !important;
  }

  .topbar-mega-menu-overlay.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Default Page Content Spacing (Pushed below Row 1 + Row 2 = 124px) */
  body:not(.login-body) .page-content {
    padding-top: 118px !important;
    transition: padding-top 0.3s ease !important;
  }

  /* Secondary Horizontal Quick-Access Subbar (Sits at top: 124px below Row 2) */
  .topbar-sub-menu {
    position: fixed !important;
    top: 124px !important;
    left: 0 !important;
    right: 0 !important;
    height: 44px !important;
    z-index: 99 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 108, 53, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
  }

  body.lang-ar:not(.login-body):not(.sidebar-fullscreen) .topbar-sub-menu {
    left: 0 !important;
    right: 0 !important;
  }

  /* Pushes content further when horizontal sub-menu is active (Row 1 + Row 2 + Sub-Menu = 168px) */
  body.topbar-sub-menu-visible:not(.login-body) .page-content {
    padding-top: 162px !important;
  }

  /* Night Mode Overrides */
  body.night-mode .topbar-mega-menu {
    background: rgba(30, 41, 59, 0.98) !important; /* Soft Slate 800 */
    border-bottom-color: #475569 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  }

  body.night-mode .topbar-sub-menu {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }
}

/* ==========================================================================
   UNIFIED ENTERPRISE TOPBAR HEIGHT & BACKGROUND HARMONIZATION
   ========================================================================== */

/* 1. Day Mode - Pristine Unified Off-White Theme (Microsoft 365 Inspired) */
body:not(.login-body) .topbar.topbar-enterprise {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-title strong {
  color: #006c35 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-title span {
  color: #64748b !important;
}

/* Day Mode Search Toggle & Panel */
body:not(.login-body) .topbar-search-toggle {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}

body:not(.login-body) .topbar-search-toggle:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

body:not(.login-body) .topbar-search.is-open .topbar-search-toggle {
  background: #e2e8f0 !important;
  border-color: rgba(0, 108, 53, 0.15) !important;
}

/* Day Mode Buttons */
body:not(.login-body) .topbar.topbar-enterprise .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn,
body:not(.login-body) .topbar.topbar-enterprise .menu-toggle {
  background: #ffffff !important;
  border: 1px solid rgba(0, 108, 53, 0.18) !important;
  color: #006c35 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn:hover,
body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn:hover,
body:not(.login-body) .topbar.topbar-enterprise .menu-toggle:hover {
  background: rgba(0, 108, 53, 0.05) !important;
  border-color: #006c35 !important;
  color: #006c35 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn.is-active {
  background: #006c35 !important;
  color: #ffffff !important;
  border-color: #006c35 !important;
}

/* Day Mode User Avatar Box */
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact {
  background: #ffffff !important;
  border: 1px solid rgba(0, 108, 53, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact h4 {
  color: #1e293b !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact p {
  color: #64748b !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link {
  color: #006c35 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link:hover {
  color: #004d25 !important;
}

/* 2. Night Mode - Unified Premium Deep slate-blue Theme */
body.night-mode .topbar.topbar-enterprise {
  background: #1e293b !important; /* Soft Slate 800 background for Row 1 */
  border-bottom: 1px solid #334155 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

body.night-mode .topbar-nav-bar {
  background: #1e293b !important; /* Row 2 unified */
  border-bottom-color: #334155 !important;
}

body.night-mode .topbar-sub-menu {
  background: #1e293b !important; /* Row 3 unified */
  border-bottom-color: #334155 !important;
}

body.night-mode .topbar.topbar-enterprise .topbar-brand-title strong {
  color: #10b981 !important; /* Luminous emerald logo text */
}

body.night-mode .topbar.topbar-enterprise .topbar-brand-title span {
  color: #94a3b8 !important;
}

/* Night Mode Buttons */
body.night-mode .topbar.topbar-enterprise .topbar-btn,
body.night-mode .topbar.topbar-enterprise .topbar-lang-btn,
body.night-mode .topbar.topbar-enterprise .menu-toggle {
  background: #0f172a !important; /* Deep Slate 900 */
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

body.night-mode .topbar.topbar-enterprise .topbar-btn:hover,
body.night-mode .topbar.topbar-enterprise .topbar-lang-btn:hover,
body.night-mode .topbar.topbar-enterprise .menu-toggle:hover {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

body.night-mode .topbar.topbar-enterprise .topbar-lang-btn.is-active {
  background: #10b981 !important;
  color: #0f172a !important;
  border-color: #10b981 !important;
  font-weight: 800 !important;
}

/* Night Mode User Avatar Box */
body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact h4 {
  color: #f8fafc !important;
}

body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact p {
  color: #94a3b8 !important;
}

body.night-mode .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link {
  color: #10b981 !important;
}

/* 3. Disable disparate color gradients across different module-specific topbar themes to maintain perfect system-wide unification */
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation {
  background: #133b66 !important;
}

body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-dashboard::before,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-sdl::before,
body:not(.login-body) .topbar.topbar-enterprise.topbar-theme-accreditation::before {
  display: none !important;
}

/* Day Mode Search input overrides to prevent dark backgrounds in search inputs */
body:not(.login-body) .topbar-search-input {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body:not(.login-body) .topbar-search-panel {
  background: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
body:not(.login-body) .topbar-search-result {
  color: #1e293b !important;
}
body:not(.login-body) .topbar-search-result:hover {
  background: #f8fafc !important;
}
body:not(.login-body) .topbar-search-result-group {
  background: rgba(0, 108, 53, 0.08) !important;
  color: #006c35 !important;
}

/* Night Mode Search overrides */
body.night-mode .topbar-search-input {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}
body.night-mode .topbar-search-panel {
  background: #1e293b !important;
  border-color: #334155 !important;
}
body.night-mode .topbar-search-result {
  color: #cbd5e1 !important;
}
body.night-mode .topbar-search-result:hover {
  background: #334155 !important;
}
body.night-mode .topbar-search-result-group {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
}

/* Responsive Fallback: Maintain overlay sidebar and hamburger toggle on Mobile Viewports */
@media (max-width: 992px) {
  .topbar-nav-bar {
    display: none !important;
  }
  .topbar-nav {
    display: none !important;
  }
  .menu-toggle {
    display: block !important;
  }
  body:not(.login-body):not(.sidebar-fullscreen) .sidebar.sidebar-flyout-layout {
    display: block !important;
  }
}

/* ==========================================================================
   Header Visual Stability Hotfix
   Keeps global topbar actions and user identity compact on one clean line.
   ========================================================================== */
body:not(.login-body) .topbar.topbar-enterprise {
  min-height: 64px !important;
  height: auto !important;
  padding: 8px 18px !important;
  gap: 12px !important;
  overflow: visible !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-right {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 72vw !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow: visible !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-action-row {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn,
body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn,
body:not(.login-body) .topbar.topbar-enterprise .menu-toggle {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-btn {
  padding: 0 12px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-lang-btn {
  min-width: 44px !important;
  padding: 0 12px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-search-toggle,
body:not(.login-body) .topbar.topbar-enterprise .topbar-theme-toggle {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact {
  flex: 0 1 300px !important;
  max-width: 300px !important;
  min-width: 210px !important;
  height: 46px !important;
  padding: 5px 8px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-head,
body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-foot {
  min-width: 0 !important;
  display: contents !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  opacity: 0.78 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-access-pill {
  display: none !important;
}

body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact .user-box-link {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body:not(.login-body) .topbar-nav-bar {
  clear: both !important;
  margin-top: 0 !important;
}

@media (max-width: 1280px) {
  body:not(.login-body) .topbar.topbar-enterprise .topbar-right {
    max-width: 78vw !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact {
    flex-basis: 220px !important;
    min-width: 180px !important;
    max-width: 220px !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise .user-box.user-box-compact p {
    display: none !important;
  }
}

@media (max-width: 992px) {
  body:not(.login-body) .topbar.topbar-enterprise {
    flex-wrap: wrap !important;
  }

  body:not(.login-body) .topbar.topbar-enterprise .topbar-right {
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Header brand wordmark: white, clean, and borderless on the blue header. */
body:not(.login-body) .topbar.topbar-enterprise .topbar-brand,
body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-link,
body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-title {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-link {
  padding: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-title {
  display: grid !important;
  gap: 1px !important;
  line-height: 1 !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-title strong,
body.night-mode .topbar.topbar-enterprise .topbar-brand-title strong {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

body:not(.login-body) .topbar.topbar-enterprise .topbar-brand-title span,
body.night-mode .topbar.topbar-enterprise .topbar-brand-title span {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.18) !important;
}

/* Premium Emerald Green module navigation rail. */
body:not(.login-body) .topbar-nav-bar {
  background: #065f46 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 6px 20px rgba(6, 95, 70, 0.15) !important;
}

body:not(.login-body) .topbar-nav-bar-container {
  max-width: none !important;
  padding: 0 18px !important;
}

body:not(.login-body) .topbar-nav {
  width: 100% !important;
  justify-content: center !important;
  gap: 12px !important;
}

body:not(.login-body) .topbar-nav-item {
  min-height: 40px !important;
  padding: 7px 14px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 18px rgba(5, 150, 105, 0.13) !important;
  text-shadow: 0 1px 8px rgba(6, 95, 70, 0.32) !important;
}

body:not(.login-body) .topbar-nav-item > span:not(.nav-item-icon):not(.dropdown-chevron) {
  color: #ffffff !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
}

body:not(.login-body) .topbar-nav-item .nav-item-icon {
  width: 30px !important;
  height: 30px !important;
  margin: 0 4px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 16px rgba(5, 150, 105, 0.14) !important;
  text-shadow: none !important;
}

body:not(.login-body) .topbar-nav-item .dropdown-chevron {
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 6px rgba(6, 95, 70, 0.26) !important;
}

body:not(.login-body) .topbar-nav-item:hover,
body:not(.login-body) .topbar-nav-dropdown.is-active .topbar-nav-item,
body:not(.login-body) .topbar-nav-item.active {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)) !important;
  border-color: rgba(255, 255, 255, 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 12px 24px rgba(5, 150, 105, 0.20) !important;
  transform: translateY(-1px) !important;
}

body:not(.login-body) .topbar-nav-item:hover .nav-item-icon,
body:not(.login-body) .topbar-nav-dropdown.is-active .topbar-nav-item .nav-item-icon,
body:not(.login-body) .topbar-nav-item.active .nav-item-icon {
  background: #ffffff !important;
  transform: scale(1.08) rotate(3deg) !important;
}

body.night-mode .topbar-nav-bar {
  background: #07543c !important;
}

body.night-mode .topbar-nav-item,
body.night-mode .topbar-nav-item:hover,
body.night-mode .topbar-nav-dropdown.is-active .topbar-nav-item,
body.night-mode .topbar-nav-item.active {
  color: #ffffff !important;
}

/* Overview quick access row: keep the three links pinned across Dashboard, SDL, and Clinic Compliance. */
body.page-shell-dashboard:not(.login-body) .topbar-sub-menu,
body.page-shell-sdl:not(.login-body) .topbar-sub-menu,
body.page-shell-clinic-compliance:not(.login-body) .topbar-sub-menu {
  position: fixed !important;
  top: 124px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 180 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 44px !important;
  min-height: 44px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(0, 108, 53, 0.10) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
}

body.page-shell-dashboard:not(.login-body) .topbar-sub-menu-container,
body.page-shell-sdl:not(.login-body) .topbar-sub-menu-container,
body.page-shell-clinic-compliance:not(.login-body) .topbar-sub-menu-container {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

body.page-shell-dashboard:not(.login-body) .topbar-sub-menu-container::-webkit-scrollbar,
body.page-shell-sdl:not(.login-body) .topbar-sub-menu-container::-webkit-scrollbar,
body.page-shell-clinic-compliance:not(.login-body) .topbar-sub-menu-container::-webkit-scrollbar {
  display: none !important;
}

body.page-shell-dashboard:not(.login-body) .topbar-sub-menu-item,
body.page-shell-sdl:not(.login-body) .topbar-sub-menu-item,
body.page-shell-clinic-compliance:not(.login-body) .topbar-sub-menu-item {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: 44px !important;
  color: #334155 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

body.page-shell-dashboard:not(.login-body) .topbar-sub-menu-item.active,
body.page-shell-dashboard:not(.login-body) .topbar-sub-menu-item:hover,
body.page-shell-sdl:not(.login-body) .topbar-sub-menu-item.active,
body.page-shell-sdl:not(.login-body) .topbar-sub-menu-item:hover,
body.page-shell-clinic-compliance:not(.login-body) .topbar-sub-menu-item.active,
body.page-shell-clinic-compliance:not(.login-body) .topbar-sub-menu-item:hover {
  color: #006c35 !important;
}

body.page-shell-dashboard.topbar-sub-menu-visible:not(.login-body) .page-content,
body.page-shell-sdl.topbar-sub-menu-visible:not(.login-body) .page-content,
body.page-shell-clinic-compliance.topbar-sub-menu-visible:not(.login-body) .page-content {
  padding-top: 162px !important;
}