/**
 * User Management Styles
 * This file contains custom styles for the user management section
 */

 :root {
    --green-progress: #00b74a;
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 80px;
    --transition-speed: 0.3s;
    --primary-color: #00b74a;
    --border-color: #e0e0e0;
    --card-border-radius: 10px;
    --btn-border-radius: 50px;
  }
  
  /* User Management Container */
  .user-management-container {
    padding: 15px 0;
  }
  
  /* Header Section with Add Button */
  .users-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
  }
  
  .content-title {
    font-size: 32px;
    font-weight: bolder;
    margin: 0;
  }
  
  .btn-add-user {
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--btn-border-radius);
    padding: 10px 30px;
    font-weight: 500;
    border: none;
    transition: background-color 0.3s;
  }
  
  .btn-add-user:hover {
    background-color: #009d3e;
    color: white;
  }
  
  /* User Section Cards */
  .user-section-card {
    border-radius: var(--card-border-radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
  }
  
  .user-section-card .card-header {
    padding: 15px 20px;
    background-color: #000;
    color: white;
    border-bottom: none;
    border-top-left-radius: 17px ;
border-top-right-radius: 17px;
}
  
  .section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
  }
  
  .user-section-card .card-body {
    padding: 0;
  }
  
  /* Table Styles */
  .table {
    margin-bottom: 0;
  }
  
  .table thead th {
    padding: 15px 20px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    background-color: #f8f9fa;
  }
  
  .table tbody td {
    padding: 15px 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
  }
  
  .table tbody tr:last-child td {
    border-bottom: none;
  }
  
  /* User Info Styles */
  .user-info {
    display: flex;
    align-items: center;
  }
  
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
  }
  
  .user-name {
    font-weight: 500;
  }
  
  /* Action Buttons */
  .action-buttons {
    display: flex;
    gap: 10px;
    
  }
  
  .btn-edit,.action-buttons .btn-delete {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border: none;
    color: #555;
    transition: all 0.3s;
  }
  
  .btn-edit:hover {
    background-color: #e0f7ff;
    color: #0077cc;
  }
  
  .btn-delete:hover {
    background-color: #fff0f0;
    color: #dc3545;
  }
  
  /* Pagination Styles */
  .pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 10px;
  }
  
  .entries-per-page {
    display: flex;
    align-items: center;
  }
  
  .entries-select-container {
    width: 80px;
    margin-right: 10px;
  }
  
  .entries-per-page .form-select {
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0 10px;
    font-size: 14px;
  }
  
  .pagination-controls {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .btn-prev, .btn-next {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
  }
  
  .btn-prev:hover, .btn-next:hover {
    background-color: #e9ecef;
  }
  
  .page-indicator {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    cursor: pointer;
  }
  
  /* .page-indicator.active {
    background-color: var(--primary-color);
    color: white;
  }
   */
  .page-select {
    display: flex;
    align-items: center;
  }
  
  .page-select-container {
    width: 80px;
    margin-left: 10px;
  }
  
  .page-select .form-select {
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0 10px;
    font-size: 14px;
  }
  
  /* Modal customizations */
  .modal-content {
    border-radius: 12px;
    border: none;
  }
  
  .modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 15px 20px;
  }
  
  .modal .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 50px;
    padding: 8px 25px;
  }
  
  .modal .btn-secondary {
    background-color: #f5f5f5;
    color: #333;
    border: none;
    border-radius: 50px;
    padding: 8px 25px;
  }
  
  .modal .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    border-radius: 50px;
    padding: 8px 25px;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    .users-header-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }
    
    .pagination-container {
      flex-direction: column;
      gap: 15px;
      align-items: center;
    }
    
    .entries-per-page, .pagination-controls, .page-select {
      width: 100%;
      justify-content: center;
    }
    
    .table th, .table td {
      padding: 10px 15px;
    }
    
    .user-info {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .user-avatar {
      margin-bottom: 5px;
    }
  }
  
  /* Dark Mode Styles */
  body.dark-mode .user-section-card {
    background-color: #2d2d2d;
    border-color: #444;
  }
  body.dark-mode .card-body .table-responsive .table{
    background-color:  #1e1e1e;
    color: white;
  }
  
  body.dark-mode .user-section-card .card-header {
    background-color: #1e1e1e;
  }
  
  body.dark-mode .table {
    color: #e0e0e0;
  }
  
  body.dark-mode .table thead th {
    background-color: #333;
    border-color: #444;
    color: #e0e0e0;
  }
  
  body.dark-mode .table tbody td {
    border-color: #444;
  }
  
  body.dark-mode .btn-edit, 
  body.dark-mode .btn-delete {
    background-color: #3d3d3d;
    color: #e0e0e0;
  }
  
  body.dark-mode .btn-edit:hover {
    background-color: #005180;
    color: #e0e0e0;
  }
  
  body.dark-mode .btn-delete:hover {
    background-color: #7a0000;
    color: #e0e0e0;
  }
  
  body.dark-mode .pagination-controls .page-indicator {
    color: #e0e0e0;
  }
  
  body.dark-mode .pagination-controls .page-indicator.active {
    background-color: var(--primary-color);
    color: white;
  }
  
  body.dark-mode .btn-prev, 
  body.dark-mode .btn-next {
    background-color: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
  }
  
  body.dark-mode .entries-per-page .form-select,
  body.dark-mode .page-select .form-select {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
  }
  
  body.dark-mode .entries-per-page span,
  body.dark-mode .page-select span {
    color: #e0e0e0;
  }
  
  body.dark-mode .modal-content {
    background-color: #2d2d2d;
    color: #e0e0e0;
  }
  
  body.dark-mode .modal-header,
  body.dark-mode .modal-footer {
    border-color: #444;
  }
  
  body.dark-mode .form-control,
  body.dark-mode .form-select {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
  }
  
  body.dark-mode .form-control:focus,
  body.dark-mode .form-select:focus {
    background-color: #3d3d3d;
    border-color: #666;
    color: #e0e0e0;
  }
  
  body.dark-mode .modal .btn-secondary {
    background-color: #3d3d3d;
    color: #e0e0e0;
  }


/* Make sure modal is visible */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

/* Fix for modal backdrop */
.modal-backdrop {
  opacity: 0.5;
}

/* Ensure proper display of steps */
.modal-step {
  display: none;
}

.modal-step:first-child {
  display: block;
}