@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap");

/* Orobik Custom CSS Test
   Primary: #3463ac
   Target: Oracle APEX Universal Theme 42 / side navigation
   Load as Static Application File: #APP_FILES#orobik-custom-css-test-urbanist-v19.css
*/

:root {
  --orobik-font-family: "Urbanist", "Segoe UI", Roboto, Arial, sans-serif;
  --orobik-bg: #f5f8fb;
  --orobik-surface: rgba(255, 255, 255, 0.96);
  --orobik-surface-solid: #ffffff;
  --orobik-border: rgba(52, 99, 172, 0.08);
  --orobik-border-strong: rgba(52, 99, 172, 0.14);
  --orobik-text: #0f172a;
  --orobik-muted: #64748b;

  --orobik-primary: #3463ac;
  --orobik-primary-50: #eef4ff;
  --orobik-primary-100: #dce8fb;
  --orobik-primary-500: #4778c2;
  --orobik-primary-600: #2f5da3;
  --orobik-primary-700: #2b5597;

  --orobik-radius-sm: 10px;
  --orobik-radius-md: 14px;
  --orobik-radius-lg: 20px;
  --orobik-radius-xl: 26px;

  --orobik-shadow-sm: 0 7px 22px rgba(52, 99, 172, 0.075);
  --orobik-shadow-md: 0 12px 30px rgba(52, 99, 172, 0.10);
  --orobik-shadow-lg: 0 20px 46px rgba(52, 99, 172, 0.14);
}

/* Typography */
html,
body,
.t-Body,
.t-Header,
.t-Footer,
.t-Region,
.t-Button,
.a-Button,
.a-IRR,
.a-IG,
.a-CardView,
.a-Menu,
.ui-widget,
.apex-item-text,
.apex-item-select,
.apex-item-textarea,
select,
input,
textarea {
  font-family: var(--orobik-font-family) !important;
}

/* Reduce overly bold APEX/Redwood headings */
h1, h2, h3, h4, h5, h6,
.t-BreadcrumbRegion-titleText,
.t-Body-title,
.t-Region-title,
.a-CardView-title,
.a-IRR-header,
.a-IRR-headerLink {
  font-weight: 600 !important;
}

/* Remove Redwood Light decorative strip/background under tabs/title areas */
:root {
  --ut-body-title-background-image: none;
  --ut-body-title-background-color: transparent;
  --ut-region-header-background-color: rgba(255,255,255,.82);
}

.t-Body-title,
.t-BreadcrumbRegion,
.t-HeroRegion,
.t-Body-info,
.t-Body-topButton,
.t-TabsRegion,
.apex-rds-container,
.apex-rds,
.apex-rds-slider {
  background-image: none !important;
}

.t-TabsRegion,
.apex-rds-container {
  background-color: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--orobik-border) !important;
}

.apex-rds .apex-rds-item.apex-rds-selected,
.apex-rds .apex-rds-item.apex-rds-selected a,
.t-Tabs .t-Tabs-link.is-active,
.t-Tabs .t-Tabs-link:hover {
  color: var(--orobik-text) !important;
}

.apex-rds .apex-rds-selected:after,
.t-Tabs .t-Tabs-link.is-active:after {
  background-color: var(--orobik-primary) !important;
}

/* Cleaner nested regions */
.t-Region .t-Region,
.t-Region .a-IRR,
.t-Region .a-CardView-card,
.orobik-kpi {
  box-shadow: none !important;
  border-color: rgba(52, 99, 172, 0.10) !important;
}

.t-Region .t-Region {
  border-radius: var(--orobik-radius-md) !important;
}

/* User menu / dropdown readability */
.t-Header .a-Menu,
.t-Header .a-Menu-content,
.a-Menu-content {
  background: #ffffff !important;
  color: var(--orobik-text) !important;
}

.a-Menu-label,
.a-Menu .a-Icon,
.a-Menu-item a {
  color: var(--orobik-text) !important;
}

.a-Menu-item.is-focused .a-Menu-label,
.a-Menu-item.is-focused .a-Icon,
.a-Menu .is-current .a-Menu-label,
.a-Menu .is-current .a-Icon {
  color: #ffffff !important;
}

/* Global accent / remove APEX blue */
a,
.a-Link,
.t-Body a,
.a-IRR-table a,
.a-IRR-headerLink,
.a-IRR-sortWidget,
.a-CardView-title a,
.t-Region-title a,
.t-Report a {
  color: var(--orobik-primary-600) !important;
}

a:hover,
.a-Link:hover,
.t-Body a:hover,
.a-IRR-table a:hover,
.a-IRR-headerLink:hover,
.a-CardView-title a:hover,
.t-Report a:hover {
  color: var(--orobik-primary) !important;
}

:focus-visible {
  outline: 2px solid rgba(52, 99, 172, 0.25);
  outline-offset: 2px;
}

/* Page background: blue scale based on #3463ac */
.t-Body,
.t-Body-main,
.t-Body-content {
  background:
    radial-gradient(circle at 16% 0%, rgba(52, 99, 172, 0.20), transparent 32rem),
    radial-gradient(circle at 88% 10%, rgba(52, 99, 172, 0.20), transparent 30rem),
    linear-gradient(180deg, #edf4ff 0%, #f5f8fb 42%, #f7fafc 100%) !important;
  color: var(--orobik-text);
}

.t-Body-contentInner {
  padding: 24px !important;
}

/* Header */
.t-Header-branding {
  background: rgba(255, 255, 255, 0.84) !important;
  border-bottom: 1px solid var(--orobik-border) !important;
  backdrop-filter: blur(18px);
  box-shadow: none !important;
}

.t-Header-logo-link,
.t-Header .t-Button--header {
  color: var(--orobik-text) !important;
}

.t-Header-logo-link {
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Sidebar: #3463ac scale */
.t-Body-nav {
  background:
    radial-gradient(circle at 35% 0%, rgba(255,255,255,0.10), transparent 18rem),
    linear-gradient(180deg, #3463ac 0%, #284f8e 52%, #1f3f75 100%) !important;
  border-right: 0 !important;
  box-shadow: 12px 0 28px rgba(52, 99, 172, 0.18) !important;
}

.t-TreeNav {
  background: transparent !important;
  padding-top: 12px;
}

/* Force sidebar labels white */
.t-TreeNav .a-TreeView-content,
.t-TreeNav .a-TreeView-label,
.t-TreeNav .a-TreeView-label:link,
.t-TreeNav .a-TreeView-label:visited,
.t-TreeNav .a-TreeView-label:hover,
.t-TreeNav .a-TreeView-content .a-TreeView-label,
.t-TreeNav .a-TreeView-content .a-Icon {
  color: #ffffff !important;
}

.t-TreeNav .a-TreeView-content {
  border-radius: 14px;
  margin: 3px 10px;
  min-height: 42px;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.t-TreeNav .a-TreeView-label {
  font-weight: 600;
}

.t-TreeNav .a-TreeView-content .a-Icon {
  opacity: .86;
}

.t-TreeNav .a-TreeView-content:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  transform: translateX(2px);
}

.t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content,
.t-TreeNav .a-TreeView-content.is-current,
.t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content {
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 4px 0 0 #ffffff,
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

.t-TreeNav .is-current .a-TreeView-label,
.t-TreeNav .is-current .a-Icon {
  color: #ffffff !important;
  opacity: 1;
}

/* Breadcrumb / page title */
.t-BreadcrumbRegion {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 18px;
}

.t-BreadcrumbRegion-titleText,
.t-Body-title {
  color: var(--orobik-text) !important;
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* Regions / boxes: white with light shadow */
.t-Region,
.a-IRR,
.a-CardView-card,
.t-Cards-item,
.ui-dialog {
  background: var(--orobik-surface) !important;
  border: 1px solid var(--orobik-border) !important;
  border-radius: var(--orobik-radius-lg) !important;
  box-shadow: var(--orobik-shadow-sm) !important;
  overflow: hidden;
}

.t-Region-header,
.a-IRR-toolbar,
.ui-dialog .ui-dialog-titlebar {
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid var(--orobik-border) !important;
}

.t-Region-title,
.ui-dialog .ui-dialog-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--orobik-text) !important;
}

.t-Region-body {
  background: transparent !important;
}

/* Interactive Reports */
.a-IRR-toolbar {
  padding: 14px;
}

.a-IRR-tableContainer {
  border-radius: 0 0 var(--orobik-radius-lg) var(--orobik-radius-lg);
}

.a-IRR-table {
  border-collapse: separate;
  border-spacing: 0;
}

.a-IRR-header,
.a-IRR-headerLink,
.a-IRR-sortWidget {
  background: #f8fafc !important;
  color: var(--orobik-primary) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--orobik-border) !important;
}

.a-IRR-table td {
  border-color: rgba(52, 99, 172, 0.06) !important;
  color: #1e293b !important;
}

.a-IRR-table tr:hover td {
  background: var(--orobik-primary-50) !important;
}

/* Menus and dialogs */
.a-Menu,
.a-Menu-content,
.a-MenuBar,
.ui-widget.ui-widget-content {
  border-radius: 16px !important;
}

.a-Menu-content,
.ui-dialog .ui-dialog-content,
.ui-dialog {
  border-color: var(--orobik-border) !important;
  box-shadow: var(--orobik-shadow-md) !important;
}

.a-Menu-item.is-focused,
.a-Menu .is-current,
.a-MenuBar-item.is-focused {
  background: linear-gradient(135deg, var(--orobik-primary), var(--orobik-primary-600)) !important;
  color: #ffffff !important;
}

/* Buttons */
.t-Button,
.a-Button,
button {
  border-radius: 12px;
  font-weight: 600;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.t-Button:hover,
.a-Button:hover {
  transform: translateY(-1px);
}

.t-Button--hot,
.t-Button--primary,
button.t-Button--hot,
.a-Button--hot,
.a-Button.a-Button--hot {
  background: linear-gradient(135deg, var(--orobik-primary), var(--orobik-primary-600)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(52, 99, 172, 0.18) !important;
}

.t-Button--hot:hover,
.t-Button--primary:hover,
.a-Button--hot:hover {
  background: linear-gradient(135deg, var(--orobik-primary-600), var(--orobik-primary-500)) !important;
  box-shadow: 0 10px 24px rgba(52, 99, 172, 0.22) !important;
}

.t-Button:not(.t-Button--hot):not(.t-Button--primary),
.a-Button:not(.a-Button--hot) {
  border-color: rgba(0,32,56,.08) !important;
  color: var(--orobik-text) !important;
  background: rgba(255,255,255,.78) !important;
}

/* Form items */
.apex-item-text,
.apex-item-select,
.apex-item-textarea,
select,
input[type="text"],
input[type="password"],
textarea {
  border-radius: 12px !important;
  border-color: var(--orobik-border-strong) !important;
  background-color: rgba(255,255,255,.94) !important;
  color: var(--orobik-text) !important;
}

.apex-item-text:focus,
.apex-item-select:focus,
.apex-item-textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--orobik-primary-600) !important;
  box-shadow: 0 0 0 4px rgba(52, 99, 172, 0.10) !important;
}

/* Cards */
.a-CardView-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.a-CardView-card:hover {
  transform: translateY(-2px);
  border-color: rgba(52, 99, 172, 0.16) !important;
  box-shadow: var(--orobik-shadow-md) !important;
}

.a-CardView-title {
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Badges */
.t-Badge,
.a-IRR-badge {
  border-radius: 999px;
  font-weight: 600;
}

/* Login */
.t-Login-container {
  background:
    radial-gradient(circle at 20% 20%, rgba(52, 99, 172, 0.18), transparent 24rem),
    linear-gradient(145deg, #001521 0%, #3463ac 48%, #f4f7fa 48.2%, #f8fbfd 100%) !important;
}

.t-Login-region {
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: var(--orobik-shadow-lg) !important;
  backdrop-filter: blur(14px);
}

.t-Login-title {
  font-weight: 600;
  letter-spacing: -0.045em;
}

/* Optional utility classes */
.orobik-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(52, 99, 172, .10), transparent 18rem),
    linear-gradient(135deg, #ffffff 0%, #f2f6fd 100%) !important;
  border: 1px solid rgba(52, 99, 172, .08) !important;
  box-shadow: var(--orobik-shadow-md) !important;
}

.orobik-kpi {
  padding: 20px;
  border-radius: var(--orobik-radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid var(--orobik-border) !important;
  box-shadow: var(--orobik-shadow-sm) !important;
}

.orobik-muted {
  color: var(--orobik-muted);
}

.orobik-accent {
  color: var(--orobik-primary-600);
}

/* --------------------------------------------------------------------------
   APEX Redwood Light / Pillar Ocean strip fix
   Removes the decorative texture bar injected by Universal Theme on title area.
   Seen as: .rw-pillar-ocean .t-Body-title:after / .t-Body-mainContent:before
-------------------------------------------------------------------------- */
html .rw-pillar-ocean .t-Body-title::before,
html .rw-pillar-ocean .t-Body-title::after,
html .rw-pillar-ocean.rw-layout--fixed .t-Body-mainContent::before,
html body .t-Body-title::before,
html body .t-Body-title::after,
html body #t_Body_title::before,
html body #t_Body_title::after,
html body .t-Body-mainContent::before,
html body .t-Body-mainContent::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body #t_Body_title,
html body .t-Body-title {
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Keeps tabs clean after removing the Redwood title strip */
html body #t_Body_title .apex-rds-container,
html body #t_Body_title .apex-rds,
html body .t-Body-title .apex-rds-container,
html body .t-Body-title .apex-rds {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(52, 99, 172, 0.10) !important;
}

/* --------------------------------------------------------------------------
   OROBIK v3 fixes
   - Selected sidebar marker in dark-blue palette
   - Detail headers optional cleanup
   - Custom title tooltip restored and aligned with Orobik theme
   -------------------------------------------------------------------------- */

:root {
  --orobik-nav-selected-bar: #173b72;
  --orobik-tooltip-bg: #173b72;
  --orobik-tooltip-text: #ffffff;
}

/* Sidebar selected item: override APEX/Redwood aqua marker */
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-current,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-content,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-selected {
  border-left-color: var(--orobik-nav-selected-bar) !important;
  box-shadow:
    inset 4px 0 0 var(--orobik-nav-selected-bar),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content::before,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content::before,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-current::before,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content::before,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-content::before,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-selected::before,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content::after,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content::after,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-current::after,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content::after,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-content::after,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-selected::after {
  background-color: var(--orobik-nav-selected-bar) !important;
  border-color: var(--orobik-nav-selected-bar) !important;
}

/* Detail panels: remove duplicate/empty headers when details are opened.
   Preferred: add CSS class "orobik-hide-detail-header" to the detail region. */
.orobik-hide-detail-header > .t-Region-header,
.orobik-hide-detail-header .t-Region-header:has(.t-Region-title:empty),
.orobik-detail-region > .t-Region-header,
.orobik-details-region > .t-Region-header {
  display: none !important;
}

.orobik-hide-detail-header > .t-Region-body,
.orobik-detail-region > .t-Region-body,
.orobik-details-region > .t-Region-body {
  border-top: 0 !important;
}

/* APEX generated detail regions, best-effort generic cleanup */
.t-Region .a-IRR-detailView .t-Region-header,
.t-Region .a-IG-detailView .t-Region-header,
.t-Region .a-Details .t-Region-header {
  display: none !important;
}

/* Custom infobox tooltip for titles/icons.
   Restores visibility even inside rounded regions that use overflow hidden. */
.t-Region:has([data-my-tooltip]),
.t-Region-header:has([data-my-tooltip]),
.t-Region-title:has([data-my-tooltip]),
.t-BreadcrumbRegion:has([data-my-tooltip]),
.t-BreadcrumbRegion-title:has([data-my-tooltip]) {
  overflow: visible !important;
}

[data-my-tooltip] {
  position: relative !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: var(--orobik-primary-600) !important;
  font-size: 0.85em;
  font-weight: 500 !important;
  line-height: 1;
  margin-left: 6px;
  z-index: 30;
}

[data-my-tooltip]:hover::after,
[data-my-tooltip]:focus-visible::after {
  content: attr(data-my-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  max-width: min(280px, 80vw);
  white-space: normal;
  line-height: 1.35;
  text-align: left;
  background: linear-gradient(135deg, var(--orobik-tooltip-bg), var(--orobik-primary-700)) !important;
  color: var(--orobik-tooltip-text) !important;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px;
  font-weight: 500 !important;
  letter-spacing: normal;
  text-transform: none;
  z-index: 99999;
  pointer-events: none;
  animation: orobikTooltipFadeIn .16s ease-out;
}

[data-my-tooltip]:hover::before,
[data-my-tooltip]:focus-visible::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 10px;
  width: 12px;
  height: 12px;
  background: var(--orobik-tooltip-bg) !important;
  transform: rotate(45deg);
  z-index: 99998;
  pointer-events: none;
}

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

/* --------------------------------------------------------------------------
   OROBIK v4 fixes
   - Stronger selected sidebar marker override
   - Tooltip fixed for FontAwesome icons inside APEX titles
   - Stronger optional detail-header removal utilities
   -------------------------------------------------------------------------- */

:root {
  --orobik-nav-selected-bar: #173b72;
  --orobik-tooltip-bg: #173b72;
  --orobik-tooltip-text: #ffffff;
}

/* Sidebar current marker: Redwood/APEX can place the active bar on node, row,
   content or pseudo-elements depending on template options. */
.t-Body-nav,
.t-Body-nav .t-TreeNav,
.t-Body-nav .a-TreeView {
  --a-treeview-node-current-border-color: var(--orobik-nav-selected-bar) !important;
  --a-treeview-node-selected-border-color: var(--orobik-nav-selected-bar) !important;
  --ut-treeview-node-current-border-color: var(--orobik-nav-selected-bar) !important;
  --ut-treeview-node-selected-border-color: var(--orobik-nav-selected-bar) !important;
  --ut-palette-primary: var(--orobik-primary) !important;
}

.t-Body-nav .t-TreeNav .a-TreeView-node.is-current,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected {
  border-left-color: var(--orobik-nav-selected-bar) !important;
}

.t-Body-nav .t-TreeNav .a-TreeView-node.is-current::before,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current::before,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected::before,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected::before,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-current::after,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current::after,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected::after,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected::after,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-row::before,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-row::before,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-row::before,
.t-Body-nav .t-TreeNav .a-TreeView-node--TopLevel.is-selected > .a-TreeView-row::before {
  background: var(--orobik-nav-selected-bar) !important;
  background-color: var(--orobik-nav-selected-bar) !important;
  border-color: var(--orobik-nav-selected-bar) !important;
}

.t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-row,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-row,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-row,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-row,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content,
.t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-content,
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content {
  border-left: 4px solid var(--orobik-nav-selected-bar) !important;
  box-shadow:
    inset 4px 0 0 var(--orobik-nav-selected-bar),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

/* Tooltips in APEX titles.
   Important: do NOT use ::before on [data-my-tooltip], because FontAwesome icons
   use ::before for the icon glyph. */
.t-Region,
.t-Region-header,
.t-Region-headerItems,
.t-Region-headerItems--title,
.t-Region-title,
.t-BreadcrumbRegion,
.t-BreadcrumbRegion-body,
.t-BreadcrumbRegion-title,
.t-Body-title,
.t-Body-title .apex-rds-container,
.apex-rds-container {
  overflow: visible !important;
}

[data-my-tooltip] {
  position: relative !important;
  display: inline-block !important;
  cursor: help !important;
  color: var(--orobik-primary-600) !important;
  font-family: "Font APEX Small", "FontAwesome", var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: .82em !important;
  font-weight: normal !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  z-index: 100000 !important;
}

[data-my-tooltip]:hover,
[data-my-tooltip]:focus-visible {
  color: var(--orobik-primary) !important;
}

[data-my-tooltip]:hover::after,
[data-my-tooltip]:focus-visible::after {
  content: attr(data-my-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  width: max-content !important;
  min-width: 180px !important;
  max-width: min(320px, 80vw) !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  text-align: left !important;
  background: var(--orobik-tooltip-bg) !important;
  color: var(--orobik-tooltip-text) !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18) !important;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  z-index: 100001 !important;
  pointer-events: none !important;
  animation: orobikTooltipFadeIn .16s ease-out !important;
}

/* Disable old arrow rule from v3 so it does not overwrite FontAwesome ::before. */
[data-my-tooltip]:hover::before,
[data-my-tooltip]:focus-visible::before {
  content: revert !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  transform: none !important;
  z-index: auto !important;
}

/* Detail headers: apply one of these as CSS Class on the detail parent/region.
   Also supports the same names as Static ID via # selectors. */
.orobik-hide-detail-header .t-Region-header,
.orobik-detail-region .t-Region-header,
.orobik-details-region .t-Region-header,
#orobik-hide-detail-header .t-Region-header,
#orobik-detail-region .t-Region-header,
#orobik-details-region .t-Region-header,
.orobik-hide-detail-header .a-IRR-detailView-header,
.orobik-detail-region .a-IRR-detailView-header,
.orobik-details-region .a-IRR-detailView-header,
.orobik-hide-detail-header .a-IG-detailView-header,
.orobik-detail-region .a-IG-detailView-header,
.orobik-details-region .a-IG-detailView-header {
  display: none !important;
}

.orobik-hide-detail-header .t-Region-body,
.orobik-detail-region .t-Region-body,
.orobik-details-region .t-Region-body,
#orobik-hide-detail-header .t-Region-body,
#orobik-detail-region .t-Region-body,
#orobik-details-region .t-Region-body {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================
   OROBIK v5 hard fixes
   ========================= */

/* APEX Redwood TreeView selected indicator: in DevTools it is driven by
   --a-treeview-node-indicator / --rw-palette-blue-100 on .a-TreeView-row::before. */
:root,
.rw-pillar-ocean,
.t-Body-nav,
.t-TreeNav,
.a-TreeView,
.a-TreeView-row,
.a-TreeView-content {
  --orobik-nav-selected-bar: #173b72;
  --a-treeview-node-indicator: #173b72 !important;
  --rw-palette-blue-100: #173b72 !important;
}

html body .t-Body-nav .a-TreeView-row.is-selected::before,
html body .t-Body-nav .a-TreeView-row.is-current::before,
html body .t-Body-nav .a-TreeView-row.is-current--top::before,
html body .t-Body-nav .a-TreeView-node.is-selected > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node.is-current > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node--topLevel.is-selected > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node--topLevel.is-current > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node--topLevel > .a-TreeView-row.is-selected::before,
html body .t-Body-nav .a-TreeView-node--topLevel > .a-TreeView-row.is-current--top::before {
  background-color: #173b72 !important;
  background: #173b72 !important;
  inline-size: 4px !important;
  opacity: 1 !important;
}

/* Tooltip v5: never touch ::before because FontAwesome uses it for the icon. */
.t-Region,
.t-Region-body,
.t-Region-header,
.t-Region-headerItems,
.t-Region-headerItems--title,
.t-Region-title,
.t-Body-title,
.t-Body-content,
.t-Body-contentInner,
.a-CardView,
.a-CardView-card,
.a-CardView-body,
.a-ChartsRegion,
.a-ChartsRegion-chart,
.oj-dvtbase,
.oj-chart {
  overflow: visible !important;
}

[data-my-tooltip] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: help !important;
  color: #173b72 !important;
  font-size: .82em !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  z-index: 2147483600 !important;
}

[data-my-tooltip]:hover,
[data-my-tooltip]:focus-visible {
  color: var(--orobik-primary, #3463ac) !important;
}

[data-my-tooltip]:hover::after,
[data-my-tooltip]:focus-visible::after {
  content: attr(data-my-tooltip) !important;
  position: absolute !important;
  inset-block-start: calc(100% + 10px) !important;
  inset-inline-start: 0 !important;
  width: max-content !important;
  min-width: 190px !important;
  max-width: min(340px, 78vw) !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  text-align: left !important;
  background: #173b72 !important;
  color: #ffffff !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .22) !important;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  animation: orobikTooltipFadeIn .16s ease-out !important;
}

/* Detail header hard hide: use Static ID or CSS Class on the exact detail region. */
#orobik-hide-detail-header > .t-Region-header,
#orobik-detail-region > .t-Region-header,
#orobik-details-region > .t-Region-header,
.orobik-hide-detail-header > .t-Region-header,
.orobik-detail-region > .t-Region-header,
.orobik-details-region > .t-Region-header,
#orobik-hide-detail-header .t-Region-header,
#orobik-detail-region .t-Region-header,
#orobik-details-region .t-Region-header,
.orobik-hide-detail-header .t-Region-header,
.orobik-detail-region .t-Region-header,
.orobik-details-region .t-Region-header,
#orobik-hide-detail-header .t-Region-title,
#orobik-detail-region .t-Region-title,
#orobik-details-region .t-Region-title,
.orobik-hide-detail-header .t-Region-title,
.orobik-detail-region .t-Region-title,
.orobik-details-region .t-Region-title {
  display: none !important;
}

#orobik-hide-detail-header,
#orobik-detail-region,
#orobik-details-region,
.orobik-hide-detail-header,
.orobik-detail-region,
.orobik-details-region {
  padding-top: 0 !important;
}

#orobik-hide-detail-header > .t-Region-body,
#orobik-detail-region > .t-Region-body,
#orobik-details-region > .t-Region-body,
.orobik-hide-detail-header > .t-Region-body,
.orobik-detail-region > .t-Region-body,
.orobik-details-region > .t-Region-body {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* -------------------------------------------------------------------------
   OROBIK v6 fixes
   - Hide selected menu indicator completely
   - Safer custom title tooltips: no page overflow on right side
   ------------------------------------------------------------------------- */

/* Menu selected left indicator: fully transparent/hidden */
html body .t-Body-nav,
html body .t-Body-nav .a-TreeView,
html body .t-Body-nav .a-TreeView-row,
html body .t-Body-nav .a-TreeView-content,
html body .t-Body-nav .a-TreeView-node,
html body .t-Body-nav .a-TreeView-node.is-selected,
html body .t-Body-nav .a-TreeView-node.is-current,
html body .t-Body-nav .a-TreeView-node.is-current--top,
html body .t-Body-nav .a-TreeView-row.is-selected,
html body .t-Body-nav .a-TreeView-row.is-current,
html body .t-Body-nav .a-TreeView-row.is-current--top {
  --a-treeview-node-indicator: transparent !important;
  --a-treeview-node-indicator-color: transparent !important;
}

html body .t-Body-nav .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-row::after,
html body .t-Body-nav .a-TreeView-node::before,
html body .t-Body-nav .a-TreeView-node::after,
html body .t-Body-nav .a-TreeView-row.is-selected::before,
html body .t-Body-nav .a-TreeView-row.is-selected::after,
html body .t-Body-nav .a-TreeView-row.is-current::before,
html body .t-Body-nav .a-TreeView-row.is-current::after,
html body .t-Body-nav .a-TreeView-row.is-current--top::before,
html body .t-Body-nav .a-TreeView-row.is-current--top::after,
html body .t-Body-nav .a-TreeView-node.is-selected > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node.is-current > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node.is-current--top > .a-TreeView-row::before {
  background: transparent !important;
  background-color: transparent !important;
  inline-size: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

/* Tooltip: avoid global overflow changes that can create page scroll/jump */
.t-Region-header,
.t-Region-headerItems,
.t-Region-headerItems--title,
.t-Region-title,
.t-Body-title {
  overflow: visible !important;
}

/* Keep title tooltip compact and anchored to the right, so it does not expand past viewport */
.t-Region-title [data-my-tooltip],
[data-my-tooltip] {
  position: relative !important;
  display: inline-block !important;
  cursor: help !important;
  color: #173b72 !important;
  font-size: .82em !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  vertical-align: .08em !important;
  z-index: 20 !important;
}

.t-Region-title [data-my-tooltip]:hover::after,
.t-Region-title [data-my-tooltip]:focus-visible::after,
[data-my-tooltip]:hover::after,
[data-my-tooltip]:focus-visible::after {
  content: attr(data-my-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(320px, calc(100vw - 48px)) !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
  text-align: left !important;
  background: #173b72 !important;
  color: #ffffff !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .22) !important;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  animation: orobikTooltipFadeIn .16s ease-out !important;
}

/* Optional classes if a specific tooltip is close to the left side */
[data-my-tooltip].orobik-tooltip-left:hover::after,
[data-my-tooltip].orobik-tooltip-left:focus-visible::after {
  left: 0 !important;
  right: auto !important;
}

[data-my-tooltip].orobik-tooltip-center:hover::after,
[data-my-tooltip].orobik-tooltip-center:focus-visible::after {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* -------------------------------------------------------------------------
   OROBIK v7 fixes
   - Stop tooltip hover flicker by avoiding viewport overflow and unstable right anchoring
   - Make the menu selected indicator fully invisible
   ------------------------------------------------------------------------- */

/* Hide APEX/Redwood selected indicator completely */
html body .t-Body-nav,
html body .t-Body-nav .a-TreeView,
html body .t-Body-nav .a-TreeView-row,
html body .t-Body-nav .a-TreeView-node,
html body .t-Body-nav .a-TreeView-content {
  --a-treeview-node-indicator: transparent !important;
  --a-treeview-node-indicator-color: transparent !important;
  --a-treeview-node-current-border-color: transparent !important;
  --a-treeview-node-selected-border-color: transparent !important;
  --ut-treeview-node-current-border-color: transparent !important;
  --ut-treeview-node-selected-border-color: transparent !important;
}

html body .t-Body-nav .a-TreeView-row.is-selected::before,
html body .t-Body-nav .a-TreeView-row.is-current::before,
html body .t-Body-nav .a-TreeView-row.is-current--top::before,
html body .t-Body-nav .a-TreeView-row.is-selected::after,
html body .t-Body-nav .a-TreeView-row.is-current::after,
html body .t-Body-nav .a-TreeView-row.is-current--top::after,
html body .t-Body-nav .a-TreeView-node.is-selected > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node.is-current > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node.is-current--top > .a-TreeView-row::before {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  inline-size: 0 !important;
  width: 0 !important;
}

html body .t-Body-nav .a-TreeView-node.is-current > .a-TreeView-row,
html body .t-Body-nav .a-TreeView-node.is-current--top > .a-TreeView-row,
html body .t-Body-nav .a-TreeView-node.is-selected > .a-TreeView-row,
html body .t-Body-nav .a-TreeView-node.is-current > .a-TreeView-content,
html body .t-Body-nav .a-TreeView-node.is-current--top > .a-TreeView-content,
html body .t-Body-nav .a-TreeView-node.is-selected > .a-TreeView-content {
  border-left-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Tooltip stability: center by default, fixed width, no right-anchored overflow. */
html body [data-my-tooltip] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: help !important;
  color: #173b72 !important;
  font-size: .82em !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  vertical-align: .08em !important;
  z-index: 5000 !important;
}

/* Do not use ::before for the tooltip: FontAwesome/APEX icons need it for the glyph. */
html body [data-my-tooltip]:hover::before,
html body [data-my-tooltip]:focus-visible::before {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

html body [data-my-tooltip]:hover::after,
html body [data-my-tooltip]:focus-visible::after {
  content: attr(data-my-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 280px !important;
  max-width: calc(100vw - 64px) !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
  text-align: left !important;
  background: #173b72 !important;
  color: #ffffff !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .22) !important;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Optional explicit alignments still available */
html body [data-my-tooltip].orobik-tooltip-left:hover::after,
html body [data-my-tooltip].orobik-tooltip-left:focus-visible::after {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

html body [data-my-tooltip].orobik-tooltip-right:hover::after,
html body [data-my-tooltip].orobik-tooltip-right:focus-visible::after {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* -------------------------------------------------------------------------
   OROBIK v8 tooltip stabilization
   - Show tooltip from the whole title/header hover area, not only the tiny FA glyph
   - Do not require extra classes in APEX titles
   - Keep the selected menu indicator invisible
   ------------------------------------------------------------------------- */

/* Final confirmation: menu selected side indicator fully hidden */
html body .t-Body-nav .a-TreeView-row.is-selected::before,
html body .t-Body-nav .a-TreeView-row.is-current::before,
html body .t-Body-nav .a-TreeView-row.is-current--top::before,
html body .t-Body-nav .a-TreeView-row.is-selected.is-current--top::before,
html body .t-Body-nav .a-TreeView-row.is-selected.is-current::before,
html body .t-Body-nav .a-TreeView-row::before {
  --a-treeview-node-indicator: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  inline-size: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
}

/* Keep clipping away from tooltip host containers */
html body .t-Region:has([data-my-tooltip]),
html body .t-Region-header:has([data-my-tooltip]),
html body .t-Region-headerItems:has([data-my-tooltip]),
html body .t-Region-headerItems--title:has([data-my-tooltip]),
html body .t-Region-title:has([data-my-tooltip]),
html body .t-BreadcrumbRegion:has([data-my-tooltip]),
html body .t-BreadcrumbRegion-title:has([data-my-tooltip]) {
  overflow: visible !important;
}

/* Tooltip icon: only style the element, never its ::before glyph */
html body [data-my-tooltip] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: help !important;
  color: #173b72 !important;
  font-size: .82em !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  vertical-align: .08em !important;
  z-index: 9000 !important;
}

/* Stable default: the whole title/header keeps the tooltip open.
   This avoids hover flicker caused by the tiny FontAwesome pseudo-glyph area. */
html body .t-Region-title:hover [data-my-tooltip]::after,
html body .t-Region-header:hover [data-my-tooltip]::after,
html body .t-BreadcrumbRegion-title:hover [data-my-tooltip]::after,
html body [data-my-tooltip]:focus-visible::after {
  content: attr(data-my-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: min(360px, calc(100vw - 80px)) !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
  text-align: left !important;
  background: #173b72 !important;
  color: #ffffff !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .22) !important;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Disable the old direct-hover tooltip trigger from previous versions.
   Parent-title hover above remains active, so no title HTML changes are needed. */
html body [data-my-tooltip]:hover::after {
  content: none !important;
  display: none !important;
}

html body .t-Region-title:hover [data-my-tooltip]:hover::after,
html body .t-Region-header:hover [data-my-tooltip]:hover::after,
html body .t-BreadcrumbRegion-title:hover [data-my-tooltip]:hover::after {
  content: attr(data-my-tooltip) !important;
  display: block !important;
}

/* Optional manual alignments still work if ever needed */
html body .t-Region-title:hover [data-my-tooltip].orobik-tooltip-left::after,
html body .t-Region-header:hover [data-my-tooltip].orobik-tooltip-left::after {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

html body .t-Region-title:hover [data-my-tooltip].orobik-tooltip-right::after,
html body .t-Region-header:hover [data-my-tooltip].orobik-tooltip-right::after {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* -------------------------------------------------------------------------
   OROBIK v9 tooltip correction
   - Tooltip appears ONLY on the info icon, not on the whole region title
   - Larger invisible hit area for FontAwesome pseudo-icon stability
   - Tooltip is displayed above the icon to avoid hover interference
   ------------------------------------------------------------------------- */

/* Kill v8 parent-title/header hover behavior */
html body .t-Region-title:hover [data-my-tooltip]::after,
html body .t-Region-header:hover [data-my-tooltip]::after,
html body .t-BreadcrumbRegion-title:hover [data-my-tooltip]::after,
html body .t-Region-title:hover [data-my-tooltip]:hover::after,
html body .t-Region-header:hover [data-my-tooltip]:hover::after,
html body .t-BreadcrumbRegion-title:hover [data-my-tooltip]:hover::after {
  content: none !important;
  display: none !important;
}

/* Stable icon area: the real FA icon is ::before, so enlarge the parent target */
html body [data-my-tooltip] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 3px !important;
  margin-left: 6px !important;
  margin-right: 0 !important;
  box-sizing: content-box !important;
  cursor: help !important;
  color: #173b72 !important;
  font-size: .82em !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  z-index: 9000 !important;
}

/* Show tooltip only when hovering/focusing the icon itself */
html body [data-my-tooltip]:hover::after,
html body [data-my-tooltip]:focus-visible::after {
  content: attr(data-my-tooltip) !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 9px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: 340px !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
  text-align: left !important;
  background: #173b72 !important;
  color: #ffffff !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .22) !important;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Optional classes kept, but now only with icon hover */
html body [data-my-tooltip].orobik-tooltip-left:hover::after,
html body [data-my-tooltip].orobik-tooltip-left:focus-visible::after {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

html body [data-my-tooltip].orobik-tooltip-right:hover::after,
html body [data-my-tooltip].orobik-tooltip-right:focus-visible::after {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* ========================================================================
   OROBIK v10 final overrides
   - Disable all old CSS-only tooltip renderers.
   - Keep only icon styling; tooltip is handled by orobik-tooltip-stable.js.
   - Keep selected menu indicator transparent.
   ======================================================================== */

/* Selected sidebar indicator: fully hidden/transparent */
html body .t-Body-nav,
html body .t-TreeNav,
html body .a-TreeView,
html body .t-Body-nav .a-TreeView-row,
html body .t-Body-nav .a-TreeView-content {
  --a-treeview-node-indicator: transparent !important;
  --a-treeview-node-indicator-color: transparent !important;
  --rw-palette-blue-100: transparent !important;
}

html body .t-Body-nav .a-TreeView-row.is-selected::before,
html body .t-Body-nav .a-TreeView-row.is-current::before,
html body .t-Body-nav .a-TreeView-row.is-current--top::before,
html body .t-Body-nav .a-TreeView-row.is-selected.is-current::before,
html body .t-Body-nav .a-TreeView-row.is-selected.is-current--top::before,
html body .t-Body-nav .a-TreeView-node.is-current > .a-TreeView-row::before,
html body .t-Body-nav .a-TreeView-node--topLevel.is-current > .a-TreeView-row::before {
  background: transparent !important;
  background-color: transparent !important;
  inline-size: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  display: none !important;
}

/* Disable every previous CSS-only tooltip pseudo-element. */
html body [data-my-tooltip]::after,
html body [data-my-tooltip]:hover::after,
html body [data-my-tooltip]:focus::after,
html body [data-my-tooltip]:focus-visible::after,
html body .t-Region-title:hover [data-my-tooltip]::after,
html body .t-Region-header:hover [data-my-tooltip]::after,
html body .t-BreadcrumbRegion-title:hover [data-my-tooltip]::after,
html body .t-Region-title:hover [data-my-tooltip]:hover::after,
html body .t-Region-header:hover [data-my-tooltip]:hover::after,
html body .t-BreadcrumbRegion-title:hover [data-my-tooltip]:hover::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Do not touch FontAwesome/APEX ::before glyphs. Only style the host icon. */
html body [data-my-tooltip] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  cursor: help !important;
  color: #173b72 !important;
  font-size: .82em !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  overflow: visible !important;
}

html body [data-my-tooltip]:hover,
html body [data-my-tooltip]:focus,
html body [data-my-tooltip]:focus-visible {
  color: #3463ac !important;
  outline: none !important;
}

/* Stable JS tooltip surface. */
#orobik-stable-tooltip {
  position: fixed;
  z-index: 2147483647;
  max-width: min(320px, calc(100vw - 24px));
  padding: 9px 12px;
  border-radius: 10px;
  background: #173b72;
  color: #ffffff;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgba(23, 59, 114, 0.24);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  white-space: normal;
}

#orobik-stable-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ========================================================================
   OROBIK v11 - Replace remaining green accents with primary color
   Targets: Media List icons and APEX RDS/tab selected underline
   ======================================================================== */

:root {
  --orobik-primary: #3463ac;
  --orobik-primary-dark: #173b72;
}

/* Media List icon circles/cards: remove Redwood green accent. */
html body .t-MediaList-icon,
html body .t-MediaList-icon.u-color,
html body .t-MediaList-iconWrap .t-MediaList-icon,
html body .t-MediaList--showIcons .t-MediaList-icon {
  --u-color: var(--orobik-primary) !important;
  --ut-component-icon-background-color: var(--orobik-primary) !important;
  --ut-medialist-icon-background-color: var(--orobik-primary) !important;
  --ut-medialist-icon-color: #ffffff !important;
  background: var(--orobik-primary) !important;
  background-color: var(--orobik-primary) !important;
  color: #ffffff !important;
}

html body .t-MediaList-icon::before,
html body .t-MediaList-icon .a-Icon,
html body .t-MediaList-icon .fa,
html body .t-MediaList-icon .t-Icon {
  color: #ffffff !important;
}

/* RDS / tabs selected underline: primary only on active tab. */
html body .apex-rds,
html body .a-RDS,
html body .a-Tabs,
html body .apex-tabs-region {
  --ut-tabs-item-highlight-color: var(--orobik-primary) !important;
  --ut-tabs-item-text-color-active: var(--orobik-primary-dark) !important;
  --ut-tabs-item-text-color-hover: var(--orobik-primary) !important;
}

/* reset: inactive tab underline must stay hidden */
html body .apex-rds .a-RDS-link::before,
html body .a-RDS .a-RDS-link::before,
html body .a-Tabs .a-Tabs-link::before,
html body .apex-tabs-region .a-RDS-link::before {
  background: transparent !important;
  background-color: transparent !important;
}

/* selected / active tab underline */
html body .apex-rds-selected .a-RDS-link::before,
html body .a-RDS-item.apex-rds-selected > .a-RDS-link::before,
html body .a-RDS-item.is-active > .a-RDS-link::before,
html body .a-RDS-link[aria-selected="true"]::before,
html body .a-RDS-item[aria-selected="true"] > .a-RDS-link::before,
html body .a-Tabs-link[aria-selected="true"]::before,
html body .a-Tabs-item.is-active > .a-Tabs-link::before {
  background: var(--orobik-primary) !important;
  background-color: var(--orobik-primary) !important;
}

html body .apex-rds-selected .a-RDS-link,
html body .a-RDS-item.apex-rds-selected .a-RDS-link,
html body .a-RDS-link[aria-selected="true"],
html body .a-Tabs-link[aria-selected="true"] {
  color: var(--orobik-primary-dark) !important;
}

html body .a-RDS-link:hover,
html body .a-Tabs-link:hover {
  color: var(--orobik-primary) !important;
}


/* Orobik v13 - hide Redwood/APEX long strip below tab regions while keeping active tab underline visible */
html body .t-Body-title::before,
html body .t-Body-title::after,
html body #t_Body_title::before,
html body #t_Body_title::after,
html body .rw-pillar-ocean .t-Body-title::before,
html body .rw-pillar-ocean .t-Body-title::after,
html body .rw-pillar-ocean.rw-layout--fixed .t-Body-mainContent::before,
html body .rw-pillar-ocean.rw-layout--fixed .t-Body-mainContent::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .apex-rds-slider,
html body .a-RDS-slider,
html body .apex-rds-container::before,
html body .apex-rds-container::after,
html body .apex-tabs-region::before,
html body .apex-tabs-region::after,
html body .t-TabsRegion::before,
html body .t-TabsRegion::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .t-Body-title,
html body #t_Body_title,
html body .apex-rds-container,
html body .apex-tabs-region,
html body .t-TabsRegion {
  background-image: none !important;
  border-bottom-color: rgba(52, 99, 172, 0.08) !important;
}


/* Remove Redwood decorative strip in APEX dialog / drawer titlebar */
html body .ui-dialog .ui-dialog-titlebar::before,
html body .ui-dialog .ui-dialog-titlebar::after,
html body .t-Drawer .ui-dialog-titlebar::before,
html body .t-Drawer .ui-dialog-titlebar::after,
html body .t-Drawer-page .ui-dialog-titlebar::before,
html body .t-Drawer-page .ui-dialog-titlebar::after,
html body .ui-dialog--apex .ui-dialog-titlebar::before,
html body .ui-dialog--apex .ui-dialog-titlebar::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .ui-dialog .ui-dialog-titlebar {
  background-image: none !important;
  border-bottom: 1px solid var(--orobik-border) !important;
}

/* ========================================================================
   OROBIK v14 - stable info icon hover
   - Keeps FontAwesome/APEX info icon visible during hover/focus
   - Prevents vertical layout shift when JS tooltip appears
   - Tooltip rendering remains delegated to orobik-tooltip-stable.js
   ======================================================================== */

html body .t-Region-title [data-my-tooltip],
html body .t-BreadcrumbRegion-title [data-my-tooltip],
html body .t-Region-header [data-my-tooltip],
html body [data-my-tooltip].fa,
html body [data-my-tooltip].a-Icon,
html body [data-my-tooltip].t-Icon {
  position: relative !important;
  display: inline-block !important;
  width: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  height: 1em !important;
  min-height: 1em !important;
  max-height: 1em !important;
  padding: 0 !important;
  margin-left: .45rem !important;
  margin-right: 0 !important;
  box-sizing: content-box !important;
  line-height: 1 !important;
  vertical-align: 0.02em !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  cursor: help !important;
  color: var(--orobik-primary-dark) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  z-index: 9000 !important;
}

html body .t-Region-title [data-my-tooltip]::before,
html body .t-BreadcrumbRegion-title [data-my-tooltip]::before,
html body .t-Region-header [data-my-tooltip]::before,
html body [data-my-tooltip].fa::before,
html body [data-my-tooltip].a-Icon::before,
html body [data-my-tooltip].t-Icon::before {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  min-height: 1em !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body .t-Region-title [data-my-tooltip]:hover,
html body .t-BreadcrumbRegion-title [data-my-tooltip]:hover,
html body .t-Region-header [data-my-tooltip]:hover,
html body .t-Region-title [data-my-tooltip]:focus,
html body .t-BreadcrumbRegion-title [data-my-tooltip]:focus,
html body .t-Region-header [data-my-tooltip]:focus,
html body .t-Region-title [data-my-tooltip]:focus-visible,
html body .t-BreadcrumbRegion-title [data-my-tooltip]:focus-visible,
html body .t-Region-header [data-my-tooltip]:focus-visible,
html body [data-my-tooltip].fa:hover,
html body [data-my-tooltip].fa:focus,
html body [data-my-tooltip].fa:focus-visible {
  color: #5f82c2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  outline: none !important;
}

html body .t-Region-title [data-my-tooltip]:hover::before,
html body .t-BreadcrumbRegion-title [data-my-tooltip]:hover::before,
html body .t-Region-header [data-my-tooltip]:hover::before,
html body .t-Region-title [data-my-tooltip]:focus::before,
html body .t-BreadcrumbRegion-title [data-my-tooltip]:focus::before,
html body .t-Region-header [data-my-tooltip]:focus::before,
html body [data-my-tooltip].fa:hover::before,
html body [data-my-tooltip].fa:focus::before,
html body [data-my-tooltip].fa:focus-visible::before {
  color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Hard-disable every CSS pseudo tooltip renderer so JS tooltip is the only tooltip. */
html body [data-my-tooltip]::after,
html body [data-my-tooltip]:hover::after,
html body [data-my-tooltip]:focus::after,
html body [data-my-tooltip]:focus-visible::after,
html body .t-Region-title:hover [data-my-tooltip]::after,
html body .t-Region-header:hover [data-my-tooltip]::after,
html body .t-BreadcrumbRegion-title:hover [data-my-tooltip]::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* JS tooltip itself: fixed-position overlay, no impact on layout. */
html body #orobik-stable-tooltip {
  position: fixed !important;
  z-index: 2147483647 !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: var(--orobik-primary-dark, #173b72) !important;
  color: #ffffff !important;
  font-family: var(--orobik-font-family, "Urbanist", "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  box-shadow: 0 10px 26px rgba(23, 59, 114, 0.24) !important;
  pointer-events: none !important;
  white-space: normal !important;
  will-change: opacity, transform !important;
}

/* OROBIK v15 - keep Font APEX info tooltip icon always visible */
html body span.fa.fa-info-circle-o[data-my-tooltip],
html body span.fa.fa-info-circle[data-my-tooltip],
html body .fa.fa-info-circle-o[data-my-tooltip],
html body .fa.fa-info-circle[data-my-tooltip] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  vertical-align: baseline !important;
  color: var(--orobik-primary-dark, #173b72) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
  z-index: 2 !important;
}

html body span.fa.fa-info-circle-o[data-my-tooltip]::before,
html body .fa.fa-info-circle-o[data-my-tooltip]::before {
  content: "\eb01" !important;
  font-family: "Font APEX Small" !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  display: block !important;
  color: var(--orobik-primary-dark, #173b72) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body span.fa.fa-info-circle[data-my-tooltip]::before,
html body .fa.fa-info-circle[data-my-tooltip]::before {
  content: "\e065" !important;
  font-family: "Font APEX Small" !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  display: block !important;
  color: var(--orobik-primary-dark, #173b72) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body span.fa.fa-info-circle-o[data-my-tooltip]:hover,
html body span.fa.fa-info-circle-o[data-my-tooltip]:focus,
html body span.fa.fa-info-circle-o[data-my-tooltip]:focus-visible,
html body span.fa.fa-info-circle[data-my-tooltip]:hover,
html body span.fa.fa-info-circle[data-my-tooltip]:focus,
html body span.fa.fa-info-circle[data-my-tooltip]:focus-visible,
html body .fa.fa-info-circle-o[data-my-tooltip]:hover,
html body .fa.fa-info-circle-o[data-my-tooltip]:focus,
html body .fa.fa-info-circle-o[data-my-tooltip]:focus-visible,
html body .fa.fa-info-circle[data-my-tooltip]:hover,
html body .fa.fa-info-circle[data-my-tooltip]:focus,
html body .fa.fa-info-circle[data-my-tooltip]:focus-visible {
  color: #5f82c2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  outline: none !important;
}

html body span.fa.fa-info-circle-o[data-my-tooltip]:hover::before,
html body span.fa.fa-info-circle-o[data-my-tooltip]:focus::before,
html body span.fa.fa-info-circle-o[data-my-tooltip]:focus-visible::before,
html body span.fa.fa-info-circle[data-my-tooltip]:hover::before,
html body span.fa.fa-info-circle[data-my-tooltip]:focus::before,
html body span.fa.fa-info-circle[data-my-tooltip]:focus-visible::before,
html body .fa.fa-info-circle-o[data-my-tooltip]:hover::before,
html body .fa.fa-info-circle-o[data-my-tooltip]:focus::before,
html body .fa.fa-info-circle-o[data-my-tooltip]:focus-visible::before,
html body .fa.fa-info-circle[data-my-tooltip]:hover::before,
html body .fa.fa-info-circle[data-my-tooltip]:focus::before,
html body .fa.fa-info-circle[data-my-tooltip]:focus-visible::before {
  color: #5f82c2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
}


/* OROBIK v16 - Fix border radius for regions with visible headers */
html body .t-Region {
  border-radius: var(--orobik-radius-lg) !important;
  overflow: hidden !important;
}

html body .t-Region > .t-Region-header,
html body .t-Region > .t-Region-headerWrap,
html body .t-Region > .t-Region-headerItems {
  border-top-left-radius: var(--orobik-radius-lg) !important;
  border-top-right-radius: var(--orobik-radius-lg) !important;
}

html body .t-Region > .t-Region-header {
  overflow: hidden !important;
}

/* noBorder regions used as cards */
html body .t-Region.t-Region--noBorder {
  border: 1px solid var(--orobik-border) !important;
  border-radius: var(--orobik-radius-lg) !important;
  overflow: hidden !important;
  background: var(--orobik-surface) !important;
  box-shadow: var(--orobik-shadow-sm) !important;
}

html body .t-Region.t-Region--noBorder > .t-Region-header {
  border-top-left-radius: var(--orobik-radius-lg) !important;
  border-top-right-radius: var(--orobik-radius-lg) !important;
}

/* Specific safeguard for recommendation saving gauge */
html body #saving_gauge {
  border: 1px solid var(--orobik-border) !important;
  border-radius: var(--orobik-radius-lg) !important;
  overflow: hidden !important;
  background: var(--orobik-surface) !important;
  box-shadow: var(--orobik-shadow-sm) !important;
}

html body #saving_gauge > .t-Region-header {
  border-top-left-radius: var(--orobik-radius-lg) !important;
  border-top-right-radius: var(--orobik-radius-lg) !important;
  overflow: hidden !important;
}
/* Cards icons - force Orobik primary color */
html body .t-Card-icon,
html body .t-Card-icon.u-color,
html body .t-Card .t-Card-icon,
html body .t-Cards .t-Card-icon {
  --u-color: var(--orobik-primary) !important;
  --ut-card-icon-background-color: var(--orobik-primary) !important;
  --ut-component-icon-background-color: var(--orobik-primary) !important;
  background: var(--orobik-primary) !important;
  background-color: var(--orobik-primary) !important;
  color: #ffffff !important;
}

html body .t-Card-icon::before,
html body .t-Card-icon .t-Icon,
html body .t-Card-icon .fa,
html body .t-Card-icon span,
html body .t-Card .t-Icon,
html body .t-Card .fa {
  color: #ffffff !important;
}


/* ========================================================================
   OROBIK v17 - Login full primary gradient background
   - Removes the white diagonal split from the login page
   - Uses layered primary-blue gradients and soft ambient shapes
   ======================================================================== */

html body .t-Login-container,
html body .t-LoginPage,
html body .t-PageBody--login {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(110, 149, 211, 0.42) 0%, rgba(110, 149, 211, 0.18) 22rem, transparent 42rem),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 16rem, transparent 34rem),
    radial-gradient(circle at 74% 86%, rgba(23, 59, 114, 0.48) 0%, rgba(23, 59, 114, 0.24) 22rem, transparent 44rem),
    linear-gradient(135deg, #0b2548 0%, #173b72 34%, #3463ac 68%, #5f82c2 100%) !important;
  background-attachment: fixed !important;
  color: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}

html body .t-Login-container::before,
html body .t-LoginPage::before,
html body .t-PageBody--login::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(115deg, transparent 0%, transparent 43%, rgba(255,255,255,0.10) 43.2%, rgba(255,255,255,0.05) 58%, transparent 58.2%, transparent 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 18px) !important;
  opacity: .55 !important;
  mix-blend-mode: screen !important;
  z-index: 0 !important;
}

html body .t-Login-container::after,
html body .t-LoginPage::after,
html body .t-PageBody--login::after {
  content: "" !important;
  position: fixed !important;
  width: 34rem !important;
  height: 34rem !important;
  right: -10rem !important;
  bottom: -12rem !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.07) 36%, transparent 70%) !important;
  filter: blur(1px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body .t-Login-region,
html body .t-Login-container .t-Login-region {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 30px !important;
  box-shadow:
    0 28px 70px rgba(8, 28, 60, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
}

html body .t-Login-logo,
html body .t-Login-logo .t-Icon,
html body .t-Login-logo .fa {
  background-color: var(--orobik-primary, #3463ac) !important;
  color: #ffffff !important;
}

html body .t-Login-title {
  color: var(--orobik-text, #0f172a) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

html body .t-Login-region .t-Button--hot,
html body .t-Login-region .t-Button--primary,
html body .t-Login-region button.t-Button--hot {
  background: linear-gradient(135deg, #3463ac 0%, #2f5da3 58%, #173b72 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 12px 26px rgba(52, 99, 172, 0.28) !important;
}

html body .t-Login-region .t-Button--hot:hover,
html body .t-Login-region .t-Button--primary:hover,
html body .t-Login-region button.t-Button--hot:hover {
  background: linear-gradient(135deg, #4778c2 0%, #3463ac 58%, #173b72 100%) !important;
  box-shadow: 0 14px 30px rgba(52, 99, 172, 0.34) !important;
}

html body .t-Login-region .apex-item-text,
html body .t-Login-region .apex-item-password,
html body .t-Login-region input[type="text"],
html body .t-Login-region input[type="password"] {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(52, 99, 172, 0.18) !important;
}

html body .t-Login-region .apex-item-text:focus,
html body .t-Login-region .apex-item-password:focus,
html body .t-Login-region input[type="text"]:focus,
html body .t-Login-region input[type="password"]:focus {
  border-color: var(--orobik-primary, #3463ac) !important;
  box-shadow: 0 0 0 4px rgba(52, 99, 172, 0.14) !important;
}


/* ========================================================================
   OROBIK v18 - Login text color fix
   - v17 made the full login page text white because the container is white-on-blue.
   - Keep the gradient background, but force text inside the login card/body back to readable dark/muted tones.
   ======================================================================== */

html body .t-Login-region,
html body .t-Login-region div,
html body .t-Login-region p,
html body .t-Login-region span:not(.t-Icon):not(.fa),
html body .t-Login-region label,
html body .t-Login-region .t-Form-label,
html body .t-Login-region .t-Form-inputContainer,
html body .t-Login-region .t-Login-body,
html body .t-Login-region .t-Login-body div,
html body .t-Login-region .t-Login-body p {
  color: var(--orobik-text, #0f172a) !important;
}

html body .t-Login-region .t-Login-instructions,
html body .t-Login-region .t-Login-subtitle,
html body .t-Login-region .t-Login-body > div:not(.t-Form-fieldContainer),
html body .t-Login-region .t-Form-help,
html body .t-Login-region .t-Form-itemText,
html body .t-Login-region .t-Form-itemWrapper + .t-Form-help {
  color: var(--orobik-muted, #64748b) !important;
}

html body .t-Login-region input,
html body .t-Login-region input::placeholder,
html body .t-Login-region .apex-item-text::placeholder,
html body .t-Login-region .apex-item-password::placeholder {
  color: var(--orobik-muted, #64748b) !important;
}

html body .t-Login-region input,
html body .t-Login-region .apex-item-text,
html body .t-Login-region .apex-item-password {
  color: var(--orobik-text, #0f172a) !important;
}

html body .t-Login-region .t-Button--hot,
html body .t-Login-region .t-Button--primary,
html body .t-Login-region button.t-Button--hot,
html body .t-Login-region button.t-Button--primary,
html body .t-Login-region .t-Button--hot span,
html body .t-Login-region .t-Button--primary span {
  color: #ffffff !important;
}

html body .t-Login-region .t-Icon,
html body .t-Login-region .fa {
  color: inherit !important;
}
/* Login button text must stay white */
html body.t-PageBody--login .t-Login-region .t-Button--hot,
html body.t-PageBody--login .t-Login-region .t-Button--primary,
html body.t-PageBody--login .t-Login-region button.t-Button--hot,
html body.t-PageBody--login .t-Login-region button.t-Button--primary,
html body.t-PageBody--login .t-Login-region .t-Button--hot span,
html body.t-PageBody--login .t-Login-region .t-Button--primary span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ========================================================================
   OROBIK v19 - Sidebar active item cleanup
   - Removes the dark left shadow/bar on the selected menu item.
   - Keeps only the full-row selected/highlight background.
   ======================================================================== */

html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-current,
html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-selected,
html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-current--top,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-row,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-row,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-row,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-row {
  border-left: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-current,
html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-selected,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content {
  background: rgba(255, 255, 255, 0.12) !important;
}

html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-current::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-current::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-selected::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-content.is-selected::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-current::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-current::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-selected::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-selected::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-current--top::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-current--top::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-selected.is-current::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-selected.is-current::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-selected.is-current--top::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-row.is-selected.is-current--top::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-current::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-current::after,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-selected::before,
html body .t-Body-nav .t-TreeNav .a-TreeView-node.is-selected::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  inline-size: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

html body .t-Body-nav,
html body .t-Body-nav .t-TreeNav,
html body .t-Body-nav .a-TreeView,
html body .t-Body-nav .a-TreeView-row,
html body .t-Body-nav .a-TreeView-content {
  --orobik-nav-selected-bar: transparent !important;
  --a-treeview-node-indicator: transparent !important;
  --a-treeview-node-indicator-color: transparent !important;
  --a-treeview-node-current-border-color: transparent !important;
  --a-treeview-node-selected-border-color: transparent !important;
  --ut-treeview-node-current-border-color: transparent !important;
  --ut-treeview-node-selected-border-color: transparent !important;
}