html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Additional mobile-friendly styles for user management */

/* Mobile card styles */
@media (max-width: 767.98px) {
  /* Reduce spacing between cards */
  .row.g-2 {
    margin-top: -0.25rem !important;
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }

  .row.g-2 > * {
    padding: 0.25rem !important;
  }

  /* Compact user card design */
  .user-card {
    margin-bottom: 0;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Email title */
  .email-title {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    display: inline-block;
    cursor: help;
  }

  /* Status label */
  .badge-label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 0.25rem;
  }

  /* Badges in cards */
  .user-card .badge {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
  }

  /* Buttons row */
  .btn-row {
    display: flex;
    align-items: center;
  }

  .btn-row .btn {
    margin-left: 0.25rem;
    height: 2rem; /* Fixed height */
    width: 2rem; /* Fixed width */
    padding: 0; /* Remove padding */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Square buttons */
  .btn-square {
    border-radius: 0.25rem !important;
  }

  /* Icon size in buttons */
  .btn-row .btn i {
    font-size: 0.9rem;
  }

  /* More compact card body */
  .card-body.p-2 {
    padding: 0.5rem !important;
  }

  /* Make delete confirmation modal better on mobile */
  .modal-dialog {
    margin: 0.5rem;
  }
}

/* Global improvements for all screen sizes */
.badge {
  font-size: 0.75rem;
  padding: 0.35em 0.65em;
}

/* Add smooth transitions to buttons */
.btn {
  transition: all 0.2s;
}

/* Make sure buttons in a group don't have double borders */
.btn-group .btn:not(:first-child) {
  margin-left: -1px;
}

/* Ensure the reset link is not cut off on small screens */
#reset-link {
  word-break: break-all;
}

/* Filter card styles */
.filter-card {
  margin-bottom: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  background-color: #f8f9fa;
}

.filter-card .card-body {
  padding: 1rem;
}

/* Make the filter card collapsible on mobile */
@media (max-width: 767.98px) {
  .filter-card {
    margin-top: 0.5rem;
  }
}

/* Add a subtle hover effect to the filter inputs */
.filter-card input:focus,
.filter-card select:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  border-color: #80bdff;
}

/* User count badge */
.badge.bg-secondary {
  font-size: 0.875rem;
  padding: 0.35em 0.65em;
}

/* Ensure the filter button has proper spacing on mobile */
@media (max-width: 767.98px) {
  .btn[data-bs-toggle="collapse"] {
    margin-bottom: 0.5rem;
  }
}

/* Fix for collapse animation */
#filterCollapse.collapsing {
  -webkit-transition: height .35s ease;
  transition: height .35s ease;
}

/* Ensure the card doesn't affect the animation */
#filterCollapse .card {
  margin-bottom: 0;
}

/* Make collapse transition smoother */
#filterCollapse {
  transition: height 0.35s ease, opacity 0.2s ease;
}

/* Improve mobile experience with collapse */
@media (max-width: 767.98px) {
  #filterCollapse {
    overflow: hidden;
  }

  #filterCollapse .card {
    border-radius: 0.25rem;
  }
}

/* Add styling for text-muted class */
.text-muted {
  color: #6c757d !important;
  font-weight: normal;
  font-style: italic;
}

/* Ensure form labels are visible */
.form-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/* Improve spacing for validation messages */
.validation-message {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Make optional indicators stand out but not dominate */
.optional-indicator {
  font-size: 0.875rem;
  font-style: italic;
  color: #6c757d;
  margin-left: 0.25rem;
}

/* Mobile card styles for kiosks */
@media (max-width: 767.98px) {
  /* Compact kiosk card design */
  .user-card {
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Name title */
  .name-title {
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    display: inline-block;
  }

  /* Buttons row */
  .btn-row {
    display: flex;
    align-items: center;
  }

  .btn-row .btn {
    margin-left: 0.25rem;
    height: 2rem; /* Fixed height */
    width: 2rem; /* Fixed width */
    padding: 0; /* Remove padding */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Square buttons */
  .btn-square {
    border-radius: 0.25rem !important;
  }

  /* Icon size in buttons */
  .btn-row .btn i {
    font-size: 0.9rem;
  }

  /* More compact card body */
  .card-body.p-2 {
    padding: 0.5rem !important;
  }
}

/* Kiosk Preview Styles */
.preview-container {
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin: 0 auto;
  position: relative;
}

@media (max-width: 767.98px) {
  .preview-container {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }

  .preview-container svg {
    width: 100%;
    height: auto;
  }
}

.nav-item {
  align-content: center;
}

.language-selector {
  display: flex;
  align-items: center;
}

.language-selector .btn-group {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.language-selector .btn {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-color: #6200ee;
}

.language-selector .btn-outline-light {
  background-color: transparent;
  color: #6200ee;
}

.language-selector .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 800;
}

.language-selector .btn-light.active {
  color: white;
  background-color: #6200ee;
  font-weight: 500;
}

@media (max-width: 576px) {
  .language-selector .btn {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
  }
}