/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Apply a natural box layout model to all elements */
html {
        box-sizing: border-box;
      }
      *, *:before, *:after {
        box-sizing: inherit;
      }
    
      body {
          /* Removed conflicting flex centering styles */
          /* overflow-x: hidden; /* Be cautious with this, might hide needed horizontal scroll */
          margin: 0; /* Ensure no default body margin */
          font-family: Arial, sans-serif; /* Consider using Bootstrap's font stack or a system stack */
          background-color: #f4f4f9;
          /* height: 100vh; /* Avoid setting fixed height on body for scrollable pages */
          /* display: flex; /* Removed */
          /* justify-content: center; /* Removed */
          /* align-items: center; /* Removed */
      }
    
      /* Basic link styling (can be overridden by components) */
      a {
          color: #007bff;
          text-decoration: none;
      }
    
      a:hover {
          text-decoration: underline;
      }
    
      /* Basic paragraph margin */
      p {
          /* margin-top: 1rem; /* Removed global top margin, apply where needed */
          margin-bottom: 1rem; /* Keep default bottom margin */
          color: #555555; /* Consider using Bootstrap text utilities */
      }
    
      /* Basic heading margin */
      h2 {
          margin-top: 0; /* Remove default top margin */
          margin-bottom: 1.5rem; /* Consistent bottom margin */
          color: #333333; /* Consider using Bootstrap text utilities */
      }
    
    
      /* ==========================================================================
         Sidebar Layout (Consolidated and Standardized)
         Ref: Corresponds to Bootstrap 5 structure and example JS toggle
         ========================================================================== */
    
      #wrapper {
          display: flex; /* Establishes flex container for sidebar + content */
          /* align-items: stretch; Default behavior for flex items */
          transition: all 0.3s ease; /* Smooth transition for wrapper changes */
          min-width: 100%; /* Ensure wrapper takes full width */
          overflow-x: auto; /* Allow horizontal scroll if needed */
      }
    
      #sidebar-wrapper {
          min-width: 250px;
          max-width: 250px;
          min-height: 100vh; /* Ensures sidebar stretches to viewport height */
          /* margin-left: -250px; /* Start hidden off-screen - REMOVED to keep open */
          background-color: #f8f9fa; /* Example: Bootstrap bg-light */
          border-right: 1px solid #dee2e6; /* Example: Bootstrap border */
          transition: margin-left 0.3s ease; /* Smooth slide transition */
      }
    
      #wrapper.toggled #sidebar-wrapper {
          margin-left: -250px; /* Hide sidebar when toggled */
      }
    
      #sidebar-wrapper .sidebar-heading {
          padding: 0.875rem 1.25rem;
          font-size: 1.2rem;
          font-weight: bold; /* Added for emphasis */
          border-bottom: 1px solid #dee2e6; /* Separator */
      }
    
      #sidebar-wrapper .list-group {
          /* width: 15rem; /* Width is controlled by #sidebar-wrapper min/max */
          /* list-style: none; /* Assuming list-group handles this */
          padding-left: 0;
          margin-bottom: 0;
      }
    
      /* Styling for sidebar items (matches previous base.html cleanup) */
      #sidebar-wrapper .list-group-item {
          border: none; /* Cleaner look */
          padding: 0.75rem 1.25rem;
          background-color: transparent; /* Ensure no unwanted background */
          color: #212529; /* Default text color */
      }
      #sidebar-wrapper .list-group-item:hover,
      #sidebar-wrapper .list-group-item:focus {
          background-color: #e9ecef; /* Light hover for items */
          text-decoration: none;
      }
      #sidebar-wrapper .list-group-item.active {
          background-color: #0d6efd; /* Bootstrap primary blue */
          color: white;
          border-radius: 0;
      }
      #sidebar-wrapper .list-group-item .fa-chevron-down {
          transition: transform 0.3s ease;
          float: right; /* Position chevron */
          margin-top: 0.25em; /* Align vertically */
      }
      #sidebar-wrapper a[aria-expanded="true"] .fa-chevron-down {
          transform: rotate(180deg);
      }
    
      #sidebar-wrapper .collapse .list-group-item {
          padding-left: 2rem; /* Indent sub-items */
      }
      #sidebar-wrapper .collapse .list-group-item:hover {
          background-color: #e9ecef; /* Light hover for sub-items */
      }
    
    
      #page-content-wrapper {
          flex-grow: 1; /* Allow content to grow and fill space */
          width: auto; /* Necessary for flex calculation with sidebar */
          padding: 1rem; /* Default padding, adjust as needed */
          overflow-x: auto; /* Allow horizontal scroll within content if needed */
      }
    
      #menu-toggle {
          margin: 0.5rem; /* Spacing for the toggle button */
          cursor: pointer;
      }
    
      /* Optional: Media query for sidebar behavior on larger screens (if needed) */
      /* @media (min-width: 768px) { */
         /* Adjust sidebar behavior for larger screens if necessary */
      /* } */
    
    
      /* ==========================================================================
         Login Page Specific Styles
         ========================================================================== */
    
      /* Apply centering ONLY if body has a specific class like 'login-page' */
      body.login-page {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          overflow-y: auto; /* Allow scroll if content overflows vertically */
      }
    
      .login-container {
          background: #ffffff;
          padding: 2rem;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          width: 100%;
          max-width: 400px;
          text-align: center;
      }
    
      /* Scope heading style to login container */
      .login-container h2 {
          margin-bottom: 1.5rem;
          color: #333333;
      }
    
      .login-container .form-group {
          margin-bottom: 1rem;
          text-align: left;
      }
    
      .login-container label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: bold;
          color: #555555;
      }
    
      /* Style inputs specifically within login container */
      .login-container input[type="text"],
      .login-container input[type="password"] {
          width: 100%;
          padding: 0.75rem;
          border: 1px solid #cccccc;
          border-radius: 4px;
          font-size: 1rem;
          /* box-sizing: border-box; /* Handled globally now */
      }
    
      /* Style button specifically within login container */
      .login-container button {
          width: 100%;
          padding: 0.75rem;
          background-color: #007bff; /* Consider using Bootstrap btn btn-primary */
          color: #ffffff;
          border: none;
          border-radius: 4px;
          font-size: 1rem;
          cursor: pointer;
          transition: background-color 0.3s ease;
      }
    
      .login-container button:hover {
          background-color: #0056b3;
      }
    
      .login-container p {
          margin-top: 1rem;
          color: #555555;
      }
    
      .login-container a {
          color: #007bff;
      }
    
      /* Removed custom .alert, .badge-success, .badge-danger - Use Bootstrap classes directly */

      /* ==========================================================================
         Mobile Responsive Styles
         ========================================================================== */

      @media (max-width: 768px) {
          body {
              font-size: 16px;
          }

          body.sidebar-open-mobile {
              overflow: hidden !important;
          }

          #wrapper {
              position: relative;
              min-height: 100vh;
              overflow: visible;
          }

          #sidebar-wrapper {
              position: fixed;
              top: 0;
              left: -280px;
              width: 280px;
              height: 100vh;
              z-index: 1055;
              transition: left 0.3s ease;
              overflow-y: auto;
              box-shadow: 2px 0 15px rgba(0,0,0,0.2);
              background-color: #ffffff;
              border-right: 2px solid #007bff;
              margin-left: 0;
              min-width: 280px;
              max-width: 280px;
          }
          
          #wrapper.toggled #sidebar-wrapper {
              left: 0;
              box-shadow: 2px 0 25px rgba(0,0,0,0.4);
              margin-left: 0;
          }
          
          #page-content-wrapper {
              width: 100%;
              min-width: 320px;
              padding: 0;
              margin-left: 0;
              overflow-x: auto;
          }

          #wrapper.toggled #page-content-wrapper {
              transform: none;
          }
          
          .navbar {
              position: sticky;
              top: 0;
              z-index: 1040;
              background-color: #ffffff !important;
              box-shadow: 0 2px 4px rgba(0,0,0,0.1);
              width: 100%;
              min-width: 320px;
          }
          
          .container-fluid {
              padding: 15px !important;
              min-width: 320px;
              overflow-x: auto;
          }
          
          #mobile-overlay {
              display: none;
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              background: rgba(0, 0, 0, 0.5);
              z-index: 1050;
              cursor: pointer;
              opacity: 0;
              transition: opacity 0.3s ease;
          }
          
          #wrapper.toggled #mobile-overlay {
              display: block;
              opacity: 1;
          }
          
          #sidebar-wrapper .sidebar-heading {
              background-color: #007bff;
              color: white;
              border-bottom: 1px solid rgba(255,255,255,0.2);
              padding: 1rem;
          }
          
          #sidebar-wrapper .sidebar-heading a {
              color: white !important;
          }
          
          .list-group-item {
              padding: 1rem;
              font-size: 1rem;
              min-height: 48px;
              display: flex;
              align-items: center;
          }

          .list-group-item i {
              margin-right: 0.75rem;
              font-size: 1.1rem;
              flex-shrink: 0;
          }

          .list-group-item[data-bs-toggle="collapse"] {
              position: relative;
          }

          .list-group-item[data-bs-toggle="collapse"] .fa-chevron-down {
              position: absolute;
              right: 1rem;
              top: 50%;
              transform: translateY(-50%);
              transition: transform 0.2s ease;
              float: none;
              margin-top: 0;
          }

          .list-group-item[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
              transform: translateY(-50%) rotate(180deg);
          }

          .collapse .list-group-item {
              padding-left: 2.5rem;
              background-color: rgba(0,0,0,0.02);
              font-size: 0.9rem;
          }
          
          .table-responsive {
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
              border-radius: 0.375rem;
              width: 100%;
          }

          .table {
              min-width: 600px;
          }
          
          .dropdown-menu {
              border-radius: 0.5rem;
              box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
              max-width: 90vw;
          }

          .card {
              border-radius: 0.5rem;
              box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
              margin-bottom: 1rem;
          }

          .form-control, .form-select {
              min-height: 44px;
          }

          .btn {
              min-height: 44px;
              padding: 0.6rem 1rem;
          }

          #menu-toggle {
              margin: 0.25rem;
          }
      }
      
      @media (max-width: 480px) {
          .sidebar-heading {
              font-size: 1rem;
              padding: 0.75rem;
          }
          
          .list-group-item {
              font-size: 0.9rem;
              padding: 0.875rem;
          }
          
          .navbar-brand {
              font-size: 1rem;
          }

          .container-fluid {
              padding: 10px !important;
          }

          .btn-sm {
              padding: 0.25rem 0.5rem;
              font-size: 0.875rem;
              min-height: 36px;
          }

          .table {
              font-size: 0.875rem;
              min-width: 500px;
          }

          /* Ensure minimum touch target sizes for mobile */
          .btn, .list-group-item, a {
              min-height: 44px;
              display: flex;
              align-items: center;
          }

          .navbar-toggler, #menu-toggle {
              min-width: 44px;
              min-height: 44px;
              padding: 0.5rem;
          }

          /* Improve tap targets for small screens */
          .dropdown-item {
              min-height: 44px;
              padding: 0.75rem 1rem;
              display: flex;
              align-items: center;
          }
      }

      /* Mobile touch-friendly button improvements */
      @media (max-width: 768px) {
          /* Ensure minimum touch target size for small buttons */
          .btn-sm {
              min-height: 44px !important;
              padding: 0.5rem 1rem !important;
              font-size: 0.875rem !important;
              margin: 0.25rem 0.125rem !important;
          }
          
          /* Improve table button spacing on mobile */
          table .btn-sm {
              display: inline-block;
              margin-bottom: 0.25rem;
              min-width: 70px;
          }
          
          /* Stack table action buttons vertically on very small screens */
          @media (max-width: 480px) {
              table .btn-sm {
                  display: block;
                  width: 100%;
                  margin-bottom: 0.25rem;
              }
              
              /* Make table responsive by allowing horizontal scroll */
              .table-responsive {
                  font-size: 0.85rem;
              }
              
              /* Improve mobile form button layout */
              .btn:not(.btn-sm) {
                  min-height: 48px;
                  padding: 0.75rem 1.5rem;
              }
              
              /* Ensure modal buttons are touch-friendly */
              .modal-footer .btn {
                  min-height: 44px;
                  margin: 0.25rem;
              }
          }
      }

      /* Improve button grouping and spacing */
      .btn-group-mobile {
          display: flex;
          flex-wrap: wrap;
          gap: 0.25rem;
      }

      @media (max-width: 576px) {
          .btn-group-mobile .btn {
              flex: 1;
              min-width: 0;
          }
      }

      /* Ensure all buttons have proper contrast for accessibility */
      .btn-outline-secondary {
          border-width: 2px;
      }

      .btn-outline-secondary:hover {
          color: #fff;
      }

      /* Fix button text wrapping issues */
      .btn {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      @media (max-width: 480px) {
          .btn {
              white-space: normal;
              word-wrap: break-word;
          }
      }

/* ========================================================================== */
/* Mobile Button & Dropdown Refinements (Non-destructive overrides)           */
/* Added to address overly large buttons on small screens and dropdown issue */
/* ========================================================================== */

/* Provide a truly compact variant developers can opt into explicitly */
.btn-compact {
        padding: 0.35rem 0.55rem !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        min-height: 28px !important;
}

@media (max-width: 768px) {
    /* Dial back aggressive min-heights while keeping accessibility (>=34px) */
    .btn {
        min-height: 36px !important;
        padding: 0.4rem 0.65rem !important;
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
    }
    .btn-sm {
        min-height: 30px !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }
    /* Sidebar / list items slightly reduced */
    #sidebar-wrapper .list-group-item { 
        min-height: 42px; 
        padding-top: 0.65rem; 
        padding-bottom: 0.65rem; 
    }
}

@media (max-width: 480px) {
    .btn {
        min-height: 32px !important;
        padding: 0.35rem 0.55rem !important;
        font-size: 0.75rem !important;
    }
    .btn-sm {
        min-height: 28px !important;
        padding: 0.2rem 0.4rem !important;
        font-size: 0.65rem !important;
    }
    #sidebar-wrapper .list-group-item { 
        min-height: 40px; 
        font-size: 0.82rem; 
    }
    /* Remove blanket flex & large min-height previously applied to all anchors */
    a:not(.btn):not(.list-group-item) { 
        min-height: initial; 
        display: inline; 
    }
}

/* Improve dropdown stacking & reliability */
.navbar .dropdown-menu { 
    z-index: 1100; /* Above sticky nav & sidebar */
}

/* In case some global flex styles interfered, ensure dropdown items behave normally */
.navbar .dropdown-menu .dropdown-item { 
    display: flex; 
    align-items: center; 
    min-height: 36px; 
}

/* Utility: when a button group wraps on mobile, keep tighter spacing */
.btn-group.btn-group-wrap { 
    flex-wrap: wrap; 
    gap: 0.25rem; 
}

/* Prevent oversized buttons in tables where vertical space is precious */
@media (max-width: 768px) {
    table .btn, table .btn-sm { 
        min-height: 30px; 
        padding: 0.25rem 0.5rem; 
    }
}

/* Defensive: if any earlier rule forced all anchors to flex, neutralize inside card bodies */
.card-body a.btn { display: inline-block; }