/* Custom Bootstrap Theme for Umm Al-Qura TeleHealth */
/* This file overrides Bootstrap's default colors with the site's custom color scheme */

/* Import Bootstrap variables for consistency */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');

/* Custom Color Variables (matching site.css) */
:root {
  --bs-primary: #006770;
  --bs-primary-rgb: 0, 103, 112;
  --bs-secondary: #A9894C;
  --bs-secondary-rgb: 169, 137, 76;
  --bs-success: #28A745;
  --bs-success-rgb: 40, 167, 69;
  --bs-info: #17A2B8;
  --bs-info-rgb: 23, 162, 184;
  --bs-warning: #FFC107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger: #DC3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light: #E8F4F5;
  --bs-light-rgb: 232, 244, 245;
  --bs-dark: #2C3E50;
  --bs-dark-rgb: 44, 62, 80;
  
  /* Additional custom colors */
  --bs-primary-light: #008B94;
  --bs-primary-dark: #004A50;
  --bs-secondary-light: #C4A570;
  --bs-secondary-dark: #8B6F3A;
  --bs-accent: #E8F4F5;
  --bs-accent-secondary: #F5F2E8;
}

/* Override Bootstrap Primary Colors */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-dark);
  --bs-btn-hover-border-color: var(--bs-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-dark);
  --bs-btn-active-border-color: var(--bs-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Override Bootstrap Secondary Colors */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary-dark);
  --bs-btn-hover-border-color: var(--bs-secondary-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary-dark);
  --bs-btn-active-border-color: var(--bs-secondary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* Override Bootstrap Success Colors */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #218838;
  --bs-btn-hover-border-color: #1e7e34;
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1e7e34;
  --bs-btn-active-border-color: #1c7430;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

/* Override Bootstrap Info Colors */
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #138496;
  --bs-btn-hover-border-color: #117a8b;
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #117a8b;
  --bs-btn-active-border-color: #10707f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

/* Override Bootstrap Warning Colors */
.btn-warning {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: #e0a800;
  --bs-btn-hover-border-color: #d39e00;
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: #d39e00;
  --bs-btn-active-border-color: #c69500;
  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

/* Override Bootstrap Danger Colors */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c82333;
  --bs-btn-hover-border-color: #bd2130;
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #bd2130;
  --bs-btn-active-border-color: #b21f2d;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

/* Override Bootstrap Light Colors */
.btn-light {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: #d1ecf1;
  --bs-btn-hover-border-color: #bee5eb;
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: #bee5eb;
  --bs-btn-active-border-color: #b8daff;
  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
}

/* Override Bootstrap Dark Colors */
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1a252f;
  --bs-btn-hover-border-color: #161d26;
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #161d26;
  --bs-btn-active-border-color: #121a23;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);
}

/* Override Bootstrap Outline Buttons */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* Override Bootstrap Background Colors */
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: var(--bs-secondary) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: var(--bs-success) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: var(--bs-info) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: var(--bs-warning) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: var(--bs-danger) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: var(--bs-light) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: var(--bs-dark) !important;
}

/* Override Bootstrap Text Colors */
.text-primary {
  --bs-text-opacity: 1;
  color: var(--bs-primary) !important;
}

.text-secondary {
  --bs-text-opacity: 1;
  color: var(--bs-secondary) !important;
}

.text-success {
  --bs-text-opacity: 1;
  color: var(--bs-success) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: var(--bs-info) !important;
}

.text-warning {
  --bs-text-opacity: 1;
  color: var(--bs-warning) !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: var(--bs-danger) !important;
}

.text-light {
  --bs-text-opacity: 1;
  color: var(--bs-light) !important;
}

.text-dark {
  --bs-text-opacity: 1;
  color: var(--bs-dark) !important;
}

/* Override Bootstrap Border Colors */
.border-primary {
  --bs-border-opacity: 1;
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  --bs-border-opacity: 1;
  border-color: var(--bs-secondary) !important;
}

.border-success {
  --bs-border-opacity: 1;
  border-color: var(--bs-success) !important;
}

.border-info {
  --bs-border-opacity: 1;
  border-color: var(--bs-info) !important;
}

.border-warning {
  --bs-border-opacity: 1;
  border-color: var(--bs-warning) !important;
}

.border-danger {
  --bs-border-opacity: 1;
  border-color: var(--bs-danger) !important;
}

.border-light {
  --bs-border-opacity: 1;
  border-color: var(--bs-light) !important;
}

.border-dark {
  --bs-border-opacity: 1;
  border-color: var(--bs-dark) !important;
}

/* Override Bootstrap Alert Colors */
.alert-primary {
  --bs-alert-color: #084298;
  --bs-alert-bg: #cff4fc;
  --bs-alert-border-color: #b6effb;
}

.alert-secondary {
  --bs-alert-color: #41464b;
  --bs-alert-bg: #e2e3e5;
  --bs-alert-border-color: #d3d6d8;
}

.alert-success {
  --bs-alert-color: #0f5132;
  --bs-alert-bg: #d1e7dd;
  --bs-alert-border-color: #badbcc;
}

.alert-info {
  --bs-alert-color: #055160;
  --bs-alert-bg: #cff4fc;
  --bs-alert-border-color: #b6effb;
}

.alert-warning {
  --bs-alert-color: #664d03;
  --bs-alert-bg: #fff3cd;
  --bs-alert-border-color: #ffecb5;
}

.alert-danger {
  --bs-alert-color: #842029;
  --bs-alert-bg: #f8d7da;
  --bs-alert-border-color: #f5c2c7;
}

/* Override Bootstrap Badge Colors */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

.badge.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.badge.bg-success {
  background-color: var(--bs-success) !important;
}

.badge.bg-info {
  background-color: var(--bs-info) !important;
}

.badge.bg-warning {
  background-color: var(--bs-warning) !important;
}

.badge.bg-danger {
  background-color: var(--bs-danger) !important;
}

.badge.bg-light {
  background-color: var(--bs-light) !important;
  color: var(--bs-dark) !important;
}

.badge.bg-dark {
  background-color: var(--bs-dark) !important;
}

/* Override Bootstrap Progress Bar Colors */
.progress-bar {
  background-color: var(--bs-primary);
}

.progress-bar.bg-primary {
  background-color: var(--bs-primary) !important;
}

.progress-bar.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.progress-bar.bg-success {
  background-color: var(--bs-success) !important;
}

.progress-bar.bg-info {
  background-color: var(--bs-info) !important;
}

.progress-bar.bg-warning {
  background-color: var(--bs-warning) !important;
}

.progress-bar.bg-danger {
  background-color: var(--bs-danger) !important;
}

/* Override Bootstrap Table Colors */
.table-primary {
  --bs-table-color: #fff;
  --bs-table-bg: var(--bs-primary);
  --bs-table-border-color: var(--bs-primary-dark);
  --bs-table-striped-bg: var(--bs-primary-light);
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: var(--bs-primary-light);
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: var(--bs-primary-light);
  --bs-table-hover-color: #fff;
}

.table-secondary {
  --bs-table-color: #fff;
  --bs-table-bg: var(--bs-secondary);
  --bs-table-border-color: var(--bs-secondary-dark);
  --bs-table-striped-bg: var(--bs-secondary-light);
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: var(--bs-secondary-light);
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: var(--bs-secondary-light);
  --bs-table-hover-color: #fff;
}

/* Override Bootstrap Form Controls */
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 103, 112, 0.25);
}

.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 103, 112, 0.25);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 103, 112, 0.25);
}

/* Override Bootstrap Navbar Colors */
.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

/* Override Bootstrap Pagination Colors */
.page-link {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.page-link:hover {
  color: var(--bs-primary-dark);
  background-color: var(--bs-light);
  border-color: var(--bs-primary);
}

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

/* Override Bootstrap List Group Colors */
.list-group-item-primary {
  color: #084298;
  background-color: #cff4fc;
}

.list-group-item-primary.list-group-item-action:hover {
  color: #084298;
  background-color: #b6effb;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Custom enhancements for better integration */
.btn {
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.card {
  border: 1px solid var(--bs-primary-light);
  transition: none;
}

.card:hover {
  box-shadow: none;
  transform: none;
}

.table {
  border-color: var(--bs-primary-light);
}

.table th {
  border-color: var(--bs-primary-light);
}

.table td {
  border-color: var(--bs-primary-light);
}

/* Custom focus styles */
.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 rgba(0, 103, 112, 0.25);
}

/* Responsive enhancements */
@media (max-width: 768px) {
  .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .table-responsive {
    border-radius: 0.375rem;
  }
}