:root {
  --sidebar-width: 260px;
  --primary-color: #0d6efd;
  --hero-gradient: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background-color: #f4f6f9;
}

.hero-section {
  background-image: url("../uploads/hero\ bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#hero-content {
  background: rgba(3, 68, 122, 0.466);
  border-radius: 15px;
  ;
}

.auth-page {
  background: linear-gradient(135deg, #eef2ff 0%, #f8f9fa 100%);
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  transition: transform 0.3s ease;
}

.sidebar .nav-link {
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  padding: 0.625rem 1rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
}

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.stat-card {
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.avatar-placeholder,
.avatar-placeholder-lg {
  background: #e9ecef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
}

.avatar-placeholder-lg {
  width: 100px;
  height: 100px;
}

.badge.status-active {
  background-color: #198754 !important;
}

.badge.status-completed {
  background-color: #0d6efd !important;
}

.badge.status-cancelled {
  background-color: #dc3545 !important;
}

.table-responsive {
  overflow-x: auto;
}

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }

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

  .main-content {
    margin-left: 0;
  }
}

/* Dark mode */
body.dark-mode {
  background-color: #1a1d21;
  color: #e9ecef;
}

body.dark-mode .bg-white,
body.dark-mode .card,
body.dark-mode .topbar,
body.dark-mode .table-light {
  background-color: #2b3035 !important;
  color: #e9ecef;
}

body.dark-mode .text-muted {
  color: #adb5bd !important;
}

body.dark-mode .border-bottom,
body.dark-mode .table,
body.dark-mode .form-control,
body.dark-mode .form-select {
  border-color: #495057 !important;
  background-color: #343a40;
  color: #e9ecef;
}

body.dark-mode .bg-light,
body.dark-mode .footer {
  background-color: #212529 !important;
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .auth-page {
  background: linear-gradient(135deg, #1a1d21 0%, #2b3035 100%);
}

body.dark-mode .card {
  border-color: #495057;
}

body.dark-mode .alert-info {
  background-color: #0c5460;
  color: #d1ecf1;
  border-color: #0c5460;
}

body.dark-mode .alert-success {
  background-color: #155724;
  color: #d4edda;
  border-color: #155724;
}


/* ================================
   AUTH PAGE
================================ */

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;

    background-image: url('/Images/admin_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin: 0;
    padding: 0;

    position: relative;

    overflow-x: hidden;
}


/* Login container */
.auth-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}


/* Login card */
.auth-card {
    width: 100%;
    background-color: rgba(196, 195, 195, 0.87);

    border-radius: 15px;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* Footer */
.auth-footer {
    position: absolute;

    bottom: 10px;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    text-align: center;

    z-index: 10;
}


/* Mobile */
@media (max-width: 576px) {

    .auth-container {
        padding: 15px;
    }

    .auth-card {
        border-radius: 12px;
    }

    .auth-card .card-body {
        padding: 30px 24px !important;
    }

    .auth-footer {
        bottom: 5px;
        font-size: 12px;
    }
}


```css
/* =========================================
   AUTH / LOGIN PAGES
   ========================================= */

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;

    margin: 0;
    padding: 0;

    position: relative;

    overflow-x: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================
   ADMIN LOGIN BACKGROUND
   ========================================= */

.auth-page.admin-auth {
    background-image: url('/Images/investor_bg.jpg');
}


/* =========================================
   INVESTOR LOGIN BACKGROUND
   ========================================= */

.auth-page.investor-auth {
    background-image: url('/Images/admin_bg.jpg');
}


/* =========================================
   LOGIN CONTAINER
   ========================================= */

.auth-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}


/* =========================================
   LOGIN CARD
   ========================================= */

.auth-card {
    width: 100%;

    background-color: rgba(196, 195, 195, 0.87);

    border-radius: 15px;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* =========================================
   FOOTER
   ========================================= */

.auth-footer {
    position: absolute;

    bottom: 10px;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    text-align: center;

    z-index: 10;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 576px) {

    .auth-container {
        padding: 15px;
    }

    .auth-card {
        border-radius: 12px;
    }

    .auth-card .card-body {
        padding: 30px 24px !important;
    }

    .auth-footer {
        bottom: 5px;
        font-size: 12px;
    }
}

@media print {
  .sidebar,
  .topbar,
  .no-print,
  .footer,
  .btn,
  form.card {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body {
    background: #fff !important;
  }

  .statement-print,
  .statement-header {
    box-shadow: none !important;
  }

  .badge {
    border: 1px solid #000;
    color: #000 !important;
    background: transparent !important;
  }
}