 /* Permission Management Styles */
 .switch {
     position: relative;
     display: inline-block;
     width: 38px;
     height: 20px;
 }

 .switch input {
     display: none;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     background-color: #ccc;
     border-radius: 20px;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 16px;
     width: 16px;
     left: 2px;
     bottom: 2px;
     background-color: white;
     border-radius: 50%;
 }

 input:checked+.slider {
     background-color: #28a745;
 }

 input:checked+.slider:before {
     transform: translateX(18px);
 }

 #permissionModal .modal-body {
     max-height: 70vh;
     overflow-y: auto;
 }

 /* Status toggle button styles */
 .status-toggle {
     min-width: 120px;
     transition: all 0.3s ease;
     border: none;
     border-radius: 4px;
     padding: 5px 10px;
     font-weight: 500;
 }

 .status-toggle:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .btn-available {
     background-color: #28a745;
     color: white;
 }

 .btn-not-available {
     background-color: #dc3545;
     color: white;
 }

 /* Modal styles */
 .modal-header {
     padding: 12px 20px;
 }

 .modal-title {
     font-weight: 600;
 }

 #statusReason {
     min-height: 100px;
     resize: vertical;
 }

 .loading-text {
     font-size: 1.1rem;
     color: #6c757d;
 }

 .permission-btn {
     white-space: nowrap;
 }
