/* Base styles */
:root {
    --primary: #3b82f6;
    --secondary: #1e40af;
}

/* Common utility classes */
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.border-primary { border-color: var(--primary); }

/* Form styles */
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Button styles */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

/* Table styles */
.table th {
    background-color: #f8fafc;
}
/** Nav bar/
 /*
          This is the magic!
          - 'background-attachment: fixed' makes the background image stay in one place
            relative to the viewport.
          - When the user scrolls, the section 'div' itself scrolls up,
            revealing the next section's 'fixed' background underneath.
          - This creates the "image2 comes on top of image1" effect you described.
        */
 .parallax-section {
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 /*
          This container is used for the video background.
          It ensures the video covers the entire section.
        */
 .video-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: -10;
     /* Places it behind the content */
 }

 .video-container video {
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     object-fit: cover;
 }

 /* manage-dat.html*/
  body {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 60px;
      background: #f8f9fa;
  }

  .tab-content {
      margin-top: 20px;
      background: white;
      padding: 20px;
      border-radius: 10px;
  }

  .nav-tabs .nav-link.disabled {
      pointer-events: none;
      opacity: 0.5;
  }

  .role-label {
      text-align: right;
      color: #555;
      margin-bottom: 10px;
      font-weight: 500;
  }