html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-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 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
  padding-bottom: 2rem; /* Add some bottom padding */
}

/* Remove the problematic container flex rule */
/* .container {
  flex: 1;
} */

/* Ensure footer stays at bottom */
footer {
  margin-top: auto;
}

/* Profile Page Enhancements */
.tu-profileinfo {
    padding: 20px 0;
}

.tu-detailitem h6 {
    color: #999999;
    margin-bottom: 8px;
    font-weight: 600;
}

.tu-detailitem p {
    color: #1C1C1C;
    font-weight: 600;
    font-size: 1rem;
}

/* Delete Account Modal Enhancements */
#deleteAccountModal .modal-header {
    border-bottom: 2px solid #EF4444;
}

#deleteAccountModal .alert-danger {
    border-color: #EF4444;
    background-color: rgba(239, 68, 68, 0.1);
}

.opacity-50 {
    opacity: 0.5;
}

/* Clickable username styling */
.nav-name:hover {
    color: #1DA1F2 !important;
    transition: color 0.3s ease;
}