/* Barangay Health Care System - Orange + White Theme */
/* Palette
   Primary Orange: #FF8C42
   Hover Orange:   #FFA75C
   Light Orange:   #FFF1E0
   Accent Orange:  #E76F2B
   White:          #FFFFFF
   Text Dark:      #222222
   Text Muted:     #555555
*/

:root {
  --color-primary: #FF8C42;
  --color-primary-hover: #FFA75C;
  --color-bg-soft: #FFF1E0;
  --color-accent: #E76F2B;
  --color-white: #FFFFFF;
  --text-color: #222222;
  --text-muted: #555555;
  --border-color: #F4D4B8; /* subtle orange-tinted border */
  --shadow-color: rgba(231, 111, 43, 0.15);
}

/* Base text and backgrounds */
html, body {
  background-color: var(--color-white);
  color: var(--text-color);
}

/* Links */
a, .link-primary {
  color: var(--color-accent);
}
a:hover, a:focus {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

/* Navbar */
.navbar {
  border-bottom: 1px solid var(--border-color);
}
.navbar.bg-primary,
.navbar.navbar-dark,
.navbar.navbar-expand .bg-primary {
  background-color: var(--color-primary) !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text {
  color: var(--color-white) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #fff !important;
  background-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-primary-hover);
  text-underline-offset: 4px;
}
.navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.6);
}
.navbar .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* Buttons */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

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

.btn-link { color: var(--color-accent); }
.btn-link:hover { color: var(--color-primary); }

/* Badges and pills */
.badge-primary, .bg-primary {
  background-color: var(--color-accent) !important; /* slightly deeper than primary */
}
.border-primary { border-color: var(--color-accent) !important; }
.text-primary { color: var(--color-accent) !important; }

/* Sections: use light orange to break whitespace */
.section-soft,
.bg-soft,
.bg-light-orange {
  background-color: var(--color-bg-soft) !important;
}

/* Cards */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px var(--shadow-color);
  border-radius: 12px;
}
.card-header {
  background-color: var(--color-bg-soft);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

/* Forms */
.form-control,
.form-select {
  background-color: var(--color-white);
  border: 1px solid #e9ecef;
  color: var(--text-color);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary-hover);
  box-shadow: 0 0 0 0.2rem rgba(255, 140, 66, 0.25);
}

.input-group-text {
  background-color: var(--color-bg-soft);
  border-color: var(--border-color);
  color: var(--text-muted);
}

/* Headings and emphasis */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-color);
}
.heading-accent,
h1 .accent, h2 .accent, h3 .accent {
  color: var(--color-accent);
}

/* Footer */
footer.footer {
  background-color: var(--color-bg-soft);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}
footer a { color: var(--color-accent); }
footer a:hover { color: var(--color-primary); }

/* Tables */
.table thead th {
  border-bottom: 2px solid var(--border-color);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 241, 224, 0.4);
}

/* Icon color accents */
.fa, .fas, .far, .fal, .fab, .bi {
  color: var(--color-accent);
}

/* Alerts */
.alert-primary {
  background-color: #FFE3CC;
  border-color: var(--color-primary);
  color: #5a2a0f;
}

/* Utilities */
.border-accent { border-color: var(--color-accent) !important; }
.bg-white { background-color: var(--color-white) !important; }
.text-dark { color: var(--text-color) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Accessibility: ensure contrast on orange backgrounds */
.bg-primary, .btn-primary, .badge-primary {
  color: #fff !important; /* white text on darker/orange backgrounds */
}

/* Hover focus states for nav pills/tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--color-primary);
}
.nav-pills .nav-link:hover { color: var(--color-primary); }

/* ===== Role-specific layout overrides ===== */
/* Doctor/Nurse sidebars previously used blue; align with orange palette */
.sidebar {
  background-color: var(--color-primary) !important;
}
.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}
.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.sidebar-profile {
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}
#sidebarToggle {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
#sidebarToggle:hover { background-color: var(--color-primary-hover) !important; }

/* User top header and minimal sidebar */
.top-header { background-color: var(--color-primary) !important; color: #fff !important; }
.minimal-sidebar { background-color: var(--color-primary) !important; }
.minimal-sidebar .nav-link, .minimal-sidebar .nav-link span { color: #fff !important; }
.sidebar-toggle { background: var(--color-primary) !important; color: #fff !important; }
.sidebar-toggle:hover { background: var(--color-primary-hover) !important; }
.minimal-sidebar .nav-icon { background-color: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
.minimal-sidebar .nav-link:hover .nav-icon { background-color: rgba(255, 255, 255, 0.22) !important; }

/* Admin footer/bg accents */
.admin-content main, .main-content {
  background-color: var(--color-white) !important;
}
.bg-light { background-color: var(--color-bg-soft) !important; }
.border-top { border-top: 1px solid var(--border-color) !important; }

/* Forms and inputs in role pages */
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-range::-webkit-slider-thumb { background: var(--color-primary); }
.form-range::-moz-range-thumb { background: var(--color-primary); }