/**
 * B11 Ventures Design System - app.css
 * Milestone M2 - Employee Alumni Portal
 * Frame: Bootstrap 5.3 + Google Poppins
 */

/* -------------------------------------------------------------------------- */
/* 1. Google Poppins Font Import                                              */
/* -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* -------------------------------------------------------------------------- */
/* 2. CSS Custom Properties (:root design tokens)                             */
/* -------------------------------------------------------------------------- */
:root {
  /* Brand Color Palette */
  --bxi-primary: #0057FF;
  --bxi-primary-hover: #0045CC;
  --bxi-dark-bg: #0F172A;
  --bxi-light-bg: #F8FAFC;
  --bxi-white: #FFFFFF;
  --bxi-border: #E5E7EB;

  /* State Colors */
  --bxi-success: #16A34A;
  --bxi-warning: #F59E0B;
  --bxi-danger: #DC2626;

  /* Typography Colors */
  --bxi-text-primary: #111827;
  --bxi-text-secondary: #6B7280;

  /* Border Radii */
  --bxi-radius-button: 10px;
  --bxi-radius-input: 10px;
  --bxi-radius-card: 16px;
  --bxi-radius-modal: 20px;

  /* Shadows */
  --bxi-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
  --bxi-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.12);

  /* Layout Constraints */
  --bxi-max-width: 1280px;

  /* Bootstrap Variable Overrides */
  --bs-font-sans-serif: 'Poppins', system-ui, -apple-system, sans-serif;
  --bs-primary: #0057FF;
  --bs-primary-rgb: 0, 87, 255;
  --bs-body-bg: #F8FAFC;
  --bs-body-color: #111827;
}

/* -------------------------------------------------------------------------- */
/* 3. Base & Typography Reset                                                 */
/* -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--bxi-light-bg);
  color: var(--bxi-text-primary);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-font-sans-serif);
  color: var(--bxi-text-primary);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------- */
/* 4. Container & Layout Utilities                                           */
/* -------------------------------------------------------------------------- */
.bxi-container {
  max-width: var(--bxi-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}
header .bxi-container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}

@media (max-width: 991.98px) {
  .bxi-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 575.98px) {
  .bxi-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Logo & Avatar Dimensions (Strict No Inline CSS) */
.bxi-modal-icon-lg {
  font-size: 3rem;
}

.bxi-brand-logo {
  height: 60px;
  max-height: 60px;
  width: auto;
  object-fit: contain;
  display: inline-block;
}

.bxi-brand-logo-hero {
  height: 72px;
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

.bxi-brand-logo-mobile {
  height: 44px;
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

.bxi-brand-logo-nav {
  height: 36px;
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

.bxi-brand-logo-sm {
  height: 24px;
  max-height: 24px;
  width: auto;
  object-fit: contain;
}

.bxi-avatar-md {
  width: 40px;
  height: 40px;
}

.bxi-avatar-lg {
  width: 64px;
  height: 64px;
}

.bxi-search-wrapper {
  width: 240px;
}

/* -------------------------------------------------------------------------- */
/* 5. Custom Button Variants                                                 */
/* -------------------------------------------------------------------------- */
.btn-bxi-primary,
.bxi-btn-primary {
  background-color: var(--bxi-primary);
  color: var(--bxi-white);
  border: none;
  height: 48px;
  border-radius: var(--bxi-radius-button);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.btn-bxi-primary:hover,
.btn-bxi-primary:focus,
.bxi-btn-primary:hover,
.bxi-btn-primary:focus {
  background-color: var(--bxi-primary-hover);
  color: var(--bxi-white);
  box-shadow: 0 4px 14px rgba(0, 87, 255, 0.3);
  transform: translateY(-1px);
}

.btn-bxi-secondary,
.bxi-btn-secondary {
  background-color: var(--bxi-white);
  color: var(--bxi-primary);
  border: 1.5px solid var(--bxi-primary);
  height: 48px;
  border-radius: var(--bxi-radius-button);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.btn-bxi-secondary:hover,
.btn-bxi-secondary:focus,
.bxi-btn-secondary:hover,
.bxi-btn-secondary:focus {
  background-color: rgba(0, 87, 255, 0.05);
  color: var(--bxi-primary-hover);
  border-color: var(--bxi-primary-hover);
}

.btn-bxi-danger,
.bxi-btn-danger {
  background-color: var(--bxi-danger);
  color: var(--bxi-white);
  border: none;
  height: 48px;
  border-radius: var(--bxi-radius-button);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.btn-bxi-danger:hover,
.btn-bxi-danger:focus,
.bxi-btn-danger:hover,
.bxi-btn-danger:focus {
  background-color: #B91C1C;
  color: var(--bxi-white);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

/* -------------------------------------------------------------------------- */
/* 6. Form Controls & Inputs                                                 */
/* -------------------------------------------------------------------------- */
.form-control-bxi,
.bxi-input {
  height: 48px;
  border-radius: var(--bxi-radius-input);
  border: 1px solid var(--bxi-border);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--bxi-text-primary);
  background-color: var(--bxi-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control-bxi:focus,
.bxi-input:focus {
  border-color: var(--bxi-primary);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.15);
  background-color: var(--bxi-white);
}

.form-control-bxi::placeholder,
.bxi-input::placeholder {
  color: var(--bxi-text-secondary);
  opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* 7. Card System                                                            */
/* -------------------------------------------------------------------------- */
.card-bxi,
.bxi-card {
  background-color: var(--bxi-white);
  border-radius: var(--bxi-radius-card);
  border: 1px solid var(--bxi-border);
  box-shadow: var(--bxi-shadow-card);
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-bxi-hover:hover,
.bxi-card-hover:hover,
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--bxi-shadow-hover);
}

/* -------------------------------------------------------------------------- */
/* 8. Authentication Layout Styling                                         */
/* -------------------------------------------------------------------------- */
.bxi-auth-body {
  background-color: var(--bxi-dark-bg);
  min-height: 100vh;
}

/* Left Panel: Switched to Light Background */
.bxi-auth-illustration {
  background-color: var(--bxi-light-bg);
  background-image: radial-gradient(circle at 20% 20%, rgba(0, 87, 255, 0.04), transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(0, 87, 255, 0.03), transparent 50%);
  border-right: 1px solid #E2E8F0;
}

.bxi-brand-logo-hero {
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

.bxi-brand-logo-mobile {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

.bxi-auth-heading {
  color: #0F172A !important;
  letter-spacing: -0.03em;
}

.bxi-auth-subheading {
  color: #475569 !important;
  line-height: 1.6;
}

.bxi-ecosystem-card {
  max-width: 600px;
  width: 100%;
  border-color: #E2E8F0 !important;
  background-color: #FFFFFF !important;
}

.bxi-ecosystem-title {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #64748B;
}

.bxi-logo-item {
  height: 64px;
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  transition: all 0.2s ease;
  overflow: hidden;
}

.bxi-logo-item:hover {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.bxi-eco-logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.bxi-eco-ventures {
  max-height: 38px;
}

.bxi-eco-kulinarik {
  max-height: 38px;
}

.bxi-eco-bxitech {
  max-height: 42px;
}

.bxi-eco-foundation {
  max-height: 34px;
}

.bxi-eco-n01 {
  max-height: 40px;
}

.bxi-eco-six8 {
  max-height: 38px;
}

.bxi-eco-bth {
  max-height: 38px;
}

/* Right Panel: Switched to Dark Background */
.bxi-auth-form-area {
  background-color: var(--bxi-dark-bg);
  background-image: radial-gradient(circle at 85% 20%, rgba(0, 87, 255, 0.12), transparent 45%),
                    radial-gradient(circle at 15% 85%, rgba(0, 69, 204, 0.15), transparent 45%);
}

.bxi-auth-card-container {
  max-width: 460px;
  width: 100%;
}

/* Dark-Themed Form Card on Right Panel */
.bxi-auth-form-area .card-bxi {
  background-color: #1E293B !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4) !important;
}

.bxi-auth-form-area .bxi-card-title,
.bxi-auth-form-area .card-title {
  color: #FFFFFF !important;
}

.bxi-auth-form-area .bxi-card-subtitle,
.bxi-auth-form-area .card-subtitle {
  color: #94A3B8 !important;
}

.bxi-auth-form-area .bxi-form-label,
.bxi-auth-form-area .form-label {
  color: #E2E8F0 !important;
}

.bxi-auth-form-area .form-control,
.bxi-auth-form-area .form-control-bxi {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border: 1px solid #334155 !important;
}

.bxi-auth-form-area .form-control:focus,
.bxi-auth-form-area .form-control-bxi:focus {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0057FF !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 87, 255, 0.3) !important;
}

.bxi-auth-form-area .form-control::placeholder,
.bxi-auth-form-area .form-control-bxi::placeholder {
  color: #64748B !important;
  opacity: 1;
}

.bxi-auth-form-area .form-control.is-invalid,
.bxi-auth-form-area .form-control-bxi.is-invalid {
  border-color: #EF4444 !important;
}

.bxi-auth-form-area .bxi-password-toggle {
  background-color: #0F172A !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

.bxi-auth-form-area .bxi-password-toggle:hover {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
}

.bxi-auth-form-area .bxi-otp-box {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #334155 !important;
}

.bxi-auth-form-area .bxi-otp-box:focus {
  border-color: #0057FF !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 87, 255, 0.3) !important;
}

.bxi-auth-form-area .form-check-label {
  color: #94A3B8 !important;
}

.bxi-auth-form-area .form-check-input {
  background-color: #0F172A;
  border-color: #334155;
}

.bxi-auth-form-area .form-check-input:checked {
  background-color: #0057FF;
  border-color: #0057FF;
}

.bxi-auth-form-area a.text-primary,
.bxi-auth-form-area .text-primary {
  color: #60A5FA !important;
}

.bxi-auth-form-area a.text-primary:hover {
  color: #93C5FD !important;
}

.bxi-auth-form-area .text-muted {
  color: #94A3B8 !important;
}

.bxi-auth-form-area .bxi-password-requirements p {
  color: #E2E8F0 !important;
}

.bxi-auth-form-area .bxi-req-item {
  color: #94A3B8 !important;
}

.bxi-auth-form-area .bxi-req-item i.text-secondary {
  color: #64748B !important;
}

.bxi-auth-form-area .bxi-req-item.completed {
  color: #34D399 !important;
}

/* Accessible Auth Helper / Guidance Box */
.bxi-auth-helper-box,
.bxi-auth-form-area .bxi-auth-helper-box {
  background-color: #0F172A !important;
  border: 1px solid #334155 !important;
  color: #E2E8F0 !important;
}

.bxi-auth-helper-box p,
.bxi-auth-form-area .bxi-auth-helper-box p {
  color: #CBD5E1 !important;
  line-height: 1.5;
}

.bxi-auth-helper-box strong,
.bxi-auth-helper-box .bxi-guidance-title,
.bxi-auth-form-area .bxi-auth-helper-box strong,
.bxi-auth-form-area .bxi-auth-helper-box .bxi-guidance-title {
  color: #FFFFFF !important;
  font-weight: 600;
}

.bxi-auth-form-area .bg-light {
  background-color: #0F172A !important;
  border: 1px solid #334155 !important;
  color: #CBD5E1 !important;
}

.bxi-auth-form-area .bg-light p,
.bxi-auth-form-area .bg-light .text-secondary,
.bxi-auth-form-area .bg-light .text-muted {
  color: #CBD5E1 !important;
}

.bxi-auth-form-area .bg-light strong,
.bxi-auth-form-area .bg-light .text-dark,
.bxi-auth-form-area .bg-light span.text-dark,
.bxi-auth-form-area .bg-light strong.text-dark {
  color: #FFFFFF !important;
}

.bxi-auth-form-area .text-dark {
  color: #FFFFFF !important;
}

/* Auth Form Area Action Buttons */
.bxi-auth-form-area .btn-bxi-primary,
.bxi-auth-form-area .bxi-btn-primary {
  background-color: #0057FF !important;
  color: #FFFFFF !important;
  border: 1px solid #0057FF !important;
  height: 48px;
  border-radius: var(--bxi-radius-button);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 1.5rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.bxi-auth-form-area .btn-bxi-primary:hover,
.bxi-auth-form-area .btn-bxi-primary:focus,
.bxi-auth-form-area .bxi-btn-primary:hover,
.bxi-auth-form-area .bxi-btn-primary:focus {
  background-color: #0045CC !important;
  border-color: #0045CC !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 87, 255, 0.4) !important;
  transform: translateY(-1px);
}

.bxi-auth-form-area .btn-bxi-secondary,
.bxi-auth-form-area .bxi-btn-secondary,
.bxi-auth-form-area .btn-outline-primary {
  background-color: rgba(0, 87, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #0057FF !important;
  height: 48px;
  border-radius: var(--bxi-radius-button);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 1.5rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.bxi-auth-form-area .btn-bxi-secondary:hover,
.bxi-auth-form-area .btn-bxi-secondary:focus,
.bxi-auth-form-area .bxi-btn-secondary:hover,
.bxi-auth-form-area .bxi-btn-secondary:focus,
.bxi-auth-form-area .btn-outline-primary:hover,
.bxi-auth-form-area .btn-outline-primary:focus {
  background-color: #0057FF !important;
  color: #FFFFFF !important;
  border-color: #0057FF !important;
  box-shadow: 0 4px 14px rgba(0, 87, 255, 0.35) !important;
  transform: translateY(-1px);
}

.bxi-auth-form-area .btn-bxi-secondary i,
.bxi-auth-form-area .bxi-btn-secondary i,
.bxi-auth-form-area .btn-outline-primary i {
  color: #60A5FA !important;
  transition: color 0.2s ease-in-out;
}

.bxi-auth-form-area .btn-bxi-secondary:hover i,
.bxi-auth-form-area .btn-bxi-secondary:focus i,
.bxi-auth-form-area .bxi-btn-secondary:hover i,
.bxi-auth-form-area .bxi-btn-secondary:focus i,
.bxi-auth-form-area .btn-outline-primary:hover i,
.bxi-auth-form-area .btn-outline-primary:focus i {
  color: #FFFFFF !important;
}

.bxi-auth-form-area .modal-content {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

.bxi-auth-form-area .modal-title {
  color: #FFFFFF !important;
}

.bxi-auth-form-area .modal-title.text-success {
  color: #34D399 !important;
}

.bxi-auth-form-area .modal-title.text-danger {
  color: #F87171 !important;
}

.bxi-auth-form-area .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Alternative Verification Dropzone & Preview Styles */
.bxi-upload-dropzone {
  border: 1.5px dashed #334155;
  background-color: #0F172A;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bxi-upload-dropzone:hover {
  border-color: #0057FF;
  background-color: rgba(0, 87, 255, 0.06);
}

.bxi-upload-dropzone.border-danger {
  border-color: #EF4444 !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
}

/* Document Thumbnail Preview Card */
.bxi-file-preview-card {
  background-color: #0F172A;
  border-color: #334155 !important;
  transition: all 0.2s ease;
}

.bxi-thumbnail-wrapper {
  width: 54px;
  height: 54px;
  background-color: #1E293B;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bxi-preview-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  display: block;
}

.bxi-pdf-thumbnail-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(239, 68, 68, 0.12);
}

.bxi-privacy-note {
  font-size: 0.76rem;
  line-height: 1.45;
  color: #94A3B8 !important;
}

.bxi-invalid-feedback {
  color: #F87171 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  margin-top: 0.35rem !important;
}

.bxi-btn-another-way {
  color: #60A5FA !important;
  cursor: pointer !important;
  user-select: none;
  transition: color 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bxi-btn-another-way:hover,
.bxi-btn-another-way:focus {
  color: #93C5FD !important;
  text-decoration: underline !important;
}

.bxi-btn-back-email {
  color: #94A3B8 !important;
  cursor: pointer !important;
  user-select: none;
  transition: color 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bxi-btn-back-email:hover,
.bxi-btn-back-email:focus {
  color: #F8FAFC !important;
  text-decoration: underline !important;
}

.bxi-welcome-icon.rounded-circle.bg-primary.bg-opacity-10.d-inline-flex.align-items-center.justify-content-center.p-3.text-primary.mb-3 {
  height: 80px;
  width: 80px;
}

/* -------------------------------------------------------------------------- */
/* 9. Dashboard App Layout & Sidebar Navigation                               */
/* -------------------------------------------------------------------------- */
.bxi-app-body {
  background-color: var(--bxi-light-bg);
}

.bxi-navbar {
  height: 72px;
  z-index: 1020;
}

.bxi-app-layout {
  position: relative;
}

.bxi-sidebar {
  width: 260px;
  min-height: calc(100vh - 72px);
  z-index: 1030;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bxi-nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  color: var(--bxi-text-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.bxi-nav-link:hover {
  color: var(--bxi-primary);
  background-color: rgba(0, 87, 255, 0.04);
}

.bxi-nav-link.active {
  background-color: rgba(0, 87, 255, 0.08);
  color: var(--bxi-primary);
  font-weight: 600;
  border-left: 4px solid var(--bxi-primary);
}

/* Responsive Sidebar Drawer (Mobile & Tablet) */
@media (max-width: 991.98px) {
  .bxi-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  }

  .bxi-sidebar.show {
    transform: translateX(0);
  }

  .bxi-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1025;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .bxi-sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* 10. OTP 6-Box Input Component Styling                                      */
/* -------------------------------------------------------------------------- */
.otp-input-group,
.bxi-otp-box-wrapper {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.otp-box,
.bxi-otp-box {
  width: 52px;
  height: 56px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: var(--bxi-radius-input);
  border: 1.5px solid var(--bxi-border);
  background-color: var(--bxi-white);
  color: var(--bxi-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.otp-box:focus,
.bxi-otp-box:focus {
  border-color: var(--bxi-primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.15);
}

@media (max-width: 480px) {
  .otp-input-group,
  .bxi-otp-box-wrapper {
    gap: 0.4rem;
  }
  .otp-box,
  .bxi-otp-box {
    width: 44px;
    height: 48px;
    font-size: 1.25rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 11. Password Strength Indicator                                           */
/* -------------------------------------------------------------------------- */
.password-strength-track,
.bxi-strength-progress {
  height: 6px;
  background-color: var(--bxi-border);
  border-radius: 3px;
  overflow: hidden;
}

.password-strength-bar,
.bxi-strength-bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-check-item,
.bxi-req-item {
  font-size: 0.85rem;
  color: var(--bxi-text-secondary);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.strength-check-item.valid,
.bxi-req-item.valid {
  color: var(--bxi-success);
  font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* 12. Modal & Toast Customizations                                          */
/* -------------------------------------------------------------------------- */
.modal-content-bxi,
.bxi-modal-content {
  border-radius: var(--bxi-radius-modal);
  border: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.bxi-toast-container {
  z-index: 1080;
}

.bxi-spinner-lg {
  width: 3rem;
  height: 3rem;
}

/* -------------------------------------------------------------------------- */
/* 13. Document Viewer & Interactive Tabs                                     */
/* -------------------------------------------------------------------------- */
.bxi-doc-tabs {
  background-color: var(--bxi-white);
  padding: 0.35rem;
  border-radius: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border: 1px solid var(--bxi-border);
}

.bxi-doc-tab-btn {
  border: none;
  background: transparent;
  color: var(--bxi-text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.bxi-doc-tab-btn:hover {
  color: var(--bxi-primary);
  background-color: rgba(0, 87, 255, 0.05);
}

.bxi-doc-tab-btn.active {
  background-color: var(--bxi-primary);
  color: var(--bxi-white) !important;
  box-shadow: 0 4px 12px rgba(0, 87, 255, 0.25);
}

.bxi-doc-viewer-card {
  border: 1px solid var(--bxi-border);
  border-radius: var(--bxi-radius-card);
  background-color: var(--bxi-white);
  box-shadow: var(--bxi-shadow-card);
  overflow: hidden;
  position: relative;
}

.bxi-pdf-frame {
  width: 100%;
  height: 70vh;
  min-height: 600px;
  border: 0;
  background-color: #f1f5f9;
  display: block;
}

@media (max-width: 991.98px) {
  .bxi-pdf-frame {
    min-height: 480px;
    height: 60vh;
  }
}

.bxi-viewer-loader {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
  transition: opacity 0.25s ease;
}

.bxi-doc-select-card {
  border: 1.5px solid var(--bxi-border);
  border-radius: 12px;
  padding: 1rem;
  background-color: var(--bxi-white);
  transition: all 0.2s ease;
  cursor: pointer;
}

.bxi-doc-select-card:hover {
  border-color: var(--bxi-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.bxi-doc-select-card.active {
  border-color: var(--bxi-primary);
  background-color: rgba(0, 87, 255, 0.03);
  box-shadow: 0 0 0 1px var(--bxi-primary);
}

/* -------------------------------------------------------------------------- */
/* 14. Reference Screenshots Exact Design System                              */
/* -------------------------------------------------------------------------- */
.bxi-sidebar {
  width: 260px;
  min-width: 260px;
  background-color: var(--bxi-white);
  border-right: 1px solid #eef2f6;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.bxi-brand-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: #0066ff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.bxi-sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.85rem;
  color: #334155;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  border: 1.5px solid transparent;
}

.bxi-sidebar-link:hover {
  background-color: #f8fafc;
  color: #0066ff;
}

.bxi-sidebar-link.active {
  background-color: #e8f1ff;
  color: #0066ff !important;
  font-weight: 600;
  border: 1.5px solid #0066ff;
}

.bxi-page-header-card {
  background-color: var(--bxi-white);
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 1.75rem 2.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.bxi-page-header-card .page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.35rem;
  letter-spacing: -0.02em;
}

.bxi-page-header-card .page-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 0;
}

.bxi-doc-card-container {
  background-color: var(--bxi-white);
  border: 1px solid #eef2f6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.bxi-doc-row {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: var(--bxi-white);
}

.bxi-doc-row:last-child {
  border-bottom: 0;
}

.bxi-doc-badge-circle {
  width: 44px;
  height: 44px;
  background-color: #e8f1ff;
  border-radius: 50%;
  color: #0066ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bxi-doc-badge-sq {
  width: 44px;
  height: 44px;
  background-color: #e8f1ff;
  border-radius: 10px;
  color: #0066ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-open-tab {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.btn-open-tab:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.btn-download-primary {
  background-color: #0066ff;
  border: 1px solid #0066ff;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.btn-download-primary:hover {
  background-color: #0052cc;
  border-color: #0052cc;
  color: #ffffff;
}

.bxi-filter-card {
  background-color: var(--bxi-white);
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.bxi-select-filter {
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #334155;
  padding: 0.5rem 0.75rem;
}

.bxi-header-bar {
  height: 65px;
  z-index: 100;
}

.bxi-sidebar-header {
  height: 65px;
}

.bxi-portal-menu-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.bxi-main-bg {
  background-color: #f4f7fb;
}

.bxi-brand-badge-sm {
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
}

.bxi-avatar-header {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
  background-color: #0066ff !important;
}

.bxi-dropdown-menu-custom {
  min-width: 230px;
}

.bxi-font-sm {
  font-size: 0.9rem;
}

.bxi-font-xs {
  font-size: 0.75rem;
}

.bxi-font-doc-sub {
  font-size: 0.825rem;
}

.bxi-btn-filter-apply {
  background-color: #0066ff;
  border: none;
}

.bxi-badge-matching {
  background-color: #e8f1ff;
  color: #0066ff;
  font-weight: 500;
}

.bxi-salary-empty-icon {
  width: 64px;
  height: 64px;
  background-color: #f1f5f9;
  color: #64748b;
}

.bxi-match-empty-icon {
  width: 48px;
  height: 48px;
  background-color: #f8fafc;
  color: #94a3b8;
}

/* -------------------------------------------------------------------------- */
/* 10. Admin Panel & Dashboard Shell Styling                                  */
/* -------------------------------------------------------------------------- */
.bxi-stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bxi-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bxi-shadow-hover);
}

.bxi-stat-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.bxi-stat-icon-blue {
  background-color: rgba(0, 87, 255, 0.1);
  color: #0057FF;
}

.bxi-stat-icon-green {
  background-color: rgba(22, 163, 74, 0.1);
  color: #16A34A;
}

.bxi-stat-icon-purple {
  background-color: rgba(147, 51, 234, 0.1);
  color: #9333EA;
}

.bxi-stat-icon-amber {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.col-lg-6.col-xl-7.bxi-auth-illustration.d-none.d-lg-flex.flex-column.justify-content-between.p-5 {
    border-top: 6px solid #1B252F;
    border-left: 6px solid #1B252F;
    border-bottom: 6px solid #1B252F;
    border-radius: 30px;
}

.form-select{
    width: 180px !important;
}
.card-body table th {
    font-size: 12px;
}
.alumniactivity .card-body  span, .actionrequired  .card-body  span {
    font-size: 12px;
}
.actionrequired .card-body.bxi-card-body, .alumniactivity .card-body.bxi-card-body, .employee-exit-journey .card-body.bxi-card-body, .ff .card-body.bxi-card-body {
    padding: 0 !important;
}
.employee-exit-journey .card.border-0.shadow-sm.rounded-4.mb-4, .ff .card.border-0.shadow-sm.rounded-4.mb-4{
    margin-bottom: 0 !important;
}
.card.card-bxi.shadow-sm.rounded-4.col-6.col-md-5.col-lg-5.alumniactivity {
    margin-left: 20px;
    width: 48%;
}
.fw-semibold.small {
    font-size: 12px;
}
.ff span, .ff strong {
    font-size: 12px;
}
.welcome-card p.text-secondary.mb-0 {
    font-size: 14px;
}
.employee-activation-funnel h5.card-title.bxi-card-title.mb-1.fw-bold.text-dark {
    font-size: 16px;
}
.employee-exit-journey .fs-2.fw-bold {
    font-size: 1.75rem !important;
}
.employee-exit-journey span.fw-semibold, .employee-exit-journey span.text-primary.fw-bold {
    font-size: 14px;
}
.employee-activation-funnel p.card-subtitle.bxi-card-subtitle.text-muted.small.mb-0 {
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .bxi-sidebar {
        display: none;
    }
    .bxi-sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: none !important; 
        backdrop-filter: blur(0px) !important;
        z-index: 1025;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .overflow-hidden-mobile .bxi-sidebar {
        display: block; 
        opacity: 1;
        z-index: 999999;
        position: absolute;
        width: 80%;
    }
    .overflow-hidden-mobile header.bxi-navbar.sticky-top.bg-white.border-bottom.shadow-xs {
        display: none;
    }
}