/* ==========================================================================
   Ropax Custom Bootstrap Overrides
   Vervangt bootstrapcustom.css - alleen Ropax-specifieke aanpassingen
   Standaard Bootstrap wordt geladen vanuit node_modules/bootstrap/dist/css/bootstrap.min.css
   ========================================================================== */

/* Ropax kleuren (bron ropax.eu)
   Primary (bruin): #803213
   Info (oranje):   #E35310
   Secondary:       #666
*/

/* ==========================================================================
   1. CSS Variable Overrides - Light Mode
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* Ropax brand kleuren */
  --bs-primary: #803213;
  --bs-secondary: #666;
  --bs-info: #E35310;

  --bs-primary-rgb: 128, 50, 19;
  --bs-secondary-rgb: 102, 102, 102;
  --bs-info-rgb: 227, 83, 16;

  /* Afgeleide kleuren - primary */
  --bs-primary-text-emphasis: #331408;
  --bs-primary-bg-subtle: #e6d6d0;
  --bs-primary-border-subtle: #ccada1;

  /* Afgeleide kleuren - secondary */
  --bs-secondary-text-emphasis: #292929;
  --bs-secondary-bg-subtle: #e0e0e0;
  --bs-secondary-border-subtle: #c2c2c2;

  /* Afgeleide kleuren - info */
  --bs-info-text-emphasis: #5b2106;
  --bs-info-bg-subtle: #f9ddcf;
  --bs-info-border-subtle: #f4ba9f;

  /* Links */
  --bs-link-color: #803213;
  --bs-link-color-rgb: 128, 50, 19;
  --bs-link-hover-color: #66280f;
  --bs-link-hover-color-rgb: 102, 40, 15;

  /* Font */
  --bs-font-sans-serif: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Focus ring */
  --bs-focus-ring-color: rgba(128, 50, 19, 0.25);
}

/* ==========================================================================
   2. CSS Variable Overrides - Dark Mode
   ========================================================================== */

[data-bs-theme="dark"] {
  /* Afgeleide kleuren - primary */
  --bs-primary-text-emphasis: #b38471;
  --bs-primary-bg-subtle: #1a0a04;
  --bs-primary-border-subtle: #4d1e0b;

  /* Afgeleide kleuren - secondary */
  --bs-secondary-text-emphasis: #a3a3a3;
  --bs-secondary-bg-subtle: #141414;
  --bs-secondary-border-subtle: #3d3d3d;

  /* Afgeleide kleuren - info */
  --bs-info-text-emphasis: #ee9870;
  --bs-info-bg-subtle: #2d1103;
  --bs-info-border-subtle: #88320a;

  /* Links */
  --bs-link-color: #b38471;
  --bs-link-hover-color: #c29d8d;
  --bs-link-color-rgb: 179, 132, 113;
  --bs-link-hover-color-rgb: 194, 157, 141;
}

/* ==========================================================================
   3. Button Overrides
   ========================================================================== */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #803213;
  --bs-btn-border-color: #803213;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6d2b10;
  --bs-btn-hover-border-color: #66280f;
  --bs-btn-focus-shadow-rgb: 147, 81, 54;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #66280f;
  --bs-btn-active-border-color: #60260e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #803213;
  --bs-btn-disabled-border-color: #803213;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #666;
  --bs-btn-border-color: #666;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #575757;
  --bs-btn-hover-border-color: #525252;
  --bs-btn-focus-shadow-rgb: 125, 125, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #525252;
  --bs-btn-active-border-color: #4d4d4d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #666;
  --bs-btn-disabled-border-color: #666;
}

.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #E35310;
  --bs-btn-border-color: #E35310;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e76d34;
  --bs-btn-hover-border-color: #e66428;
  --bs-btn-focus-shadow-rgb: 193, 71, 14;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e97540;
  --bs-btn-active-border-color: #e66428;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #E35310;
  --bs-btn-disabled-border-color: #E35310;
}

.btn-outline-primary {
  --bs-btn-color: #803213;
  --bs-btn-border-color: #803213;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #803213;
  --bs-btn-hover-border-color: #803213;
  --bs-btn-focus-shadow-rgb: 128, 50, 19;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #803213;
  --bs-btn-active-border-color: #803213;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #803213;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #803213;
}

.btn-outline-secondary {
  --bs-btn-color: #666;
  --bs-btn-border-color: #666;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #666;
  --bs-btn-hover-border-color: #666;
  --bs-btn-focus-shadow-rgb: 102, 102, 102;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #666;
  --bs-btn-active-border-color: #666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #666;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #666;
}

.btn-outline-info {
  --bs-btn-color: #E35310;
  --bs-btn-border-color: #E35310;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #E35310;
  --bs-btn-hover-border-color: #E35310;
  --bs-btn-focus-shadow-rgb: 227, 83, 16;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #E35310;
  --bs-btn-active-border-color: #E35310;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #E35310;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #E35310;
}

.btn-link {
  --bs-btn-focus-shadow-rgb: 147, 81, 54;
}

/* ==========================================================================
   4. Form Overrides - focus kleuren
   ========================================================================== */

.form-control:focus {
  border-color: #c09989;
  box-shadow: 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
}

.form-select:focus {
  border-color: #c09989;
  box-shadow: 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
}

.form-check-input:focus {
  border-color: #c09989;
  box-shadow: 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
}

.form-check-input:checked {
  background-color: #803213;
  border-color: #803213;
}

.form-check-input[type="checkbox"]:indeterminate {
  background-color: #803213;
  border-color: #803213;
}

/* Switch focus kleur */
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c09989'/%3e%3c/svg%3e");
}

/* Range slider */
.form-range::-webkit-slider-thumb {
  background-color: #803213;
}
.form-range::-webkit-slider-thumb:active {
  background-color: #d9c2b8;
}
.form-range::-moz-range-thumb {
  background-color: #803213;
}
.form-range::-moz-range-thumb:active {
  background-color: #d9c2b8;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
}

/* ==========================================================================
   5. Navigation Overrides
   ========================================================================== */

.nav {
  --bs-nav-link-hover-color: #E35310;
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #803213;
}

.pagination {
  --bs-pagination-hover-color: #E35310;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
  --bs-pagination-active-bg: #803213;
  --bs-pagination-active-border-color: #803213;
}

/* ==========================================================================
   6. Accordion Overrides
   ========================================================================== */

.accordion {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23331408' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(128, 50, 19, 0.25);
}

[data-bs-theme="dark"] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b38471'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b38471'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

/* ==========================================================================
   7. Progress Bar Override
   ========================================================================== */

.progress,
.progress-stacked {
  --bs-progress-bar-bg: #803213;
}

/* ==========================================================================
   8. Tree navigatie (serviceportaal, onderdelenbeheer, onderdelendefinities)
   ========================================================================== */

#sp-tree .accordion-button {
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
}

#sp-tree .nav-link,
.ropax-tree-nav .nav-link {
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   9. Toast notifications
   ========================================================================== */

.ropax-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
}