/* Global CSS Variables */
:root {
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --sidebar-width: 250px;
  --sidebar-mobile-width: 70px;
}

/* Layout and Overflow Handling */
body {
    overflow: hidden;
  }
  
  .sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    transition: width 0.3s ease;
    flex-shrink: 0; /* Prevent sidebar from shrinking */
  }
  
  #main-content {
    min-height: 100vh;
    overflow-y: auto;
    transition: margin-left 0.3s ease;
  }

  .hover:hover {
    background-color: rgb(142, 146, 125);
  }
  
  /* Spinner Container Styles */
  #spinner-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.8);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #small-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .spinner-border {
    width: 3rem;
    height: 3rem;
  }
  
  /* Styling for Steps Cards */
  .steps-card {
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
  }
  
  .steps-card:hover {
    transform: translateY(-5px);
  }

  /* Collapse sidebar on mobile: show only icons */
  @media (max-width: 768px) {
    .sidebar {
      width: var(--sidebar-mobile-width);
      padding: 1rem 0.5rem;
    }
    
    /* Hide all text elements */
    .sidebar .sidebar-text {
      display: none;
    }
    
    /* Center all navigation links */
    .sidebar a.nav-link {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }
    
    /* Center and style the finish setup button for mobile */
    .sidebar .btn {
      width: 100%;
      padding: 0.5rem 0.25rem;
      font-size: 0.75rem;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent !important;
      border: 0px solid #ffc107 !important;
      border-radius: 8px;
    }
    
    .sidebar .btn:hover {
      background-color: rgba(255, 193, 7, 0.1) !important;
      border-color: #ffb300 !important;
    }
    
    /* Hide button text, show only warning icon for urgency */
    .sidebar .btn {
      position: relative;
    }
    
    .sidebar .btn::before {
      content: "\f33a"; /* Bootstrap Icons exclamation-triangle-fill */
      font-family: "bootstrap-icons";
      font-size: 1.2rem;
      font-weight: normal;
      color: #ffc107; /* Bootstrap warning yellow color */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .sidebar .btn * {
      display: none;
    }
    
    /* Center all sidebar links and buttons */
    .sidebar a,
    .sidebar .btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* Center the logo area */
    .sidebar > div:first-child > a:first-child {
      justify-content: center;
    }
    
    /* Center bottom links */
    .sidebar .mt-auto a {
      justify-content: center;
      text-align: center;
    }
    
    /* Center user profile area */
    .sidebar .d-flex.align-items-center:last-child {
      justify-content: center;
    }
    
    /* Adjust sidebar width for mobile */
    .sidebar {
      min-width: var(--sidebar-mobile-width);
      width: var(--sidebar-mobile-width);
    }
  }