/* ==========================================================================
 * HIM BioBank — Mirbal/Bootstrap token remap (vibrant enterprise theme)
 * Loaded AFTER app.min.css, BEFORE him-overrides.css.
 * Primary #0186dd (sidebar buttons = primary bg + WHITE text)
 * Buttons #159795 / #b107d2 / #019aa1 | Cards accent #f27013
 * Shadows + icon backgrounds #fdae04 (+ light tints everywhere)
 * WITHOUT changing any functional markup, routes, or logic.
 * Single source of truth remains app/styles/theme.css; values mirrored here
 * for the legacy Bootstrap shell.
 * ========================================================================== */

:root,
html:not([data-bs-theme="dark"]),
html[data-bs-theme="light"] {
  /* Bootstrap core */
  --bs-primary: #0186dd;
  --bs-primary-rgb: 1, 134, 221;
  --bs-secondary: #019aa1;
  --bs-secondary-rgb: 1, 154, 161;
  --bs-success: #159795;
  --bs-success-rgb: 21, 151, 149;
  --bs-info: #019aa1;
  --bs-info-rgb: 1, 154, 161;
  --bs-warning: #fdae04;
  --bs-warning-rgb: 253, 174, 4;
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light: #e8f4fd;
  --bs-dark: #0f3557;
  --bs-body-bg: #f2f8fe;
  --bs-body-color: #143a5c;
  --bs-border-color: #cfe5f7;
  --bs-link-color: #0186dd;
  --bs-link-hover-color: #0170b8;

  /* Mirbal (pe) tokens */
  --pe-primary: #0186dd;
  --pe-primary-rgb: 1, 134, 221;
  --pe-secondary: #019aa1;
  --pe-success: #159795;
  --pe-info: #019aa1;
  --pe-warning: #fdae04;
  --pe-danger: #dc3545;
  --pe-light: #e8f4fd;
  --pe-dark: #0f3557;
  --pe-body-bg: #f2f8fe;
  --pe-body-color: #143a5c;
  --pe-emphasis-color: #0f3557;
  --pe-secondary-color: #4f6a88;
  --pe-tertiary-color: #7d93ad;
  --pe-heading-color: #0f3557;
  --pe-border-color: #cfe5f7;
  --pe-secondary-bg: #ffffff;
  --pe-tertiary-bg: #e8f4fd;
  --pe-link-color: #0186dd;
  --pe-link-hover-color: #0170b8;

  /* Sidebar (light default; active button is teal #0d9488 + white text) */
  --pe-sidebar-bg: #ffffff;
  --pe-sidebar-text: #143a5c;
  --pe-app-sidebar-width: 250px;

  /* bridge to central tokens */
  --color-primary: #0186dd;
  --color-sidebar-active: #0d9488;
  --color-teal: #159795;
  --color-aqua: #019aa1;
  --color-purple: #b107d2;
  --color-orange: #f27013;
  --color-amber: #fdae04;
  --color-secondary: #019aa1;
  --color-background: #f2f8fe;
  --color-surface: #ffffff;
  --color-text-primary: #143a5c;
}

/* ---- App canvas (natural photo background) ----
 * The photo shows as-is (no wash/shadow) and fills the whole admin panel on
 * every screen (cover = crop, never stretch or gap; fixed on desktop so
 * content glides over it). */
.him-app#layout-wrapper,
#layout-wrapper.him-app {
  background-color: #f2f8fe !important;
  background-image: url("/images/background.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #143a5c;
}
/* Dark mode: same natural photo */
html[data-bs-theme="dark"] .him-app#layout-wrapper,
html[data-bs-theme="dark"] #layout-wrapper.him-app {
  background-color: #0c1a2b !important;
  background-image: url("/images/background.jpg");
}
/* Small screens: fixed attachment janks on mobile browsers — scroll normally */
@media (max-width: 1023.98px) {
  .him-app#layout-wrapper,
  #layout-wrapper.him-app {
    background-attachment: scroll;
    background-position: center;
  }
}

/* ==========================================================================
 * Sidebar — single authoritative block (teal #0d9488 pill + WHITE text)
 * Base theme forces blue text on light-sidebar actives at (0,5,0) and paints
 * a blurred white ::after glow on active/hover — both neutralized below.
 * ========================================================================== */
html[data-sidebar-color="light"] .pe-app-sidebar,
html:not([data-sidebar-color]) .pe-app-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e3f0fb !important;
}
.pe-app-sidebar .pe-nav-link {
  border-radius: 10px;
  color: #4f6a88;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
/* Link sizing at (0,4,0)+ to beat the theme's nav-link rules.
   Compact padding; icon chips and text colors untouched. */
.him-app .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link {
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.7rem;
  min-height: 2.5rem;
}
.pe-app-sidebar .pe-nav-link:hover {
  background: #e6f5f4 !important;
  background-image: none !important;
  color: #0d9488 !important;
}
/* Active pill — solid teal, white text/icon (every state, both themes) */
.pe-app-sidebar .pe-nav-link.active,
.pe-app-sidebar .pe-nav-link.active:hover,
.pe-app-sidebar .pe-nav-link.active:focus,
html[data-sidebar-color="light"] .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link.active,
html[data-sidebar-color="light"] .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link.active:hover,
html[data-sidebar-color="light"] .him-app .pe-app-sidebar .pe-nav-link.active,
html[data-sidebar-color="light"] .him-app .pe-app-sidebar .pe-nav-link.active:hover {
  background: #0d9488 !important;
  background-image: none !important;
  border-color: #0d9488 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(13, 148, 136, 0.35);
}
/* Active link goes FULL-BLEED (expanded rail only): spans edge-to-edge with
   no white gutter. Negates the 1rem menu padding; inner padding restored so
   icon + label stay aligned with the other items. Collapsed rails and the
   version pin keep their inset pills. */
html:not([data-sidebar="icon"]):not([data-sidebar="icon-hover"]) .him-app .pe-app-sidebar .pe-app-sidebar-menu .pe-main-menu .pe-nav-link.active:not(.him-version-link),
html:not([data-sidebar="icon"]):not([data-sidebar="icon-hover"]) .him-app .pe-app-sidebar .pe-app-sidebar-menu .pe-main-menu .pe-nav-link.active:not(.him-version-link):hover,
html[data-sidebar-color="light"]:not([data-sidebar="icon"]):not([data-sidebar="icon-hover"]) .him-app .pe-app-sidebar .pe-app-sidebar-menu .pe-main-menu .pe-nav-link.active:not(.him-version-link),
html[data-sidebar-color="light"]:not([data-sidebar="icon"]):not([data-sidebar="icon-hover"]) .him-app .pe-app-sidebar .pe-app-sidebar-menu .pe-main-menu .pe-nav-link.active:not(.him-version-link):hover {
  margin-inline: -1rem;
  border-radius: 0;
  padding-inline: 1.7rem;
}
/* Label text stays white on the teal pill (icons are colored separately below) */
.pe-app-sidebar .pe-nav-link.active .pe-nav-content,
.pe-app-sidebar .pe-nav-link.active:hover .pe-nav-content,
html[data-sidebar-color="light"] .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link.active .pe-nav-content,
html[data-sidebar-color="light"] .him-app .pe-app-sidebar .pe-nav-link.active .pe-nav-content {
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Kill the theme's blurred white glow overlay on the active pill */
.pe-app-sidebar .pe-nav-link.active::after,
html[data-sidebar-color="light"] .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link.active::after {
  background: none !important;
  opacity: 0 !important;
}
.pe-app-sidebar .pe-menu-title {
  color: #7d93ad !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* ---- Sidebar icons: palette color chips + hover pop animation ----
   Items cycle blue → aqua → teal → purple → orange → amber per position
   (group title is li #1, so items start at nth-child(2)). */
/* Icon sizing at (0,5,0) to beat the theme's fixed 20px icon rule */
.him-app .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link .pe-nav-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+2) .pe-nav-icon { color: #0186dd; background: #e8f4fd; }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+3) .pe-nav-icon { color: #019aa1; background: #e6f6f7; }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+4) .pe-nav-icon { color: #159795; background: #e6f6f5; }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+5) .pe-nav-icon { color: #b107d2; background: #f9e8fd; }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+6) .pe-nav-icon { color: #f27013; background: #fef0e3; }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+7) .pe-nav-icon { color: #b87e00; background: #fef6e0; }
/* Hover: icon chip turns solid WHITE, glyph keeps its section color + glow */
.him-app .pe-app-sidebar .pe-nav-link:hover .pe-nav-icon { transform: scale(1.14) rotate(-6deg); background: #ffffff; }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+2) .pe-nav-link:hover .pe-nav-icon { color: #0186dd; box-shadow: 0 4px 12px rgba(1, 134, 221, 0.45); }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+3) .pe-nav-link:hover .pe-nav-icon { color: #019aa1; box-shadow: 0 4px 12px rgba(1, 154, 161, 0.45); }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+4) .pe-nav-link:hover .pe-nav-icon { color: #159795; box-shadow: 0 4px 12px rgba(21, 151, 149, 0.45); }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+5) .pe-nav-link:hover .pe-nav-icon { color: #b107d2; box-shadow: 0 4px 12px rgba(177, 7, 210, 0.45); }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+6) .pe-nav-link:hover .pe-nav-icon { color: #f27013; box-shadow: 0 4px 12px rgba(242, 112, 19, 0.45); }
.him-app .pe-app-sidebar .pe-main-menu > li > ul > li:nth-child(6n+7) .pe-nav-link:hover .pe-nav-icon { color: #b87e00; box-shadow: 0 4px 12px rgba(253, 174, 4, 0.5); }
/* Selected pill: glyph clean white directly on teal */
.him-app .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link.active .pe-nav-icon,
html[data-sidebar-color="light"] .pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link.active .pe-nav-icon,
html[data-sidebar-color="light"] .him-app .pe-app-sidebar .pe-nav-link.active .pe-nav-icon {
  background: transparent;
  color: #ffffff;
  transform: none;
  box-shadow: none;
}
/* Hovering the active pill: white chip returns with a colored (teal) glyph */
.him-app .pe-app-sidebar .pe-nav-link.active:hover .pe-nav-icon,
html[data-sidebar-color="light"] .him-app .pe-app-sidebar .pe-nav-link.active:hover .pe-nav-icon {
  background: #ffffff;
  color: #0d9488;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.him-app .pe-app-sidebar .pe-app-sidebar-menu .him-sidebar-version .pe-nav-icon, .him-app .him-sidebar-version .pe-nav-link .pe-nav-icon { color: #b87e00; background: #fef6e0; width: 2.4rem; height: 2.4rem; border-radius: 11px; font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .him-app .pe-app-sidebar .pe-nav-icon { transition: none; }
}
/* Sidebar animated background — faint dot grid + molecule cluster with a
   slow parallax sway (layers drift at different rates for 3D depth) */
.him-app .pe-app-sidebar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='170' viewBox='0 0 130 170'%3E%3Cg fill='%23d3e6f8'%3E%3Ccircle cx='18' cy='16' r='6'/%3E%3Ccircle cx='18' cy='48' r='6'/%3E%3Ccircle cx='18' cy='80' r='6'/%3E%3Ccircle cx='18' cy='112' r='6'/%3E%3Ccircle cx='18' cy='144' r='6'/%3E%3Cg fill-opacity='0.6'%3E%3Ccircle cx='50' cy='16' r='6'/%3E%3Ccircle cx='50' cy='48' r='6'/%3E%3Ccircle cx='50' cy='80' r='6'/%3E%3Ccircle cx='50' cy='112' r='6'/%3E%3Ccircle cx='50' cy='144' r='6'/%3E%3C/g%3E%3Cg fill-opacity='0.35'%3E%3Ccircle cx='82' cy='16' r='6'/%3E%3Ccircle cx='82' cy='48' r='6'/%3E%3Ccircle cx='82' cy='80' r='6'/%3E%3Ccircle cx='82' cy='112' r='6'/%3E%3Ccircle cx='82' cy='144' r='6'/%3E%3C/g%3E%3Cg fill-opacity='0.18'%3E%3Ccircle cx='114' cy='16' r='6'/%3E%3Ccircle cx='114' cy='48' r='6'/%3E%3Ccircle cx='114' cy='80' r='6'/%3E%3Ccircle cx='114' cy='112' r='6'/%3E%3Ccircle cx='114' cy='144' r='6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='150' viewBox='0 0 170 150'%3E%3Cg stroke='%23c2ddf5' stroke-width='3'%3E%3Cpath d='M20 28 L65 14 L120 32 L155 18 M20 28 L45 78 L95 68 L140 80 M65 14 L95 68 M120 32 L95 68 M120 32 L140 80 M45 78 L35 125 M45 78 L85 118 M95 68 L85 118 M140 80 L135 125 M85 118 L135 125' fill='none'/%3E%3C/g%3E%3Cg fill='%23eef6fe' stroke='%23b3d2ef' stroke-width='2'%3E%3Ccircle cx='20' cy='28' r='7'/%3E%3Ccircle cx='120' cy='32' r='8'/%3E%3Ccircle cx='95' cy='68' r='9'/%3E%3Ccircle cx='85' cy='118' r='7'/%3E%3Ccircle cx='135' cy='125' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom 210px, right -34px top 64px;
  background-size: 150px auto, 165px auto;
  animation: him-sidebar-sway 13s ease-in-out infinite alternate;
}
@keyframes him-sidebar-sway {
  from { background-position: center bottom 210px, right -34px top 64px; }
  to { background-position: center bottom 188px, right -20px top 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .him-app .pe-app-sidebar { animation: none; }
}

/* ==========================================================================
 * Sidebar motion + polish layer (UI only; routes, permissions,
 * active-state logic and collapse behavior untouched)
 * ========================================================================== */
@keyframes him-sidebar-item-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Menu items cascade in from the left on mount */
.him-app .pe-app-sidebar .him-nav-group > ul > li {
  animation: him-sidebar-item-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(1) { animation-delay: 20ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(2) { animation-delay: 60ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(3) { animation-delay: 100ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(4) { animation-delay: 140ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(5) { animation-delay: 180ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(6) { animation-delay: 220ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(7) { animation-delay: 260ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(8) { animation-delay: 300ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(9) { animation-delay: 340ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(10) { animation-delay: 380ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(11) { animation-delay: 420ms; }
.him-app .pe-app-sidebar .him-nav-group > ul > li:nth-child(n + 12) { animation-delay: 460ms; }
/* Section titles: gentle fade with the cascade */
.him-app .pe-app-sidebar .him-menu-title { animation: him-fade-slide-in 0.4s ease both; }
/* Active link: white inset tick + deeper glow (no pseudo-element conflicts) */
.him-app .pe-app-sidebar .pe-nav-link.active,
.him-app .pe-app-sidebar .pe-nav-link.active:hover,
.him-app .pe-app-sidebar .pe-nav-link.active:focus {
  box-shadow: inset 0px 0 0 #ffffff, 0 4px 14px rgb(13 148 136 / 90%) !important;
}
/* Hover: label glides, icon chip already pops */
.him-app .pe-app-sidebar .pe-nav-link .pe-nav-content {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.him-app .pe-app-sidebar .pe-nav-link:hover .pe-nav-content { transform: translateX(2px); }
/* Brand block: logo lifts on hover, title eases in */
.him-app .pe-app-sidebar .pe-app-sidebar-logo .logo-main img {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
  border-radius: 10px;
}
.him-app .pe-app-sidebar .pe-app-sidebar-logo .logo-main:hover img {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 4px 12px rgba(1, 134, 221, 0.35);
}
.him-app .pe-app-sidebar .him-sidebar-brand-title { animation: him-fade-slide-in 0.4s ease 100ms both; }
/* Slim themed scrollbar fallback (SimpleBar owns it when loaded) */
.him-app .pe-app-sidebar-menu::-webkit-scrollbar { width: 6px; }
.him-app .pe-app-sidebar-menu::-webkit-scrollbar-thumb {
  background: #cfe5f7; border-radius: 999px;
}
.him-app .pe-app-sidebar-menu::-webkit-scrollbar-thumb:hover { background: #0186dd; }
.him-app .pe-app-sidebar-menu { scrollbar-width: thin; scrollbar-color: #cfe5f7 transparent; }
/* Keyboard users: clear focus ring on nav links */
.him-app .pe-app-sidebar .pe-nav-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(1, 134, 221, 0.25) !important;
}
/* Version pin: soft lift on hover */
.him-app .him-sidebar-version .him-version-link {
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.him-app .him-sidebar-version .him-version-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 134, 221, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .him-app .pe-app-sidebar .him-nav-group > ul > li,
  .him-app .pe-app-sidebar .him-menu-title,
  .him-app .pe-app-sidebar .him-sidebar-brand-title { animation: none !important; }
  .him-app .pe-app-sidebar .pe-nav-link .pe-nav-content,
  .him-app .pe-app-sidebar .pe-app-sidebar-logo .logo-main img,
  .him-app .him-sidebar-version .him-version-link { transition: none !important; }
}

/* ==========================================================================
 * Header — premium biobanking top bar (UI only, zero functional changes)
 * White surface · thin border · subtle shadow · navy text · blue states
 * + gradient hairline, staggered entrance, hover lift, ping dot,
 *   avatar ring, animated profile menu. All tokens mirrored from
 *   app/styles/theme.css. Respects prefers-reduced-motion + dark mode.
 * ========================================================================== */
@keyframes him-header-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes him-header-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes him-notif-ping {
  0% { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(2.1); opacity: 0; }
}
@keyframes him-avatar-pulse {
  0% { box-shadow: 0 0 0 0 rgba(21, 151, 149, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(21, 151, 149, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 151, 149, 0); }
}
@keyframes him-clock-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.app-header.him-header {
  /* Fixed positioning + sidebar-aware left/right offsets + floating-bar radius
     are inherited from the Mirbal base (.app-header, semibox rules).
     Do NOT set position/width/left/right here — overriding them breaks the
     header width (it collapses into the document flow and shifts by the
     sidebar width). Only skin the surface. */
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: #e3f0fb !important;
  box-shadow: 0 1px 2px rgba(1, 134, 221, 0.08), 0 4px 16px rgba(1, 134, 221, 0.06) !important;
}
/* Inner alignment: full-height flex row with even gutters; left group takes
   available space, action group pins to the right edge. */
.app-header.him-header > .container-fluid {
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline: 0.75rem;
}
.app-header.him-header > .container-fluid > .d-flex {
  width: 100%;
  min-width: 0;
  align-items: center;
}
.him-header__actions { margin-left: auto; flex-shrink: 0; }
.him-header-enter { animation: him-header-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-header__hairline {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #0186dd 0%, #019aa1 45%, #159795 70%, #f27013 100%);
  opacity: 0.85; pointer-events: none;
  border-radius: 0 0 var(--pe-border-radius, 0.75rem) var(--pe-border-radius, 0.75rem);
}
.him-header__left { min-width: 0; flex: 1 1 auto; }
/* Staggered entrance for each header action (index via --him-i) */
.him-header .him-header-action {
  animation: him-header-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--him-i, 0) * 60ms);
}
/* Icon buttons: consistent 40px circle, lift + glow on hover, press on active */
.him-header .icon-btn,
.him-header .header-menu-btn {
  position: relative; overflow: visible;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  border: 1px solid transparent;
  background: transparent;
  color: #4f6a88;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.him-header .icon-btn i, .him-header .header-menu-btn i { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.him-header__btn-glow {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(1, 134, 221, 0.16), transparent 70%);
  opacity: 0; transition: opacity 0.2s ease;
}
.him-header .icon-btn:hover,
.him-header .header-menu-btn:hover {
  background: #e8f4fd !important; border-color: #cfe5f7 !important;
  color: #0186dd !important; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 134, 221, 0.18);
}
.him-header .icon-btn:hover .him-header__btn-glow,
.him-header .header-menu-btn:hover .him-header__btn-glow { opacity: 1; }
.him-header .icon-btn:hover i, .him-header .header-menu-btn:hover i { transform: scale(1.15); }
.him-header .icon-btn:active, .him-header .header-menu-btn:active { transform: translateY(0) scale(0.94); }
.him-header .icon-btn:focus-visible, .him-header .header-menu-btn:focus-visible,
.him-header .him-profile-trigger:focus-visible {
  outline: none !important; box-shadow: 0 0 0 0.2rem rgba(1, 134, 221, 0.2) !important;
}
/* Sidebar toggle keeps theme behavior, adds brand hover wash */
.him-header__toggle:hover { background: linear-gradient(135deg, #e8f4fd, #e6f6f7) !important; }
/* Notification dot: solid dot + expanding ping ring */
.him-header__notif .him-notif-dot {
  position: absolute; top: 4px; right: 5px;
  width: 0.65rem; height: 0.65rem; border-radius: 50%;
  border: 2px solid #ffffff;
}
.him-header__notif .him-notif-dot .ping {
  position: absolute; inset: -2px; border-radius: 50%;
  animation: him-notif-ping 1.8s ease-out infinite;
}
/* Profile trigger: soft pill, avatar gradient ring, online dot, chevron */
.him-header .him-profile-trigger {
  border-radius: 999px !important; padding: 0.4rem 1rem 0.4rem 0.4rem !important;
  border: 1px solid transparent;
  min-height: 2.75rem;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.him-header .him-profile-trigger:hover {
  background: #f2f9fe !important; border-color: #cfe5f7 !important;
  box-shadow: 0 4px 12px rgba(1, 134, 221, 0.14);
}
.him-header .him-profile-meta { line-height: 1.25; margin-top: 0 !important; white-space: nowrap; padding-inline: 0.15rem; }
.app-header .user-name { color: #0f3557 !important; }
.him-header .him-profile-role { display: block; margin-top: 2px; }
.him-header .him-avatar-ring {
  position: relative; padding: 2px;
  background: conic-gradient(from 140deg, #0186dd, #019aa1, #159795, #f27013, #0186dd);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
.him-header .him-profile-trigger:hover .him-avatar-ring { transform: scale(1.05); box-shadow: 0 4px 12px rgba(1, 134, 221, 0.3); }
.him-header .him-avatar-ring .user-img { border: 2px solid #ffffff; background: #e8f4fd; object-fit: cover; display: block; }
.him-header .him-avatar-dot {
  position: absolute; right: 1px; bottom: 2px;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: #159795; border: 2px solid #ffffff;
  animation: him-avatar-pulse 2s ease-out infinite;
}
.him-header .him-profile__chevron { color: #7d93ad; font-size: 1.05rem; transition: transform 0.2s ease, color 0.2s ease; }
.him-header .him-profile-trigger:hover .him-profile__chevron { color: #0186dd; }
.him-header .him-profile-trigger[aria-expanded="true"] .him-profile__chevron { transform: rotate(180deg); }
/* Profile menu: animated entrance, gradient card head, sliding items */
.him-header .him-profile-menu {
  border-radius: 14px !important; border: 1px solid #e3f0fb !important;
  box-shadow: 0 10px 28px rgba(1, 134, 221, 0.16), 0 3px 8px rgba(253, 174, 4, 0.12) !important;
  padding: 0.6rem !important; min-width: 17rem;
  animation: him-header-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.him-header .him-profile-card {
  background: linear-gradient(115deg, #e8f4fd 0%, #ffffff 60%, #e6f6f7 100%) !important;
  border-color: #cfe5f7 !important;
}
.him-header .him-profile-card h6 { color: #0f3557 !important; }
/* Card alignment: text column shrinks with ellipsis, avatar box never squashes */
.him-header .him-profile-card > div:first-child { min-width: 0; flex: 1 1 auto; }
.him-header .him-profile-card small {
  display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 11rem;
}
.him-header .him-profile-card .story-ring { flex-shrink: 0; overflow: hidden; }
.him-header .him-profile-card img { object-fit: cover; display: block; }
.him-header .him-profile-card__role {
  display: inline-block; margin-top: 0.3rem; padding: 0.15rem 0.6rem;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700;
  background: #e6f6f5; color: #0c5f5e; border: 1px solid rgba(21, 151, 149, 0.25);
}
/* Menu rows: centered icon chips + labels on one baseline, spring hover,
   staggered entrance when the menu opens */
@keyframes him-profile-item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
.him-header .him-profile-list .profile-item > a,
.him-header .him-profile-list .profile-item > button,
.him-header .him-profile-list .profile-item form button {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  min-height: 2.75rem;
  margin: 0; padding: 0.35rem 0.65rem;
  border: 0 !important; border-radius: 10px;
  background: transparent; text-decoration: none;
  font-size: 0.875rem; font-weight: 500; line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zero out every margin source (Bootstrap me-3, UA form margins) so all rows
   share pixel-identical left alignment via the flex gap above */
.him-header .him-profile-list .profile-item form { margin: 0; width: 100%; }
/* Icon chips: fixed box so glyph and label always share one baseline */
.him-header .him-profile-list .profile-item i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex-shrink: 0;
  margin: 0 !important;
  border-radius: 9px; font-size: 1.05rem; line-height: 1;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
/* Per-item icon colors (theme washes) */
.him-header .him-profile-list .profile-item:nth-child(1) i { background: #e8f4fd; color: #0186dd; }
.him-header .him-profile-list .profile-item:nth-child(2) i { background: #e6f6f7; color: #019aa1; }
.him-header .him-profile-list .profile-item:nth-child(3) i { background: #fdecec; color: #dc3545; }
.him-header .him-profile-list .profile-item > a:hover,
.him-header .him-profile-list .profile-item > button:hover,
.him-header .him-profile-list .profile-item form button:hover {
  background: #e8f4fd !important; transform: translateX(3px);
}
.him-header .him-profile-list .profile-item:nth-child(1) > a:hover i,
.him-header .him-profile-list .profile-item:nth-child(1) > button:hover i,
.him-header .him-profile-list .profile-item:nth-child(1) form button:hover i {
  background: #0186dd; color: #ffffff; transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 4px 10px rgba(1, 134, 221, 0.4);
}
.him-header .him-profile-list .profile-item:nth-child(2) > a:hover i,
.him-header .him-profile-list .profile-item:nth-child(2) > button:hover i,
.him-header .him-profile-list .profile-item:nth-child(2) form button:hover i {
  background: #019aa1; color: #ffffff; transform: scale(1.12) rotate(8deg);
  box-shadow: 0 4px 10px rgba(1, 154, 161, 0.4);
}
.him-header .him-profile-list .profile-item:nth-child(3) > a:hover i,
.him-header .him-profile-list .profile-item:nth-child(3) > button:hover i,
.him-header .him-profile-list .profile-item:nth-child(3) form button:hover i {
  background: #dc3545; color: #ffffff; transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.4);
}
/* Base theme puts 12px padding on the li itself — neutralize it so rows span
   the full menu width edge-to-edge with one consistent gutter */
.him-header .him-profile-list { padding: 0.25rem !important; }
.him-header .him-profile-list .profile-item { padding: 0 !important; margin: 0; }
/* Every header glyph: no inline gaps, optically centered in its box */
.him-header .icon-btn i { display: inline-flex; line-height: 1; }
.him-header .him-profile__chevron { line-height: 1; flex-shrink: 0; }
/* Entrance stagger each time Bootstrap opens the menu */
.him-header .him-profile-menu.show .profile-item { animation: him-profile-item-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-header .him-profile-menu.show .profile-item:nth-child(1) { animation-delay: 30ms; }
.him-header .him-profile-menu.show .profile-item:nth-child(2) { animation-delay: 80ms; }
.him-header .him-profile-menu.show .profile-item:nth-child(3) { animation-delay: 130ms; }
html[data-bs-theme="dark"] .him-header .him-profile-list .profile-item:nth-child(1) i { background: rgba(1, 134, 221, 0.18); color: #7dd3fc; }
html[data-bs-theme="dark"] .him-header .him-profile-list .profile-item:nth-child(2) i { background: rgba(1, 154, 161, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-header .him-profile-list .profile-item:nth-child(3) i { background: rgba(220, 53, 69, 0.2); color: #fca5a5; }
/* Breadcrumb trail (PageHeader) sits directly on the photo canvas — white
   text, links, separators and home icon stay readable on dark backdrops
   in both themes */
.him-app .main-breadcrumb .breadcrumb,
.him-app .main-breadcrumb .breadcrumb .breadcrumb-item,
.him-app .main-breadcrumb .breadcrumb .breadcrumb-item a,
.him-app .main-breadcrumb .breadcrumb .breadcrumb-item.active,
.him-app .main-breadcrumb .breadcrumb i { color: #ffffff !important; }
.him-app .main-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.65) !important;
}
.him-app .main-breadcrumb .breadcrumb .breadcrumb-item a:hover {
  color: #e8f4fd !important; text-decoration: underline;
}
/* Live clock accents (DateTimeClock renders .bio-clock__live-dot) */
.him-app .bio-clock { position: relative; }
.him-app .bio-clock__live-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0;
  background: #159795; animation: him-avatar-pulse 1.8s ease-out infinite;
}
.him-app .bio-clock--loading .bio-clock__time {
  background: linear-gradient(90deg, #e8f4fd 25%, #cfe5f7 50%, #e8f4fd 75%);
  background-size: 200% 100%; border-radius: 6px; color: transparent !important;
  animation: him-clock-blink 1.4s ease-in-out infinite;
}
.him-app .bio-clock--live .bio-clock__time { font-variant-numeric: tabular-nums; }
/* Dark mode: keep the same language on dark canvas */
html[data-bs-theme="dark"] .app-header.him-header {
  background: rgba(19, 41, 63, 0.92) !important;
  border-bottom-color: rgba(143, 198, 240, 0.2) !important;
}
html[data-bs-theme="dark"] .him-header .icon-btn,
html[data-bs-theme="dark"] .him-header .header-menu-btn { color: #a9c6e2; }
html[data-bs-theme="dark"] .him-header .icon-btn:hover,
html[data-bs-theme="dark"] .him-header .header-menu-btn:hover {
  background: rgba(1, 134, 221, 0.18) !important; color: #ffffff !important;
}
html[data-bs-theme="dark"] .app-header .user-name { color: #ffffff !important; }
html[data-bs-theme="dark"] .him-header .him-profile-trigger:hover { background: rgba(1, 134, 221, 0.14) !important; }
html[data-bs-theme="dark"] .him-header .him-profile-menu {
  background: #13293f !important; border-color: rgba(143, 198, 240, 0.2) !important;
}
html[data-bs-theme="dark"] .him-header .him-profile-card {
  background: linear-gradient(115deg, rgba(1,134,221,0.18), rgba(1,154,161,0.12)) !important;
  border-color: rgba(143, 198, 240, 0.2) !important;
}
html[data-bs-theme="dark"] .him-header .him-profile-card h6 { color: #ffffff !important; }
@media (max-width: 640px) {
  .him-header .icon-btn, .him-header .header-menu-btn { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .him-header-enter, .him-header .him-header-action, .him-header .him-profile-menu,
  .him-header__notif .him-notif-dot .ping,
  .him-header .him-avatar-dot, .him-app .bio-clock__live-dot,
  .him-header .him-profile-menu.show .profile-item { animation: none !important; }
  .him-header .icon-btn, .him-header .header-menu-btn,
  .him-header .him-profile-trigger, .him-header .him-avatar-ring,
  .him-header .him-profile-list .profile-item i { transition: none !important; }
}

/* ---- Cards: white + orange top-accent ribbon on KPI/stat cards ---- */
.him-app .card {
  background: #ffffff !important;
  border: 1px solid #e3f0fb !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(1, 134, 221, 0.08) !important;
}
.him-app .card.kpi-card { position: relative; overflow: hidden; }
.him-app .card.kpi-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f27013, #fdae04);
  opacity: 0.9;
}
.him-app .card-title,
.him-app .breadcrumb-title,
.him-app h1, .him-app h2, .him-app h3 {
  color: #0f3557 !important;
}
/* KPI icon washes — amber glow backgrounds */
.him-app .kpi-card .kpi-icon {
  box-shadow: inset 0 0 0 1px rgba(1, 134, 221, 0.14), 0 2px 8px rgba(253, 174, 4, 0.18) !important;
}

/* ---- Tables: light-blue header, vertical column rules, animated rows ---- */
.him-app .table {
  font-variant-numeric: tabular-nums;
}
.him-app .table thead th {
  background: linear-gradient(90deg, #d9ecfc 0%, #d2efef 52%, #d5f0e8 100%) !important;
  color: #0f3557 !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #a9d4f2 !important;
  border-inline-end: 1px solid #c4e0f4;
}
.him-app .table thead th:last-child { border-inline-end: 0; }
.him-app .table tbody td { border-inline-end: 1px solid #e3f0fb; }
.him-app .table tbody td:last-child { border-inline-end: 0; }
.him-app .table > tbody > tr {
  animation: him-table-row-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.him-app .table > tbody > tr:nth-child(1) { animation-delay: 15ms; }
.him-app .table > tbody > tr:nth-child(2) { animation-delay: 30ms; }
.him-app .table > tbody > tr:nth-child(3) { animation-delay: 45ms; }
.him-app .table > tbody > tr:nth-child(4) { animation-delay: 60ms; }
.him-app .table > tbody > tr:nth-child(5) { animation-delay: 75ms; }
.him-app .table > tbody > tr:nth-child(6) { animation-delay: 90ms; }
.him-app .table > tbody > tr:nth-child(7) { animation-delay: 105ms; }
.him-app .table > tbody > tr:nth-child(8) { animation-delay: 120ms; }
.him-app .table > tbody > tr:nth-child(n + 9) { animation-delay: 135ms; }
.him-app .table tbody tr { transition: background 0.15s ease; }
.him-app .table tbody tr:hover > * {
  background: #eef7fe !important;
}
html[data-bs-theme="dark"] .him-app .table thead th,
html[data-bs-theme="dark"] .him-app .table tbody td {
  border-inline-end-color: rgba(143, 198, 240, 0.18);
}

/* ---- Buttons: primary + vibrant family (all white text except amber) ---- */
.him-app .btn-primary {
  background: #0186dd !important;
  border-color: #0186dd !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(1, 134, 221, 0.28) !important;
}
.him-app .btn-primary:hover {
  background: #0170b8 !important;
  border-color: #0170b8 !important;
  color: #fff !important;
}
.him-app .btn-info {
  background: #019aa1 !important;
  border-color: #019aa1 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(1, 154, 161, 0.28) !important;
}
.him-app .btn-info:hover { background: #017d83 !important; border-color: #017d83 !important; color: #fff !important; }
.him-app .btn-success {
  background: #159795 !important;
  border-color: #159795 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(21, 151, 149, 0.28) !important;
}
.him-app .btn-success:hover { background: #107775 !important; border-color: #107775 !important; color: #fff !important; }
.him-app .btn-warning {
  background: #fdae04 !important;
  border-color: #fdae04 !important;
  color: #3d2b00 !important;
  box-shadow: 0 2px 8px rgba(253, 174, 4, 0.3) !important;
}
.him-app .btn-warning:hover { background: #cf8f02 !important; border-color: #cf8f02 !important; color: #fff !important; }
.him-app .btn-outline-primary {
  color: #0186dd !important;
  border-color: #cfe5f7 !important;
}
.him-app .btn-outline-primary:hover {
  background: #e8f4fd !important;
  border-color: #0186dd !important;
  color: #0170b8 !important;
}
.him-app .btn:focus-visible,
.him-app .form-control:focus,
.him-app .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(1, 134, 221, 0.18) !important;
}

/* ---- Forms ---- */
.him-app .form-control,
.him-app .form-select {
  border-color: #cfe5f7 !important;
  border-radius: 10px !important;
  min-height: 42px;
}
.him-app .form-control:focus,
.him-app .form-select:focus {
  border-color: #0186dd !important;
}

/* ---- Badges: light washes for every vibrant color ---- */
.badge.bg-primary-subtle { background: #e8f4fd !important; color: #015d99 !important; }
.badge.bg-success-subtle { background: #e6f6f5 !important; color: #0c5f5e !important; }
.badge.bg-warning-subtle { background: #fef6e0 !important; color: #a67302 !important; }
.badge.bg-danger-subtle { background: #fdecec !important; }
.badge.bg-info-subtle { background: #e6f6f7 !important; color: #026468 !important; }
.badge.bg-secondary-subtle { background: #f2d3fa !important; color: #740585 !important; }

/* ---- Pagination active = primary ---- */
.him-app .pagination .page-item.active .page-link {
  background: #0186dd !important;
  border-color: #0186dd !important;
  color: #fff !important;
}

/* ---- Quick-link tiles (dashboard shortcuts) ---- */
.him-app .quick-tile {
  border: 1px solid #e3f0fb;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.him-app .quick-tile:hover {
  background: #e8f4fd;
  border-color: #0186dd;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(1, 134, 221, 0.14);
}
.him-app .quick-tile i { transition: transform 0.2s ease; }
.him-app .quick-tile:hover i:first-child { transform: scale(1.2); }

/* ---- Foundation module tiles: lift + icon pop on hover ---- */
.him-app .module-tile--animated { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.him-app .module-tile--animated:hover { transform: translateY(-4px); }
.him-app .module-tile__icon { display: inline-block; transition: transform 0.2s ease, color 0.2s ease; }
.him-app .module-tile--animated:hover .module-tile__icon { transform: scale(1.2) rotate(-4deg); color: #019aa1 !important; }

/* ---- Dashboard hero: natural photo background, navy text, live clock ----
 * `background.jpg` shows as-is (no wash/shadow) and always fills the banner
 * on every screen (cover = crop, never stretch or gap). Photo stays static
 * so the fit never shifts. */
.him-app .bio-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 1.5rem;
  color: #0f3557;
  background-color: #d3eafb;
  background-image: url("/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: none;
  border: 1px solid #cfe5f7;
  box-shadow: 0 10px 26px rgba(1, 134, 221, 0.14), 0 2px 6px rgba(1, 154, 161, 0.12);
}
/* Small screens: keep full cover, bias toward center so the pattern stays even */
@media (max-width: 640px) {
  .him-app .bio-hero {
    background-position: center;
    padding: 1.25rem;
  }
}
/* Dark mode: same natural photo */
html[data-bs-theme="dark"] .him-app .bio-hero {
  background-color: #10233a;
  background-image: url("/images/background.jpg");
  border-color: rgba(143, 198, 240, 0.2);
}
.him-app .bio-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 65%);
  pointer-events: none;
}
.him-app .bio-hero::before {
  content: "";
  position: absolute;
  left: -60px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 154, 161, 0.18), transparent 65%);
  pointer-events: none;
}
.him-app .bio-hero__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 1; font-weight: 700; color: #019aa1 !important; }
.him-app .bio-hero__title { font-size: 1.5rem; font-weight: 700; margin: 0.3rem 0; letter-spacing: -0.02em; color: #0f3557 !important; }
.him-app .bio-hero__subtitle { font-size: 0.9375rem; margin: 0; color: #4f6a88 !important; }
.him-app .bio-hero__subtitle .fw-semibold { color: #015d99 !important; }
.him-app .bio-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
  border: 1px solid #cfe5f7;
  border-radius: 14px;
  padding: 0.6rem 0.95rem;
  color: #0f3557;
  box-shadow: 0 4px 14px rgba(1, 134, 221, 0.16);
}
.him-app .bio-clock__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: #019aa1;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.him-app .bio-clock__time { font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1.2; color: #0f3557; }
.him-app .bio-clock__date { font-size: 0.75rem; color: #4f6a88; }
/* Hero actions use the standard theme buttons on the light wash */
.him-app .bio-hero .btn-outline-primary { background: #ffffff !important; border-color: #cfe5f7 !important; color: #0186dd !important; }
.him-app .bio-hero .btn-outline-primary:hover { background: #e8f4fd !important; border-color: #0186dd !important; color: #0170b8 !important; }

/* ---- KPI card hover animations + scientific corner motifs ---- */
.him-app .kpi-card { overflow: hidden; }
.him-app .kpi-card .card-body { position: relative; z-index: 1; }
.him-app .kpi-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(1, 134, 221, 0.18), 0 3px 8px rgba(253, 174, 4, 0.18); border-color: #0186dd; }
.him-app .kpi-card:hover .kpi-value { color: #015d99; }
.him-app .kpi-card:hover .kpi-icon { transform: scale(1.12) rotate(-5deg); }
.him-app .kpi-card .kpi-icon { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; }
.him-app .kpi-card:hover.kpi-card::after { box-shadow: 0 0 12px rgba(242, 112, 19, 0.55); }
/* ---- KPI grid: 5 → 4 → 3 → 2 → 1 cards per row by screen width ---- */
.him-app .kpi-grid { display: grid; gap: 1rem; align-items: stretch; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) {
  .him-app .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .him-app .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .him-app .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .him-app .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Aqua accent bar for the 5-column rhythm (blue/teal/purple/orange exist) */
.him-app .stat-card--aqua::before { background: linear-gradient(180deg, #019aa1, #fdae04); }
/* Left-to-right shine sweep on card hover */
.him-app .kpi-card .kpi-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(1, 134, 221, 0.14) 48%, rgba(1, 154, 161, 0.18) 52%, rgba(253, 174, 4, 0.12) 56%, transparent 62%);
  transform: translateX(-130%);
}
.him-app .kpi-card:hover .kpi-sheen { transform: translateX(130%); transition: transform 0.85s ease; }
@media (prefers-reduced-motion: reduce) {
  .him-app .kpi-card .kpi-sheen { display: none; }
}

/* ---- Table row icon actions (best icons + hover animation) ---- */
.him-app .him-row-btns {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.him-app .him-row-btn {
  position: relative;
  overflow: hidden;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #cfe5f7;
  background: #ffffff;
  color: #0186dd;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.him-app .him-row-btn i { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.him-app .him-row-btn:hover {
  background: #0186dd;
  border-color: #0186dd;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(1, 134, 221, 0.35);
}
.him-app .him-row-btn:hover i { transform: scale(1.2); }
.him-app .him-row-btn:active { transform: translateY(0) scale(0.96); }
.him-app .him-row-btn:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem rgba(1, 134, 221, 0.2); }
.him-app .him-row-btn--view:hover { background: #019aa1; border-color: #019aa1; box-shadow: 0 6px 14px rgba(1, 154, 161, 0.4); }

/* ==========================================================================
 * Reports & analytics — KPI stagger, animated status bars, catalog tiles
 * (UI only; all links, values, permissions and math untouched)
 * ========================================================================== */
/* KPI cards cascade in left-to-right */
.him-app .report-kpis > div { animation: him-fade-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .report-kpis > div:nth-child(1) { animation-delay: 20ms; }
.him-app .report-kpis > div:nth-child(2) { animation-delay: 80ms; }
.him-app .report-kpis > div:nth-child(3) { animation-delay: 140ms; }
.him-app .report-kpis > div:nth-child(4) { animation-delay: 200ms; }
.him-app .report-kpis > div:nth-child(5) { animation-delay: 260ms; }
.him-app .report-kpis > div:nth-child(6) { animation-delay: 320ms; }
/* Status panels rise in together, bars grow + stagger per row */
.him-app .report-status-row > div { animation: him-fade-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .report-status-row > div:nth-child(1) { animation-delay: 100ms; }
.him-app .report-status-row > div:nth-child(2) { animation-delay: 180ms; }
.him-app .report-status-row > div:nth-child(3) { animation-delay: 260ms; }
.him-app .report-status .progress {
  height: 8px; border-radius: 999px; background: #e3f0fb; overflow: hidden;
}
.him-app .report-status .progress-bar {
  background: linear-gradient(90deg, #0186dd, #019aa1) !important;
  border-radius: 999px; transform-origin: left center;
  animation: him-report-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes him-report-bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.him-app .report-status .d-flex.flex-column > div:nth-child(1) .progress-bar { animation-delay: 250ms; }
.him-app .report-status .d-flex.flex-column > div:nth-child(2) .progress-bar { animation-delay: 330ms; }
.him-app .report-status .d-flex.flex-column > div:nth-child(3) .progress-bar { animation-delay: 410ms; }
.him-app .report-status .d-flex.flex-column > div:nth-child(4) .progress-bar { animation-delay: 490ms; }
.him-app .report-status .d-flex.flex-column > div:nth-child(n + 5) .progress-bar { animation-delay: 570ms; }
.him-app .report-status .d-flex.justify-content-between .fw-medium {
  color: #015d99; font-variant-numeric: tabular-nums;
}
/* Catalog tiles: tinted icon chips cycling the theme washes, lift + icon pop */
.him-app .report-tiles > div { animation: him-fade-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .report-tiles > div:nth-child(1) { animation-delay: 60ms; }
.him-app .report-tiles > div:nth-child(2) { animation-delay: 110ms; }
.him-app .report-tiles > div:nth-child(3) { animation-delay: 160ms; }
.him-app .report-tiles > div:nth-child(4) { animation-delay: 210ms; }
.him-app .report-tiles > div:nth-child(5) { animation-delay: 260ms; }
.him-app .report-tiles > div:nth-child(6) { animation-delay: 310ms; }
.him-app .report-tiles > div:nth-child(7) { animation-delay: 360ms; }
.him-app .report-tiles > div:nth-child(8) { animation-delay: 410ms; }
.him-app .report-tiles > div:nth-child(9) { animation-delay: 460ms; }
.him-app .report-tiles > div:nth-child(n + 10) { animation-delay: 510ms; }
.him-app .report-tile { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.him-app .report-tile:hover {
  transform: translateY(-3px); border-color: #0186dd !important;
  box-shadow: 0 8px 20px rgba(1, 134, 221, 0.16);
}
.him-app .report-tile__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.him-app .report-tiles > div:nth-child(5n+1) .report-tile__icon { background: #e8f4fd; color: #0186dd; }
.him-app .report-tiles > div:nth-child(5n+2) .report-tile__icon { background: #e6f6f7; color: #019aa1; }
.him-app .report-tiles > div:nth-child(5n+3) .report-tile__icon { background: #e6f6f5; color: #159795; }
.him-app .report-tiles > div:nth-child(5n+4) .report-tile__icon { background: #f9e8fd; color: #b107d2; }
.him-app .report-tiles > div:nth-child(5n+5) .report-tile__icon { background: #fef0e3; color: #f27013; }
.him-app .report-tile:hover .report-tile__icon { transform: scale(1.14) rotate(-6deg); }
.him-app .report-tiles > div:nth-child(5n+1) .report-tile:hover .report-tile__icon { box-shadow: 0 4px 12px rgba(1, 134, 221, 0.45); }
.him-app .report-tiles > div:nth-child(5n+2) .report-tile:hover .report-tile__icon { box-shadow: 0 4px 12px rgba(1, 154, 161, 0.45); }
.him-app .report-tiles > div:nth-child(5n+3) .report-tile:hover .report-tile__icon { box-shadow: 0 4px 12px rgba(21, 151, 149, 0.45); }
.him-app .report-tiles > div:nth-child(5n+4) .report-tile:hover .report-tile__icon { box-shadow: 0 4px 12px rgba(177, 7, 210, 0.45); }
.him-app .report-tiles > div:nth-child(5n+5) .report-tile:hover .report-tile__icon { box-shadow: 0 4px 12px rgba(242, 112, 19, 0.45); }
html[data-bs-theme="dark"] .him-app .report-status .progress { background: rgba(143, 198, 240, 0.18); }
html[data-bs-theme="dark"] .him-app .report-status .d-flex.justify-content-between .fw-medium { color: #a9c6e2; }
html[data-bs-theme="dark"] .him-app .report-tiles > div:nth-child(5n+1) .report-tile__icon { background: rgba(1, 134, 221, 0.18); color: #7dd3fc; }
html[data-bs-theme="dark"] .him-app .report-tiles > div:nth-child(5n+2) .report-tile__icon { background: rgba(1, 154, 161, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .report-tiles > div:nth-child(5n+3) .report-tile__icon { background: rgba(21, 151, 149, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .report-tiles > div:nth-child(5n+4) .report-tile__icon { background: rgba(177, 7, 210, 0.2); color: #d8b4fe; }
html[data-bs-theme="dark"] .him-app .report-tiles > div:nth-child(5n+5) .report-tile__icon { background: rgba(242, 112, 19, 0.2); color: #fdba74; }
@media (prefers-reduced-motion: reduce) {
  .him-app .report-kpis > div, .him-app .report-status-row > div,
  .him-app .report-tiles > div, .him-app .report-status .progress-bar { animation: none !important; }
  .him-app .report-tile, .him-app .report-tile__icon { transition: none !important; }
}

/* ==========================================================================
 * Automation overview — KPI stagger + accent cycle, alert list, module tiles
 * (UI only; all links, values, permissions and data untouched)
 * ========================================================================== */
.him-app .auto-kpis > div { animation: him-fade-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .auto-kpis > div:nth-child(1) { animation-delay: 20ms; }
.him-app .auto-kpis > div:nth-child(2) { animation-delay: 80ms; }
.him-app .auto-kpis > div:nth-child(3) { animation-delay: 140ms; }
.him-app .auto-kpis > div:nth-child(4) { animation-delay: 200ms; }
.him-app .auto-kpis > div:nth-child(5) { animation-delay: 260ms; }
.him-app .auto-kpis > div:nth-child(6) { animation-delay: 320ms; }
/* Accent ribbon cycles the theme family across the six KPI cards */
.him-app .auto-kpis > div:nth-child(5n+2) .stat-card::before { background: linear-gradient(180deg, #b107d2, #0186dd); }
.him-app .auto-kpis > div:nth-child(5n+3) .stat-card::before { background: linear-gradient(180deg, #159795, #019aa1); }
.him-app .auto-kpis > div:nth-child(5n+4) .stat-card::before { background: linear-gradient(180deg, #019aa1, #fdae04); }
.him-app .auto-kpis > div:nth-child(5n+5) .stat-card::before { background: linear-gradient(180deg, #f27013, #fdae04); }
/* Panels rise together; alert rows glide on hover */
.him-app .auto-panels > div { animation: him-fade-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .auto-panels > div:nth-child(1) { animation-delay: 120ms; }
.him-app .auto-panels > div:nth-child(2) { animation-delay: 200ms; }
.him-app .auto-alerts .list-group-item { transition: background 0.15s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.him-app .auto-alerts .list-group-item:hover { background: #eef7fe; transform: translateX(3px); }
/* Module tiles mirror the report catalog language */
.him-app .auto-tiles > div { animation: him-fade-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .auto-tiles > div:nth-child(1) { animation-delay: 60ms; }
.him-app .auto-tiles > div:nth-child(2) { animation-delay: 110ms; }
.him-app .auto-tiles > div:nth-child(3) { animation-delay: 160ms; }
.him-app .auto-tiles > div:nth-child(4) { animation-delay: 210ms; }
.him-app .auto-tiles > div:nth-child(5) { animation-delay: 260ms; }
.him-app .auto-tiles > div:nth-child(6) { animation-delay: 310ms; }
.him-app .auto-tiles > div:nth-child(7) { animation-delay: 360ms; }
.him-app .auto-tiles > div:nth-child(n + 8) { animation-delay: 410ms; }
.him-app .auto-tile { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.him-app .auto-tile:hover {
  transform: translateY(-3px); border-color: #0186dd !important;
  box-shadow: 0 8px 20px rgba(1, 134, 221, 0.16);
}
.him-app .auto-tile__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.him-app .auto-tiles > div:nth-child(5n+1) .auto-tile__icon { background: #e8f4fd; color: #0186dd; }
.him-app .auto-tiles > div:nth-child(5n+2) .auto-tile__icon { background: #e6f6f7; color: #019aa1; }
.him-app .auto-tiles > div:nth-child(5n+3) .auto-tile__icon { background: #e6f6f5; color: #159795; }
.him-app .auto-tiles > div:nth-child(5n+4) .auto-tile__icon { background: #f9e8fd; color: #b107d2; }
.him-app .auto-tiles > div:nth-child(5n+5) .auto-tile__icon { background: #fef0e3; color: #f27013; }
.him-app .auto-tile:hover .auto-tile__icon { transform: scale(1.14) rotate(-6deg); }
.him-app .auto-tiles > div:nth-child(5n+1) .auto-tile:hover .auto-tile__icon { box-shadow: 0 4px 12px rgba(1, 134, 221, 0.45); }
.him-app .auto-tiles > div:nth-child(5n+2) .auto-tile:hover .auto-tile__icon { box-shadow: 0 4px 12px rgba(1, 154, 161, 0.45); }
.him-app .auto-tiles > div:nth-child(5n+3) .auto-tile:hover .auto-tile__icon { box-shadow: 0 4px 12px rgba(21, 151, 149, 0.45); }
.him-app .auto-tiles > div:nth-child(5n+4) .auto-tile:hover .auto-tile__icon { box-shadow: 0 4px 12px rgba(177, 7, 210, 0.45); }
.him-app .auto-tiles > div:nth-child(5n+5) .auto-tile:hover .auto-tile__icon { box-shadow: 0 4px 12px rgba(242, 112, 19, 0.45); }
html[data-bs-theme="dark"] .him-app .auto-alerts .list-group-item:hover { background: rgba(1, 134, 221, 0.14); }
html[data-bs-theme="dark"] .him-app .auto-tiles > div:nth-child(5n+1) .auto-tile__icon { background: rgba(1, 134, 221, 0.18); color: #7dd3fc; }
html[data-bs-theme="dark"] .him-app .auto-tiles > div:nth-child(5n+2) .auto-tile__icon { background: rgba(1, 154, 161, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .auto-tiles > div:nth-child(5n+3) .auto-tile__icon { background: rgba(21, 151, 149, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .auto-tiles > div:nth-child(5n+4) .auto-tile__icon { background: rgba(177, 7, 210, 0.2); color: #d8b4fe; }
html[data-bs-theme="dark"] .him-app .auto-tiles > div:nth-child(5n+5) .auto-tile__icon { background: rgba(242, 112, 19, 0.2); color: #fdba74; }
@media (prefers-reduced-motion: reduce) {
  .him-app .auto-kpis > div, .him-app .auto-panels > div,
  .him-app .auto-tiles > div { animation: none !important; }
  .him-app .auto-tile, .him-app .auto-tile__icon,
  .him-app .auto-alerts .list-group-item { transition: none !important; }
}

/* ==========================================================================
 * Advanced features — subnav pills + module tiles (UI only)
 * ========================================================================== */
/* Subnav pills: lift + icon pop on hover, glow on the active pill */
.him-app .adv-subnav .btn,
.him-app .ah-subnav .btn {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease,
    background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.him-app .adv-subnav .btn i,
.him-app .ah-subnav .btn i { display: inline-flex; line-height: 1; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.him-app .adv-subnav .btn:hover,
.him-app .ah-subnav .btn:hover { transform: translateY(-2px); }
.him-app .adv-subnav .btn:hover i,
.him-app .ah-subnav .btn:hover i { transform: scale(1.25); }
.him-app .adv-subnav .btn-light:hover,
.him-app .ah-subnav .btn-light:hover { border-color: #0186dd; color: #0186dd; box-shadow: 0 4px 12px rgba(1, 134, 221, 0.18); }
.him-app .adv-subnav .btn-primary,
.him-app .ah-subnav .btn-primary { box-shadow: 0 3px 10px rgba(1, 134, 221, 0.35); }
/* Module tiles mirror the reports/automation tile language */
.him-app .adv-tiles > div { animation: him-fade-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .adv-tiles > div:nth-child(1) { animation-delay: 60ms; }
.him-app .adv-tiles > div:nth-child(2) { animation-delay: 110ms; }
.him-app .adv-tiles > div:nth-child(3) { animation-delay: 160ms; }
.him-app .adv-tiles > div:nth-child(4) { animation-delay: 210ms; }
.him-app .adv-tiles > div:nth-child(5) { animation-delay: 260ms; }
.him-app .adv-tiles > div:nth-child(6) { animation-delay: 310ms; }
.him-app .adv-tiles > div:nth-child(7) { animation-delay: 360ms; }
.him-app .adv-tiles > div:nth-child(n + 8) { animation-delay: 410ms; }
.him-app .adv-tile { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.him-app .adv-tile:hover {
  transform: translateY(-3px); border-color: #0186dd !important;
  box-shadow: 0 8px 20px rgba(1, 134, 221, 0.16);
}
.him-app .adv-tile__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.him-app .adv-tiles > div:nth-child(5n+1) .adv-tile__icon { background: #e8f4fd; color: #0186dd; }
.him-app .adv-tiles > div:nth-child(5n+2) .adv-tile__icon { background: #e6f6f7; color: #019aa1; }
.him-app .adv-tiles > div:nth-child(5n+3) .adv-tile__icon { background: #e6f6f5; color: #159795; }
.him-app .adv-tiles > div:nth-child(5n+4) .adv-tile__icon { background: #f9e8fd; color: #b107d2; }
.him-app .adv-tiles > div:nth-child(5n+5) .adv-tile__icon { background: #fef0e3; color: #f27013; }
.him-app .adv-tile:hover .adv-tile__icon { transform: scale(1.14) rotate(-6deg); }
.him-app .adv-tiles > div:nth-child(5n+1) .adv-tile:hover .adv-tile__icon { box-shadow: 0 4px 12px rgba(1, 134, 221, 0.45); }
.him-app .adv-tiles > div:nth-child(5n+2) .adv-tile:hover .adv-tile__icon { box-shadow: 0 4px 12px rgba(1, 154, 161, 0.45); }
.him-app .adv-tiles > div:nth-child(5n+3) .adv-tile:hover .adv-tile__icon { box-shadow: 0 4px 12px rgba(21, 151, 149, 0.45); }
.him-app .adv-tiles > div:nth-child(5n+4) .adv-tile:hover .adv-tile__icon { box-shadow: 0 4px 12px rgba(177, 7, 210, 0.45); }
.him-app .adv-tiles > div:nth-child(5n+5) .adv-tile:hover .adv-tile__icon { box-shadow: 0 4px 12px rgba(242, 112, 19, 0.45); }
html[data-bs-theme="dark"] .him-app .adv-tiles > div:nth-child(5n+1) .adv-tile__icon { background: rgba(1, 134, 221, 0.18); color: #7dd3fc; }
html[data-bs-theme="dark"] .him-app .adv-tiles > div:nth-child(5n+2) .adv-tile__icon { background: rgba(1, 154, 161, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .adv-tiles > div:nth-child(5n+3) .adv-tile__icon { background: rgba(21, 151, 149, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .adv-tiles > div:nth-child(5n+4) .adv-tile__icon { background: rgba(177, 7, 210, 0.2); color: #d8b4fe; }
html[data-bs-theme="dark"] .him-app .adv-tiles > div:nth-child(5n+5) .adv-tile__icon { background: rgba(242, 112, 19, 0.2); color: #fdba74; }
@media (prefers-reduced-motion: reduce) {
  .him-app .adv-tiles > div { animation: none !important; }
  .him-app .adv-tile, .him-app .adv-tile__icon, .him-app .adv-subnav .btn, .him-app .ah-subnav .btn { transition: none !important; }
}

/* ==========================================================================
 * Outline buttons inversion (ALL pages): filled theme color + white text at
 * rest; transparent background + colored text with lift on hover.
 * Exception: warning keeps dark text on amber (white-on-amber is unreadable).
 * ========================================================================== */
.him-app .btn-outline-primary,
.him-app .btn-outline-secondary,
.him-app .btn-outline-info,
.him-app .btn-outline-success,
.him-app .btn-outline-danger {
  color: #ffffff !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.him-app .btn-outline-primary { background: #0186dd !important; border-color: #0186dd !important; box-shadow: 0 2px 8px rgba(1, 134, 221, 0.28) !important; }
.him-app .btn-outline-secondary { background: #019aa1 !important; border-color: #019aa1 !important; box-shadow: 0 2px 8px rgba(1, 154, 161, 0.28) !important; }
.him-app .btn-outline-info { background: #019aa1 !important; border-color: #019aa1 !important; box-shadow: 0 2px 8px rgba(1, 154, 161, 0.28) !important; }
.him-app .btn-outline-success { background: #159795 !important; border-color: #159795 !important; box-shadow: 0 2px 8px rgba(21, 151, 149, 0.28) !important; }
.him-app .btn-outline-danger { background: #dc3545 !important; border-color: #dc3545 !important; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.28) !important; }
.him-app .btn-outline-warning {
  background: #fdae04 !important; border-color: #fdae04 !important; color: #3d2b00 !important;
  box-shadow: 0 2px 8px rgba(253, 174, 4, 0.3) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.him-app .btn-outline-primary:hover { background: #015d99 !important; border-color: #015d99 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(1, 134, 221, 0.4) !important; }
.him-app .btn-outline-secondary:hover { background: #026468 !important; border-color: #026468 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(1, 154, 161, 0.4) !important; }
.him-app .btn-outline-info:hover { background: #026468 !important; border-color: #026468 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(1, 154, 161, 0.4) !important; }
.him-app .btn-outline-success:hover { background: #0c5f5e !important; border-color: #0c5f5e !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(21, 151, 149, 0.4) !important; }
.him-app .btn-outline-danger:hover { background: #bb2d3b !important; border-color: #bb2d3b !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220, 53, 69, 0.4) !important; }
.him-app .btn-outline-warning:hover { background: #a67302 !important; border-color: #a67302 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(253, 174, 4, 0.4) !important; }
.him-app .btn-outline-primary:active { background: #015d99 !important; border-color: #015d99 !important; transform: translateY(0); }
.him-app .btn-outline-secondary:active, .him-app .btn-outline-info:active { background: #026468 !important; border-color: #026468 !important; transform: translateY(0); }
.him-app .btn-outline-success:active { background: #0c5f5e !important; border-color: #0c5f5e !important; transform: translateY(0); }
.him-app .btn-outline-danger:active { background: #bb2d3b !important; border-color: #bb2d3b !important; transform: translateY(0); }
.him-app .btn-outline-warning:active { background: #cf8f02 !important; border-color: #cf8f02 !important; transform: translateY(0); }
.him-app .btn-outline-primary:disabled, .him-app .btn-outline-secondary:disabled,
.him-app .btn-outline-info:disabled, .him-app .btn-outline-success:disabled,
.him-app .btn-outline-danger:disabled, .him-app .btn-outline-warning:disabled {
  opacity: 0.55; transform: none; box-shadow: none;
}

/* ==========================================================================
 * Animal House overview — KPI stagger + accent cycle, areas card, module tiles
 * (UI only; all links, values, permissions and data untouched)
 * ========================================================================== */
.him-app .ah-kpis > div { animation: him-fade-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .ah-kpis > div:nth-child(1) { animation-delay: 20ms; }
.him-app .ah-kpis > div:nth-child(2) { animation-delay: 60ms; }
.him-app .ah-kpis > div:nth-child(3) { animation-delay: 100ms; }
.him-app .ah-kpis > div:nth-child(4) { animation-delay: 140ms; }
.him-app .ah-kpis > div:nth-child(5) { animation-delay: 180ms; }
.him-app .ah-kpis > div:nth-child(6) { animation-delay: 220ms; }
.him-app .ah-kpis > div:nth-child(7) { animation-delay: 260ms; }
.him-app .ah-kpis > div:nth-child(8) { animation-delay: 300ms; }
.him-app .ah-kpis > div:nth-child(n + 9) { animation-delay: 340ms; }
.him-app .ah-kpis > div:nth-child(5n+2) .stat-card::before { background: linear-gradient(180deg, #b107d2, #0186dd); }
.him-app .ah-kpis > div:nth-child(5n+3) .stat-card::before { background: linear-gradient(180deg, #159795, #019aa1); }
.him-app .ah-kpis > div:nth-child(5n+4) .stat-card::before { background: linear-gradient(180deg, #019aa1, #fdae04); }
.him-app .ah-kpis > div:nth-child(5n+5) .stat-card::before { background: linear-gradient(180deg, #f27013, #fdae04); }
.him-app .ah-areas { animation: him-fade-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 200ms both; }
/* Subnav rest state: every pill wears its own theme color + white text.
   Hover deepens into the matching dark shade (rules below). */
.him-app .ah-subnav > :nth-child(6n+1).btn-outline-secondary { background: #0186dd !important; border-color: #0186dd !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(1, 134, 221, 0.3) !important; }
.him-app .ah-subnav > :nth-child(6n+2).btn-outline-secondary { background: #019aa1 !important; border-color: #019aa1 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(1, 154, 161, 0.3) !important; }
.him-app .ah-subnav > :nth-child(6n+3).btn-outline-secondary { background: #159795 !important; border-color: #159795 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(21, 151, 149, 0.3) !important; }
.him-app .ah-subnav > :nth-child(6n+4).btn-outline-secondary { background: #b107d2 !important; border-color: #b107d2 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(177, 7, 210, 0.3) !important; }
.him-app .ah-subnav > :nth-child(6n+5).btn-outline-secondary { background: #cf5c0d !important; border-color: #cf5c0d !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(242, 112, 19, 0.3) !important; }
.him-app .ah-subnav > :nth-child(6n+6).btn-outline-secondary { background: #198754 !important; border-color: #198754 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3) !important; }
/* Subnav hover: every pill fills with its own theme color + white text.
   Active (primary) pill keeps its blue identity. */
.him-app .ah-subnav .btn-outline-secondary:hover {
  color: #ffffff !important; transform: translateY(-2px);
}
.him-app .ah-subnav > :nth-child(6n+1).btn-outline-secondary:hover { background: #015d99 !important; border-color: #015d99 !important; box-shadow: 0 4px 14px rgba(1, 134, 221, 0.45) !important; }
.him-app .ah-subnav > :nth-child(6n+2).btn-outline-secondary:hover { background: #026468 !important; border-color: #026468 !important; box-shadow: 0 4px 14px rgba(1, 154, 161, 0.45) !important; }
.him-app .ah-subnav > :nth-child(6n+3).btn-outline-secondary:hover { background: #0c5f5e !important; border-color: #0c5f5e !important; box-shadow: 0 4px 14px rgba(21, 151, 149, 0.45) !important; }
.him-app .ah-subnav > :nth-child(6n+4).btn-outline-secondary:hover { background: #740585 !important; border-color: #740585 !important; box-shadow: 0 4px 14px rgba(177, 7, 210, 0.45) !important; }
.him-app .ah-subnav > :nth-child(6n+5).btn-outline-secondary:hover { background: #a84a0b !important; border-color: #a84a0b !important; box-shadow: 0 4px 14px rgba(242, 112, 19, 0.45) !important; }
.him-app .ah-subnav > :nth-child(6n+6).btn-outline-secondary:hover { background: #146c43 !important; border-color: #146c43 !important; box-shadow: 0 4px 14px rgba(25, 135, 84, 0.45) !important; }
.him-app .ah-tiles > div { animation: him-fade-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .ah-tiles > div:nth-child(1) { animation-delay: 60ms; }
.him-app .ah-tiles > div:nth-child(2) { animation-delay: 110ms; }
.him-app .ah-tiles > div:nth-child(3) { animation-delay: 160ms; }
.him-app .ah-tiles > div:nth-child(4) { animation-delay: 210ms; }
.him-app .ah-tiles > div:nth-child(5) { animation-delay: 260ms; }
.him-app .ah-tiles > div:nth-child(6) { animation-delay: 310ms; }
.him-app .ah-tiles > div:nth-child(7) { animation-delay: 360ms; }
.him-app .ah-tiles > div:nth-child(8) { animation-delay: 410ms; }
.him-app .ah-tiles > div:nth-child(n + 9) { animation-delay: 460ms; }
.him-app .ah-tile { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.him-app .ah-tile:hover {
  transform: translateY(-3px); border-color: #0186dd !important;
  box-shadow: 0 8px 20px rgba(1, 134, 221, 0.16);
}
.him-app .ah-tile__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.him-app .ah-tiles > div:nth-child(5n+1) .ah-tile__icon { background: #e8f4fd; color: #0186dd; }
.him-app .ah-tiles > div:nth-child(5n+2) .ah-tile__icon { background: #e6f6f7; color: #019aa1; }
.him-app .ah-tiles > div:nth-child(5n+3) .ah-tile__icon { background: #e6f6f5; color: #159795; }
.him-app .ah-tiles > div:nth-child(5n+4) .ah-tile__icon { background: #f9e8fd; color: #b107d2; }
.him-app .ah-tiles > div:nth-child(5n+5) .ah-tile__icon { background: #fef0e3; color: #f27013; }
.him-app .ah-tile:hover .ah-tile__icon { transform: scale(1.14) rotate(-6deg); }
.him-app .ah-tiles > div:nth-child(5n+1) .ah-tile:hover .ah-tile__icon { box-shadow: 0 4px 12px rgba(1, 134, 221, 0.45); }
.him-app .ah-tiles > div:nth-child(5n+2) .ah-tile:hover .ah-tile__icon { box-shadow: 0 4px 12px rgba(1, 154, 161, 0.45); }
.him-app .ah-tiles > div:nth-child(5n+3) .ah-tile:hover .ah-tile__icon { box-shadow: 0 4px 12px rgba(21, 151, 149, 0.45); }
.him-app .ah-tiles > div:nth-child(5n+4) .ah-tile:hover .ah-tile__icon { box-shadow: 0 4px 12px rgba(177, 7, 210, 0.45); }
.him-app .ah-tiles > div:nth-child(5n+5) .ah-tile:hover .ah-tile__icon { box-shadow: 0 4px 12px rgba(242, 112, 19, 0.45); }
html[data-bs-theme="dark"] .him-app .ah-tiles > div:nth-child(5n+1) .ah-tile__icon { background: rgba(1, 134, 221, 0.18); color: #7dd3fc; }
html[data-bs-theme="dark"] .him-app .ah-tiles > div:nth-child(5n+2) .ah-tile__icon { background: rgba(1, 154, 161, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .ah-tiles > div:nth-child(5n+3) .ah-tile__icon { background: rgba(21, 151, 149, 0.2); color: #5eead4; }
html[data-bs-theme="dark"] .him-app .ah-tiles > div:nth-child(5n+4) .ah-tile__icon { background: rgba(177, 7, 210, 0.2); color: #d8b4fe; }
html[data-bs-theme="dark"] .him-app .ah-tiles > div:nth-child(5n+5) .ah-tile__icon { background: rgba(242, 112, 19, 0.2); color: #fdba74; }
@media (prefers-reduced-motion: reduce) {
  .him-app .ah-kpis > div, .him-app .ah-areas, .him-app .ah-tiles > div { animation: none !important; }
  .him-app .ah-tile, .him-app .ah-tile__icon,
  .him-app .btn-outline-primary, .him-app .btn-outline-secondary,
  .him-app .btn-outline-info, .him-app .btn-outline-success,
  .him-app .btn-outline-danger, .him-app .btn-outline-warning { transition: none !important; }
}

/* ==========================================================================
 * Shared overview KPIs (Research, Storage, …): cascade + accent cycle.
 * Card chrome comes from kpi-card/stat-card/lift classes in markup.
 * ========================================================================== */
.him-app .ov-kpis > div { animation: him-fade-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.him-app .ov-kpis > div:nth-child(1) { animation-delay: 20ms; }
.him-app .ov-kpis > div:nth-child(2) { animation-delay: 80ms; }
.him-app .ov-kpis > div:nth-child(3) { animation-delay: 140ms; }
.him-app .ov-kpis > div:nth-child(4) { animation-delay: 200ms; }
.him-app .ov-kpis > div:nth-child(n + 5) { animation-delay: 260ms; }
.him-app .ov-kpis > div:nth-child(4n+2) .stat-card::before { background: linear-gradient(180deg, #b107d2, #0186dd); }
.him-app .ov-kpis > div:nth-child(4n+3) .stat-card::before { background: linear-gradient(180deg, #159795, #019aa1); }
.him-app .ov-kpis > div:nth-child(4n+4) .stat-card::before { background: linear-gradient(180deg, #f27013, #fdae04); }

/* ==========================================================================
 * Storage header actions: multicolor fills at rest, dark variants on hover
 * ========================================================================== */
.him-app .stg-actions > :nth-child(4n+1) { background: #0186dd !important; border-color: #0186dd !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(1, 134, 221, 0.3) !important; }
.him-app .stg-actions > :nth-child(4n+2) { background: #019aa1 !important; border-color: #019aa1 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(1, 154, 161, 0.3) !important; }
.him-app .stg-actions > :nth-child(4n+3) { background: #159795 !important; border-color: #159795 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(21, 151, 149, 0.3) !important; }
.him-app .stg-actions > :nth-child(4n+4) { background: #b107d2 !important; border-color: #b107d2 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(177, 7, 210, 0.3) !important; }
.him-app .stg-actions > :nth-child(4n+1):hover { background: #015d99 !important; border-color: #015d99 !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(1, 134, 221, 0.45) !important; }
.him-app .stg-actions > :nth-child(4n+2):hover { background: #026468 !important; border-color: #026468 !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(1, 154, 161, 0.45) !important; }
.him-app .stg-actions > :nth-child(4n+3):hover { background: #0c5f5e !important; border-color: #0c5f5e !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(21, 151, 149, 0.45) !important; }
.him-app .stg-actions > :nth-child(4n+4):hover { background: #740585 !important; border-color: #740585 !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(177, 7, 210, 0.45) !important; }
@media (prefers-reduced-motion: reduce) {
  .him-app .ov-kpis > div { animation: none !important; }
  .him-app .stg-actions > * { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .him-app .him-row-btn, .him-app .him-row-btn i { transition: none; }
}

/* ---- Dark mode: keep vibrant language on dark canvas ---- */
html[data-bs-theme="dark"] {
  --pe-body-bg: #0c1a2b;
  --pe-body-color: #e3f1fd;
  --pe-secondary-bg: #13293f;
  --pe-tertiary-bg: #17324d;
  --pe-border-color: rgba(143, 198, 240, 0.24);
  --pe-heading-color: #ffffff;
  --pe-emphasis-color: #ffffff;
}
html[data-bs-theme="dark"] .app-header { background: #13293f !important; border-bottom-color: rgba(143,198,240,.2) !important; }
html[data-bs-theme="dark"] .him-app .card { background: #13293f !important; border-color: rgba(143,198,240,.2) !important; }