/* =============================
   Brand Theme — Full + Sidebar Overrides
   Primary color: #209DB6
   ============================= */

/* ----- Design tokens ----- */
:root {
  --brand: #209DB6;
  --brand-rgb: 32,157,182;
  --brand-50:  #e6f6fa;
  --brand-100: #c8edf4;
  --brand-200: #a9e3ee;
  --brand-300: #8bd9e7;
  --brand-400: #6ccfe1;
  --brand-500: #4dc5db;
  --brand-600: #1b8aa0;
  --brand-700: #177a8e;
  --brand-800: #126a7c;
  --brand-900: #0e4e5c;
  --brand-on: #ffffff;
  --brand-on-weak: rgba(255,255,255,.85);
  --brand-ring: rgba(32,157,182,.25);
  --brand-border: rgba(0,0,0,.08);
}

/* Map to Bootstrap tokens */
:root {
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-700);
  --bs-focus-ring-color: var(--brand-ring);
}

/* Links */
a { color: var(--bs-link-color); }
a:hover, a:focus { color: var(--bs-link-hover-color); }

/* Top navbar (generic selectors) */
.navbar.bg-dark,
.navbar.bg-black,
.navbar.navbar-dark,
header.navbar,
.topbar,
.navbar {
  background-color: var(--brand) !important;
  color: var(--brand-on);
  border-bottom: 1px solid var(--brand-700);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text,
.navbar .dropdown-toggle {
  color: var(--brand-on) !important;
}

/* Sidebar — aggressive selectors to cover most markup patterns */
#sidebar,
aside.sidebar,
[class*="sidebar"],
[id*="sidebar"],
.sidenav,
.vertical-menu,
nav.vertical,
.offcanvas-start.sidebar,
.offcanvas.sidebar {
  background-color: var(--brand-700) !important;
  color: var(--brand-on) !important;
  border-right: 1px solid var(--brand-600) !important;
}
/* If container uses .bg-dark */
#sidebar.bg-dark,
aside.sidebar.bg-dark,
[class*="sidebar"].bg-dark,
.sidenav.bg-dark,
.vertical-menu.bg-dark,
nav.vertical.bg-dark {
  background-color: var(--brand-700) !important;
  color: var(--brand-on) !important;
}

/* Sidebar links & states */
#sidebar a,
aside.sidebar a,
[class*="sidebar"] a,
.sidenav a,
.vertical-menu a,
nav.vertical a {
  color: var(--brand-on-weak) !important;
  text-decoration: none;
}
#sidebar a:hover,
aside.sidebar a:hover,
[class*="sidebar"] a:hover,
.sidenav a:hover,
.vertical-menu a:hover,
nav.vertical a:hover {
  color: var(--brand-on) !important;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0));
}
#sidebar .active,
aside.sidebar .active,
[class*="sidebar"] .active,
.sidenav .active,
.vertical-menu .active,
nav.vertical .active {
  background-color: var(--brand-600) !important;
  color: var(--brand-on) !important;
  border-radius: 8px;
}

/* list-group items inside sidebar */
#sidebar .list-group-item,
aside.sidebar .list-group-item,
[class*="sidebar"] .list-group-item {
  background: transparent !important;
  color: var(--brand-on-weak) !important;
  border: 0 !important;
}
#sidebar .list-group-item.active,
aside.sidebar .list-group-item.active,
[class*="sidebar"] .list-group-item.active {
  background-color: var(--brand-600) !important;
  color: var(--brand-on) !important;
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-900);
  --bs-btn-border-color: var(--brand-900);
  --bs-btn-hover-bg: var(--brand-900);
  --bs-btn-hover-border-color: var(--brand-900);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-color: var(--brand-on);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-active-color: var(--brand-on);
}
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .25rem var(--brand-ring) !important; }

/* Attention variant (for destructive actions) */
.btn-attention {
  --bs-btn-bg: #d6336c;
  --bs-btn-border-color: #d6336c;
  --bs-btn-hover-bg: #d6336c;
  --bs-btn-hover-border-color: #d6336c;
  --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: #b02a5a;
  --bs-btn-active-border-color: #b02a5a;
  --bs-btn-active-color: var(--brand-on);
}

.btn-outline-attention {
  --bs-btn-color: #d6336c;
  --bs-btn-border-color: #d6336c;
  --bs-btn-hover-bg: #d6336c;
  --bs-btn-hover-border-color: #d6336c;
  --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: #b02a5a;
  --bs-btn-active-border-color: #b02a5a;
  --bs-btn-active-color: var(--brand-on);
}

.btn.btn-outline-rouge{
  --bs-btn-color: #d6336c;
  --bs-btn-border-color: #d6336c;
  --bs-btn-hover-color: var(--brand-on);
  --bs-btn-hover-bg: #d6336c;
  --bs-btn-hover-border-color: #d6336c;
  --bs-btn-active-color: var(--brand-on);
  --bs-btn-active-bg: #b02a5a;
  --bs-btn-active-border-color: #b02a5a;
  --bs-btn-disabled-color: #b02a5a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #d6336c;
}



.btn-vert {
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: #157347;
  --bs-btn-active-border-color: #157347;
  --bs-btn-active-color: var(--brand-on);
}

.btn.btn-outline-vert{
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25,135,84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #157347;
  --bs-btn-active-border-color: #157347;
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
}




/* Forms */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem var(--brand-ring);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* Navs & Tabs */
.nav-link.active, .nav-pills .nav-link.active {
  background-color: var(--brand-50);
  color: var(--brand-900) !important;
  border-radius: .5rem;
}
.nav-tabs .nav-link.active {
  border-color: var(--brand) var(--brand) #fff;
  color: var(--brand-900);
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-color: var(--brand-100) var(--brand-100) transparent; }

/* Pagination */
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }
.page-link:focus { box-shadow: 0 0 0 .25rem var(--brand-ring); }

/* Badges & Alerts */
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--brand) !important; }
.alert-primary {
  color: var(--brand-900);
  background-color: var(--brand-50);
  border-color: color-mix(in srgb, var(--brand) 25%, white);
}

/* Cards & Tables */
.card { border: 1px solid var(--brand-border); border-radius: .75rem; }
.table thead th { border-bottom: 2px solid color-mix(in srgb, var(--brand) 35%, #e9ecef); }

/* Dropdown inside navbar */
.navbar .dropdown-menu { border-color: var(--brand-border); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.navbar .dropdown-item.active, .navbar .dropdown-item:active { background-color: var(--brand-50); color: var(--brand-900); }

/* Utilities */
.bg-brand { background-color: var(--brand) !important; color: var(--brand-on) !important; }
.text-brand { color: var(--brand) !important; }
.border-brand { border-color: var(--brand) !important; }

/* Force header & primary button to brand even if inline styles exist */
header { background: var(--brand) !important; color: var(--brand-on) !important; }
header a { color: var(--brand-on) !important; }
.btn.primary { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-on) !important; }
.btn.primary:hover { background: var(--brand-600) !important; border-color: var(--brand-600) !important; }