/* =========================================
   1. BRAND VARIABLES & ROOT SETTINGS
   ========================================= */
:root {
  /* Brand Colors */
  --dhani-primary: #f47a20; /* Orange (Action) */
  --dhani-secondary: #1f58aa; /* Blue (Identity) */
  --dhani-dark: #10346b; /* Deep Navy */
  --dhani-light: #f4f7fc; /* Light Blue-Grey Background */
  --white: #ffffff;
}

body {
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  background-color: var(--dhani-light);
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures footer stays at bottom */
  overflow-x: hidden; /* Prevents horizontal scroll on mobile */
}

.main-content {
  flex: 1; /* Pushes footer down */
}

/* =========================================
   2. NAVIGATION & HEADER DESIGN
   ========================================= */

/* The Signature Orange Top Border */
.border-top-brand {
  border-top: 5px solid var(--dhani-primary) !important;
}

/* Navbar Styling */
.navbar {
  background: var(--dhani-secondary); /* Fallback */
  background: linear-gradient(
    90deg,
    var(--dhani-secondary) 0%,
    var(--dhani-dark) 100%
  );
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 1.4rem;
}

/* =========================================
   3. HERO SECTION (Fixes Home Page BG)
   ========================================= */
.hero-section {
  position: relative;
  background-color: var(--dhani-secondary); /* Fallback */
  /* Premium Gradient: Blue to Dark Blue */
  background: linear-gradient(
    135deg,
    var(--dhani-secondary) 0%,
    var(--dhani-dark) 100%
  );
  color: var(--white);
  padding: 80px 0 100px 0; /* Top Bottom Padding */
  margin-bottom: 50px;
  /* Modern Curved Bottom */
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: 0 10px 30px rgba(31, 88, 170, 0.15);
}

/* Mobile Adjustment for Hero */
@media (max-width: 768px) {
  .hero-section {
    padding: 50px 20px;
    text-align: center;
    border-radius: 0 0 30px 30px;
  }
}

/* =========================================
   4. BUTTONS & INTERACTIVITY
   ========================================= */
.btn-primary {
  background-color: var(--dhani-primary) !important;
  border-color: var(--dhani-primary) !important;
  color: var(--white) !important;
  font-weight: 600;
  padding: 10px 30px;
  border-radius: 50px; /* Pill Shape */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(244, 122, 32, 0.2);
}

.btn-primary:hover {
  background-color: #d6620f !important; /* Darker Orange */
  transform: translateY(-3px); /* Lifts up */
  box-shadow: 0 8px 15px rgba(244, 122, 32, 0.3);
}

.btn-outline-light {
  border-radius: 50px;
  padding: 10px 30px;
  font-weight: 600;
}

/* =========================================
   5. CARDS & CONTAINERS (Premium UI)
   ========================================= */
.card {
  border: none;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Soft Shadow */
  transition: transform 0.3s ease;
}

/* Hover effect only for feature cards, not forms */
.card.hover-effect:hover {
  transform: translateY(-5px);
}

.card-header {
  background-color: var(--dhani-secondary) !important;
  color: var(--white);
  font-weight: 600;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  padding: 15px 20px;
}

/* =========================================
   6. FORMS & INPUTS
   ========================================= */
.form-control {
  border: 2px solid #eef2f7;
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 1rem;
  background-color: #fbfbfb;
  transition: all 0.3s;
}

.form-control:focus {
  background-color: var(--white);
  border-color: var(--dhani-primary);
  box-shadow: 0 0 0 4px rgba(244, 122, 32, 0.1); /* Orange Glow */
}

/* Readonly inputs (like Admin ID) */
.form-control[readonly] {
  background-color: #e9ecef;
  color: var(--dhani-secondary);
  font-weight: bold;
  cursor: not-allowed;
}

/* =========================================
   7. LOGIN PAGE SPECIFIC (Icon & Layout)
   ========================================= */
.login-icon-circle {
  width: 90px;
  height: 90px;
  background: var(--dhani-primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -60px auto 20px; /* Pulls icon outside card */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 4px solid var(--white);
}

/* Toggle Password Eye Button */
.btn-toggle-password {
  border-color: #eef2f7 !important;
  border-left: none !important;
  color: #6c757d;
}
.btn-toggle-password:hover {
  background-color: transparent;
  color: var(--dhani-primary);
}

/* =========================================
   8. ADMIN DASHBOARD TABLES
   ========================================= */
.table-responsive {
  border-radius: 15px;
  overflow: hidden;
}

.table thead {
  background-color: var(--dhani-secondary);
  color: var(--white);
}

.badge {
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
}

/* =========================================
   9. FOOTER
   ========================================= */
footer {
  background-color: var(--dhani-secondary) !important;
  color: rgba(255, 255, 255, 0.8);
}

footer h5,
footer h6 {
  color: var(--white);
  font-weight: 700;
}

footer a:hover {
  color: var(--dhani-primary) !important;
}

/* =========================================
   10. MOBILE SIDEBAR (OFFCANVAS) DESIGN
   ========================================= */

/* Sidebar Background & Dimensions */
.offcanvas {
  max-width: 80%; /* Takes 80% of screen on mobile */
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

/* Sidebar Header Gradient */
.bg-primary-gradient {
  background: linear-gradient(
    135deg,
    var(--dhani-secondary) 0%,
    var(--dhani-dark) 100%
  );
}

/* Navigation Links in Mobile View */
@media (max-width: 991px) {
  .offcanvas-body {
    padding: 20px;
  }

  .nav-link {
    color: #333 !important; /* Dark text for readability on white bg */
    font-weight: 600;
    padding: 12px 15px !important;
    border-radius: 10px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
  }

  /* Icon width standardization */
  .width-20 {
    width: 25px;
    text-align: center;
    color: var(--dhani-primary);
  }

  /* Active Link in Sidebar */
  .nav-link.active {
    background-color: rgba(244, 122, 32, 0.1); /* Light Orange Bg */
    color: var(--dhani-primary) !important;
  }

  .nav-link:hover {
    background-color: #f8f9fa;
    transform: translateX(5px); /* Slight slide effect */
  }

  /* Adjust Admin Button for Mobile */
  .btn-primary {
    padding: 12px;
    font-size: 1rem;
  }
}

/* Desktop View Reset (Keeps navbar standard on large screens) */
@media (min-width: 992px) {
  .offcanvas {
    background: transparent;
    box-shadow: none;
    height: auto;
    border: none;
  }
  .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.5rem 1rem !important;
  }
  .nav-link.active {
    color: #fff !important;
    font-weight: 700;
  }
  .nav-link:hover {
    color: #fff !important;
  }
}

/* =========================================
   11. ADMIN DASHBOARD SIDEBAR LAYOUT
   ========================================= */

/* The Wrapper holds the Sidebar and Main Content */
.d-flex#wrapper {
  overflow-x: hidden;
  background-color: #f0f4f8;
}

/* --- SIDEBAR STYLING --- */
.admin-sidebar {
  min-height: 100vh;
  width: 280px; /* Fixed width */
  /* Brand Blue Gradient */
  background: linear-gradient(
    180deg,
    var(--dhani-secondary) 0%,
    var(--dhani-dark) 100%
  );
  color: #fff;
  transition: margin 0.25s ease-out;
  z-index: 1000;
}

.sidebar-heading {
  padding: 1.5rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sidebar Links */
.list-group-item-action {
  padding: 15px 25px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7); /* Faded white */
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

/* Hover State */
.list-group-item-action:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  padding-left: 30px; /* Slide effect */
}

/* Active State (Orange Highlight) */
.list-group-item-action.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left: 5px solid var(--dhani-primary); /* Orange Border */
}

.list-group-item-action i {
  width: 30px; /* Fixed width for icons alignment */
}

/* --- MAIN CONTENT AREA --- */
#page-content-wrapper {
  width: 100%;
  padding: 0;
}

/* Top Navbar inside Admin Panel */
.admin-navbar {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 15px 30px;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
  /* On mobile, sidebar is handled by Offcanvas component, 
       so we hide the default wrapper styling for sidebar */
  .admin-sidebar {
    display: none; /* Hidden by default, shown via Bootstrap Offcanvas */
  }
}

/* Customizing the Bootstrap Offcanvas for Mobile */
.offcanvas-start.bg-brand-dark {
  background: linear-gradient(
    180deg,
    var(--dhani-secondary) 0%,
    var(--dhani-dark) 100%
  );
}

/* =========================================
   12. MOBILE DASHBOARD OPTIMIZATIONS
   ========================================= */

/* Stat Cards: Premium hover & mobile spacing */
.stat-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 4px solid transparent; /* Base border */
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Specific border colors for stat cards */
.border-orange {
  border-bottom-color: var(--dhani-primary);
}
.border-blue {
  border-bottom-color: var(--dhani-secondary);
}
.border-green {
  border-bottom-color: #198754;
}
.border-info {
  border-bottom-color: #0dcaf0;
}

/* Mobile Table Tweaks */
@media (max-width: 768px) {
  .dashboard-title {
    font-size: 1.5rem; /* Smaller title on mobile */
  }

  /* Make status badges smaller on mobile */
  .badge {
    font-size: 0.75rem;
    padding: 5px 8px;
  }

  /* Increase touch area for dropdowns */
  .btn-action-mobile {
    padding: 8px 12px;
  }

  /* Hide "View All" button text on very small screens if needed, 
       or keep it but styling adjusts naturally via Bootstrap */
}

/* =========================================
   13. HASSLE-FREE SECTION STYLES
   ========================================= */

/* Soft Circle Background behind Icons */
.icon-bg-soft {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background-color: rgba(244, 122, 32, 0.1); /* Soft Orange */
  border-radius: 50%;
  z-index: 1;
}

/* Custom Icon Mix (Laptop + Mobile) */
.fa-laptop-mobile:before {
  content: "\f109"; /* Laptop Icon */
}
.fa-laptop-mobile:after {
  content: "\f3cd"; /* Mobile Icon (Pseudo-element trick if using Pro, or fallback to standard icons) */
  font-size: 0.5em;
  position: absolute;
  bottom: -5px;
  right: -10px;
}

/* Responsive Text */
@media (max-width: 768px) {
  .display-6 {
    font-size: 1.8rem;
  }
}

/* ... (Existing CSS) ... */

/* =========================================
   14. FEATURES SECTION STYLES
   ========================================= */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.icon-box {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Background tints */
.bg-soft-green {
  background-color: #d1fae5;
}
.bg-soft-blue {
  background-color: #dbeafe;
}
.bg-soft-orange {
  background-color: #ffedd5;
}

/* =========================================
   15. ELIGIBILITY SECTION STYLES
   ========================================= */
/* Purple Theme */
.bg-soft-purple {
  background-color: #f3e8ff;
}
.text-purple-light {
  color: #d8b4fe;
}
.border-purple {
  border-color: #a855f7 !important;
}

/* Mint Theme */
.bg-soft-mint {
  background-color: #ecfdf5;
}
.bg-mint-strong {
  background-color: #d1fae5;
} /* Darker mint for list items */
.text-mint-light {
  color: #6ee7b7;
}

/* ... (Keep all existing CSS) ... */

/* =========================================
   18. ELIGIBILITY BAR & MODAL (NEW)
   ========================================= */

/* The Strip below Header */
.eligibility-strip {
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  padding: 15px 0;
  position: relative;
  z-index: 50; /* Above Hero */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* Mobile Bottom Sheet Modal Animation */
@media (max-width: 576px) {
  .modal-sheet .modal-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  .modal-sheet .modal-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border: none;
    padding: 10px;
  }
  /* Slide Up Animation */
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
  }
}

/* Modal Input Styling */
.otp-input-group .input-group-text {
  background: #f8f9fa;
  border-right: 0;
  color: var(--dhani-secondary);
  font-weight: bold;
}
.otp-input-group .form-control {
  border-left: 0;
  padding-left: 5px;
}
.otp-input-group .form-control:focus {
  box-shadow: none;
  border-color: #ced4da;
}

/*
  =========================================
  19.
  PREMIUM
  ELIGIBILITY
  CARD
  (NEW)
  =========================================
  */
.eligibility-card-section {
  margin-top: -60px; /* Overlaps Hero slightly for depth */
  position: relative;
  z-index: 30;
  margin-bottom: 40px;
}

.eligibility-glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  padding: 30px;
  transition: transform 0.3s ease;
  /* Premium Gradient Border Trick */
  position: relative;
  overflow: hidden;
}
.eligibility-glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--dhani-primary),
    var(--dhani-secondary)
  );
}

.eligibility-glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* =========================================
   20. MOBILE BOTTOM SHEET MODAL (STICKY)
   ========================================= */
/* Desktop: Centered (Default Bootstrap behavior is fine, but we refine it) */
.modal-sheet .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

/* Mobile Specifics */
@media (max-width: 576px) {
  .eligibility-card-section {
    margin-top: -30px; /* Less overlap on mobile */
    padding: 0 15px;
  }

  .eligibility-glass-card {
    padding: 20px;
    text-align: center;
  }

  .modal-sheet .modal-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: auto; /* Reset desktop height */
    align-items: flex-end; /* Push to bottom */
  }

  .modal-sheet .modal-content {
    border-radius: 24px 24px 0 0; /* Rounded top only */
    border: none;
    padding-bottom: 20px; /* Safe area for swipe bar */
  }

  /* Slide Up Animation */
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
  }

  /* Mobile "Handle" for the sheet */
  .modal-sheet .modal-header::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    margin: -10px auto 15px auto; /* Center handle */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 15px;
  }
  .modal-sheet .modal-header {
    padding-top: 25px; /* Space for handle */
  }
}