/* Reduce action btns on small screens btn-sm */
    @media (max-width: 576px) {
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.70rem;
            line-height: 1.5;
            border-radius: 0.2rem;
            margin-bottom: 3px;
        }
    }
   /* Fullscreen overlay */
    #page-loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s ease;
    }

    /* Loader animation */
    .spinner {
      width: 80px;
      height: 80px;
      border: 8px solid #f3f3f3;
      border-top: 8px solid #ff9800;
      border-right: 8px solid #4caf50;
      border-bottom: 8px solid #2196f3;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
 
 .loader-text {
     display: inline;
     margin-left: 0.5em;
     font-size: 0.875rem;
     color: #4a5568;
     /* gray-700 */
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Style form */
 .form-row {
     display: flex;
     gap: 10px;
     /* prevent horizontal scroll */
     flex-wrap: wrap;
     /* allow wrapping on smaller screens */
     margin-bottom: 15px;
     /* space between rows */
 }

 .form-field {
     flex: 1;
     /* Distribute space equally */
 }

 .form-field label {
     display: block;
     /* Ensure labels are above inputs */
 }

 .error {
     color: red;
     font-size: 0.9em;
 }

 @media (max-width: 768px) {
     .form-row {
         flex-direction: column;
     }
 }

 /* Style messages */
 .message-container {
     position: fixed;
     bottom: 1rem;
     right: 1rem;
     max-width: 300px;
     z-index: 1000;
     padding: 15px;
     border-radius: 0.375rem;
     /* rounded-md */
     overflow: hidden;
     background-color: #2d3748;
     /* gray-800 */
     color: #f7fafc;
     /* gray-100 */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 /* add auto-hide */
 .message-container ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .message-container ul li {
     position: relative;
     padding: 0.5rem 1rem;
     margin-bottom: 0.5rem;
     border-radius: 0.375rem;
     /* rounded-md */
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .message-container ul li .close-message {
     cursor: pointer;
     color: #f7fafc;
     /* gray-100 */
     font-weight: bold;
     font-size: 1.25rem;
     line-height: 1;
     padding: 0 0.25rem;
 }

 .message-container ul li .close-message:hover {
     color: #e2e8f0;
     /* gray-200 */
 }

 .message-container ul li.success {
     background-color: #48bb78;
     /* green-500 */
 }

 .message-container ul li.error {
     background-color: #e53e3e;
     /* red-500 */
 }

 .message-container ul li.info {
     background-color: #3182ce;
     /* blue-500 */
 }

 .message-container ul li.warning {
     background-color: #dd6b20;
     /* orange-500 */
 }

 .message-container ul li.success .close-message,
 .message-container ul li.error .close-message,
 .message-container ul li.info .close-message,
 .message-container ul li.warning .close-message {
     color: #f7fafc;
     /* gray-100 */
 }

 .message-container ul li.success .close-message:hover,
 .message-container ul li.error .close-message:hover,
 .message-container ul li.info .close-message:hover,
 .message {
     padding: 0.5rem 1rem;
     border-bottom: 1px solid #4a5568;
     /* gray-700 */
 }

 .message:last-child {
     border-bottom: none;
 }