/* Shared UI hardening for locale controls and profile/meta overflow.
   Safe to load on all static pages. */

select#locale,
select[name="locale"] {
  font-weight: 600;
  text-rendering: optimizeLegibility;
}

select#locale option,
select[name="locale"] option {
  color: #0f172a;
  background: #ffffff;
}

html[data-bs-theme="dark"] select#locale,
html[data-bs-theme="dark"] select[name="locale"],
html[data-theme="dark"] select#locale,
html[data-theme="dark"] select[name="locale"],
body[data-theme="dark"] select#locale,
body[data-theme="dark"] select[name="locale"] {
  color-scheme: dark;
}

html[data-bs-theme="dark"] select#locale option,
html[data-bs-theme="dark"] select[name="locale"] option,
html[data-theme="dark"] select#locale option,
html[data-theme="dark"] select[name="locale"] option,
body[data-theme="dark"] select#locale option,
body[data-theme="dark"] select[name="locale"] option {
  color: #e2e8f0;
  background: #0f172a;
}

html[data-bs-theme="dark"] body.admin-page select#locale,
html[data-bs-theme="dark"] body.admin-page select[name="locale"],
html[data-theme="dark"] body.admin-page select#locale,
html[data-theme="dark"] body.admin-page select[name="locale"] {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #e2e8f0 !important;
}

.profile-badges-row,
.profile-badges,
#adminRoleBadges {
  max-width: 100%;
  flex-wrap: wrap !important;
}

.badge-role,
.badge-status,
.badge-userid,
.badge-job {
  white-space: normal !important;
  height: auto !important;
  min-height: 24px;
  max-width: 100%;
  padding-top: 0.32rem !important;
  padding-bottom: 0.32rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  align-items: flex-start !important;
}

.profile-summary-card .flex-grow-1,
.profile-summary-card [style*="overflow:hidden"],
.user-card,
.sidebar-footer,
.sidebar-footer > * {
  min-width: 0;
}

#headerFullName,
#adminUserName,
#adminTopName,
#adminTopEmail,
#profileCardUserId,
#profileCardLastLogin,
#profileCardLocation,
#adminUserEmail {
  overflow-wrap: anywhere;
  word-break: break-word;
}


:root {
  --sufi-hover-bg-dark: #ffffff;
  --sufi-hover-fg-dark: #0b1220;
  --sufi-hover-border-dark: rgba(15, 23, 42, 0.2);
  --sufi-hover-bg-light: #0b1220;
  --sufi-hover-fg-light: #ffffff;
  --sufi-hover-border-light: rgba(255, 255, 255, 0.18);
}

html[data-bs-theme="dark"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion, .table-hover tbody tr),
html[data-theme="dark"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion, .table-hover tbody tr),
body[data-theme="dark"] :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion, .table-hover tbody tr),
html[data-bs-theme="light"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion, .table-hover tbody tr),
html[data-theme="light"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion, .table-hover tbody tr),
body[data-theme="light"] :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion, .table-hover tbody tr) {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

html[data-bs-theme="dark"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible),
html[data-theme="dark"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible),
body[data-theme="dark"] :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) {
  background: var(--sufi-hover-bg-dark) !important;
  color: var(--sufi-hover-fg-dark) !important;
  border-color: var(--sufi-hover-border-dark) !important;
}

html[data-bs-theme="dark"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) :where(span, i, svg, small, strong, p, div),
html[data-theme="dark"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) :where(span, i, svg, small, strong, p, div),
body[data-theme="dark"] :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) :where(span, i, svg, small, strong, p, div) {
  color: var(--sufi-hover-fg-dark) !important;
}

html[data-bs-theme="dark"] body .table-hover tbody tr:hover td,
html[data-theme="dark"] body .table-hover tbody tr:hover td,
body[data-theme="dark"] .table-hover tbody tr:hover td {
  background: var(--sufi-hover-bg-dark) !important;
  color: var(--sufi-hover-fg-dark) !important;
}

html[data-bs-theme="light"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible),
html[data-theme="light"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible),
body[data-theme="light"] :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) {
  background: var(--sufi-hover-bg-light) !important;
  color: var(--sufi-hover-fg-light) !important;
  border-color: var(--sufi-hover-border-light) !important;
}

html[data-bs-theme="light"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) :where(span, i, svg, small, strong, p, div),
html[data-theme="light"] body :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) :where(span, i, svg, small, strong, p, div),
body[data-theme="light"] :where(.nav-btn, .account-menu-item, .dropdown-item, .list-group-item, .suggestion):is(:hover, :focus-visible) :where(span, i, svg, small, strong, p, div) {
  color: var(--sufi-hover-fg-light) !important;
}

html[data-bs-theme="light"] body .table-hover tbody tr:hover td,
html[data-theme="light"] body .table-hover tbody tr:hover td,
body[data-theme="light"] .table-hover tbody tr:hover td {
  background: var(--sufi-hover-bg-light) !important;
  color: var(--sufi-hover-fg-light) !important;
}

/* Flexible security summary cards (future-proof for long locales) */
.sufi-security-card,
.sufi-security-card .border,
.sufi-security-card .bg-body-tertiary {
  min-width: 0;
}

.sufi-security-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  min-width: 0;
}

.sufi-security-card__copy {
  flex: 1 1 220px;
  min-width: 0;
}

.sufi-security-card__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.sufi-security-card__meta > * {
  min-width: 0;
}

.sufi-security-card__action {
  flex: 0 1 auto;
  max-width: min(100%, 22rem);
  min-width: min(100%, 11rem);
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  line-height: 1.25;
  height: auto !important;
  align-self: flex-start;
}

@media (max-width: 767.98px) {
  .sufi-security-card__action {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Hover contrast hardening for nested sidebar/profile cards */
html[data-bs-theme="dark"] body :where(.user-card, .sidebar-footer .user-card, .user-card a, .user-card button):is(:hover, :focus-within),
html[data-theme="dark"] body :where(.user-card, .sidebar-footer .user-card, .user-card a, .user-card button):is(:hover, :focus-within),
body[data-theme="dark"] :where(.user-card, .sidebar-footer .user-card, .user-card a, .user-card button):is(:hover, :focus-within) {
  background: var(--sufi-hover-bg-dark) !important;
  color: var(--sufi-hover-fg-dark) !important;
  border-color: var(--sufi-hover-border-dark) !important;
}

html[data-bs-theme="dark"] body :where(.user-card, .sidebar-footer .user-card):is(:hover, :focus-within) :where(span, i, svg, small, strong, a, p, div),
html[data-theme="dark"] body :where(.user-card, .sidebar-footer .user-card):is(:hover, :focus-within) :where(span, i, svg, small, strong, a, p, div),
body[data-theme="dark"] :where(.user-card, .sidebar-footer .user-card):is(:hover, :focus-within) :where(span, i, svg, small, strong, a, p, div) {
  color: var(--sufi-hover-fg-dark) !important;
}

html[data-bs-theme="light"] body :where(.user-card, .sidebar-footer .user-card, .user-card a, .user-card button):is(:hover, :focus-within),
html[data-theme="light"] body :where(.user-card, .sidebar-footer .user-card, .user-card a, .user-card button):is(:hover, :focus-within),
body[data-theme="light"] :where(.user-card, .sidebar-footer .user-card, .user-card a, .user-card button):is(:hover, :focus-within) {
  background: var(--sufi-hover-bg-light) !important;
  color: var(--sufi-hover-fg-light) !important;
  border-color: var(--sufi-hover-border-light) !important;
}

html[data-bs-theme="light"] body :where(.user-card, .sidebar-footer .user-card):is(:hover, :focus-within) :where(span, i, svg, small, strong, a, p, div),
html[data-theme="light"] body :where(.user-card, .sidebar-footer .user-card):is(:hover, :focus-within) :where(span, i, svg, small, strong, a, p, div),
body[data-theme="light"] :where(.user-card, .sidebar-footer .user-card):is(:hover, :focus-within) :where(span, i, svg, small, strong, a, p, div) {
  color: var(--sufi-hover-fg-light) !important;
}