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;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
  text-align: start;
}

/* Custom Form Container for 80% width */
.form-container {
  width: 80%;
  margin: 0 auto;
  /* Center the form */
}

@media (max-width: 768px) {
  .form-container {
    width: 100%;
  }
}

/* Ensure table text color adapts to the theme (Dark/Light) */
/* Ensure table text color adapts to the theme */
.table {
  color: var(--bs-body-color);
}

/* Explicit overrides for Dark Mode to ensure high contrast */
[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.05);
  /* Lighter stripe for dark mode */
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  color: #fff;
  /* Hard fallback if var fails */
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
  border-color: #444;
  /* Visible border */
}

/* Main Layout Container - 80% on Desktop, 100% on Mobile */
.main-layout-container {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .main-layout-container {
    width: 80%;
  }
}