html {
  font-size: 14px;
}

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

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

/* ===== Override Bootstrap blue with ZonkeVibe theme colors ===== */

/* Focus rings - use cyan instead of blue */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(0, 188, 212, 0.5);
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-cyan);
  box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.25);
}

.form-check-input:focus {
  border-color: var(--primary-cyan);
}

/* Override .btn-primary to use magenta */
.btn-primary {
  background-color: var(--primary-magenta);
  border-color: var(--primary-magenta);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #D81B60;
  border-color: #C2185B;
}

.btn-primary:active {
  background-color: #C2185B;
  border-color: #AD1457;
}

/* Override .btn-outline-primary to use magenta */
.btn-outline-primary {
  color: var(--primary-magenta);
  border-color: var(--primary-magenta);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--primary-magenta);
  border-color: var(--primary-magenta);
  color: white;
}

.btn-outline-primary:active {
  background-color: #C2185B;
  border-color: #C2185B;
  color: white;
}

/* Override .btn-info to use cyan */
.btn-info {
  background-color: var(--primary-cyan);
  border-color: var(--primary-cyan);
  color: white;
}

.btn-info:hover, .btn-info:focus {
  background-color: #00A8BA;
  border-color: #0097A7;
  color: white;
}

/* Override .btn-outline-info to use cyan */
.btn-outline-info {
  color: var(--primary-cyan);
  border-color: var(--primary-cyan);
}

.btn-outline-info:hover, .btn-outline-info:focus {
  background-color: var(--primary-cyan);
  border-color: var(--primary-cyan);
  color: white;
}

/* Override .btn-outline-secondary toggle-password button */
.toggle-password {
  border-color: var(--gray-300);
  color: var(--gray-500);
}

.toggle-password:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--primary-magenta);
}

/* Link colors */
a {
  color: var(--primary-magenta);
}

a:hover {
  color: #C2185B;
}

/* Alert link */
.alert-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Dropdown active/selected items */
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--primary-magenta);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(233, 30, 99, 0.08);
  color: var(--primary-magenta);
}

/* Pagination */
.page-link {
  color: var(--primary-magenta);
}

.page-link:hover {
  color: #C2185B;
}

.page-item.active .page-link {
  background-color: var(--primary-magenta);
  border-color: var(--primary-magenta);
}

/* Nav tabs */
.nav-tabs .nav-link {
  color: var(--gray-500);
}

.nav-tabs .nav-link:hover {
  color: var(--primary-magenta);
  border-color: transparent transparent var(--primary-magenta);
}

.nav-tabs .nav-link.active {
  color: var(--primary-magenta);
  border-color: var(--gray-200) var(--gray-200) white;
  font-weight: 600;
}

/* Form switches / checkboxes when checked */
.form-check-input:checked {
  background-color: var(--primary-magenta);
  border-color: var(--primary-magenta);
}

/* DataTables search/filter styling */
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary-cyan);
  box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.25);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary-magenta) !important;
  border-color: var(--primary-magenta) !important;
  color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(233, 30, 99, 0.1) !important;
  border-color: var(--primary-magenta) !important;
  color: var(--primary-magenta) !important;
}

/* Badge overrides for consistency */
.bg-primary {
  background-color: var(--primary-magenta) !important;
}

.bg-info {
  background-color: var(--primary-cyan) !important;
}

.text-primary {
  color: var(--primary-magenta) !important;
}

.text-info {
  color: var(--primary-cyan) !important;
}

/* Border color overrides */
.border-primary {
  border-color: var(--primary-magenta) !important;
}

.border-info {
  border-color: var(--primary-cyan) !important;
}

/* Progress bar */
.progress-bar {
  background-color: var(--primary-magenta);
}

/* Select dropdown option hover (Chromium) */
.form-select option:checked,
.form-select option:hover {
  background: linear-gradient(0deg, rgba(233, 30, 99, 0.12) 0%, rgba(233, 30, 99, 0.12) 100%);
  color: var(--primary-magenta);
}

/* Accent color for native controls (select, range, progress) */
.form-select, .form-control, .form-check-input {
  accent-color: var(--primary-magenta);
}

/* Selection/highlight color */
::selection {
  background-color: rgba(233, 30, 99, 0.2);
}