/* ========================================
   TotalHome Admin - Custom Color Scheme
   Primary: #0082ca
   Primary Dark: #006ba7 (hover states)
   Primary Light: #e6f4fb (backgrounds)
   ======================================== */

:root {
  --th-primary: #0082ca;
  --th-primary-dark: #006ba7;
  --th-primary-light: #e6f4fb;
  --th-primary-rgb: 0, 130, 202;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

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

body {
  margin-bottom: 60px;
}

/* ========================================
   Override Bootstrap Primary Color
   ======================================== */

/* Primary buttons */
.btn-primary {
  background-color: var(--th-primary);
  border-color: var(--th-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--th-primary-dark);
  border-color: var(--th-primary-dark);
}

.btn-primary:active, .btn-primary.active {
  background-color: var(--th-primary-dark);
  border-color: var(--th-primary-dark);
}

.btn-outline-primary {
  color: var(--th-primary);
  border-color: var(--th-primary);
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--th-primary);
  border-color: var(--th-primary);
  color: #fff;
}

/* Focus states */
.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 var(--th-primary);
}

/* Links */
a {
  color: var(--th-primary);
}

a:hover {
  color: var(--th-primary-dark);
}

/* ========================================
   Navbar
   ======================================== */

.navbar-brand-custom {
  background-color: var(--th-primary);
}

.navbar-brand-custom:hover {
  background-color: var(--th-primary-dark);
}

/* ========================================
   Cards
   ======================================== */

.card-header-primary {
  background-color: var(--th-primary);
  color: #fff;
}

/* ========================================
   Tables
   ======================================== */

.table-header-primary {
  background-color: var(--th-primary);
  color: #fff;
}

.table-header-primary th {
  background-color: var(--th-primary);
  color: #fff;
  border-color: var(--th-primary-dark);
}

/* ========================================
   Pagination
   ======================================== */

.page-link {
  color: var(--th-primary);
}

.page-link:hover {
  color: var(--th-primary-dark);
}

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

/* ========================================
   Badges - Keep semantic colors for status
   ======================================== */

.badge.bg-primary {
  background-color: var(--th-primary) !important;
}

/* ========================================
   Form Elements
   ======================================== */

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

.form-control:focus {
  border-color: var(--th-primary);
}

.form-select:focus {
  border-color: var(--th-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--th-primary-rgb), 0.25);
}

/* ========================================
   Alerts
   ======================================== */

.alert-info {
  background-color: var(--th-primary-light);
  border-color: var(--th-primary);
  color: var(--th-primary-dark);
}