/**
 * CUSTOM BOOTSTRAP OVERRIDES
 * Strategy: Used "body" prefix and element qualifiers to increase specificity 
 * without relying on !important.
 */

/* =========================================
   1. Variables & Root Settings
   ========================================= */
:root {
  --portalThemeColor1: #c54b2a;
  --portalThemeColor2: #FFCA4B;
  --portalThemeColor3: #277493;
  --portalThemeColor4: #FEA002;
  --portalThemeColor5: #F3DBB1;
  --portalThemeColor6: #88ABA2;
  --portalThemeColor7: #FFFFFF;
  --portalThemeColor8: #2A2C2E;
  --portalThemeColor9: #E58700;
  --portalThemeColor10: #c54b2a;
  --portalThemeOnColor1: #FFFFFF;
  --portalThemeOnColor2: #2A2C2E;
  --portalThemeOnColor3: #FFFFFF;
  --portalThemeOnColor4: #2A2C2E;
  --portalThemeOnColor5: #FFFFFF;
  --portalThemeOnColor6: #2A2C2E;
  --portalThemeOnColor7: #2A2C2E;
  --portalThemeOnColor8: #FFFFFF;
  --portalThemeOnColor9: #2A2C2E;
  --portalThemeOnColor10: #FFFFFF;
}

@font-face {
  font-family: 'PP Neue Montreal', sans-serif;
  src: url('/ppneuemontreal-book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   2. Global Typography & Structure
   ========================================= */
body {
  color: #000000;
  background-color: #FFFFFF;
  font-family: 'PP Neue Montreal', sans-serif, Arial, sans-serif;
}

/* Headings - Scoped to body to override Bootstrap defaults */
body h1, body .h1,
body h2, body .h2,
body h3, body .h3,
body h4, body .h4,
body h5, body .h5,
body h6, body .h6 {
  color: #2A2C2E;
  font-family: 'PP Neue Montreal', sans-serif;
}

body h1, body .h1 { font-size: 40px; font-weight: 400; }
body h2, body .h2 { font-size: 36px; font-weight: 400; }
body h3, body .h3 { font-size: 24px; font-weight: 400; }
body h4, body .h4 { font-size: 24px; font-weight: 700; }
body h5, body .h5 { font-size: 14px; font-weight: 700; }

body p, body .p {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #2A2C2E;
}

body p.smallText {
  font-size: 16px;
}

/* =========================================
   3. Links & Navigation
   ========================================= */
/* Specificity boost: body a */
body a {
  color: #2A2C2E;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

body a:not(.btn) {
  text-decoration: underline;
}

body a:not(.btn):hover {
  color: #2A2C2E;
  text-decoration: underline;
}

/* Footer */
body footer {
  color: #2A2C2E;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 16px;
}

body footer .footer-bottom {
  background-color: #963821;
}

/* =========================================
   5. Navbar & Header
   ========================================= */
/* Navbar Backgrounds */
body .static-top.navbar-dark {
  background-color: #963821;
}

body .navbar-toggler {
  background-color: #FEA002;
  border: 1px solid #FEA002;
}

/* Navbar Links - specific chaining to beat Bootstrap nesting */
body .navbar-dark .navbar-nav > li > a, 
body .navbar-dark .navbar-nav > li.dropdown > a {
  color: #FFFFFF;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 20px;
}

body .navbar-dark .navbar-nav > li > a:hover,
body .navbar-dark .navbar-nav > li > a:focus {
  background-color: #FEA002;
  color: #000000;
  text-decoration: underline;
}

/* Active/Open States */
body .navbar-dark .navbar-nav .show > a,
body .navbar-dark .navbar-nav .active > a {
  background-color: #FEA002;
  color: #000000;
  text-decoration: underline;
}

/* Dropdowns */
body .dropdown-menu {
  color: #000000;
  background-color: #FFFFFF;
  border-radius: 0;
}

body .dropdown-menu > li > a {
  color: #000000;
  padding: 5px 20px;
}

body .dropdown-menu > li > a:hover,
body .dropdown-menu > li > a:focus {
  background-color: #FEA002;
  color: #000000;
}

/* =========================================
   6. Forms & Inputs
   ========================================= */
/* Removed !important by targeting input types specifically */
body input.form-control,
body textarea.form-control,
body select.form-control,
body .form-select {
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #ced4da;
}

body input.form-control:focus,
body textarea.form-control:focus {
  color: #000000;
  background-color: #FFFFFF;
  border-color: #FEA002;
  box-shadow: 0 0 0 0.2rem rgba(254, 160, 2, 0.25);
}

/* Placeholders */
body input::placeholder,
body textarea::placeholder {
  color: #000000;
  opacity: 1;
}

/* =========================================
   7. Tables & Lists
   ========================================= */
body .table {
  color: #000000;
  background-color: #FFFFFF;
}

body .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

body .table-hover > tbody > tr:hover {
  background-color: #f2f2f2;
}

body .card-header {
  background-color: #f2f2f2;
  color: #000000;
}

body .list-group-item {
  background-color: #FFFFFF;
  color: #000000;
}

/* =========================================
   8. Power Apps / CRM Specifics
   ========================================= */
/* Multi-Select Option Sets (MSOS) 
   Note: Some !important kept here as these often fight Inline JS Styles */
.msos-selection-container, 
.msos-container {
  color: #000000 !important;
  background: #FFFFFF !important;
}

.msos-option-selected, 
.msos-selected-display-item {
  background: #f2f2f2 !important;
}

.crmEntityFormView, 
.entitylist {
  background-color: #FFFFFF;
  color: #000000;
}

/* Flex Container Fixes */
.ppFlexContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Double class to boost specificity without !important */
.sectionBlockLayout.sectionBlockLayout .columnBlockLayout:has(.ppFlexContainer) {
  display: block;
  height: fit-content;
}

/* =========================================
   9. Theme Colors (Data Attributes)
   ========================================= */
[data-component-theme="portalThemeColor1"] { background-color: var(--portalThemeColor1); color: var(--portalThemeOnColor1); }
[data-component-theme="portalThemeColor2"] { background-color: var(--portalThemeColor2); color: var(--portalThemeOnColor2); }
[data-component-theme="portalThemeColor3"] { background-color: var(--portalThemeColor3); color: var(--portalThemeOnColor3); }
[data-component-theme="portalThemeColor4"] { background-color: var(--portalThemeColor4); color: var(--portalThemeOnColor4); }
[data-component-theme="portalThemeColor5"] { background-color: var(--portalThemeColor5); color: var(--portalThemeOnColor5); }
/* ... (Add other theme colors as needed) ... */