/* HIM BioBank UX overrides — sits on top of admin theme */

.him-app,
.him-auth {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/*
 * LIGHT theme: high-contrast black content text (login + light mode shell).
 * Scoped so dark mode can use Bootstrap/theme tokens instead.
 */
html:not([data-bs-theme="dark"]) .him-app,
html:not([data-bs-theme="dark"]) .him-auth {
  --pe-body-color: #000000;
  --pe-body-color-rgb: 0, 0, 0;
  --pe-emphasis-color: #000000;
  --pe-emphasis-color-rgb: 0, 0, 0;
  --pe-heading-color: #000000;
  --pe-secondary-color: #000000;
  --pe-secondary-color-rgb: 0, 0, 0;
  --pe-tertiary-color: #000000;
  --pe-tertiary-color-rgb: 0, 0, 0;
  color: #000000;
}

html:not([data-bs-theme="dark"]) .him-app .app-wrapper,
html:not([data-bs-theme="dark"]) .him-app .page-content,
html:not([data-bs-theme="dark"]) .him-app .main-content,
html:not([data-bs-theme="dark"]) .him-app .card,
html:not([data-bs-theme="dark"]) .him-app .card-body,
html:not([data-bs-theme="dark"]) .him-app .card-header,
html:not([data-bs-theme="dark"]) .him-app .card-footer,
html:not([data-bs-theme="dark"]) .him-app .card-title,
html:not([data-bs-theme="dark"]) .him-app .table,
html:not([data-bs-theme="dark"]) .him-app .table > :not(caption) > * > *,
html:not([data-bs-theme="dark"]) .him-app .form-label,
html:not([data-bs-theme="dark"]) .him-app .form-text,
html:not([data-bs-theme="dark"]) .him-app .form-control,
html:not([data-bs-theme="dark"]) .him-app .form-select,
html:not([data-bs-theme="dark"]) .him-app .form-check-label,
html:not([data-bs-theme="dark"]) .him-app .breadcrumb,
html:not([data-bs-theme="dark"]) .him-app .breadcrumb-item,
html:not([data-bs-theme="dark"]) .him-app .breadcrumb-item a,
html:not([data-bs-theme="dark"]) .him-app .breadcrumb-title,
html:not([data-bs-theme="dark"]) .him-app .dropdown-menu,
html:not([data-bs-theme="dark"]) .him-app .dropdown-item,
html:not([data-bs-theme="dark"]) .him-app .list-group-item,
html:not([data-bs-theme="dark"]) .him-app .modal-title,
html:not([data-bs-theme="dark"]) .him-app .modal-body,
html:not([data-bs-theme="dark"]) .him-app .alert:not(.alert-danger):not(.alert-success):not(.alert-warning):not(.alert-info),
html:not([data-bs-theme="dark"]) .him-app h1,
html:not([data-bs-theme="dark"]) .him-app h2,
html:not([data-bs-theme="dark"]) .him-app h3,
html:not([data-bs-theme="dark"]) .him-app h4,
html:not([data-bs-theme="dark"]) .him-app h5,
html:not([data-bs-theme="dark"]) .him-app h6,
html:not([data-bs-theme="dark"]) .him-app p,
html:not([data-bs-theme="dark"]) .him-app td,
html:not([data-bs-theme="dark"]) .him-app th,
html:not([data-bs-theme="dark"]) .him-app dt,
html:not([data-bs-theme="dark"]) .him-app dd,
html:not([data-bs-theme="dark"]) .him-app label,
html:not([data-bs-theme="dark"]) .him-app small {
  color: #000000;
}

html:not([data-bs-theme="dark"]) .him-app .text-muted,
html:not([data-bs-theme="dark"]) .him-app .text-body,
html:not([data-bs-theme="dark"]) .him-app .text-body-secondary,
html:not([data-bs-theme="dark"]) .him-app .text-body-tertiary,
html:not([data-bs-theme="dark"]) .him-app .text-secondary,
html:not([data-bs-theme="dark"]) .him-app .text-gray,
html:not([data-bs-theme="dark"]) .him-app .text-black-50 {
  color: #000000 !important;
}

/* Preserve semantic / brand text colors after the black defaults */
.him-app .text-primary,
.him-auth .text-primary {
  color: var(--pe-primary, #0d9488) !important;
}
.him-app .text-success {
  color: var(--pe-success, #198754) !important;
}
.him-app .text-danger {
  color: var(--pe-danger, #dc3545) !important;
}
.him-app .text-warning {
  color: var(--pe-warning, #ffc107) !important;
}
.him-app .text-info {
  color: var(--pe-info, #0dcaf0) !important;
}
.him-app .text-white,
.him-auth .text-white {
  color: #ffffff !important;
}

/* Colored buttons / solid badges keep light text */
.him-app .btn-primary,
.him-app .btn-success,
.him-app .btn-danger,
.him-app .btn-dark,
.him-app .btn-info,
.him-auth .btn-primary,
.him-app .badge.bg-primary,
.him-app .badge.bg-success,
.him-app .badge.bg-danger,
.him-app .badge.bg-dark,
.him-app .badge.bg-info {
  color: #ffffff !important;
}

/* Subtle badge text colors (status chips) — light theme only */
html:not([data-bs-theme="dark"]) .him-app .bg-primary-subtle.text-primary,
html:not([data-bs-theme="dark"]) .him-app .text-primary.bg-primary-subtle {
  color: var(--pe-primary, #0d9488) !important;
}
html:not([data-bs-theme="dark"]) .him-app .bg-success-subtle.text-success,
html:not([data-bs-theme="dark"]) .him-app .text-success.bg-success-subtle {
  color: #0f5132 !important;
}
html:not([data-bs-theme="dark"]) .him-app .bg-danger-subtle.text-danger,
html:not([data-bs-theme="dark"]) .him-app .text-danger.bg-danger-subtle {
  color: #842029 !important;
}
html:not([data-bs-theme="dark"]) .him-app .bg-warning-subtle.text-warning,
html:not([data-bs-theme="dark"]) .him-app .text-warning.bg-warning-subtle {
  color: #664d03 !important;
}
html:not([data-bs-theme="dark"]) .him-app .bg-info-subtle.text-info,
html:not([data-bs-theme="dark"]) .him-app .text-info.bg-info-subtle {
  color: #055160 !important;
}
html:not([data-bs-theme="dark"]) .him-app .bg-secondary-subtle.text-secondary,
html:not([data-bs-theme="dark"]) .him-app .text-secondary.bg-secondary-subtle {
  color: #000000 !important;
}

/* Dark theme badge text — bright variants so chips stay legible on dark canvas */
html[data-bs-theme="dark"] .him-app .bg-primary-subtle.text-primary,
html[data-bs-theme="dark"] .him-app .text-primary.bg-primary-subtle {
  color: #5eead4 !important;
}
html[data-bs-theme="dark"] .him-app .bg-success-subtle.text-success,
html[data-bs-theme="dark"] .him-app .text-success.bg-success-subtle {
  color: #86efac !important;
}
html[data-bs-theme="dark"] .him-app .bg-danger-subtle.text-danger,
html[data-bs-theme="dark"] .him-app .text-danger.bg-danger-subtle {
  color: #fca5a5 !important;
}
html[data-bs-theme="dark"] .him-app .bg-warning-subtle.text-warning,
html[data-bs-theme="dark"] .him-app .text-warning.bg-warning-subtle {
  color: #fcd34d !important;
}
html[data-bs-theme="dark"] .him-app .bg-info-subtle.text-info,
html[data-bs-theme="dark"] .him-app .text-info.bg-info-subtle {
  color: #7dd3fc !important;
}
html[data-bs-theme="dark"] .him-app .bg-secondary-subtle.text-secondary,
html[data-bs-theme="dark"] .him-app .text-secondary.bg-secondary-subtle {
  color: #cbd5e1 !important;
}

/*
 * Sidebar labels: inherit link color (theme sets .pe-nav-link per sidebar-color).
 * No hardcoded white — light theme gets dark labels with icons.
 */
.him-app .pe-app-sidebar .pe-nav-link .pe-nav-content {
  color: currentColor !important;
}

.him-app .pe-app-sidebar .pe-menu-title {
  color: inherit;
}

/* Light sidebar brand title */
html[data-sidebar-color="light"] .him-app .pe-app-sidebar .logo-main h3,
html[data-sidebar-color="light"] .him-app .pe-app-sidebar .him-sidebar-brand-title {
  color: var(--pe-sidebar-text, #212529) !important;
  opacity: 1;
}

html[data-sidebar-color="dark"] .him-app .pe-app-sidebar .him-sidebar-brand-title,
html:not([data-sidebar-color]) .him-app .pe-app-sidebar .him-sidebar-brand-title {
  color: var(--pe-sidebar-text, rgba(255, 255, 255, 0.8));
}

/* Auth — match Mirbal auth-signin.html exactly (light canvas) */
.him-auth .auth-bg {
  min-height: 100vh;
  /* Theme rule: radial-gradient(circle at 30% 30%, #f1f8ff, #ffe6e6, #ecf5ff) */
  background: radial-gradient(circle at 30% 30%, #f1f8ff, #ffe6e6, #ecf5ff) !important;
}

/* When dark theme is global, still paint body under auth with the pastel canvas */
html.him-auth-route body,
html.him-auth-route {
  background: radial-gradient(circle at 30% 30%, #f1f8ff, #ffe6e6, #ecf5ff) !important;
}

.him-auth .main-wrapper {
  /* Let theme sizes apply (650 / 900 / 1000px) — only ensure white card + soft shadow */
  background-color: #ffffff !important;
  border: 1px solid #e9e9e9 !important;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08) !important;
  color: #212529;
}

.him-auth .auth-bg .logo-main h3 {
  font-family: "Quicksand", Inter, system-ui, sans-serif;
  color: #535353 !important;
}

.him-auth .login-section {
  background-color: #ffffff !important;
  color: #212529;
}

/* Auth card: logo pinned top-right; title + form + footer centered as a group.
   Applies to login (password + OTP), forgot-password, and reset-password. */
.him-auth .login-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.him-auth .login-section > .logo-main {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  margin: 0;
  flex-shrink: 0;
}
@media (min-width: 1200px) {
  .him-auth .login-section > .logo-main {
    right: 3rem;
  }
}
.him-auth .login-section > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.him-auth .login-section h5 {
  color: #212529 !important;
  font-weight: 600;
}

/* Mirbal muted copy — do not force pure black on auth */
.him-auth .login-section .text-muted,
.him-auth .text-muted {
  color: #8b8b8b !important;
}

.him-auth .form-check-label,
.him-auth .form-control {
  color: #212529;
}

/* Auth helper text — darker than theme default for readability */
.him-auth .login-section .form-text {
  color: #5b6573 !important;
  font-size: 0.8125rem;
}

/* Highlighted "sign in" link inside OTP helper buttons */
.him-auth .him-auth-highlight-link {
  color: var(--pe-primary, #0d9488) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Checkbox matches input field styling (lighter border, theme check) */
.him-auth .form-check-input {
  width: 1.15em;
  height: 1.15em;
  border: 1px solid #c8cdd6;
  background-color: #fff;
  cursor: pointer;
}

.him-auth .form-check-input:focus {
  border-color: var(--pe-primary, #0d9488);
  box-shadow: 0 0 0 0.15rem rgba(13, 148, 136, 0.15);
}

.him-auth .form-check-input:checked {
  background-color: var(--pe-primary, #0d9488);
  border-color: var(--pe-primary, #0d9488);
}

/* Auth field labels */
.him-auth .login-section .form-label {
  color: #212529 !important;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

/* Auth error messages — exclamation prefix, theme danger */
.him-auth .him-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 0.35rem;
  color: var(--pe-danger, #dc3545);
  font-size: 0.8125rem;
}

.him-auth .him-field-error i {
  line-height: 1.35;
  flex-shrink: 0;
}

.him-auth .him-auth-alert i {
  line-height: inherit;
}

.him-auth .form-control {
  min-height: 46px;
  border-radius: 0.5rem;
  border-color: #e9e9e9;
  background-color: #fff;
}

.him-auth .form-control::placeholder {
  color: #adb5bd;
}

.him-auth .form-control:focus {
  border-color: var(--pe-primary, #0d9488);
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15);
  background-color: #fff;
}

.him-auth .btn-primary {
  min-height: 46px;
  border-radius: 0.5rem;
  font-weight: 600;
}

.him-auth .toggle-password {
  z-index: 2;
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.85rem;
}

/* Left art panel — Mirbal decoration-section + soft photo wash */
.him-auth .decoration-section {
  position: relative;
  overflow: hidden;
  background-color: var(--pe-dark-bg-subtle, #dfe3e7) !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(15, 23, 42, 0.35) 0%,
      rgba(15, 23, 42, 0.12) 45%,
      rgba(13, 148, 136, 0.18) 100%
    ),
    url("/admin/assets/images/auth/img-1.jpg");
  background-size: cover;
  background-position: center;
  min-height: 280px;
}

.him-auth .decoration-section::after {
  content: none;
}

@media (max-width: 991.98px) {
  .him-auth .decoration-section {
    min-height: 220px;
    height: 280px;
  }
}

/* Logo alignment on auth matches Mirbal (end / right) */
.him-auth .logo-main {
  justify-content: flex-end !important;
}

/* Shell canvas — Mirbal tokens own layout colors.
   Footer is a SIBLING of .app-wrapper inside #layout-wrapper (not nested).
   Never set min-height:100vh on .app-wrapper or a white strip appears under footer. */
.him-app#layout-wrapper,
#layout-wrapper.him-app {
  background-color: var(--pe-body-bg);
  color: var(--pe-body-color);
  min-height: 100vh;
  /* Tighter content gutters than theme default (5rem) */
  --pe-app-wrapper-padding: 1.5rem;
  --pe-semibox-width: 0.75rem;
}

.him-app .app-wrapper {
  background-color: transparent;
  color: inherit;
  /* Theme uses padding-block-start for header clearance — keep it so content
     never sits under the fixed header (all pages). */
  padding-block-start: calc(var(--pe-app-header-height, 74px) + 1.75rem) !important;
  /* Space above footer on every page */
  padding-block-end: 1.5rem !important;
}

.him-app .app-wrapper > .container-fluid {
  padding-inline: 0.75rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .him-app .app-wrapper > .container-fluid {
    padding-inline: 1rem;
  }
}

/* Never show sidebar expand double-arrow — header toggle only */
.him-app #sidebarDefaultArrow,
.him-app .him-sidebar-expand-arrow,
.him-app .pe-app-sidebar .icon-hover-btn.him-sidebar-expand-arrow {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .him-sidebar-expand-arrow,
html[data-sidebar="icon"] .him-app .pe-app-sidebar .him-sidebar-expand-arrow {
  display: none !important;
}

html:not([data-bs-theme="dark"]) .him-app#layout-wrapper,
html:not([data-bs-theme="dark"]) #layout-wrapper.him-app {
  background-color: var(--pe-body-bg, #fffdfd);
}

/* Dark theme main canvas (theme reference: --pe-body-bg #161616) */
html[data-bs-theme="dark"] body {
  background-color: var(--pe-body-bg, #161616) !important;
  color: var(--pe-body-color, #e9e9e9);
}

html[data-bs-theme="dark"] .him-app#layout-wrapper,
html[data-bs-theme="dark"] #layout-wrapper.him-app {
  background-color: var(--pe-body-bg, #161616) !important;
  color: var(--pe-body-color, #e9e9e9);
}

html[data-bs-theme="dark"] .him-app .app-wrapper {
  background-color: transparent !important;
  color: inherit;
}

/* Footer uses theme secondary surface — no hard-coded white strip.
   Keep theme margin-inline-start (sidebar offset); only tighten padding. */
.him-app .footer {
  background-color: var(--pe-secondary-bg) !important;
  color: var(--pe-secondary-color, #8b8b8b);
  border-color: var(--pe-border-color);
  padding-inline: 0.75rem !important;
  /* Breathing room from main content */
  margin-block-start: 0.5rem;
}

.him-app .footer .him-footer-credit-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.him-app .footer .him-footer-credit-link:hover,
.him-app .footer .him-footer-credit-link:focus-visible {
  color: var(--pe-primary, #0d9488);
  border-bottom-color: currentColor;
}

@media (min-width: 768px) {
  .him-app .footer {
    padding-inline: 1rem !important;
  }
}

html[data-bs-theme="dark"] .him-app .footer {
  background-color: var(--pe-secondary-bg, #202020) !important;
  color: var(--pe-secondary-color, rgba(233, 233, 233, 0.75));
  border-color: var(--pe-border-color, rgba(255, 255, 255, 0.08));
}

html[data-bs-theme="dark"] .him-app .card {
  background-color: var(--pe-secondary-bg, #202020);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--pe-body-color, #e9e9e9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .him-app .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: transparent;
}

html[data-bs-theme="dark"] .him-app .card-title,
html[data-bs-theme="dark"] .him-app .breadcrumb-title,
html[data-bs-theme="dark"] .him-app h1,
html[data-bs-theme="dark"] .him-app h2,
html[data-bs-theme="dark"] .him-app h3,
html[data-bs-theme="dark"] .him-app h4,
html[data-bs-theme="dark"] .him-app h5,
html[data-bs-theme="dark"] .him-app h6 {
  color: var(--pe-emphasis-color, #fff);
}

html[data-bs-theme="dark"] .him-app .table > :not(caption) > * > *,
html[data-bs-theme="dark"] .him-app .list-group-item,
html[data-bs-theme="dark"] .him-app .form-control,
html[data-bs-theme="dark"] .him-app .form-select,
html[data-bs-theme="dark"] .him-app .form-label,
html[data-bs-theme="dark"] .him-app p,
html[data-bs-theme="dark"] .him-app td,
html[data-bs-theme="dark"] .him-app th,
html[data-bs-theme="dark"] .him-app small {
  color: var(--pe-body-color, #e9e9e9);
}

html[data-bs-theme="dark"] .him-app .table thead th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--pe-secondary-color, rgba(233, 233, 233, 0.75));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .him-app .form-control,
html[data-bs-theme="dark"] .him-app .form-select {
  background-color: var(--pe-tertiary-bg, #303030);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--pe-body-color, #e9e9e9);
}

html[data-bs-theme="dark"] .him-app .form-control:focus,
html[data-bs-theme="dark"] .him-app .form-select:focus {
  background-color: var(--pe-tertiary-bg, #303030);
  border-color: #0d9488;
  color: var(--pe-body-color, #e9e9e9);
}

html[data-bs-theme="dark"] .him-app .text-muted,
html[data-bs-theme="dark"] .him-app .text-body-secondary,
html[data-bs-theme="dark"] .him-app .text-secondary {
  color: var(--pe-secondary-color, rgba(233, 233, 233, 0.75)) !important;
}

html[data-bs-theme="dark"] .him-app .text-body {
  color: var(--pe-body-color, #e9e9e9) !important;
}

html[data-bs-theme="dark"] .him-app .dropdown-menu {
  background-color: var(--pe-secondary-bg, #202020);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--pe-body-color, #e9e9e9);
}

html[data-bs-theme="dark"] .him-app .dropdown-item {
  color: var(--pe-body-color, #e9e9e9);
}

html[data-bs-theme="dark"] .him-app .dropdown-item:hover,
html[data-bs-theme="dark"] .him-app .dropdown-item:focus {
  background-color: rgba(13, 148, 136, 0.15);
  color: #fff;
}

html[data-bs-theme="dark"] .him-app .him-empty {
  color: var(--pe-secondary-color, rgba(233, 233, 233, 0.75));
}

html[data-bs-theme="dark"] .him-app .bg-light {
  background-color: var(--pe-tertiary-bg, #303030) !important;
}

html[data-bs-theme="dark"] .him-app .border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-bs-theme="dark"] .him-app .list-group-item {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}

.him-app .card {
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 0.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.him-app .card-header {
  background: transparent;
  border-bottom-color: rgba(15, 23, 42, 0.06);
  padding-top: 1rem;
  padding-bottom: 0.85rem;
}

.him-app .card-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.him-app .main-breadcrumb {
  margin-top: 0.25rem !important;
  margin-bottom: 1.25rem !important;
}

.him-app .breadcrumb-title {
  font-size: 1.25rem !important;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #000000;
}

html:not([data-bs-theme="dark"]) .him-app .breadcrumb-title {
  color: #0f172a;
}

.him-app .table > :not(caption) > * > * {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}

.him-app .table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 600;
  background: #f8fafc;
  border-bottom-width: 1px;
}

html:not([data-bs-theme="dark"]) .him-app .table thead th {
  color: #000000;
}

.him-app .btn {
  border-radius: 0.55rem;
  font-weight: 500;
}

.him-app .btn-primary {
  box-shadow: 0 1px 2px rgba(13, 148, 136, 0.25);
}

.him-app .form-control,
.him-app .form-select {
  border-radius: 0.55rem;
  border-color: #dbe3ef;
  min-height: 42px;
}

.him-app .form-control:focus,
.him-app .form-select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.12);
}

.him-app .alert {
  border-radius: 0.75rem;
}

.him-app .badge {
  font-weight: 500;
}

.him-app .list-group-item-action {
  border: 0;
  padding: 0.85rem 1.1rem;
}

.him-app .list-group-item-action:hover {
  background: #f0fdfa;
  color: #0f766e;
}

/* KPI cards */
.him-app .kpi-card .kpi-value {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.him-app .kpi-card .kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
}

/* Empty states */
.him-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #000000;
}

.him-empty i {
  font-size: 2rem;
  opacity: 0.7;
  display: block;
  margin-bottom: 0.5rem;
}

/* Page action row */
.him-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Sidebar helpers — collapse/expand owned by data-sidebar + refinements below */
.him-app .pe-app-sidebar {
  flex-direction: column;
}

.him-app .pe-app-sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Mobile drawer polish (theme handles hide/show; we only style backdrop) */
@media (max-width: 1023.98px) {
  /* Sidebar must sit ABOVE the backdrop so nav stays clickable */
  .him-app .pe-app-sidebar {
    z-index: 1051 !important;
  }

  .him-app .pe-app-sidebar.show {
    animation: him-sidebar-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .him-app .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .him-app .pe-app-sidebar.show ~ .sidebar-backdrop,
  .him-app .sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@keyframes him-sidebar-in {
  from {
    opacity: 0.6;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.him-app .pe-app-sidebar-menu .pe-nav-link {
  min-height: 44px;
}

/* Expanded labels: theme token color only (no hardcoded white) */
html[data-sidebar="default"] .him-app .pe-app-sidebar-menu .pe-nav-content,
html:not([data-sidebar]) .him-app .pe-app-sidebar-menu .pe-nav-content {
  white-space: nowrap;
  font-size: 0.9rem;
}

/*
 * Collapsed modes (icon / icon-hover): icons only — hide first letters of labels.
 * icon-hover expands labels on sidebar hover (theme + our show rules).
 */
html[data-sidebar="icon"] .him-app,
html[data-sidebar="icon-hover"] .him-app {
  --pe-app-sidebar-sm-width: 4rem;
}

html[data-sidebar="icon"] .him-app .pe-app-sidebar .pe-nav-content,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar .pe-nav-content,
html[data-sidebar="icon"] .him-app .pe-app-sidebar .pe-menu-title,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar .pe-menu-title,
html[data-sidebar="icon"] .him-app .pe-app-sidebar .logo-main h3,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar .logo-main h3,
html[data-sidebar="icon"] .him-app .him-sidebar-version .pe-nav-content,
html[data-sidebar="icon-hover"] .him-app .him-sidebar-version .pe-nav-content,
html[data-sidebar="icon"] .him-app .him-version-badge,
html[data-sidebar="icon-hover"] .him-app .him-version-badge {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Nothing may peek out of the collapsed rail */
html[data-sidebar="icon"] .him-app .pe-app-sidebar,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar {
  overflow: hidden !important;
}

html[data-sidebar="icon"] .him-app .pe-app-sidebar .pe-nav-icon,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar .pe-nav-icon {
  margin-inline: auto !important;
}

html[data-sidebar="icon"] .him-app .pe-app-sidebar .pe-nav-link,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar .pe-nav-link {
  justify-content: center;
  padding-inline: 0.5rem !important;
}

html[data-sidebar="icon"] .him-app .him-sidebar-version,
html[data-sidebar="icon-hover"] .him-app .him-sidebar-version {
  padding-inline: 0.5rem !important;
}

/* icon-hover: expand rail + show labels on hover (guaranteed with !important) */
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover {
  width: var(--pe-app-sidebar-width) !important;
  overflow: visible !important;
}
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .pe-nav-content,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .pe-menu-title,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .logo-main h3,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .him-sidebar-version .pe-nav-content,
html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .him-version-badge {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  visibility: visible !important;
}

html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .pe-menu-title {
  display: block !important;
}

html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .pe-nav-icon {
  margin-inline: 0 !important;
}

html[data-sidebar="icon-hover"] .him-app .pe-app-sidebar:hover .pe-nav-link {
  justify-content: flex-start;
}

/* Collapsed modes: no leftover min-heights → footer hugs content */
html[data-sidebar="icon"] body,
html[data-sidebar="icon-hover"] body,
html[data-sidebar="icon"] .him-app,
html[data-sidebar="icon-hover"] .him-app,
html[data-sidebar="icon"] .him-app#layout-wrapper,
html[data-sidebar="icon-hover"] .him-app#layout-wrapper {
  min-height: 0 !important;
}

html[data-sidebar="icon"] .him-app .app-wrapper,
html[data-sidebar="icon-hover"] .him-app .app-wrapper,
html[data-sidebar="icon"] .app-wrapper,
html[data-sidebar="icon-hover"] .app-wrapper {
  min-height: 0 !important;
  justify-content: flex-start !important;
}

/* Nav group spacing (Main / System): theme zeroes :first-child padding on every nested title */
.him-app .him-sidebar-menu {
  padding-bottom: 1.25rem;
}

.him-app .him-nav-group-spaced {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.him-app .him-nav-group .him-menu-title {
  padding-top: 0.35rem !important;
  padding-bottom: 0.65rem !important;
  margin-bottom: 0.15rem;
  letter-spacing: 0.08em;
}

.him-app .him-nav-group-spaced .him-menu-title {
  padding-top: 0.25rem !important;
}

.him-app .him-nav-group > ul {
  padding-bottom: 0.35rem;
}

.him-app .pe-nav-link.active {
  font-weight: 600;
}

/*
 * Compact equal action buttons (tables, lists, toolbars).
 * Use on: Download, Delete, Revoke, Save, Mark read, Open, Retry, etc.
 * Pair groups with .him-row-actions.
 */
.him-btn-action,
.him-app .him-btn-action {
  min-width: 6.75rem;
  min-height: 2rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding-inline: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: middle;
}

.him-btn-action > i,
.him-app .him-btn-action > i {
  font-size: 0.95rem;
  line-height: 1;
}

.him-btn-action .spinner-border,
.him-app .him-btn-action .spinner-border {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 0.12em;
  flex-shrink: 0;
}

/* Longer labels (Mark all read, Revoke {role}, …) */
.him-btn-action-wide,
.him-app .him-btn-action-wide {
  min-width: 8.75rem;
}

.him-row-actions,
.him-app .him-row-actions,
.him-file-actions,
.him-app .him-file-actions {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  /* Clear space between Download / Delete and other action pairs */
  gap: 0.75rem !important;
  column-gap: 0.75rem !important;
  row-gap: 0.5rem !important;
}

/* Sibling margin as belt-and-suspenders (forms, spans wrapping buttons) */
.him-row-actions > * + *,
.him-app .him-row-actions > * + *,
.him-file-actions > * + *,
.him-app .him-file-actions > * + * {
  margin-left: 0.75rem !important;
}

@supports (gap: 1px) {
  .him-row-actions > * + *,
  .him-app .him-row-actions > * + *,
  .him-file-actions > * + *,
  .him-app .him-file-actions > * + * {
    margin-left: 0 !important;
  }
}

.him-app .module-tile {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.him-app .module-tile:hover {
  border-color: rgba(13, 148, 136, 0.35) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* Search modal + launch control */
.him-app .search-modal .modal-content,
.him-app .him-search-modal-content {
  border-radius: 1rem;
  overflow: hidden;
}

.him-app .search-modal .form-control {
  min-height: 48px;
  font-size: 1rem;
}

.him-app .him-search-launch {
  min-height: 38px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #000000;
  max-width: 320px;
}

.him-app .him-search-launch:hover {
  background: #f0fdfa !important;
  border-color: rgba(13, 148, 136, 0.35) !important;
  color: #0f766e;
}

.him-app .him-search-launch-keys {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: 0.25rem;
}

.him-app .him-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #000000;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.him-app .him-search-input-wrap {
  position: relative;
}

.him-app .him-search-body {
  max-height: min(58vh, 440px);
  overflow-y: auto;
  padding-right: 0.15rem;
}

.him-app .him-search-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  margin-bottom: 0.25rem;
  color: inherit;
  transition: background 0.12s ease;
}

.him-app .him-search-item:hover,
.him-app .him-search-item.is-active {
  background: #f0fdfa;
}

.him-app .him-search-item-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecfeff;
  color: #0f766e;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.him-app .him-search-item .right-arrow {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.him-app .him-search-hints .suggestion-title {
  letter-spacing: 0.04em;
  font-weight: 600;
}

.him-app .him-global-search .header-search-btn {
  pointer-events: none;
}

/* File upload dropzone */
.him-app .him-dropzone {
  border: 1.5px dashed #cbd5e1;
  border-radius: 0.85rem;
  background: #f8fafc;
  padding: 1.25rem 1rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  outline: none;
}

.him-app .him-dropzone:hover,
.him-app .him-dropzone:focus-visible {
  border-color: #0d9488;
  background: #f0fdfa;
}

.him-app .him-dropzone.is-dragover {
  border-color: #0d9488;
  border-style: solid;
  background: #ecfeff;
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.12);
}

.him-app .him-dropzone.has-file {
  border-style: solid;
  border-color: #99f6e4;
  background: #f0fdfa;
}

.him-app .him-dropzone.is-disabled {
  cursor: not-allowed;
  opacity: 0.85;
  pointer-events: none;
}

/* Dark mode: dropzone matches the dark canvas (no white panel / white text) */
html[data-bs-theme="dark"] .him-app .him-dropzone {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e9e9e9;
}
html[data-bs-theme="dark"] .him-app .him-dropzone:hover,
html[data-bs-theme="dark"] .him-app .him-dropzone:focus-visible {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.12);
}
html[data-bs-theme="dark"] .him-app .him-dropzone.is-dragover {
  border-color: #14b8a6;
  border-style: solid;
  background: rgba(13, 148, 136, 0.18);
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.22);
}
html[data-bs-theme="dark"] .him-app .him-dropzone.has-file {
  border-style: solid;
  border-color: #2dd4bf;
  background: rgba(13, 148, 136, 0.14);
}
html[data-bs-theme="dark"] .him-app .him-dropzone .text-muted {
  color: rgba(233, 233, 233, 0.62) !important;
}
html[data-bs-theme="dark"] .him-app .him-dropzone .text-primary {
  color: #5eead4 !important;
}
html[data-bs-theme="dark"] .him-app .him-dropzone-icon {
  background: rgba(13, 148, 136, 0.2);
  color: #5eead4;
}

.him-app .him-dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: #ecfeff;
  color: #0f766e;
  font-size: 1.35rem;
}

.him-app .him-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.55rem;
  background: #f1f5f9;
  color: #000000;
  flex-shrink: 0;
  font-size: 1.05rem;
}

/* Dark mode: white icon on a subtle dark chip */
html[data-bs-theme="dark"] .him-app .him-file-icon {
  background: rgba(148, 163, 184, 0.18);
  color: #ffffff;
}

html[data-bs-theme="dark"] .him-app .him-file-row-trigger:hover .him-file-icon {
  background: rgba(13, 148, 136, 0.28);
  color: #5eead4;
}

html[data-bs-theme="dark"] .him-app .him-file-preview-trigger,
html[data-bs-theme="dark"] .him-app .him-file-row-trigger {
  color: #e9e9e9;
}

.him-app .him-file-icon-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  background: #ecfeff;
  color: #0f766e;
}

.him-app .him-file-preview-trigger,
.him-app .him-file-row-trigger {
  color: #000000;
  max-width: 100%;
}

.him-app .him-file-row-trigger:hover .him-file-row-name {
  color: #0f766e;
  text-decoration: underline;
}

.him-app .him-file-row-trigger:hover .him-file-icon {
  background: #ecfeff;
  color: #0f766e;
}

.him-app .him-file-row-trigger:focus-visible {
  outline: none;
}

.him-app .him-file-row-trigger:focus-visible .him-file-icon {
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.2);
}

/*
 * Preview modal is portaled into .him-app or document.body — styles must NOT
 * require a .him-app ancestor or the dialog stays invisible (opacity: 0).
 */
.him-file-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0);
  backdrop-filter: blur(0);
  transition:
    background 0.22s ease,
    backdrop-filter 0.22s ease;
}

.him-file-preview-overlay.is-visible {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
}

.him-file-preview-dialog {
  width: min(960px, 100%);
  max-height: min(90vh, 900px);
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.him-file-preview-dialog.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.him-file-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.him-file-preview-type-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecfeff;
  color: #0f766e;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.him-file-preview-close.him-btn-action {
  /* Match standard action size; keep light close styling */
  border-radius: 0.55rem !important;
}

.him-file-preview-body {
  flex: 1 1 auto;
  min-height: 280px;
  max-height: calc(90vh - 5rem);
  overflow: auto;
  background:
    radial-gradient(circle at top, rgba(13, 148, 136, 0.05), transparent 45%),
    #f1f5f9;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.him-file-preview-status {
  margin: auto;
  text-align: center;
  padding: 2.5rem 1.5rem;
  max-width: 28rem;
  animation: him-file-preview-fade-in 0.28s ease both;
}

.him-file-preview-empty-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #000000;
  font-size: 1.5rem;
}

.him-file-preview-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.him-file-preview-loader span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #0d9488;
  animation: him-file-preview-bounce 0.9s ease-in-out infinite;
}

.him-file-preview-loader span:nth-child(2) {
  animation-delay: 0.12s;
}

.him-file-preview-loader span:nth-child(3) {
  animation-delay: 0.24s;
}

.him-file-preview-image {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 5.5rem);
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 0.35rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
  animation: him-file-preview-fade-in 0.32s ease both;
}

.him-file-preview-frame {
  width: 100%;
  min-height: min(70vh, 720px);
  height: calc(90vh - 5rem);
  border: 0;
  background: #fff;
  animation: him-file-preview-fade-in 0.32s ease both;
}

.him-file-preview-text {
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff;
  color: #000000;
  animation: him-file-preview-fade-in 0.32s ease both;
}

@keyframes him-file-preview-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes him-file-preview-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .him-file-preview-overlay,
  .him-file-preview-dialog,
  .him-file-preview-image,
  .him-file-preview-frame,
  .him-file-preview-text,
  .him-file-preview-status,
  .him-file-preview-loader span {
    transition: none !important;
    animation: none !important;
  }

  .him-file-preview-dialog {
    opacity: 1;
    transform: none;
  }
}

/* Auth logo alignment handled in auth block above */

/* ─── Navigation loader: center popup only ─── */
.him-nav-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.him-nav-loader.is-overlay {
  pointer-events: auto;
}

.him-nav-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(13, 148, 136, 0.12), transparent 55%),
    rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: him-nav-overlay-in 0.22s ease-out both;
}

.him-nav-loader-card {
  min-width: min(92vw, 280px);
  padding: 1.6rem 1.75rem 1.35rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 24px 50px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  text-align: center;
  animation: him-nav-card-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.him-nav-loader-orbit {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
}

.him-nav-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.him-nav-loader-ring--a {
  border-top-color: #0d9488;
  border-right-color: rgba(13, 148, 136, 0.25);
  animation: him-spin 0.9s linear infinite;
}

.him-nav-loader-ring--b {
  inset: 8px;
  border-bottom-color: #14b8a6;
  border-left-color: rgba(20, 184, 166, 0.2);
  animation: him-spin 1.25s linear infinite reverse;
}

.him-nav-loader-core {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0f766e 0%, #0d9488 55%, #115e59 100%);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.35);
  animation: him-core-pulse 1.6s ease-in-out infinite;
}

.him-nav-loader-title {
  margin: 0;
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: #000000;
}

.him-nav-loader-sub {
  margin: 0.25rem 0 0.85rem;
  font-size: 0.82rem;
  color: #000000;
}

.him-nav-loader-dots {
  display: inline-flex;
  gap: 0.35rem;
}

.him-nav-loader-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d9488;
  opacity: 0.35;
  animation: him-dot 1s ease-in-out infinite;
}

.him-nav-loader-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.him-nav-loader-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.him-page-enter {
  animation: him-page-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes him-nav-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes him-nav-card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes him-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes him-core-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes him-dot {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes him-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .him-nav-loader-ring--a,
  .him-nav-loader-ring--b,
  .him-nav-loader-core,
  .him-nav-loader-dots span,
  .him-page-enter,
  .him-nav-loader-overlay,
  .him-nav-loader-card,
  .him-app .pe-app-sidebar.show {
    animation: none !important;
  }

  .him-page-enter {
    opacity: 1;
    transform: none;
  }
}

/* Lock background scroll while mobile drawer is open */
body.him-sidebar-open {
  overflow: hidden;
}

/* Profile avatar preview */
.him-app .him-avatar-preview {
  width: 112px !important;
  height: 112px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid var(--pe-border-color, rgba(255,255,255,0.12));
  background: var(--pe-tertiary-bg, #2a2a2a);
  display: block;
  flex-shrink: 0;
}

/* Smaller avatar in the settings access card */
.him-app .him-avatar-preview-sm {
  width: 96px !important;
  height: 96px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid var(--pe-border-color, rgba(255,255,255,0.12));
  background: var(--pe-tertiary-bg, #2a2a2a);
  display: block;
  flex-shrink: 0;
}

.him-app .him-avatar-preview-wrap {
  flex-shrink: 0;
}

/* Sidebar version pin at bottom of menu */
.him-app .him-sidebar-nav-inner {
  min-height: 100%;
  padding-bottom: 0.75rem;
}

.him-app .him-sidebar-version {
  margin-top: auto;
  padding: 0.75rem 0.85rem 0.35rem;
  border-top: 1px solid var(--pe-border-color, rgba(255,255,255,0.08));
}

.him-app .him-sidebar-version .him-version-link {
  border-radius: 0.5rem;
}

.him-app .him-version-badge {
  opacity: 0.85;
  font-weight: 600;
  margin-left: 0.15rem;
}

/* ---- Version release notes: section separation + colored headings ---- */
.him-app .him-version-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.him-app .him-version-section {
  border: 1px solid var(--pe-border-color, rgba(255, 255, 255, 0.08));
  border-left-width: 4px;
  border-radius: 0.65rem;
  padding: 0.9rem 1rem 0.95rem;
  background: color-mix(in srgb, var(--pe-secondary-bg, #202020) 88%, transparent);
}

.him-app .him-version-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.him-app .him-version-section-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.him-app .him-version-section-list {
  padding-left: 1.15rem;
  margin: 0;
}

.him-app .him-version-section-list li {
  margin-bottom: 0.35rem;
}

.him-app .him-version-section-list li:last-child {
  margin-bottom: 0;
}

/* Added — green */
.him-app .him-version-section--added {
  border-left-color: #22c55e;
  background: color-mix(in srgb, #22c55e 8%, var(--pe-secondary-bg, #202020));
}
.him-app .him-version-section--added .him-version-section-title {
  color: #16a34a;
}
html[data-bs-theme="dark"] .him-app .him-version-section--added .him-version-section-title {
  color: #4ade80;
}

/* Fixed — amber/orange */
.him-app .him-version-section--fixed {
  border-left-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 10%, var(--pe-secondary-bg, #202020));
}
.him-app .him-version-section--fixed .him-version-section-title {
  color: #d97706;
}
html[data-bs-theme="dark"] .him-app .him-version-section--fixed .him-version-section-title {
  color: #fbbf24;
}

/* Changed — blue */
.him-app .him-version-section--changed {
  border-left-color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 9%, var(--pe-secondary-bg, #202020));
}
.him-app .him-version-section--changed .him-version-section-title {
  color: #2563eb;
}
html[data-bs-theme="dark"] .him-app .him-version-section--changed .him-version-section-title {
  color: #60a5fa;
}

/* Security — red/rose */
.him-app .him-version-section--security {
  border-left-color: #ef4444;
  background: color-mix(in srgb, #ef4444 9%, var(--pe-secondary-bg, #202020));
}
.him-app .him-version-section--security .him-version-section-title {
  color: #dc2626;
}
html[data-bs-theme="dark"] .him-app .him-version-section--security .him-version-section-title {
  color: #f87171;
}

/* Docs — purple */
.him-app .him-version-section--docs {
  border-left-color: #a855f7;
  background: color-mix(in srgb, #a855f7 9%, var(--pe-secondary-bg, #202020));
}
.him-app .him-version-section--docs .him-version-section-title {
  color: #9333ea;
}
html[data-bs-theme="dark"] .him-app .him-version-section--docs .him-version-section-title {
  color: #c084fc;
}

/* Commits / default — muted slate */
.him-app .him-version-section--commits,
.him-app .him-version-section--default {
  border-left-color: #94a3b8;
  background: color-mix(in srgb, #94a3b8 8%, var(--pe-secondary-bg, #202020));
}
.him-app .him-version-section--commits .him-version-section-title,
.him-app .him-version-section--default .him-version-section-title {
  color: #64748b;
}
html[data-bs-theme="dark"] .him-app .him-version-section--commits .him-version-section-title,
html[data-bs-theme="dark"] .him-app .him-version-section--default .him-version-section-title {
  color: #cbd5e1;
}

html:not([data-bs-theme="dark"]) .him-app .him-version-section {
  background: #fff;
}
html:not([data-bs-theme="dark"]) .him-app .him-version-section--added {
  background: color-mix(in srgb, #22c55e 7%, #fff);
}
html:not([data-bs-theme="dark"]) .him-app .him-version-section--fixed {
  background: color-mix(in srgb, #f59e0b 8%, #fff);
}
html:not([data-bs-theme="dark"]) .him-app .him-version-section--changed {
  background: color-mix(in srgb, #3b82f6 7%, #fff);
}
html:not([data-bs-theme="dark"]) .him-app .him-version-section--security {
  background: color-mix(in srgb, #ef4444 7%, #fff);
}
html:not([data-bs-theme="dark"]) .him-app .him-version-section--docs {
  background: color-mix(in srgb, #a855f7 7%, #fff);
}
html:not([data-bs-theme="dark"]) .him-app .him-version-section--commits,
html:not([data-bs-theme="dark"]) .him-app .him-version-section--default {
  background: color-mix(in srgb, #94a3b8 6%, #fff);
}

/* ---- Employee ID card modal ---- */
.him-idcard-modal .modal-dialog {
  max-width: 460px;
}
.him-idcard-modal .modal-content {
  background: #ffffff !important;
  border-radius: 1.1rem;
  /* Side padding = 2x top/bottom padding (user request) */
  padding: 1.1rem 2.2rem 1.1rem 2.2rem;
}
.him-idcard-modal .modal-header {
  padding: 0 0 0.75rem !important;
}
.him-idcard-modal .modal-title {
  color: #111111 !important;
  font-weight: 600;
}
.him-idcard-modal .btn-close {
  filter: none !important;
  opacity: 1;
  color: #000000;
}

/* Footer line under the card: black on the white modal panel */
.him-idcard-modal .modal-content > p {
  color: #000000 !important;
}
.him-idcard-modal .modal-content > p .him-footer-credit-link {
  color: #000000;
}
.him-idcard-backdrop {
  z-index: 1040;
  background-color: rgba(15, 23, 42, 0.55);
}
.him-idcard-modal {
  z-index: 1055;
}

.him-idcard {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(13, 148, 136, 0.32), transparent 55%),
    linear-gradient(150deg, #0b1120 0%, #101c33 55%, #080c13 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.55);
  color: #e9e9e9;
  padding: 1.25rem 1.35rem 1.1rem;
}

.him-idcard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
}
.him-idcard-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.him-idcard-logo {
  border-radius: 0.4rem;
}
.him-idcard-brand-name {
  font-family: "Quicksand", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.him-idcard-chip {
  width: 34px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, #e8c87a 0%, #b98c3a 60%, #8f6a28 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.him-idcard-body {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.1rem;
}
.him-idcard-photo-wrap {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #0d9488, #22d3ee);
}
.him-idcard-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #0f172a;
  display: block;
  background: #1e293b;
}
.him-idcard-info {
  min-width: 0;
  flex: 1 1 auto;
}
.him-idcard-name {
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  word-break: break-word;
}
.him-idcard-role {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5eead4;
  margin: 0.15rem 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.him-idcard-email {
  font-size: 0.78rem;
  color: rgba(233, 233, 233, 0.75);
  word-break: break-all;
}
.him-idcard-org {
  font-size: 0.78rem;
  color: rgba(233, 233, 233, 0.75);
  margin-top: 0.1rem;
}

.him-idcard-footer {
  display: none;
}

/* Full-width ID highlight strip */
.him-idcard-id-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.28), rgba(13, 148, 136, 0.06));
  border: 1px solid rgba(13, 148, 136, 0.35);
  border-radius: 0.6rem;
  padding: 0.55rem 0.9rem;
  margin-top: 0.25rem;
}
.him-idcard-id-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5eead4;
  font-weight: 600;
}
.him-idcard-uid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.him-idcard-qr {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  background: #ffffff;
  border-radius: 0.55rem;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.him-idcard-qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.him-idcard-qr-placeholder {
  width: 80px;
  height: 80px;
  background:
    repeating-linear-gradient(45deg, #e2e8f0 0 8px, #f8fafc 8px 16px);
  border-radius: 4px;
}

/* OTP 6-box input */
.him-auth .him-otp-boxes {
  max-width: 340px;
  margin-inline: auto;
}
.him-auth .him-otp-box {
  width: 3rem;
  height: 3.4rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0;
  border-radius: 0.6rem;
  border-color: #dbe3ef;
  background-color: #fff;
  color: #212529;
  caret-color: var(--pe-primary, #0d9488);
}
.him-auth .him-otp-box:focus {
  border-color: var(--pe-primary, #0d9488);
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15);
  background-color: #fff;
}
.him-auth .him-otp-box:disabled {
  background-color: #f1f5f9;
  color: #64748b;
}

/* Back-to-password link at top right of OTP screen */
.him-auth .him-auth-back-link {
  color: var(--pe-primary, #0d9488) !important;
  font-weight: 600;
}
.him-auth .him-auth-resend-timer {
  color: var(--pe-primary, #0d9488);
  font-variant-numeric: tabular-nums;
}

/* ---- Auth button loader (pretty pulsing dots + ring) ---- */
.him-btn-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.him-btn-loader-ring {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: him-btn-spin 0.7s linear infinite;
}
.him-btn-loader-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.him-btn-loader-dots i {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #ffffff;
  display: inline-block;
  animation: him-btn-dot 1s ease-in-out infinite;
}
.him-btn-loader-dots i:nth-child(2) {
  animation-delay: 0.16s;
}
.him-btn-loader-dots i:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes him-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes him-btn-dot {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* ---- File Manager: stats + storage distribution ---- */
.him-file-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.him-file-dist-progress {
  height: 0.45rem;
  border-radius: 99px;
  background-color: var(--pe-tertiary-bg, rgba(148, 163, 184, 0.15));
}
.him-file-dist-icon {
  font-size: 1.05rem;
}
.him-file-dist-row + .him-file-dist-row {
  border-top: 1px dashed var(--pe-border-color, rgba(148, 163, 184, 0.2));
  padding-top: 0.85rem;
}

/* ---- File Preview: video / audio ---- */
.him-file-preview-media {
  max-width: 100%;
  max-height: 62vh;
  width: 100%;
  border-radius: 0.75rem;
  outline: none;
  background: #000;
}
.him-file-preview-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem 1rem;
  text-align: center;
}
.him-file-preview-audio-art {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--pe-primary, #0d9488);
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.35);
}
.him-file-preview-audio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pe-primary, #0d9488);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.him-file-preview-audio-player {
  width: min(420px, 100%);
}

/* ---- Under-maintenance landing page ---- */
/* Fallback reveal if GSAP fails to load (GSAP sets inline styles on success,
   which override this animation and its final state). */
.him-auth .error_title {
  animation: him-maint-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
.him-auth .error_section_subtitle {
  color: #2b3442 !important;
}
.him-auth .error_section p {
  color: #4b5563 !important;
}
.him-auth #countdown {
  color: #0d9488 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
@keyframes him-maint-title-in {
  from {
    opacity: 0;
    transform: translateY(-150px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Maintenance landing footer credit */
.him-auth .him-maint-footer {
  color: #4b5563 !important;
  font-size: 0.9rem;
}
.him-auth .him-maint-footer .him-footer-credit-link {
  color: #0d9488;
  font-weight: 600;
  text-decoration: none;
}
.him-auth .him-maint-footer .him-footer-credit-link:hover {
  text-decoration: underline;
}