/* ==========================================================================
   Quantivo Labs Admin Console — Flagship Okta / Stripe Enterprise UI
   ========================================================================== */

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

:root {
  /* Okta Brand Colors */
  --okta-blue: #1662DD;
  --okta-blue-hover: #0047BA;
  --okta-blue-light: #EBF2FC;
  --okta-blue-glow: rgba(22, 98, 221, 0.16);
  --okta-cyan: #00A3E0;
  --okta-navy: #00297A;
  --okta-navy-deep: #0B192C;

  /* Surfaces & Neutrals */
  --okta-bg: #F4F6F8;
  --okta-surface: #FFFFFF;
  --okta-surface-alt: #F8FAFC;
  --okta-sidebar-bg: #FFFFFF;
  --okta-navbar-bg: #FFFFFF;

  /* Crisp Borders */
  --okta-border: #E2E8F0;
  --okta-border-dark: #CBD5E1;
  --okta-border-focus: #1662DD;

  /* Typography */
  --okta-text-heading: #0F172A;
  --okta-text-main: #1E293B;
  --okta-text-muted: #64748B;
  --okta-text-subtle: #94A3B8;

  /* Status Tokens */
  --okta-success-bg: #ECFDF5;
  --okta-success-text: #065F46;
  --okta-success-border: #A7F3D0;

  --okta-danger-bg: #FEF2F2;
  --okta-danger-text: #991B1B;
  --okta-danger-border: #FECACA;

  --okta-warning-bg: #FFFBEB;
  --okta-warning-text: #92400E;
  --okta-warning-border: #FDE68A;

  --bs-radius: 6px;
  --bs-radius-lg: 10px;
}

/* Global Reset */
*, *::before, *::after {
  box-sizing: border-box !important;
}

body, html {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--okta-bg) !important;
  color: var(--okta-text-main) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TOP HEADER NAVBAR (Flagship Enterprise Design)
   ========================================================================== */
.navbar-pf,
.navbar-default.navbar-pf,
header.navbar {
  background: #FFFFFF !important;
  border-top: none !important;
  border-bottom: 1px solid var(--okta-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  min-height: 64px !important;
  height: 64px !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 28px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
}

.navbar-pf .navbar-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.navbar-pf .navbar-brand {
  height: 38px !important;
  line-height: 38px !important;
  background-image: url('../img/quantivo-logo.svg') !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  width: 175px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-block !important;
  transition: opacity 0.15s ease !important;
}

.navbar-pf .navbar-brand:hover {
  opacity: 0.88 !important;
}

/* Console Badge next to Brand */
.navbar-pf .navbar-header::after {
  content: "Console" !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--okta-blue) !important;
  background: var(--okta-blue-light) !important;
  border: 1px solid #BFDBFE !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

/* Utility Nav on the Right */
.navbar-pf .navbar-collapse {
  margin-left: auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

.navbar-pf .navbar-utility {
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  float: none !important;
}

.navbar-pf .navbar-utility > li {
  position: relative !important;
}

.navbar-pf .navbar-utility > li > a {
  color: #475569 !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.navbar-pf .navbar-utility > li > a:hover {
  background: #F8FAFC !important;
  color: var(--okta-blue) !important;
}

.navbar-pf .navbar-utility > li > a.nav-item-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
}

.navbar-pf .navbar-utility > li > a.nav-item-link:hover {
  background: #F1F5F9 !important;
  color: var(--okta-blue) !important;
  border-color: #E2E8F0 !important;
}

/* User Profile Dropdown Trigger (Pill Avatar Button) */
.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle {
  background: #F8FAFC !important;
  border: 1px solid var(--okta-border) !important;
  border-radius: 9999px !important;
  padding: 5px 14px 5px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle:hover,
.navbar-pf .navbar-utility li.dropdown.open > .dropdown-toggle {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle .pficon-user,
.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle .fa-user {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: var(--okta-blue-light) !important;
  color: var(--okta-blue) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle b.caret {
  border-top-color: #64748B !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
}

.navbar-pf .navbar-utility li.dropdown.open > .dropdown-toggle b.caret {
  transform: rotate(180deg) !important;
}

/* User Dropdown Menu Popover */
.navbar-pf .navbar-utility .dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--okta-border) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin-top: 8px !important;
  min-width: 210px !important;
  right: 0 !important;
  left: auto !important;
  list-style: none !important;
}

.navbar-pf .navbar-utility .dropdown-menu li {
  margin: 2px 0 !important;
  list-style: none !important;
}

.navbar-pf .navbar-utility .dropdown-menu li a {
  padding: 9px 12px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.navbar-pf .navbar-utility .dropdown-menu li a:hover {
  background: var(--okta-blue-light) !important;
  color: var(--okta-blue) !important;
}

.navbar-pf .navbar-utility .dropdown-menu li.divider {
  height: 1px !important;
  margin: 6px 0 !important;
  background-color: #F1F5F9 !important;
  border: none !important;
}

/* Sign Out button in red */
.navbar-pf .navbar-utility .dropdown-menu li:last-child a,
.navbar-pf .navbar-utility .dropdown-menu li a[ng-click*="logout"] {
  color: #EF4444 !important;
}

.navbar-pf .navbar-utility .dropdown-menu li:last-child a:hover,
.navbar-pf .navbar-utility .dropdown-menu li a[ng-click*="logout"]:hover {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}

/* ==========================================================================
   VIEWPORT FIT LAYOUT (SIDEBAR FLUSH LEFT + MIDDLE SECTION FITS FULL WIDTH)
   ========================================================================== */
html, body {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.container-fluid {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - 60px) !important;
}

.container-fluid > .row {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: calc(100vh - 60px) !important;
  display: block !important;
}

/* #view is the AngularJS view container holding both the main section and sidebar */
#view,
div[data-ng-view] {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - 60px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--okta-bg) !important;
  position: relative !important;
  overflow-x: hidden !important;
}

/* Templates that wrap content in data-ng-include (e.g. realm-identity-provider-*.html) */
div[data-ng-view] > div[data-ng-include],
div[data-ng-view] > div[ng-include],
div[data-ng-include],
div[ng-include] {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - 60px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  flex: 1 1 100% !important;
}

/* Reset Bootstrap 3 Grid push / pull offsets for all screen sizes */
[class*="col-sm-push-"],
[class*="col-md-push-"],
[class*="col-lg-push-"],
[class*="col-sm-pull-"],
[class*="col-md-pull-"],
[class*="col-lg-pull-"] {
  left: 0 !important;
  right: auto !important;
}

/* LEFT SIDEBAR: Order 1 ensures it always renders on the far left */
kc-menu,
kc-sidebar,
.sidebar-pf,
.sidebar-pf-left,
div[kc-sidebar-resize],
.col-sm-3.sidebar-pf,
.col-md-2.sidebar-pf,
div[class*="sidebar-pf"] {
  order: 1 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex: 0 0 260px !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  border-right: 1px solid var(--okta-border) !important;
  min-height: calc(100vh - 60px) !important;
  height: auto !important;
  float: none !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
}

/* MIDDLE / MAIN BODY CONTENT SECTION: Direct child of #view or child of data-ng-include wrapper */
div[data-ng-view] > div:not(kc-menu):not(kc-sidebar):not(.sidebar-pf):not([kc-sidebar-resize]):not([class*="sidebar"]):not([data-ng-include]):not([ng-include]),
div[data-ng-include] > div:not(kc-menu):not(kc-sidebar):not(.sidebar-pf):not([kc-sidebar-resize]):not([class*="sidebar"]),
div[ng-include] > div:not(kc-menu):not(kc-sidebar):not(.sidebar-pf):not([kc-sidebar-resize]):not([class*="sidebar"]),
#view > div:not(kc-menu):not(kc-sidebar):not(.sidebar-pf):not([kc-sidebar-resize]):not([class*="sidebar"]):not([data-ng-include]):not([ng-include]) {
  order: 2 !important;
  flex: 1 1 auto !important;
  width: calc(100% - 260px) !important;
  max-width: calc(100% - 260px) !important;
  min-width: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 32px 40px 64px !important;
  background: var(--okta-bg) !important;
  min-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Full width view when no sidebar exists (e.g. server-info, 404, etc.) */
div[data-ng-view] > div.col-sm-12,
#view > div.col-sm-12 {
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* ==========================================================================
   REALM SELECTOR (Clean Floating Okta/Stripe Dropdown)
   ========================================================================== */
.realm-selector,
.context-selector,
div[data-ng-controller="RealmDropdownCtrl"],
div[data-ng-controller="RealmSelectorCtrl"] {
  position: relative !important;
  margin: 12px 14px 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  z-index: 1050 !important;
}

/* Selector Trigger Card / Button (h2) */
.realm-selector h2,
.context-selector h2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #F8FAFC !important;
  border: 1px solid var(--okta-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--okta-text-heading) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1.4 !important;
  height: auto !important;
}

.realm-selector h2::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

.realm-selector:hover h2,
.realm-selector.open h2,
.realm-selector:focus-within h2 {
  background: #FFFFFF !important;
  border-color: var(--okta-blue) !important;
  color: var(--okta-blue) !important;
  box-shadow: 0 0 0 3px rgba(22, 98, 221, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.realm-selector h2 i,
.realm-selector h2 .fa,
.realm-selector h2 .fa-angle-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  font-size: 14px !important;
  color: var(--okta-text-muted) !important;
  margin-left: auto !important;
  line-height: 1 !important;
  transition: transform 0.2s ease !important;
}

.realm-selector:hover h2 i,
.realm-selector.open h2 i,
.realm-selector:focus-within h2 i {
  color: var(--okta-blue) !important;
  transform: rotate(180deg) !important;
}

/* Floating Dropdown Menu Panel */
.realm-selector .realm-dropmenu,
.realm-selector .dropdown-menu,
.context-selector .realm-dropmenu,
.context-selector .dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 232px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--okta-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  z-index: 1050 !important;
  list-style: none !important;
}

/* Open on hover, focus-within, or open class */
.realm-selector:hover .realm-dropmenu,
.realm-selector:hover .dropdown-menu,
.realm-selector.open .realm-dropmenu,
.realm-selector.open .dropdown-menu,
.realm-selector:focus-within .realm-dropmenu,
.realm-selector:focus-within .dropdown-menu,
.context-selector:hover .realm-dropmenu,
.context-selector.open .realm-dropmenu {
  display: block !important;
  animation: qFadeInDropdown 0.15s ease-out !important;
}

@keyframes qFadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Realm List Items */
.realm-selector .realm-dropmenu ul,
.realm-selector ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
}

.realm-selector .realm-dropmenu ul::-webkit-scrollbar,
.realm-selector ul::-webkit-scrollbar {
  width: 5px !important;
}

.realm-selector .realm-dropmenu ul::-webkit-scrollbar-thumb,
.realm-selector ul::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 4px !important;
}

.realm-selector .realm-dropmenu ul li,
.realm-selector ul li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 2px 0 !important;
  padding: 0 !important;
}

.realm-selector .realm-dropmenu ul li a,
.realm-selector ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--okta-text-main) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  line-height: 1.3 !important;
  transition: all 0.15s ease !important;
}

.realm-selector .realm-dropmenu ul li a::before,
.realm-selector ul li a::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--okta-blue) !important;
  flex-shrink: 0 !important;
}

.realm-selector .realm-dropmenu ul li a:hover,
.realm-selector ul li a:hover {
  background: var(--okta-blue-light) !important;
  color: var(--okta-blue) !important;
  transform: translateX(2px) !important;
}

/* Add Realm Button Section */
.realm-selector .realm-add,
.realm-selector .dropdown-menu .realm-add {
  padding: 8px 10px 4px !important;
  border-top: 1px solid var(--okta-border) !important;
  margin-top: 6px !important;
}

.realm-selector .realm-add a.btn,
.realm-selector .realm-add a.btn-primary,
.realm-selector .realm-add a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--okta-blue) !important;
  border: 1px solid var(--okta-blue) !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  width: 100% !important;
  box-shadow: 0 1px 3px rgba(22, 98, 221, 0.25) !important;
  transition: all 0.15s ease !important;
}

.realm-selector .realm-add a.btn:hover,
.realm-selector .realm-add a.btn-primary:hover {
  background: var(--okta-blue-hover) !important;
  border-color: var(--okta-blue-hover) !important;
  box-shadow: 0 2px 6px rgba(22, 98, 221, 0.35) !important;
}

/* Category Subheaders (CONFIGURE, MANAGE) */
.sidebar-pf .nav-category {
  padding: 16px 16px 6px !important;
  color: var(--okta-text-subtle) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border: none !important;
  background: transparent !important;
}

/* Sidebar Navigation Items */
.sidebar-pf .nav-pills > li {
  margin: 2px 8px !important;
}

.sidebar-pf .nav-pills > li > a {
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  border-radius: var(--bs-radius) !important;
  border-left: none !important;
  border-right: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-transform: none !important;
  transition: all 0.15s ease !important;
}

.sidebar-pf .nav-pills > li > a:hover {
  background: var(--okta-surface-alt) !important;
  color: var(--okta-blue) !important;
}

.sidebar-pf .nav-pills > li.active > a,
.sidebar-pf .nav-pills > li.active > a:hover,
.sidebar-pf .nav-pills > li.active > a:focus {
  background: var(--okta-blue-light) !important;
  color: var(--okta-blue) !important;
  font-weight: 700 !important;
  border-left: none !important;
}

.sidebar-pf .nav-pills > li.active a i,
.sidebar-pf .nav-pills > li.active a span {
  color: var(--okta-blue) !important;
}

.sidebar-pf .nav-pills > li.active > a:after {
  display: none !important;
}

/* ==========================================================================
   PAGE HEADER & BREADCRUMBS
   ========================================================================== */
.breadcrumb,
ol.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  font-size: 13.5px !important;
}

.breadcrumb > li,
ol.breadcrumb > li {
  display: inline-flex !important;
  align-items: center !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

.breadcrumb > li > a,
ol.breadcrumb > li > a {
  color: var(--okta-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.breadcrumb > li > a:hover,
ol.breadcrumb > li > a:hover {
  color: var(--okta-blue-hover) !important;
  text-decoration: underline !important;
}

.breadcrumb > li + li:before,
ol.breadcrumb > li + li:before {
  content: "/" !important;
  padding: 0 8px 0 0 !important;
  color: #CBD5E1 !important;
  font-weight: 400 !important;
}

.breadcrumb > li:last-child,
ol.breadcrumb > li:last-child {
  color: #0F172A !important;
  font-weight: 700 !important;
}

h1.page-header,
.page-header h1,
h1.title,
h1 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.025em !important;
  border-bottom: none !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

h1 i, h1 span.pficon {
  color: var(--okta-blue) !important;
}

/* KC Tooltip */
kc-tooltip {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 8px !important;
  color: #94A3B8 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

kc-tooltip i.fa,
kc-tooltip span.fa {
  color: #94A3B8 !important;
  transition: color 0.15s ease !important;
}

kc-tooltip:hover i.fa,
kc-tooltip:hover span.fa {
  color: var(--okta-blue) !important;
}

/* ==========================================================================
   TABS NAVIGATION (Modern Underline & Segmented System)
   ========================================================================== */
kc-tabs-realm,
kc-tabs-realms,
kc-tabs-client,
kc-tabs-clients,
kc-tabs-user,
kc-tabs-users,
kc-tabs-group,
kc-tabs-groups,
kc-tabs-role,
kc-tabs-roles,
kc-tabs-identity-provider,
kc-tabs-identity-providers,
kc-tabs-authentication,
.nav-tabs {
  display: block !important;
  width: 100% !important;
}

.nav-tabs {
  border-bottom: 2px solid var(--okta-border) !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
}

.nav-tabs > li {
  margin-bottom: -2px !important;
  list-style: none !important;
}

.nav-tabs > li > a {
  color: #64748B !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  padding: 10px 18px !important;
  background: transparent !important;
  border-radius: 6px 6px 0 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

.nav-tabs > li > a:hover {
  color: var(--okta-blue) !important;
  background: rgba(22, 98, 221, 0.05) !important;
  border-bottom-color: #93C5FD !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--okta-blue) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid var(--okta-blue) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   SURFACE CARDS & FORM CONTAINERS
   ========================================================================== */
.card-pf,
.panel-default,
.panel,
.form-horizontal,
form[name="realmForm"],
form[name="clientForm"],
form[name="userForm"],
form[name="roleForm"],
form[name="groupForm"],
form[name="idpForm"],
form[name="authForm"] {
  background: #FFFFFF !important;
  border: 1px solid var(--okta-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  padding: 32px 36px !important;
  margin-top: 16px !important;
  margin-bottom: 32px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Form Legends / Section Dividers */
legend {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  border-bottom: 1px solid var(--okta-border) !important;
  padding-bottom: 10px !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}

legend:first-child {
  margin-top: 0 !important;
}

/* ==========================================================================
   FORM GROUPS, LABELS & INPUTS
   ========================================================================== */
.form-horizontal .form-group {
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}

.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
  display: none !important;
}

.form-group:not(.form-horizontal .form-group):not(.form-inline .form-group) {
  margin-bottom: 24px !important;
  display: block !important;
  width: 100% !important;
}

.form-inline .form-group {
  margin-bottom: 0 !important;
  display: flex !important;
  width: auto !important;
  align-items: center !important;
}

.form-horizontal .control-label,
.form-horizontal label.control-label,
.form-horizontal label.col-md-2,
.form-horizontal label.col-sm-2 {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  flex: 0 0 240px !important;
  text-align: right !important;
  justify-content: flex-end !important;
  align-items: center !important;
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  color: #1E293B !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px !important;
  line-height: 1.4 !important;
}

.control-label,
label {
  color: #1E293B !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.1px !important;
}

.form-horizontal .form-group > div[class*="col-"]:not(.col-md-offset-2):not(.col-sm-offset-2) {
  flex: 0 1 540px !important;
  width: 540px !important;
  max-width: 540px !important;
  min-width: 260px !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.form-horizontal .form-group > div[class*="col-"] > .form-control,
.form-horizontal .form-group > div[class*="col-"] > input[type="text"],
.form-horizontal .form-group > div[class*="col-"] > select,
.form-horizontal .form-group > div[class*="col-"] > div {
  width: 100% !important;
}

@media (max-width: 991px) {
  .form-horizontal .form-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .form-horizontal .control-label,
  .form-horizontal label.control-label,
  .form-horizontal label.col-md-2,
  .form-horizontal label.col-sm-2 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  
  .form-horizontal .form-group > div[class*="col-"]:not(.col-md-offset-2):not(.col-sm-offset-2) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.required,
span.required {
  color: #EF4444 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  margin-left: 2px !important;
}

/* Form Inputs, Selects & Textareas */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
select.form-control,
textarea.form-control {
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  color: #0F172A !important;
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.form-control:hover,
input[type="text"]:hover,
input[type="password"]:hover,
select.form-control:hover,
textarea.form-control:hover {
  border-color: #94A3B8 !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
select.form-control:focus,
textarea.form-control:focus {
  background-color: #FFFFFF !important;
  border-color: var(--okta-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3.5px rgba(22, 98, 221, 0.15) !important;
}

.form-control:disabled,
.form-control[disabled],
input[disabled] {
  background-color: #F8FAFC !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed !important;
}

/* Select2 Customization */
.select2-container .select2-choice {
  height: 42px !important;
  line-height: 40px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 0 14px !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
}

.select2-drop {
  border: 1px solid var(--okta-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  margin-top: 4px !important;
}

/* Password Toggle & Input Groups */
.input-group {
  display: flex !important;
  width: 100% !important;
  position: relative !important;
}

.input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  flex: 1 1 auto !important;
  width: 1% !important;
}

.input-group-btn,
.input-group-addon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.input-group-btn > .btn,
.input-group-btn > button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  height: 42px !important;
  padding: 0 14px !important;
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  border-left: none !important;
  color: #64748B !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.input-group-btn > .btn:hover,
.input-group-btn > button:hover {
  background-color: #F1F5F9 !important;
  color: #1E293B !important;
}

/* Tooltip & Help Icons */
.kc-tooltip,
.tooltip,
.fa-question-circle,
.pficon-help {
  color: #94A3B8 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  margin-left: 4px !important;
}

.fa-question-circle:hover,
.pficon-help:hover {
  color: var(--okta-blue) !important;
}

/* ==========================================================================
   MODERN TOGGLE SWITCHES (iOS / SaaS Pill)
   ========================================================================== */
.onoffswitch {
  position: relative !important;
  width: 48px !important;
  height: 26px !important;
  user-select: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.onoffswitch-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.onoffswitch-label {
  display: block !important;
  overflow: hidden !important;
  cursor: pointer !important;
  height: 26px !important;
  padding: 0 !important;
  line-height: 26px !important;
  border: 2px solid transparent !important;
  border-radius: 26px !important;
  background-color: #CBD5E1 !important;
  transition: background-color 0.25s ease !important;
}

.onoffswitch-label:before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  position: absolute !important;
  top: 2px !important;
  bottom: 2px !important;
  left: 2px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: var(--okta-blue) !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label:before {
  left: 24px !important;
}

.onoffswitch-inner,
.onoffswitch-switch {
  display: none !important;
}

/* ==========================================================================
   ACTION BUTTONS & TOOLBARS
   ========================================================================== */
.form-actions,
.form-group:last-child,
.form-horizontal .form-group:last-child {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.form-horizontal .col-md-offset-2,
.form-horizontal .col-sm-offset-2,
.form-horizontal .col-md-10.col-md-offset-2 {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
}

.btn-primary,
button[kc-save],
button[ng-click*="create"],
button[type="submit"],
a.btn-primary {
  background-color: var(--okta-blue) !important;
  border: 1px solid var(--okta-blue) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(22, 98, 221, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-primary:hover:not([disabled]),
button[kc-save]:hover:not([disabled]),
button[ng-click*="create"]:hover:not([disabled]),
button[type="submit"]:hover:not([disabled]),
a.btn-primary:hover:not([disabled]) {
  background-color: var(--okta-blue-hover) !important;
  border-color: var(--okta-blue-hover) !important;
  box-shadow: 0 4px 10px rgba(22, 98, 221, 0.35) !important;
  transform: translateY(-1px) !important;
}

button[kc-save][disabled],
button[type="submit"][disabled],
.btn-primary[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-default,
button[kc-cancel],
button[kc-reset],
button[ng-click*="cancel"],
button[type="reset"] {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-default:hover:not([disabled]),
button[kc-cancel]:hover:not([disabled]),
button[kc-reset]:hover:not([disabled]),
button[ng-click*="cancel"]:hover:not([disabled]) {
  background-color: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #1E293B !important;
}

button[kc-cancel][disabled],
.btn-default[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.btn-danger,
button[ng-click*="delete"] {
  background-color: #EF4444 !important;
  border: 1px solid #EF4444 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-danger:hover,
button[ng-click*="delete"]:hover {
  background-color: #DC2626 !important;
  border-color: #DC2626 !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   DATA TABLES & GRIDS (Modern SaaS Card Style)
   ========================================================================== */

/* Main Table Container / Table Tag */
table.table,
table.datatable,
table.dataTable,
.table-striped,
.table-bordered {
  width: 100% !important;
  max-width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid var(--okta-border) !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  margin-top: 16px !important;
  margin-bottom: 32px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Fix any table wrapper divs */
.table-responsive,
.dataTables_wrapper {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ==========================================================================
   TABLE HEADER ACTIONS / TOOLBAR (Search Box & Action Buttons)
   ========================================================================== */
th.kc-table-actions,
th.kc-table-actions[colspan],
.table > thead > tr:first-child > th[colspan],
#user-table > thead > tr:first-child > th,
.table-header {
  background: #FFFFFF !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid #E2E8F0 !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  vertical-align: middle !important;
}

/* Form Inline Toolbar */
th.kc-table-actions .form-inline,
.table-header .form-inline,
.form-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Search input container */
th.kc-table-actions .form-group,
.form-inline .form-group {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

th.kc-table-actions .input-group,
.form-inline .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 320px !important;
  max-width: 100% !important;
  position: relative !important;
}

/* Search Input */
th.kc-table-actions input.search,
th.kc-table-actions input.form-control,
.form-inline input.search,
.form-inline input.form-control,
input[type="search"] {
  height: 38px !important;
  padding: 8px 14px !important;
  border: 1px solid #CBD5E1 !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 13.5px !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

th.kc-table-actions input.search:focus,
.form-inline input.search:focus {
  border-color: var(--okta-blue) !important;
  box-shadow: 0 0 0 3px rgba(22, 98, 221, 0.15) !important;
  outline: none !important;
}

/* Search Addon Button (Search Icon) */
th.kc-table-actions .input-group-addon,
.form-inline .input-group-addon {
  height: 38px !important;
  padding: 0 14px !important;
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748B !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

th.kc-table-actions .input-group-addon:hover,
.form-inline .input-group-addon:hover {
  background: #F1F5F9 !important;
  color: var(--okta-blue) !important;
}

/* Toolbar Right Action Buttons (Create, Import, View All, etc.) */
th.kc-table-actions .pull-right,
.form-inline .pull-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  float: none !important;
  margin: 0 !important;
}

/* Primary Create/Add Buttons */
#createClient,
#createUser,
#createRole,
#createGroup,
a[id^="create"],
button[id^="create"],
a.btn.btn-default[href*="create"],
a.btn.btn-default[href*="add"],
.pull-right .btn-primary,
.pull-right a#createClient,
.pull-right a#createUser,
.pull-right a#createRole {
  background-color: var(--okta-blue) !important;
  border: 1px solid var(--okta-blue) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(22, 98, 221, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#createClient:hover,
#createUser:hover,
#createRole:hover,
#createGroup:hover,
a[id^="create"]:hover,
button[id^="create"]:hover {
  background-color: var(--okta-blue-hover) !important;
  border-color: var(--okta-blue-hover) !important;
  box-shadow: 0 4px 10px rgba(22, 98, 221, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Secondary Toolbar Buttons (Import, View All Users, Unlock, etc.) */
#importClient,
#viewAllUsers,
button[ng-click*="unlock"],
.pull-right .btn-default:not([id^="create"]):not([href*="create"]):not([href*="add"]) {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#importClient:hover,
#viewAllUsers:hover {
  background-color: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

/* ==========================================================================
   TABLE COLUMN HEADERS
   ========================================================================== */
.table > thead > tr:not(:first-child) > th,
.table > thead > tr[data-ng-hide] > th,
.table > thead > tr[data-ng-show] > th,
.table > thead > tr > th:not(.kc-table-actions):not([colspan="6"]):not([colspan="7"]):not([colspan="8"]) {
  background: #F8FAFC !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 14px 20px !important;
  text-align: left !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   TABLE BODY ROWS & DATA CELLS
   ========================================================================== */
.table > tbody > tr > td {
  background: #FFFFFF !important;
  color: #1E293B !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 1px solid #F1F5F9 !important;
  padding: 14px 20px !important;
  vertical-align: middle !important;
  height: 52px !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

.table > tbody > tr:hover > td {
  background-color: #F8FAFC !important;
}

.table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* Primary Name / ID Link */
.table > tbody > tr > td:first-child a,
.table td a:not(.btn) {
  color: var(--okta-blue) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: color 0.15s ease !important;
}

.table > tbody > tr > td:first-child a:hover,
.table td a:not(.btn):hover {
  color: var(--okta-blue-hover) !important;
  text-decoration: underline !important;
}

/* Status Column (Enabled / Disabled) */
td[translate="true"],
td[translate="True"],
td[translate*="true"] {
  color: #16A34A !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

td[translate="true"]::before,
td[translate="True"]::before,
td[translate*="true"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  background-color: #22C55E !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6) !important;
  vertical-align: middle !important;
}

td[translate="false"],
td[translate="False"],
td[translate*="false"] {
  color: #94A3B8 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

td[translate="false"]::before,
td[translate="False"]::before,
td[translate*="false"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  background-color: #94A3B8 !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* Base URL / Redirect URIs / Monospace Technical Details */
.table td:nth-child(3) a,
.table td.monospace,
.table td code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: #475569 !important;
  text-decoration: none !important;
  word-break: break-all !important;
}

.table td:nth-child(3) a:hover {
  color: var(--okta-blue) !important;
  text-decoration: underline !important;
}

.table td:nth-child(3) span,
.table td .text-muted {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-style: italic !important;
  color: #94A3B8 !important;
}

/* ==========================================================================
   TABLE ACTION CELLS (Edit, Export, Delete)
   ========================================================================== */
td.kc-action-cell {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 80px !important;
  text-align: center !important;
  padding: 14px 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  transition: all 0.15s ease !important;
}

/* Edit Cell (Blue link/badge) */
td.kc-action-cell[kc-open],
td.kc-action-cell:nth-last-child(3) {
  color: var(--okta-blue) !important;
}

td.kc-action-cell[kc-open]:hover,
td.kc-action-cell:nth-last-child(3):hover {
  color: var(--okta-blue-hover) !important;
  text-decoration: underline !important;
}

/* Export Cell (Slate link/badge) */
td.kc-action-cell[data-ng-click*="export"],
td.kc-action-cell[data-ng-click*="Export"],
td.kc-action-cell:nth-last-child(2) {
  color: #475569 !important;
}

td.kc-action-cell[data-ng-click*="export"]:hover,
td.kc-action-cell:nth-last-child(2):hover {
  color: #0F172A !important;
  text-decoration: underline !important;
}

/* Delete Cell (Red link/badge) */
td.kc-action-cell[data-ng-click*="remove"],
td.kc-action-cell[data-ng-click*="delete"],
td.kc-action-cell:last-child {
  color: #EF4444 !important;
}

td.kc-action-cell[data-ng-click*="remove"]:hover,
td.kc-action-cell:last-child:hover {
  color: #DC2626 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   PAGINATION & TABLE FOOTER
   ========================================================================== */
.table > tfoot > tr > td {
  background: #F8FAFC !important;
  border: none !important;
  border-top: 1px solid #E2E8F0 !important;
  padding: 14px 20px !important;
}

.table-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.table-nav button {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.table-nav button:hover:not([disabled]) {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  color: var(--okta-blue) !important;
}

.table-nav button[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.dataTables_paginate,
.pagination {
  margin: 0 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  background: #FFFFFF !important;
  border-top: 1px solid #F1F5F9 !important;
}

.pagination > li > a {
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: #FFFFFF !important;
  transition: all 0.15s ease !important;
}

.pagination > li > a:hover {
  background: #F8FAFC !important;
  color: var(--okta-blue) !important;
  border-color: #94A3B8 !important;
}

.pagination > li.active > a {
  background: var(--okta-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--okta-blue) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   FEEDBACK & ALERTS
   ========================================================================== */
.feedback-aligner {
  position: fixed !important;
  top: 76px !important;
  right: 24px !important;
  z-index: 2000 !important;
  max-width: 420px !important;
}

.feedback-aligner .alert {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.alert {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 14px 20px !important;
  margin-bottom: 24px !important;
}

.alert-success {
  background-color: var(--okta-success-bg) !important;
  border-color: var(--okta-success-border) !important;
  color: var(--okta-success-text) !important;
}

.alert-danger {
  background-color: var(--okta-danger-bg) !important;
  border-color: var(--okta-danger-border) !important;
  color: var(--okta-danger-text) !important;
}

.alert-warning {
  background-color: var(--okta-warning-bg) !important;
  border-color: var(--okta-warning-border) !important;
  color: var(--okta-warning-text) !important;
}

.alert-info {
  background-color: var(--okta-blue-light) !important;
  border-color: #BFDBFE !important;
  color: var(--okta-navy) !important;
}

/* Client File Import Custom UI */
.import-file-wrapper label.btn-default {
  border: 1px dashed var(--okta-blue) !important;
  background-color: #F8FAFC !important;
  color: var(--okta-blue) !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease-in-out !important;
}

.import-file-wrapper label.btn-default:hover {
  background-color: var(--okta-blue-light) !important;
  border-color: var(--okta-blue-hover) !important;
  color: var(--okta-blue-hover) !important;
  box-shadow: 0 2px 6px rgba(22, 98, 221, 0.15) !important;
}