/* Rechtfabriek - Consolidated Main CSS File
 * Performance Optimized: All CSS in one file for faster loading
 * AUTO-GENERATED: Do not edit directly - regenerate using consolidate_css.py
 * INCLUDES: admin.css integrated (776 lines) - Phase 7B
 */

/* ===================================================================
   FOUNDATION VARIABLES
   =================================================================== */

/* Rechtfabriek - CSS Variables */

:root {
  /* Brand Colors */
  --rf-accent: #7b1fa2;
  --rf-blue: #3b5998;
  --rf-dark: #1c1f2b;
  --rf-gray: #969696;
  --rf-green: #428f4c;
  --rf-green-dark: #327339;
  --rf-light-green: #e6f9ec;

  --rf-grey: #f6f6f6;
  --rf-light: #eeeeef;
  --rf-light-gray: #dfe1e3;
  --rf-light-grey: #e9ecef;
  --rf-red: #BD1E10;
  --rf-red-dark: #9e190e;
  --rf-light-red: #F9EFEF;
  --rf-secondary-red: #9e190e;
  --rf-shadow-green: rgba(97, 206, 112, 0.4);
  --rf-shadow-red: rgba(189, 30, 16, 0.4);
  --rf-text-dark: #333333;
  --rf-text-light: #ffffff;
  --rf-white: #ffffff;

  /* Semantic Colors */
  --color-danger: #dc35c9;
  --color-dark: var(--rf-dark);
  --color-info: #17a2b8;
  --color-primary: var(--rf-green);
  --color-secondary: var(--rf-red);
  --color-success: #62e7a9;
  --color-warning: #ffc107;

  /* Text Colors */
  --rf-text-secondary: #666666;
  --text-dark: var(--rf-dark);
  --text-light: var(--rf-light);
  --text-muted: var(--rf-gray);
  --text-primary: var(--rf-dark);
  --text-secondary: var(--rf-gray);
  --text-white: #ffffff;

  /* Background Colors */
  --bg-accent: var(--rf-light-red);
  --bg-light: var(--rf-light);
  --bg-primary: var(--rf-white);
  --bg-secondary: var(--rf-light-gray);

  /* Border Colors */
  --border-dark: var(--rf-gray);
  --border-light: var(--rf-light-gray);

  /* State Colors */
  --state-archived: var(--rf-gray);
  --state-concept: #6c757d;
  --state-intern: #fd7e14;
  --state-published: var(--rf-green);
  --state-rejected: var(--color-danger);

  /* Other Variables */
  --container-max-width: 1200px;
  --font-primary: 'Lato', sans-serif;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-md: 1.125rem;
  --font-size-sm: 0.875rem;
  --font-size-xl: 1.5rem;
  --font-size-xs: 0.75rem;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --header-height-lg: 50px;
  --header-height-md: 70px;
  --header-height-sm: 60px;
  --header-height-xs: 60px;
  --menu-active-color: var(--rf-red);
  --menu-default-color: var(--rf-dark);
  --menu-hover-bg: rgba(220, 53, 69, 0.1);
  --menu-hover-color: var(--rf-red);
  --menu-item-padding: 0.75rem 1rem;
  --menu-main-hover-bg: #f8f8f8;
  --radius-lg: 1rem;
  --radius-md: 0.5rem;
  --radius-pill: 50rem;
  --radius-sm: 0.25rem;
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
  --spacing-2xl: 3rem;
  --spacing-lg: 1.5rem;
  --spacing-md: 1rem;
  --spacing-sm: 0.5rem;
  --spacing-xl: 2rem;
  --spacing-xs: 0.25rem;
  --topbar-height: 40px;
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  --z-dropdown: 1000;
  --z-fixed: 1030;
  --z-modal: 1050;
}

/* ===================================================================
   FOUNDATION BASE
   =================================================================== */

/* Rechtfabriek - Base Styles */

/* Reset & Base Elements */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Buffer voor bookmark navigation - toont titel altijd */
}

body {
  /* Typography */
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Layout */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100%;
  overflow-x: hidden;

  /* Styling */
  background-color: #FFFFFF; /* Zorgt dat alles na de footer wit is */

  /* Header spacing */
  padding-top: 0;
  transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--text-primary);
}

h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

h5 {
  font-size: var(--font-size-md);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

small {
  font-size: var(--font-size-sm);
}

/* Lists */
ul, ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
}

ul li, ol li {
  margin-bottom: var(--spacing-xs);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* Tables */
table {
  width: 100%;
  margin-bottom: var(--spacing-md);
  border-collapse: collapse;
}

th, td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

th {
  font-weight: var(--font-weight-semibold);
  background-color: var(--bg-secondary);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
}

/* Responsive Typography */
/* Only hide [Nieuw] column on very small screens (below 768px) */
@media (max-width: 767px) {
    .rf-table th:nth-child(4), 
    .rf-table td:nth-child(4) {
        display: none;
    }
}


/* Hero Overlay Container - BASE RULE (must come before media queries) */
.hero-overlay-container {
    position: absolute;
    bottom: -60px; /* Base: onder hero positioneren */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    max-width: 1000px;
    padding: 0 2rem;
    animation: slideUpFadeIn 0.6s ease-out 0.2s both;
}

@media (max-width: 768px) {
html {
    font-size: 14px;
  }



  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }
.hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p.lead {
        font-size: 1.1rem;
    }

    .hero-img {
        height: 50vh; /* Aangepast naar 50vh op mobile voor betere proportie */
    }

    .pageblock-hero .hero-buttons a {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.75rem;
        text-align: center;
    }
.hero-wrapper .hero-content {
        top: 30%;
    }

    .hero-overlay-container {
        bottom: -90px; /* 100px lager: overlay onder hero positioneren */
        transform: translateX(-50%);
        max-width: 75%; /* Narrower on tablets - was 90% */
        padding: 0 1rem;
    }

    .hero-three-column-container {
        flex-direction: column;
    }

    .hero-column {
        padding: 0.9375rem 1.125rem;
    }
    
    /* Add margin for tablet view too - overlay is at -90px */
    .betaalbare-rechtsbijstand-section {
        margin-top: 150px; /* Push section down for tablet overlay */
    }

    .banner-text {
        font-size: 1rem;
    }

    .google-logo-container svg {
        width: 22px;
        height: 22px;
    }

    .review-rating {
        font-size: 1.1rem;
    }

    .review-subtitle {
        font-size: 0.85rem;
    }

    .sdg-logo {
        height: 45px;
    }
.rf-version-actions {
        justify-content: center;
        gap: 0.25rem;
    }

    .rf-comparison-content {
        grid-template-columns: 1fr;
    }

    .rf-comparison-old {
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }

    .rf-version-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .rf-restore-actions {
        flex-direction: column;
    }
.rf-document-iframe {
        height: 500px;
    }

    .rf-document-viewer .rf-btn-group {
        flex-direction: column;
        width: 100%;
    }

    /* REMOVED: Bootstrap .btn reference - use .rf-btn instead */
    .rf-document-viewer .rf-btn-group .rf-btn {
        border-radius: 0.375rem;
        margin-bottom: 0.25rem;
    }
/* Mobile touch feedback - subtielere hover */
.betaalbare-rechtsbijstand-section {
        padding: 40px 0;
    }

    .rechtsbijstand-title {
        font-size: 1.8rem;
    }

    .rechtsbijstand-intro,
    .rechtsbijstand-description,
    .rechtsbijstand-footer,
    .rechtsbijstand-process {
        font-size: 0.95rem;
    }

.production-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .version-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .version-actions {
        width: 100%;
        justify-content: space-between;
    }

    .version-history-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0.75rem;
    }

    .production-card {
        padding: 0.75rem;
    }
.faq-contact-section-fullwidth {
        padding: 2rem 0;
    }

    .faq-contact-section-fullwidth h3 {
        font-size: 1.5rem;
    }

    .faq-contact-section-fullwidth p {
        font-size: 1rem;
    }

    .faq-contact-section-fullwidth .d-flex {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* REMOVED: Bootstrap .btn - use .rf-btn instead */
    .faq-contact-section-fullwidth .rf-btn {
        width: 200px;
    }
.faq-section {
        padding: 3rem 0 2rem 0;
    }

    .faq-description h2 {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    .faq-description p {
        font-size: 0.95rem;
    }

    .faq-section .mini-faq-header h4 {
        font-size: 1.5rem;
    }
.filter-select {
        width: auto;
        max-width: none;
        flex: 1;
        min-width: 140px;
    }
.timeline-container {
        max-height: 70vh; /* Meer ruimte op mobile */
    }

    /* Badge layout improvements voor tablet */
    .timeline-header {
        flex-wrap: wrap;
    }

    .timeline-badges {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
        gap: 0.35rem;
    }

    .timeline-badges .badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }

    /* Timeline item mobile layout - nog compacter */
    .timeline-item {
        padding: 0.6rem;
        margin-bottom: 0.6rem; /* Minder ruimte tussen items */
    }

    /* Mobile header adjustments */
    .timeline-header {
        gap: 0.5rem;
    }

    .timeline-title {
        font-size: 0.9rem;
    }

    .timeline-icon {margin-right: 0.5rem;
    }

    /* Date and actions mobile adjustments */
    .timeline-date {
        font-size: 0.8rem;
    }

    /* Content preview mobile spacing */
    .content-preview {margin-top: 0.5rem;margin-bottom: 0.5rem;
    }

    .content-preview p {
        font-size: 0.85rem;
        line-height: 1.3;
    }

    /* Mobile concept banner adjustments */
    .concept-banner {
        padding: 0.75rem;
    }

    .concept-banner .d-flex {
        flex-direction: column;
        gap: 1rem;
    }
.modal-lg {
        max-width: 95%;
        margin: 1rem auto;
    }

    .modal-lg .modal-body,
    .modal-lg .modal-header,
    .modal-lg .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .modal textarea.form-control {
        min-height: 100px;
    }
.rf-party-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .rf-parties-filters {
        flex-direction: column;
        gap: 0.5rem;
    }

    .rf-parties-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

.rf-feedback-badges {
        justify-content: flex-start;
    }

    .rf-feedback-status {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .rf-feedback-actions {
        justify-content: center;
    }

    .rf-feedback-form-footer {
        flex-direction: column;
    }
.rf-editor-toolbar {
        justify-content: center;
    }

    .rf-editor-toolbar-group {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .rf-editor-toolbar-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .rf-cms-btn .rf-btn-text {
        display: none;
    }

    .rf-cms-btn {
        min-width: 32px;
        padding: 0.375rem;
    }
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

/* Image Selector specific grid - smaller thumbnails like Media Beheer */
body .container-fluid .image-selector-grid.media-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    grid-template-rows: unset !important;
    gap: 0.5rem !important;
}

/* Extra desktop specificity - force override */
@media (min-width: 769px) {
    body .container-fluid .image-selector-grid.media-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        grid-template-rows: unset !important;
        gap: 0.5rem !important;
    }
}

body .container-fluid .image-selector-grid .media-card-img {
    height: 80px !important;
}

/* Responsive .media-grid */
@media (max-width: 768px) {
    .media-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.5rem;
    }
    
    /* Image selector responsive tablet */
    body .container-fluid .image-selector-grid.media-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
        gap: 0.5rem !important;
    }
    
    body .container-fluid .image-selector-grid .media-card-img {
        height: 70px !important;
    }
}

@media (max-width: 480px) {
    .media-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.5rem;
    }
    
    /* Image selector responsive mobile */
    body .container-fluid .image-selector-grid.media-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 0.25rem !important;
    }
    
    body .container-fluid .image-selector-grid .media-card-img {
        height: 60px !important;
    }
}

    .media-card-img {
        height: 120px;
    }

    .media-card-body {
        padding: 0.5rem;
    }
/* CLEANED: RF button group styling only */
.rf-btn-group-sm > .rf-btn-outline-green,
    .rf-btn-group-sm > .rf-btn-outline-red {
        min-width: 36px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* Table cell sizing moved to consolidated responsive section below */
}

/* Code Blocks */
code, pre {
  font-family: monospace;
  font-size: var(--font-size-sm);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: 0.15rem 0.3rem;
}

pre {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  overflow-x: auto;
}

/* Form Elements (base styles, more in components/forms.css) */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Custom Select Dropdown Styling - Consistent with RF Dropdown Menus */
select.form-select,
select.form-control {
  background-color: white;
  border: 1px solid var(--border-light, #ced4da);
  transition: var(--transition-base);
}

select.form-select:focus,
selectinput.form-control:focus, select.form-control:focus, textarea.form-control:focus {
  outline: none;
}

select.form-select:focus:invalid,
selectinput.form-control:focus, select.form-control:focus, textarea.form-control:focus:invalid {
  border-color: var(--rf-red);
  box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25);
}

/* Bootstrap Select Dropdown Option Styling Override */
.dropdown-menu {
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  transition: var(--transition-base);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--rf-light, #fff3f3);
  color: var(--rf-red);
  text-decoration: none;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--rf-red);
  color: white;
}

/* Native Select Option Styling - Limited browser support */
select option {
  padding: 0.5rem;
}

select option:checked,
select option:hover {
    background-color: #F9EFEF; /* RF roze achtergrond voor consistentie */
    color: var(--rf-red); /* RF rode tekst */
}

/* Ensure all select dropdowns have RF styling */
select:not(.form-control):not(.form-select) option:hover,
select:not(.form-control):not(.form-select) option:checked {
    background-color: #F9EFEF !important; /* RF roze achtergrond */
    color: var(--rf-red) !important; /* RF rode tekst */
}

/* ===================================================================
   ORIGINAL RF BUTTON SYSTEM - FULLY RESTORED
   Complete restoration of working button system
   =================================================================== */

/* ===== RF BUTTON BASE (ORIGINAL WORKING VERSION) ===== */
.rf-btn {
    /* Bootstrap .btn base styling replica for consistency */
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: 0.375rem;

    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    margin-bottom: 0;
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--bs-btn-border-width) solid transparent;
    border-radius: var(--bs-btn-border-radius);
    background-color: transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.rf-btn:hover {
    text-decoration: none;
}

.rf-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(189, 30, 16, 0.25);
}

.rf-btn:active {
    transform: translateY(0);
    transition: all 0.1s ease;
}

.rf-btn:disabled,
.rf-btn.disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* ===== RF BUTTON SIZES ===== */
.rf-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-md);
}

.rf-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-xs);
}

.rf-btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-xs);
}

/* ===== RF BUTTON BASE STYLING FOR ALL VARIANTS ===== */
/* All RF button classes inherit base .rf-btn styling automatically */
/* CLEANED: Removed semantic classes - keeping color-based only */
.rf-btn-info,
.rf-btn-light,
.rf-btn-dark,
.rf-btn-green,
.rf-btn-red,
.rf-btn-outline-light,
.rf-btn-outline-dark,
.rf-btn-outline-green,
.rf-btn-outline-red {
    /* Bootstrap .btn base styling replica */
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: 0.375rem;

    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--bs-btn-border-width) solid transparent;
    border-radius: var(--bs-btn-border-radius);
    background-color: transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* ===== RF BUTTON SHAPES (OVERRIDE BASE STYLING) ===== */
.rf-btn-pill {
    border-radius: 50rem;
}

/* LIGHT - Light Gray */
.rf-btn-light {
    color: var(--rf-dark);
    background-color: var(--rf-light, #fff3f3);
    border-color: var(--rf-light, #fff3f3);
}

.rf-btn-light:hover,
.rf-btn-light:focus {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    transform: translateY(-4px);
    color: var(--rf-red);
    box-shadow: 0 8px 20px rgba(245, 245, 245, 0.3);
}

/* DARK - Dark Gray */
.rf-btn-dark {
    color: var(--rf-white);
    background-color: var(--rf-dark);
    border-color: var(--rf-dark);
}

.rf-btn-dark:hover,
.rf-btn-dark:focus {
    background-color: #23272b;
    border-color: #23272b;
    color: var(--rf-white);
    box-shadow: 0 8px 20px rgba(51, 51, 51, 0.3);
}

/* ===== RF OUTLINE BUTTONS ===== */

.rf-btn-outline-green {
    color: var(--rf-red);
    background-color: transparent;
    border-color: var(--rf-red);
}

.rf-btn-outline-green:hover,
.rf-btn-outline-green:focus {
    background-color: var(--rf-red);
    border-color: var(--rf-red);
    color: var(--rf-white);
    box-shadow: 0 8px 20px var(--rf-shadow-red);
}

.rf-btn-outline-red {
    color: var(--text-secondary);
    background-color: transparent;
    border-color: var(--border-light);
}

.rf-btn-outline-red:hover,
.rf-btn-outline-red:focus {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--rf-dark);
}

/* ===== RF BUTTON ADDITIONAL CLASSES ===== */

/* RF Button Close - white for better visibility on rf-red headers */
.rf-btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #fff;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='m.235.739l15.026 15.026-0.739 0.739-15.026-15.026z'/%3e%3cpath d='m15.261.739l-15.026 15.026-0.739-0.739 15.026-15.026z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.8;
  cursor: pointer;
}

.rf-btn-close:hover {
  color: #fff;
  text-decoration: none;
  opacity: 1;
}

.rf-btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
  opacity: 1;
}

.rf-btn-close:disabled,
.rf-btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.4;
}

/* RF Button Group - equivalent to Bootstrap .rf-btn-group */
.rf-btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.rf-btn-group > .rf-btn {
  position: relative;
  flex: 1 1 auto;
}

.rf-btn-group > .rf-btn-check:checked + .rf-btn,
.rf-btn-group > .rf-btn-check:focus + .rf-btn,
.rf-btn-group > .rf-btn:hover,
.rf-btn-group > .rf-btn:focus,
.rf-btn-group > .rf-btn:active,
.rf-btn-group > .rf-btn.active {
  z-index: 1;
}

.rf-btn-group > .rf-btn:not(:first-child) {
  margin-left: -1px;
}

.rf-btn-group > .rf-btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rf-btn-group > .rf-btn:nth-child(n + 3),
.rf-btn-group > :not(.rf-btn-check) + .rf-btn,
.rf-btn-group > .rf-btn-group:not(:first-child) > .rf-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* RF Button Group Small - equivalent to Bootstrap .rf-btn-group-sm */
.rf-btn-group-sm > .rf-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

/* RF Button Toolbar - equivalent to Bootstrap .btn-toolbar */
.rf-btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem;
}

/* Payment Cards (from templates/profile/my_payments.html) */
.payment-card {
  transition: transform 0.2s ease-in-out;
}

.payment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Icon utilities */
.rf-icon-xl {
  font-size: 4rem !important;
}

/* Flex utilities */
.rf-flex-nowrap {
  flex-wrap: nowrap !important;
}

.rf-flex-1 {
  flex: 1 !important;
}

.rf-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.rf-min-w-0 {
  min-width: 0 !important;
}

.rf-overflow-hidden {
  overflow: hidden !important;
}

.rf-whitespace-nowrap {
  white-space: nowrap !important;
}

/* Document Preview Modal Styling (from templates/components/document_preview_modal.html) */
.preview-text-content {
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 0.375rem;
  max-height: 70vh;
  overflow-y: auto;
  margin: 1rem;
  border: 1px solid #dee2e6;
}

.preview-image-content {
  text-align: center;
  padding: 1rem;
  max-height: 80vh;
  overflow: auto;
}

.preview-image-content img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.image-zoom-controls {
  background-color: rgba(248, 249, 250, 0.95);
  border-radius: 0.375rem;
  padding: 0.75rem;
  display: inline-block;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-zoom-controls .btn {
  margin: 0 0.25rem;
  border: 1px solid #dee2e6;
}

.zoom-btn {
  color: #fff !important;
  border-color: #fff !important;
  background-color: transparent !important;
}

.zoom-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #fff !important;
  color: #fff !important;
}

.zoom-btn:focus,
.zoom-btn:active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: #fff !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}

.zoomable-image {
  transition: transform 0.3s ease, cursor 0.1s ease;
}

.zoomable-image:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.preview-pdf-content {
  height: 80vh;
  border: none;
  overflow: hidden;
}

.modal-body.pdf-preview {
  overflow: hidden !important;
}

#documentPreviewModal.pdf-modal .modal-body {
  overflow: hidden !important;
}

#documentPreviewModal.pdf-modal .preview-pdf-content iframe {
  border-radius: 0 !important;
}

.preview-markdown-content {
  padding: 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
  line-height: 1.6;
}

.preview-markdown-content h1,
.preview-markdown-content h2,
.preview-markdown-content h3 {
  color: #495057;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.preview-markdown-content h1 {
  font-size: 1.5rem;
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 0.5rem;
}

.preview-markdown-content h2 {
  font-size: 1.3rem;
}

.preview-markdown-content h3 {
  font-size: 1.1rem;
}

.preview-markdown-content p {
  margin-bottom: 1rem;
}

.preview-markdown-content ul,
.preview-markdown-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.preview-markdown-content blockquote {
  border-left: 4px solid #007bff;
  margin: 1rem 0;
  padding-left: 1rem;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
}

.preview-markdown-content code {
  background-color: #f1f3f4;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
}

.preview-markdown-content pre {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  border: 1px solid #dee2e6;
}

.preview-markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.preview-markdown-content th,
.preview-markdown-content td {
  border: 1px solid #dee2e6;
  padding: 0.5rem;
  text-align: left;
}

.preview-markdown-content th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.document-info-bar {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.document-info-bar .badge {
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.message-content-display {
  line-height: 1.6;
}

.message-content-display h1,
.message-content-display h2,
.message-content-display h3,
.message-content-display h4,
.message-content-display h5,
.message-content-display h6 {
  color: #BD1E10;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.message-content-display h1 { font-size: 1.5rem; }
.message-content-display h2 { font-size: 1.3rem; }
.message-content-display h3 { font-size: 1.1rem; }

.message-content-display p {
  margin-bottom: 1rem;
}

.message-content-display ul,
.message-content-display ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.message-content-display li {
  margin-bottom: 0.25rem;
}

.message-content-display blockquote {
  border-left: 4px solid #BD1E10;
  margin: 1rem 0;
  padding-left: 1rem;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
}

.message-content-display code {
  background-color: #f1f3f4;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
}

.message-content-display pre {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  border: 1px solid #dee2e6;
}

.message-content-display table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.message-content-display th,
.message-content-display td {
  border: 1px solid #dee2e6;
  padding: 0.5rem;
  text-align: left;
}

.message-content-display th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.staff-message-preview {
  line-height: 1.5;
}

.staff-message-preview h1,
.staff-message-preview h2,
.staff-message-preview h3 {
  font-size: inherit;
  color: #BD1E10;
  font-weight: 600;
  margin: 0;
  display: inline;
}

.staff-message-preview p {
  margin: 0;
  display: inline;
}

.staff-message-preview strong {
  color: #BD1E10;
  font-weight: 600;
}

.staff-message-preview em {
  font-style: italic;
  color: #666;
}

.compact-preview {
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.compact-preview br {
  display: none;
}

.compact-preview p {
  margin: 0;
  line-height: inherit;
}

/* Image Block Styling (from templates/blocks/image.html) */
.image-block {
  clear: both;
  overflow: hidden;
}

.image-text-content {
  line-height: 1.6;
}

.image-text-content h1,
.image-text-content h2,
.image-text-content h3,
.image-text-content h4,
.image-text-content h5,
.image-text-content h6 {
  margin-top: 0;
}

/* Image Block Enhanced Features */
.rf-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rf-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced Image Block Styling */
.image-block img.rounded-circle {
  object-fit: cover;
}
.image-block .card {
  transition: box-shadow 0.3s ease;
}
.image-block .card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Profile picture specific styling */
.image-block .rounded-circle {
  flex-shrink: 0;
}

/* ===== MODERNE CONTENT TIMELINE (voor [timeline] shortcode) ===== */
div.rf-timeline {
  position: relative !important;
  max-width: 1200px !important;
  margin: 2rem auto !important;
  padding: 2rem 1rem !important;
  clear: both !important;
  overflow: visible !important;
}

/* Centrale lijn - FIXED: altijd zichtbaar */
div.rf-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: #BD1E10 !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  display: block !important;
}

/* Timeline item container */
div.rf-timeline div.rf-timeline-item {
  position: relative !important;
  margin-bottom: 4rem !important;
  display: flex !important;
  align-items: center !important;
  min-height: 120px !important;
}

/* Gradual zigzag overlap effect - ALLEEN DESKTOP */
div.rf-timeline div.rf-timeline-item:nth-child(2) {
  margin-top: -1.5rem !important;
}

div.rf-timeline div.rf-timeline-item:nth-child(3) {
  margin-top: -2.5rem !important;
}

div.rf-timeline div.rf-timeline-item:nth-child(n+4) {
  margin-top: -3rem !important;
}

/* Afwisselende layout */
div.rf-timeline div.rf-timeline-item:nth-child(odd) {
  flex-direction: row !important;
}

div.rf-timeline div.rf-timeline-item:nth-child(even) {
  flex-direction: row-reverse !important;
}

/* Content kaarten - FIXED: padding en marges */
div.rf-timeline .rf-timeline-content {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important;
  border: 1px solid #e9ecef !important;
  border-left: 4px solid #BD1E10 !important;
  padding: 2rem !important;
  margin: 0 3rem !important;
  position: relative !important;
  flex: 1 !important;
  max-width: calc(50% - 4rem) !important;
  transition: all 0.3s ease !important;
  z-index: 3 !important;
}

div.rf-timeline .rf-timeline-content:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* Pijltjes naar centrale lijn */
div.rf-timeline .rf-timeline-content::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border: 15px solid transparent !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

/* Links kaart - pijltje naar rechts */
div.rf-timeline div.rf-timeline-item:nth-child(odd) .rf-timeline-content::before {
  right: -30px !important;
  border-left-color: white !important;
  border-right-color: transparent !important;
}

/* Rechts kaart - pijltje naar links */
div.rf-timeline div.rf-timeline-item:nth-child(even) .rf-timeline-content::before {
  left: -30px !important;
  border-right-color: white !important;
  border-left-color: transparent !important;
}

/* Timeline nodes (cirkels) - FIXED: groter en met icon */
div.rf-timeline .rf-timeline-node {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  background: white !important;
  border: 4px solid #BD1E10 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

div.rf-timeline .rf-timeline-node i {
  color: #BD1E10 !important;
  font-size: 1.2rem !important;
  display: block !important;
}

/* Default icon als er geen specifiek icon is */
div.rf-timeline .rf-timeline-node i.bi-circle-fill {
  font-size: 0.8rem !important;
}

/* Stap labels - FIXED: positionering zonder border */
div.rf-timeline .rf-timeline-step {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #BD1E10 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  z-index: 5 !important;
  white-space: nowrap !important;
}

/* Positionering stap labels - FIXED: tegenovergestelde kant van kaartjes */
div.rf-timeline div.rf-timeline-item:nth-child(odd) .rf-timeline-step {
  left: calc(50% + 80px) !important; /* Kaart rechts, stap links */
}

div.rf-timeline div.rf-timeline-item:nth-child(even) .rf-timeline-step {
  right: calc(50% + 80px) !important; /* Kaart links, stap rechts */
}

/* Content styling */
div.rf-timeline .rf-timeline-title {
  color: #1c1f2b !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
}

/* Desktop: hide mobile-only titles (they appear in the step buttons) */
div.rf-timeline .rf-timeline-title.rf-timeline-mobile-only {
  display: none !important;
}

div.rf-timeline .rf-timeline-description {
  color: #666666 !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

/* Mobile responsive - FIXED: lijn links, cards rechts */
@media (max-width: 768px) {
  div.rf-timeline::before {
    left: 45px !important; /* Verplaats lijn naar midden van cirkels */
    width: 3px !important;
  }

  div.rf-timeline div.rf-timeline-item {
    flex-direction: row !important;
    margin-bottom: 2rem !important;
  }

  /* Reset alle overlap effects op mobiel - behoud white space */
  div.rf-timeline div.rf-timeline-item:nth-child(2),
  div.rf-timeline div.rf-timeline-item:nth-child(3),
  div.rf-timeline div.rf-timeline-item:nth-child(n+4) {
    margin-top: 0 !important;
  }

  div.rf-timeline .rf-timeline-content {
    max-width: none !important;
    margin: 0 0 0 5rem !important; /* Meer ruimte voor nieuwe lijn positie */
    padding: 1.5rem !important;
  }

  /* Linker border voor alle kaartjes op mobiel */
  div.rf-timeline div.rf-timeline-item .rf-timeline-content {
    border-left: 4px solid #BD1E10 !important;
    border-right: none !important;
    border-top: 1px solid #e9ecef !important;
    border-bottom: 1px solid #e9ecef !important;
  }

  div.rf-timeline .rf-timeline-content::before {
    left: -50px !important; /* Pijltje moet verder naar links voor nieuwe lijn positie */
    right: auto !important;
    border-right-color: white !important;
    border-left-color: transparent !important;
  }

  /* MOBILE OVERRIDE - Force circle position on mobile */
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node {
    left: 5px !important; /* Lijn op 25px - halve cirkel (20px) = 5px start */
    transform: none !important; /* Geen translateX meer */
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    margin-left: 0 !important;
  }

  div.rf-timeline .rf-timeline-node i {
    font-size: 1rem !important;
  }

  /* MOBILE: Show titles in content (hidden on desktop) */
  div.rf-timeline .rf-timeline-title.rf-timeline-mobile-only {
    display: block !important;
  }

  /* MOBILE ICONS - Support chevron icons with better centering */
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-chevron-left,
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-chevron-right,
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-arrow-left,
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-arrow-right {
    font-family: 'bootstrap-icons' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Force all timeline icons to point right on mobile */
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-chevron-left::before,
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-chevron-right::before,
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-arrow-left::before,
  body div.rf-timeline div.rf-timeline-item .rf-timeline-node i.bi-arrow-right::before {
    content: "❯" !important; /* Better arrow character */
  }

  div.rf-timeline .rf-timeline-step {
    display: none !important;
  }
}

/* Modal-specific RF Button Close styling - white for dark headers */
.modal .rf-btn-close,
.modal-header .rf-btn-close {
  color: #ffffff;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='m.235.739l15.026 15.026-0.739 0.739-15.026-15.026z'/%3e%3cpath d='m15.261.739l-15.026 15.026-0.739-0.739 15.026-15.026z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal .rf-btn-close:hover,
.modal-header .rf-btn-close:hover {
  color: #ffffff;
  opacity: 0.75;
}

/* Light modal headers - dark close button */
.modal-header.bg-light .rf-btn-close,
.modal-header.bg-white .rf-btn-close {
  color: #333333;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath d='m.235.739l15.026 15.026-0.739 0.739-15.026-15.026z'/%3e%3cpath d='m15.261.739l-15.026 15.026-0.739-0.739 15.026-15.026z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal-header.bg-light .rf-btn-close:hover,
.modal-header.bg-white .rf-btn-close:hover {
  color: #000000;
  background: rgba(0, 0, 0, 0.1);
}

/* ===== RF BACKGROUND UTILITIES ===== */

.rf-bg-primary {background-color: var(--rf-red); }
.rf-bg-secondary {background-color: var(--bg-secondary, #f8f9fa); }
.rf-bg-success {background-color: var(--rf-green); }
.rf-bg-danger {background-color: var(--rf-red-dark); }
.rf-bg-warning {background-color: var(--color-warning, #f0ad4e); }
.rf-bg-info {background-color: var(--color-info, #17a2b8); }
.rf-bg-light {background-color: var(--rf-light, #fff3f3); }
.rf-bg-dark {background-color: var(--rf-dark); }
.rf-bg-white {background-color: var(--rf-white); }
.rf-bg-accent {background-color: var(--rf-light-red, #fff3f3); }

/* ===== RF TEXT UTILITIES ===== */

.rf-text-primary {color: var(--rf-red); }
.rf-text-secondary {color: var(--text-secondary); }
.rf-text-success {color: var(--rf-green); }
.rf-text-danger {color: var(--rf-red-dark); }
.rf-text-warning {color: var(--color-warning, #f0ad4e); }
.rf-text-info {color: var(--color-info, #17a2b8); }
.rf-text-light {color: var(--text-light); }
.rf-text-dark {color: var(--rf-dark); }
.rf-text-white {color: var(--rf-white); }
.rf-text-muted {color: var(--text-muted); }

/* ===== ORIGINAL RF CLASSES (Restored from Backup) ===== */

.rf-btn-green {
    background-color: var(--rf-green);
    color: var(--rf-white);
    border-color: var(--rf-green);
}

.rf-btn-green:hover,
.rf-btn-green:focus {
    background-color: var(--rf-green-dark);
    border-color: var(--rf-green-dark);
    color: var(--rf-white);
    box-shadow: 0 8px 20px var(--rf-shadow-green);
    transform: translateY(-4px);
    text-decoration: none;
}

.rf-btn-green:active {
    box-shadow: 0 2px 4px var(--rf-shadow-green);
    color: var(--rf-white);
}

.rf-btn-red {
    background-color: var(--rf-red);
    color: var(--rf-white);
    border-color: var(--rf-red);
}

.rf-btn-red:hover,
.rf-btn-red:focus {
    background-color: var(--rf-red-dark);
    border-color: var(--rf-red-dark);
    color: var(--rf-white);
    box-shadow: 0 8px 20px var(--rf-shadow-red);
    transform: translateY(-4px);
    text-decoration: none;
}

/* ===== OUTLINE BUTTONS (ORIGINAL STYLING) ===== */
.rf-btn-outline-green {
    background: white;
    border-color: var(--rf-green);
    color: var(--rf-green);
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}

.rf-btn-outline-green:hover,
.rf-btn-outline-green:focus {
    background: var(--rf-green);
    border-color: var(--rf-green);
    color: white;
    box-shadow: 0 8px 20px var(--rf-shadow-green);
    transform: translateY(-4px);
    text-decoration: none;
}

.rf-btn-outline-red {
    background: white;
    border-color: var(--rf-red);
    color: var(--rf-red);
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}

.rf-btn-outline-red:hover,
.rf-btn-outline-red:focus {
    background: var(--rf-red);
    border-color: var(--rf-red);
    color: white;
    box-shadow: 0 8px 20px var(--rf-shadow-red);
    transform: translateY(-4px);
    text-decoration: none;
}

/* ===== BOOTSTRAP COMPATIBILITY LAYER REMOVED ===== */
/* All Bootstrap .btn classes have been migrated to RF equivalents */
/* Use .rf-btn-* classes instead of .btn-* classes */

/* Horizontal Rule */
hr {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border: 0;
  border-top: 1px solid var(--border-light);
}

/* Blockquote */
blockquote {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--color-primary);
  background-color: var(--bg-secondary);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Focus Management */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(189, 30, 16, 0.25);
  outline-offset: 2px;
}

/* Bookmark Scroll Offset - Algemene regel voor alle bookmark targets */
*[id] {
  scroll-margin-top: 80px; /* Buffer voor alle bookmark navigatie */
}

/* Hero Page Layout - Remove top padding from main for seamless header-hero connection */
body.hero-page main {
  padding-top: 0;
}

/* Ensure hero section connects directly to header */
.hero-page .hero,
.hero-page .hero-wrapper {
  margin-top: 0;
}

/* ===== AUTHENTICATED LAYOUT FOUNDATION ===== */
.rf-authenticated-layout {
    background-color: var(--rf-light-gray); /* Licht grijze achtergrond - niet te licht */
    min-height: 100vh;
}

.rf-content-card {
    background: var(--bg-primary); /* Wit voor content cards */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-light);
}

/* Basis tab styling override voor Bootstrap */
.rf-authenticated-layout .nav-tabs {
    border-bottom: 2px solid var(--border-light);
}

.rf-authenticated-layout .nav-tabs .nav-link {color: rgba(51, 51, 51, 0.6); /* Grayed out inactieve tabs */
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    margin-right: 4px;
    margin-bottom: -2px;
    transition: all 0.3s ease;
}

.rf-authenticated-layout .nav-tabs .nav-link:not(.active):hover {background: rgba(255, 255, 255, 0.9);
   color: var(--rf-red);
   border-color: var(--rf-light-red);
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(189, 30, 16, 0.1);
}

.rf-authenticated-layout .nav-tabs .nav-link.active {background: var(--rf-light-red); /* Zeer subtiele rode tint */
   color: var(--rf-red);border-color: var(--rf-red);
    border-bottom: 2px solid var(--rf-red);
    position: relative;
    z-index: 10;
    box-shadow: 0 -2px 8px var(--bg-accent); /* Schaduw voor actieve tab */
}

/* Tab Content achtergrond */
.rf-authenticated-layout .tab-content {background: var(--bg-accent); /* Zeer subtiele rode tint voor eenheid */
    border-radius: 0 0 8px 8px;
    min-height: 400px;
    padding: 2rem;
}

/* ===== STATUS BADGES ENHANCEMENT (ECHTE STICKERTJE EFFECT) ===== */
.rf-authenticated-layout .rf-status-badge {display: inline-flex;
    align-items: center;padding: 0.5rem 0.875rem;/* Meer padding voor sticker effect */
    border-radius: 14px; /* Meer afgeronde hoeken */
    font-size: 0.875rem;
    font-weight: 600; /* Dikker voor leesbaarheid */
    gap: 0.5rem; /* Spatie tussen icon en tekst - VERGROOT */
    border: 2px solid; /* Dikke border voor sticker effect */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); /* Diepere schaduw */
    transition: all 0.2s ease;
    position: relative;
    cursor: default;
    white-space: nowrap;
    text-shadow: none;
}

/* Hover effect voor interactiviteit */
.rf-authenticated-layout .rf-status-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12);
}

/* Icon sizing binnen badge - BELANGRIJKE VERBETERING */
.rf-authenticated-layout .rf-status-badge i {
    font-size: 0.75rem; /* Icon iets kleiner dan tekst */
    line-height: 1;
    display: inline-block;
    margin: 0; /* Reset eventuele margins */
    margin-right: 0.35em !important; /* FIXED: Add space between icon and text */
}

/* Status kleuren met Rechtfabriek huisstijl */
.rf-authenticated-layout .rf-status-high {
   background-color: var(--rf-red);border-color: #9e190e;color: white;
}

.rf-authenticated-layout .rf-status-medium {background-color: var(--color-warning);border-color: #e0a800;
   color: var(--rf-dark);
}

.rf-authenticated-layout .rf-status-actief,
.rf-authenticated-layout .rf-status-active,
.rf-authenticated-layout .rf-status-goedgekeurd {background-color: var(--rf-green);border-color: #4cae5a;color: white;
}

.rf-authenticated-layout .rf-status-concept {background-color: var(--rf-light);border-color: var(--rf-light-gray);
   color: var(--rf-dark);
}

.rf-authenticated-layout .rf-status-verzonden {
   background-color: var(--rf-red);border-color: #9e190e;color: white;
}

/* Dashboard cards binnen authenticated layout */
.rf-authenticated-layout .dashboard-card {background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    border: 1px solid var(--rf-light-gray);
}

/* Detail labels verbetering */
.rf-authenticated-layout .rf-detail-label {
    font-size: 0.875rem;
    font-weight: 700; /* Meer bold */
   color: var(--rf-dark); /* Donkerder voor contrast */
    margin-bottom: 0.25rem;
    display: block;
}

.rf-authenticated-layout .rf-detail-label::after {
    content: ":";
    margin-left: 2px;
}

/* Detail values met icon spacing */
.rf-authenticated-layout .rf-detail-value {
    font-size: 1rem;color: var(--rf-gray); /* Onderscheidend van labels */
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Spatie tussen icon en tekst */
}

.rf-authenticated-layout .rf-detail-value i {
    color: var(--rf-red);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ===================================================================
   FOUNDATION UTILITIES
   =================================================================== */

/* Rechtfabriek - Custom Utility Classes Only */
/* Bootstrap utilities worden geladen via bootstrap.min.css */
/* Hier alleen custom RF utilities met CSS variables */

/* ===== CUSTOM FONT WEIGHT UTILITIES ===== */
/* Bootstrap heeft deze weights niet met onze custom variabelen */
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-bold { font-weight: var(--font-weight-bold); }

/* ===== CUSTOM FONT SIZE UTILITIES ===== */
/* Bootstrap heeft deze sizes niet met onze custom variabelen */
.fs-2xl { font-size: var(--font-size-2xl); }

/* ===== CUSTOM COLOR UTILITIES ===== */
/* Bootstrap heeft deze kleuren niet met onze custom variabelen */
/* CONSOLIDATED: Use RF brand colors instead of generic */
.text-primary {color: var(--rf-red, #BD1E10); }
.text-secondary {color: var(--color-secondary); }
.text-success {color: var(--color-success); }
.text-info {color: var(--color-info); }
.text-warning {color: var(--color-warning); }
.text-danger {color: var(--color-danger); }
.text-light {color: var(--text-light); }
.text-dark {color: var(--text-dark); }
.text-muted {color: var(--text-muted); }
.text-white {color: var(--text-white); }

/* ===== RECHTFABRIEK SPECIFIC UTILITIES ===== */
/* Volledig custom utilities die nergens anders bestaan */
.rf-text-green {color: var(--rf-green); }
.rf-text-red {color: var(--rf-red); }
.rf-bg-green {background-color: var(--rf-green); }
.rf-bg-red {background-color: var(--rf-red); }

/* EINDE - alle andere utilities (display, flex, spacing, etc.) */
/* worden geleverd door Bootstrap via bootstrap.min.css */

/* ===================================================================
   VENDOR BOOTSTRAP-ICONS
   =================================================================== */

/*!
 * Bootstrap Icons v1.10.5 (https://icons.getbootstrap.com/)
 * Copyright 2019-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("../../fonts/bootstrap-icons.woff2?1bb88866b4085542c8ed5fb61b9393dd") format("woff2"),
url("../../fonts/bootstrap-icons.woff?1bb88866b4085542c8ed5fb61b9393dd") format("woff");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit !important; /* CRITICAL FIX: Bootstrap icons inherit parent color - !important to override iframe loading */
}

/* GLOBAL FIX: All Bootstrap icons in buttons inherit color - CORRECTED SELECTORS */
button i[class*="bi-"],
label i[class*="bi-"],
.rf-btn i[class*="bi-"],
.rf-btn-toggle i[class*="bi-"],
a.rf-btn i[class*="bi-"],
a.rf-btn.rf-btn-green i[class*="bi-"],
a.rf-btn.rf-btn-green.rf-btn-pill i[class*="bi-"],
a.rf-btn.rf-btn-red i[class*="bi-"],
a.rf-btn.rf-btn-red.rf-btn-pill i[class*="bi-"],
a.rf-btn.rf-btn-green i[class*="bi-"] {
  color: inherit;
}

button i[class*="bi-"]::before,
label i[class*="bi-"]::before,
.rf-btn i[class*="bi-"]::before,
.rf-btn-toggle i[class*="bi-"]::before,
a.rf-btn i[class*="bi-"]::before,
a.rf-btn.rf-btn-green i[class*="bi-"]::before,
a.rf-btn.rf-btn-green.rf-btn-pill i[class*="bi-"]::before,
a.rf-btn.rf-btn-red i[class*="bi-"]::before,
a.rf-btn.rf-btn-red.rf-btn-pill i[class*="bi-"]::before,
a.rf-btn.rf-btn-green i[class*="bi-"]::before {
  color: inherit;
}

/* REMOVED DIAGNOSTIC CSS - Problem was opacity: 0.3 from .text-center i */

.bi-arrow-clockwise::before { content: "\f116"; }
.bi-arrow-counterclockwise::before { content: "\f117"; }
.bi-arrow-down-up::before { content: "\f127"; }
.bi-arrow-down::before { content: "\f128"; }
.bi-arrow-left::before { content: "\f12f"; }
.bi-arrow-repeat::before { content: "\f130"; }
.bi-arrow-right-circle::before { content: "\f134"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-arrow-up-circle-fill::before { content: "\f139"; }
.bi-arrow-up::before { content: "\f148"; }
.bi-arrows-collapse::before { content: "\f14b"; }
.bi-arrows-expand::before { content: "\f14c"; }
.bi-arrows-fullscreen::before { content: "\f14d"; }
.bi-bar-chart::before { content: "\f17e"; }
.bi-bell-fill::before { content: "\f189"; }
.bi-bell::before { content: "\f18a"; }
.bi-book::before { content: "\f194"; }
.bi-bookmark-plus::before { content: "\f19d"; }
.bi-bookmark::before { content: "\f1a2"; }
.bi-bootstrap-reboot::before { content: "\f1a7"; }
.bi-box-arrow-in-right::before { content: "\f1be"; }
.bi-box-arrow-up-right::before { content: "\f1c5"; }
.bi-box-seam::before { content: "\f1c7"; }
.bi-box::before { content: "\f1c8"; }
.bi-bricks::before { content: "\f1ca"; }
.bi-briefcase::before { content: "\f1cc"; }
.bi-bug-fill::before { content: "\f1db"; }
.bi-bug::before { content: "\f1dc"; }
.bi-building::before { content: "\f1dd"; }
.bi-calculator::before { content: "\f1e0"; }
.bi-calendar-date::before { content: "\f1e4"; }
.bi-calendar-event::before { content: "\f1e8"; }
.bi-calendar-month::before { content: "\f1ed"; }
.bi-calendar-week::before { content: "\f1f3"; }
.bi-calendar::before { content: "\f1f6"; }
.bi-calendar3::before { content: "\f214"; }
.bi-card-image::before { content: "\f226"; }
.bi-card-text::before { content: "\f228"; }
.bi-chat-dots::before { content: "\f24a"; }
.bi-chat-left-dots::before { content: "\f24d"; }
.bi-chat-left-text::before { content: "\f252"; }
.bi-chat-quote::before { content: "\f255"; }
.bi-chat-square-text::before { content: "\f264"; }
.bi-chat-text-fill::before { content: "\f266"; }
.bi-chat-text::before { content: "\f267"; }
.bi-check-circle-fill::before { content: "\f26a"; }
.bi-check-circle::before { content: "\f26b"; }
.bi-check::before { content: "\f26e"; }
.bi-check2-all::before { content: "\f26f"; }
.bi-check2::before { content: "\f272"; }
.bi-chevron-double-left::before { content: "\f27f"; }
.bi-chevron-double-right::before { content: "\f280"; }
.bi-chevron-down::before { content: "\f282"; }
.bi-chevron-left::before { content: "\f284"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-chevron-up::before { content: "\f286"; }
.bi-circle-fill::before { content: "\f287"; }
.bi-circle::before { content: "\f28a"; }
.bi-clipboard::before { content: "\f290"; }
.bi-clock-fill::before { content: "\f291"; }
.bi-clock-history::before { content: "\f292"; }
.bi-clock::before { content: "\f293"; }
.bi-cloud-arrow-up::before { content: "\f297"; }
.bi-cloud-upload::before { content: "\f2c0"; }
.bi-code-slash::before { content: "\f2c6"; }
.bi-code-square::before { content: "\f2c7"; }
.bi-columns::before { content: "\f2ce"; }
.bi-cpu::before { content: "\f2d6"; }
.bi-credit-card::before { content: "\f2dc"; }
.bi-cursor::before { content: "\f2e3"; }
.bi-display::before { content: "\f302"; }
.bi-door-closed-fill::before { content: "\f305"; }
.bi-door-open::before { content: "\f308"; }
.bi-download::before { content: "\f30a"; }
.bi-envelope-fill::before { content: "\f32c"; }
.bi-envelope::before { content: "\f32f"; }
.bi-exclamation-circle-fill::before { content: "\f332"; }
.bi-exclamation-circle::before { content: "\f333"; }
.bi-exclamation-triangle-fill::before { content: "\f33a"; }
.bi-exclamation-triangle::before { content: "\f33b"; }
.bi-eye-slash::before { content: "\f340"; }
.bi-eye::before { content: "\f341"; }
.bi-facebook::before { content: "\f344"; }
.bi-file-arrow-down::before { content: "\f346"; }
.bi-file-earmark-check::before { content: "\f360"; }
.bi-file-earmark-excel::before { content: "\f368"; }
.bi-file-earmark-image::before { content: "\f36d"; }
.bi-file-earmark-person::before { content: "\f379"; }
.bi-file-earmark-plus::before { content: "\f37d"; }
.bi-file-earmark-spreadsheet::before { content: "\f389"; }
.bi-file-earmark-text-fill::before { content: "\f38a"; }
.bi-file-earmark-text::before { content: "\f38b"; }
.bi-file-earmark-word::before { content: "\f38d"; }
.bi-file-earmark::before { content: "\f392"; }
.bi-file-medical::before { content: "\f3a1"; }
.bi-file-text::before { content: "\f3b9"; }
.bi-file::before { content: "\f3c0"; }
.bi-files::before { content: "\f3c2"; }
.bi-flag::before { content: "\f3cc"; }
.bi-folder-fill::before { content: "\f3d1"; }
.bi-folder-plus::before { content: "\f3d3"; }
.bi-folder::before { content: "\f3d7"; }
.bi-folder2-open::before { content: "\f3d8"; }
.bi-funnel::before { content: "\f3e1"; }
.bi-gear-fill::before { content: "\f3e2"; }
.bi-gear::before { content: "\f3e5"; }
.bi-geo-alt::before { content: "\f3e8"; }
.bi-graph-down::before { content: "\f3f1"; }
.bi-graph-up::before { content: "\f3f2"; }
.bi-grid-3x3-gap::before { content: "\f3f9"; }
.bi-grid::before { content: "\f3fc"; }
.bi-hand-thumbs-up-fill::before { content: "\f406"; }
.bi-hand-thumbs-up::before { content: "\f407"; }
.bi-hash::before { content: "\f40a"; }
.bi-hourglass-split::before { content: "\f41f"; }
.bi-house-door::before { content: "\f423"; }
.bi-house::before { content: "\f425"; }
.bi-image::before { content: "\f42a"; }
.bi-images::before { content: "\f42b"; }
.bi-inbox::before { content: "\f42d"; }
.bi-info-circle-fill::before { content: "\f430"; }
.bi-info-circle::before { content: "\f431"; }
.bi-instagram::before { content: "\f437"; }
.bi-journal-text::before { content: "\f444"; }
.bi-justify::before { content: "\f44b"; }
.bi-key::before { content: "\f44f"; }
.bi-layout-text-window::before { content: "\f464"; }
.bi-lightbulb::before { content: "\f46b"; }
.bi-lightning-charge::before { content: "\f46d"; }
.bi-link-45deg::before { content: "\f470"; }
.bi-link::before { content: "\f471"; }
.bi-linkedin::before { content: "\f472"; }
.bi-list-check::before { content: "\f473"; }
.bi-list-ol::before { content: "\f475"; }
.bi-list-ul::before { content: "\f478"; }
.bi-list::before { content: "\f479"; }
.bi-lock-fill::before { content: "\f47a"; }
.bi-lock::before { content: "\f47b"; }
.bi-markdown::before { content: "\f481"; }
.bi-newspaper::before { content: "\f4a3"; }
.bi-paperclip::before { content: "\f4b3"; }
.bi-pause-circle::before { content: "\f4c2"; }
.bi-pause::before { content: "\f4c4"; }
.bi-pencil-fill::before { content: "\f4c9"; }
.bi-pencil-square::before { content: "\f4ca"; }
.bi-pencil::before { content: "\f4cb"; }
.bi-people::before { content: "\f4d0"; }
.bi-percent::before { content: "\f4d1"; }
.bi-person-badge::before { content: "\f4d3"; }
.bi-person-check::before { content: "\f4d6"; }
.bi-person-circle::before { content: "\f4d7"; }
.bi-person-lines-fill::before { content: "\f4db"; }
.bi-person-plus::before { content: "\f4dd"; }
.bi-person-x::before { content: "\f4e0"; }
.bi-person::before { content: "\f4e1"; }
.bi-pie-chart::before { content: "\f4e9"; }
.bi-play::before { content: "\f4f5"; }
.bi-plus-circle::before { content: "\f4fa"; }
.bi-plus::before { content: "\f4fe"; }
.bi-printer::before { content: "\f501"; }
.bi-question-circle::before { content: "\f505"; }
.bi-receipt::before { content: "\f50f"; }
.bi-save::before { content: "\f525"; }
.bi-search::before { content: "\f52a"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-shield-lock::before { content: "\f538"; }
.bi-shield-slash::before { content: "\f53d"; }
.bi-shield-x::before { content: "\f53e"; }
.bi-slack::before { content: "\f565"; }
.bi-speedometer2::before { content: "\f580"; }
.bi-star-fill::before { content: "\f586"; }
.bi-star::before { content: "\f588"; }
.bi-sticky::before { content: "\f58d"; }
.bi-tag-fill::before { content: "\f5af"; }
.bi-tag::before { content: "\f5b0"; }
.bi-tags::before { content: "\f5b2"; }
.bi-telephone-fill::before { content: "\f5b4"; }
.bi-telephone::before { content: "\f5c1"; }
.bi-text-center::before { content: "\f5c4"; }
.bi-text-indent-left::before { content: "\f5c5"; }
.bi-text-left::before { content: "\f5c7"; }
.bi-text-paragraph::before { content: "\f5c8"; }
.bi-text-right::before { content: "\f5c9"; }
.bi-three-dots-vertical::before { content: "\f5d3"; }
.bi-three-dots::before { content: "\f5d4"; }
.bi-trash::before { content: "\f5de"; }
.bi-trophy::before { content: "\f5e7"; }
.bi-type-bold::before { content: "\f5f0"; }
.bi-type-italic::before { content: "\f5f4"; }
.bi-type-strikethrough::before { content: "\f5f5"; }
.bi-type-underline::before { content: "\f5f6"; }
.bi-type::before { content: "\f5f7"; }
.bi-unlock::before { content: "\f600"; }
.bi-upload::before { content: "\f603"; }
.bi-wifi::before { content: "\f61c"; }
.bi-x-circle-fill::before { content: "\f622"; }
.bi-x-circle::before { content: "\f623"; }
.bi-x::before { content: "\f62a"; }
.bi-zoom-in::before { content: "\f62c"; }
.bi-zoom-out::before { content: "\f62d"; }
.bi-cash-coin::before { content: "\f632"; }
.bi-check-lg::before { content: "\f633"; }
.bi-currency-euro::before { content: "\f637"; }
.bi-file-earmark-pdf::before { content: "\f63e"; }
.bi-plus-lg::before { content: "\f64d"; }
.bi-x-lg::before { content: "\f659"; }
.bi-activity::before { content: "\f66b"; }
.bi-graph-up-arrow::before { content: "\f673"; }
.bi-magic::before { content: "\f675"; }
.bi-person-workspace::before { content: "\f67a"; }
.bi-quote::before { content: "\f6b0"; }
.bi-robot::before { content: "\f6b1"; }
.bi-send-check::before { content: "\f6b3"; }
.bi-send::before { content: "\f6c0"; }
.bi-memory::before { content: "\f6e3"; }
.bi-clipboard2-check::before { content: "\f725"; }
.bi-filetype-pdf::before { content: "\f756"; }
.bi-heart-pulse::before { content: "\f76f"; }
.bi-indent::before { content: "\f7fe"; }
.bi-database::before { content: "\f8c4"; }
.bi-floppy-fill::before { content: "\f7c5"; }
.bi-floppy::before { content: "\f7d8"; }
.bi-twitter-x::before { content: "\f8db"; }

/* ===================================================================
   VENDOR BOOTSTRAP-OVERRIDES
   =================================================================== */

/* Bootstrap Overrides voor Rechtfabriek Huisstijl */

/* Primary color overrides naar Rechtfabriek rood - alleen voor specifieke Bootstrap elementen */
/* Alleen toepassen op Bootstrap primary buttons die NIET de RF classes hebben */
/* REMOVED: Bootstrap .rf-btn-green overrides - use RF button system only */

/* REMOVED: Bootstrap .rf-btn-outline-green - use .rf-btn-outline-green */

/* REMOVED: Bootstrap .rf-btn-outline-green selectors - replaced with RF button system */

.text-primary {color: var(--rf-red, #BD1E10);
}

.bg-primary {background-color: var(--rf-red, #BD1E10);
}

.border-primary {border-color: var(--rf-red, #BD1E10);
}

/* REMOVED: Bootstrap .badge.bg-primary - use .rf-badge-red */

.alert-primary {color: #721209;background-color: #f5d6d3;border-color: #efc5c1;
}

/* Success color overrides naar Rechtfabriek groen */
/* REMOVED: Duplicate Bootstrap .btn.btn-success - use RF system */

/* REMOVED: Bootstrap .btn-outline-success selectors - use .rf-btn-outline-green instead */

.text-success {color: var(--rf-green, #61CE70);
}

.bg-success {background-color: var(--rf-green, #61CE70);
}

.border-success {border-color: var(--rf-green, #61CE70);
}

/* REMOVED: Bootstrap .badge.bg-success - use .rf-badge-green */

.alert-success {color: #3a7a45;background-color: #e7f5e9;border-color: #d9eedd;
}

/* Link colors - Standaard rood, maar overschrijfbaar met classes */
/* Alleen links in content gebieden, niet in navigatie */
/* Updated: Removed .btn reference, use .rf-btn instead */
main a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn),
.content a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn),
article a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn),
.card-body a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn) {
    color: var(--rf-red, #BD1E10);
}

/* Updated: Removed .btn reference, use .rf-btn instead */
main a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):hover,
main a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):focus,
.content a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):hover,
.content a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):focus,
article a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):hover,
article a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):focus,
.card-body a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):hover,
.card-body a:not([class*="rf-"]):not(.nav-link):not(.dropdown-item):not(.rf-btn):focus {
    color: #9e190e;
}

/* Form controls focus handled by consolidated section above */

/* DISABLE Bootstrap groene validatie styling - COMPLETE OVERRIDE */
/* Override alle Bootstrap .is-valid en :valid styling */
.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid,
.form-check-input.is-valid,
.was-validated .form-check-input:valid,
.rf-input.is-valid,
.rf-input-compact.is-valid,
.rf-select.is-valid,
.rf-textarea.is-valid,
.was-validated .rf-input:valid,
.was-validated .rf-input-compact:valid,
.was-validated .rf-select:valid,
.was-validated .rf-textarea:valid {
    border-color: #ced4da !important; /* Normale grijze border */
    background-image: none !important; /* Verwijder groene vinkjes */
    padding-right: 0.75rem !important; /* Reset padding */
}

/* Focus states - alleen subtiel rode kader */
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-select.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus,
.rf-input.is-valid:focus,
.rf-input-compact.is-valid:focus,
.rf-select.is-valid:focus,
.rf-textarea.is-valid:focus,
.was-validated .rf-input:valid:focus,
.was-validated .rf-input-compact:valid:focus,
.was-validated .rf-select:valid:focus,
.was-validated .rf-textarea:valid:focus {
    border-color: #BD1E10 !important; /* Gebruik standaard RF focus kleur */
    box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25) !important; /* Gebruik standaard focus shadow */
}

/* Select specifieke overrides */
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.rf-select.is-valid:not([multiple]):not([size]),
.rf-select.is-valid:not([multiple])[size="1"],
.was-validated .rf-select:valid:not([multiple]):not([size]),
.was-validated .rf-select:valid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: none !important;
    padding-right: 2.25rem !important; /* Reset naar normale padding */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; /* Alleen dropdown pijl */
    background-size: 16px 12px !important;
    background-position: right .75rem center !important;
}

/* Textarea specifieke overrides */
.was-validated textarea.form-control:valid,
textarea.form-control.is-valid,
.was-validated textarea.rf-textarea:valid,
textarea.rf-textarea.is-valid {
    padding-right: 0.75rem !important;
    background-position: right .75rem center !important;
}

/* Checkbox/radio styling reset */
.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
    background-color: #0d6efd !important; /* Terug naar normale blue */
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: inherit !important; /* Reset tekstkleur */
}

/* Verberg alle groene validation feedback */
.is-valid~.valid-feedback,
.is-valid~.valid-tooltip,
.was-validated :valid~.valid-feedback,
.was-validated :valid~.valid-tooltip {
    display: none !important;
}

/* BEHOUD rode invalid styling - dit moet blijven werken */
.was-validated .form-control:invalid,
.form-control.is-invalid {border-color: #dc3545;/* Rode border */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");padding-right: calc(1.5em + 0.75rem);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {border-color: #dc3545; /* Rode border on focus */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Rode shadow */
}

.was-validated .form-select:invalid,
.form-select.is-invalid {border-color: #dc3545; /* Rode border */
}

.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {border-color: #dc3545; /* Rode border on focus */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Rode shadow */
}

/* Toon rode invalid feedback */
.invalid-feedback {display: block;color: #dc3545;
}
.form-check-input {
    border-color: var(--rf-dark, #ced4da);
}
.form-check-input:checked {
    background-color: #BD1E10 ;
    border-color: #BD1E10 ;
}

.form-check-input:focus {
    border-color: #BD1E10;
    box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25) ;
}

/* Pagination */
.page-link {color: #BD1E10;
}

.page-link:hover,
.page-link:focus {color: #9e190e;background-color: rgba(189, 30, 16, 0.1);border-color: #BD1E10;
}

.page-item.active .page-link {
    background-color: var(--rf-green) !important;
    border-color: var(--rf-green) !important;
    color: var(--rf-white) !important;
}

/* Progress bars */
.progress-bar {background-color: #BD1E10;
}

/* List group active items */
.list-group-item.active {background-color: #BD1E10;border-color: #BD1E10;
}

/* Enhanced list-group-item hover effects */
.list-group-item-action:hover {background-color: var(--rf-light-grey, #f8f9fa);color: var(--rf-dark, #333);
    transform: translateX(2px);
    transition: all 0.15s ease-in-out;
}

.list-group-item-action:hover i {color: var(--rf-green, #5A9A5A);
    transform: scale(1.1);
    transition: all 0.15s ease-in-out;
}

/* Dropdown items */
.dropdown-item {color: var(--text-primary, #333);
}

.dropdown-item:hover,
.dropdown-item:focus {background-color: rgba(189, 30, 16, 0.1);color: #BD1E10;
}

.dropdown-item.active {background-color: #BD1E10;color: white;
}

/* Nav pills */
.nav-pills .nav-link.active {background-color: #BD1E10;
}

/* Table highlights */
.table-primary {background-color: rgba(189, 30, 16, 0.1);border-color: rgba(189, 30, 16, 0.2);
}


/* Spinner colors */
.spinner-border.text-primary {color: #BD1E10;
}

/* Toast headers */
.toast-header .text-primary {color: #BD1E10;
}

/* Accordion buttons - ALLEEN voor niet-FAQ accordions */
/* FAQ accordions worden overschreven door faq.css */
.accordion:not(.faq-accordion) .accordion-button:not(.collapsed) {
    color: #721209;
    background-color: rgba(189, 30, 16, 0.1);
}

.accordion-button:focus {border-color: #BD1E10;
    box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25);
}

/* EXTRA STERKE OVERRIDES - GROENE VALIDATIE VOLLEDIG UITSCHAKELEN */
/* Deze overrides moeten later in de CSS cascade staan om alles te overschrijven */

/* Alle mogelijke groene valid styling uitschakelen met extra sterke selectoren */
.form-control.is-valid,
.form-select.is-valid,
.rf-input.is-valid,
.rf-input-compact.is-valid,
.rf-select.is-valid,
.rf-textarea.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated .rf-input:valid,
.was-validated .rf-input-compact:valid,
.was-validated .rf-select:valid,
.was-validated .rf-textarea:valid {border-color: #ced4da;/* Normale grijze border */
    background-image: none;/* Geen groen vinkje */
    padding-right: 0.75rem; /* Reset padding voor reguliere velden */
}

/* Focus states voor valid velden - gebruik normale focus styling */
.form-control.is-valid:focus,
.form-select.is-valid:focus,
.rf-input.is-valid:focus,
.rf-input-compact.is-valid:focus,
.rf-select.is-valid:focus,
.rf-textarea.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus,
.was-validated .rf-input:valid:focus,
.was-validated .rf-input-compact:valid:focus,
.was-validated .rf-select:valid:focus,
.was-validated .rf-textarea:valid:focus {border-color: #BD1E10; /* Gebruik standaard RF focus kleur */
    box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25); /* RF focus shadow */
}

/* Verberg alle groene feedback berichten */

.rf-valid-feedback,
.is-valid ~ .rf-valid-feedback,
.was-validated :valid ~ .rf-valid-feedback {display: none;
}

/* Zorg ervoor dat select velden juiste padding en icon hebben */
.form-select.is-valid,
.rf-select.is-valid,
.was-validated .form-select:valid,
.was-validated .rf-select:valid {padding-right: 2.25rem;/* Ruimte voor dropdown pijl */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Alleen dropdown pijl, geen vinkje */
}

/* ==========================================
   PARTY FORMS - VALIDATION OVERRIDES
   ========================================== */
/* Focus styling handled by consolidated section above */

/* FORCEER dat valid fields GEEN groene borders krijgen in party forms */
.rf-party-form-section .form-control.is-valid,
.rf-party-form-section .form-select.is-valid,
.rf-party-form-section .rf-input.is-valid,
.rf-party-form-section .rf-input-compact.is-valid,
.rf-party-form-section .rf-select.is-valid,
.rf-party-form-section .rf-textarea.is-valid,
.rf-party-form-section .was-validated .form-control:valid,
.rf-party-form-section .was-validated .form-select:valid,
.rf-party-form-section .was-validated .rf-input:valid,
.rf-party-form-section .was-validated .rf-input-compact:valid,
.rf-party-form-section .was-validated .rf-select:valid,
.rf-party-form-section .was-validated .rf-textarea:valid {border-color: #ced4da;/* Normale grijze border */
    background-image: none;/* Geen groen vinkje */
    padding-right: 0.75rem; /* Reset padding */
}

/* Focus states handled by consolidated focus section above */

/* Verberg alle groene feedback berichten in party forms */

.rf-party-form-section .rf-valid-feedback {display: none;
}

/* ==========================================
   CONSOLIDATED FORM FOCUS STYLING
   ========================================== */
/* Unified red focus styling for all form elements */
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus,
.rf-input:focus,
.rf-input-compact:focus,
.rf-select:focus,
.rf-textarea:focus {
    border-color: var(--rf-red, #BD1E10) !important;
    box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25) !important;
    outline: none !important;
}

/* ==========================================
   SELECT DROPDOWN MENU STYLING OVERRIDES
   ========================================== */
/* Override Bootstrap's blue dropdown item styling */
.dropdown-menu {
    border: 1px solid var(--border-light, #dee2e6);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-item {color: var(--text-primary, #333);padding: 0.5rem 1rem;
    transition: all 0.15s ease-in-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
   background-color: var(--rf-light, #fff3f3);color: var(--rf-red, #BD1E10);
    text-decoration: none;
}

.dropdown-item.active,
.dropdown-item:active {background-color: var(--rf-red, #BD1E10);color: white;
}

/* Native Select Option Styling - Limited browser support but try anyway */
select option {
    padding: 0.5rem;
    background-color: white;
    color: var(--text-primary, #333);
}

select option:checked,
select option:hover {
    background-color: #F9EFEF; /* RF roze achtergrond */
    color: var(--rf-red, #BD1E10); /* RF rode tekst */
    box-shadow: 0 0 10px 100px #F9EFEF inset; /* Roze shadow voor browsers */
}

/* Firefox specific select styling */
@-moz-document url-prefix() {
    select option:checked,
    select option:hover {
        background-color: #F9EFEF; /* RF roze achtergrond */
        color: var(--rf-red, #BD1E10); /* RF rode tekst */
    }
}

/* Webkit browsers (Chrome, Safari) select styling */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select option:checked {
        background: #F9EFEF; /* RF roze achtergrond */
        color: var(--rf-red, #BD1E10); /* RF rode tekst */
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Override any Bootstrap select focus states */
select.form-select:focus option:checked,
selectinput.form-control:focus, select.form-control:focus, textarea.form-control:focus option:checked {
    background: #F9EFEF; /* RF roze achtergrond */
    color: var(--rf-red, #BD1E10); /* RF rode tekst */
}

/* Selected options with RF red background for better visibility */
select option:active,
select option[selected] {
    background-color: var(--rf-red, #BD1E10) !important;
    color: white !important;
}

/* Universal select option styling - high specificity override */
html body select option:hover,
html body select option:focus {
    background-color: #F9EFEF !important; /* RF roze achtergrond */
    color: var(--rf-red, #BD1E10) !important; /* RF rode tekst */
}

/* Specific styling for custom filter classes */
.communication-filter option:hover,
.communication-filter option:checked,
.priority-filter option:hover,
.priority-filter option:checked {
    background-color: #F9EFEF !important; /* RF roze achtergrond */
    color: var(--rf-red, #BD1E10) !important; /* RF rode tekst */
}

/* ===================================================================
   DATA TABLE COMPONENTS - DOSSIER SPECIFIC
   =================================================================== */

/* Improved table cell line-height for all screens */
.rf-table .rf-table-cell {
    line-height: 21px;
    vertical-align: middle;
    padding: 0.5rem 0.75rem;
}

/* Ensure [Nieuw] column is always visible and properly sized */
.rf-table th:nth-child(4), 
.rf-table td:nth-child(4) {
    min-width: 90px;
    width: 90px;
    text-align: center;
}

/* Apply smaller font-size to all table cells for better overview - previously only on mobile */
.rf-table th,
.rf-table td {
    font-size: 0.875rem;
}

/* Fix pagination links hover styling */
.page-link:hover {
    background-color: var(--rf-light-green) !important;
    color: var(--rf-dark) !important;
    text-decoration: none !important;
    border-color: var(--rf-light-green) !important;
}

/* Apply same hover styling to per-page selector buttons */
.rf-btn-outline-dark:hover {
    background-color: var(--rf-light-green) !important;
    color: var(--rf-dark) !important;
    text-decoration: none !important;
    border-color: var(--rf-light-green) !important;
}

/* Apply same selected styling to per-page selector buttons (green with white text) */
.rf-btn-dark {
    background-color: var(--rf-green) !important;
    color: var(--rf-white) !important;
    border-color: var(--rf-green) !important;
}

/* Tablet article header - show image but compact */
@media (min-width: 768px) and (max-width: 991px) {
  .article-header-image {
    display: block !important; /* Show image on tablet */
    height: 200px !important; /* Compact height for tablet */
    min-height: 200px !important;
  }
  
  .article-header {
    margin-bottom: 2rem !important;
  }
}

/* Keep [Nieuw] column visible on tablet screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .rf-table th:nth-child(4), 
    .rf-table td:nth-child(4) {
        display: table-cell;
        min-width: 90px;
        width: 90px;
    }
}

/* Apply on all screen sizes >=992px */
@media (min-width: 992px) {
    .rf-table .rf-table-cell {
        line-height: 21px;
    }
}

/* ===================================================================
   COMPONENTS BUTTONS
   =================================================================== */

/* CONFLICTING RF-FIRST BUTTON SECTION REMOVED - Using original RF button definitions */

/* ===== PAGINATION STYLING ===== */
/* Fix pagination button colors to match brand */
.pagination .page-link {
    color: var(--rf-green);
    border-color: #dee2e6;
    background-color: var(--rf-white);
}

.pagination .page-link:hover {
    color: var(--rf-white);
    background-color: var(--rf-green);
    border-color: var(--rf-green);
}

.pagination .page-item.active .page-link {
    background-color: var(--rf-green);
    border-color: var(--rf-green);
    color: var(--rf-white);
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: var(--rf-white);
    border-color: #dee2e6;
}

/* ===== FORM SPECIFIC BUTTONS ===== */
/* Submit buttons for forms */
.rf-btn-submit {
    background-color: var(--rf-green);
    color: var(--rf-white);
    border-color: var(--rf-green);
    padding: 0.75rem 1.5rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: var(--font-size-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.rf-btn-submit:hover,
.rf-btn-submit:focus {
    background-color: var(--rf-green-dark);
    border-color: var(--rf-green-dark);
    color: var(--rf-white);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--rf-shadow-green);
    text-decoration: none;
}

.rf-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px var(--rf-shadow-green);
    transition: all 0.1s ease;
    color: var(--rf-white);
}

.rf-btn-submit:disabled,
.rf-btn-submit.disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

/* ===================================================================
   RESPONSIVE BUTTONS & FORMS - CONSOLIDATED
   =================================================================== */
@media (max-width: 768px) {
/* RF Buttons - Mobile sizing */
    .rf-btn {
        padding: 0.375rem 1rem;
        font-size: var(--font-size-sm);
    }

    .rf-btn-lg {
        padding: 0.5rem 1.5rem;
        font-size: var(--font-size-base);
    }

    .rf-btn-sm {
        padding: 0.25rem 0.75rem;
        font-size: var(--font-size-xs);
    }

    /* Search Components - Mobile sizing (consolidated from line ~5341) */
    .rf-search-input {
        font-size: 0.95rem;
        padding: 0.65rem 0.75rem;
    }

    .rf-search-button {
        padding: 0 0.75rem;
    }

    /* Button Groups - Mobile stacking */

    /* Hero Buttons - Mobile stacking */

    /* Forms - Mobile optimization */
    .modal textarea.form-control {
        min-height: 100px;
        resize: vertical;
    }

    .filter-select {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Editor Buttons - Mobile responsive */

    /* Feedback Forms */
    .rf-feedback-form-footer {
        flex-direction: column;
        gap: 0.75rem;
    }
.faq-accordion .accordion-header button {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
  }

  .rf-user-name {
    display: none;
  }

  .rf-notifications-menu {
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    max-height: none;
    border-radius: 0;
  }

  .rf-footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .rf-footer-bottom-links {
    margin-top: 1rem;
    justify-content: center;
  }

  .rf-footer-bottom-link {
    margin: 0 0.75rem;
  }

  .article-header {
    padding: 0;
    margin-bottom: 1.5rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .article-header-content {
    padding: 1rem 0.75rem;
  }

  .article-header h1 {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  .article-header .article-header-image {
    display: none; /* Hide completely on mobile - no space waste */
  }
  
  /* Compact mobile article header - force full width */
  .article-header {
    padding: 1rem 0; /* Much smaller padding */
    margin-bottom: 1rem; /* Smaller margin */
    min-height: auto; /* No minimum height */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box; /* Include padding in width */
  }
  
  .article-header .article-header-content {
    padding: 1.5rem 1rem; /* Compact padding with higher specificity */
  }

  .rf-party-header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .rf-feedback-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .rf-version-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .rf-header {
    min-height: var(--header-height-sm);
  }

  .rf-header-content {
    padding: 8px 0;
  }

  .rf-top-bar .rf-top-content {
    justify-content: flex-start;
  }

  .rf-top-bar .rf-top-messages {
    gap: 1rem;
    justify-content: flex-start;
  }

  .rf-top-message {
    font-size: 13px;
  }

  .rf-top-message:last-child {
    display: none;
  }

  .nav-tabs {
    padding: 0.5rem;
  }

  .nav-tabs .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin: 0.1rem;
  }

  .faq-accordion .accordion-item:hover {
    transform: none;
    box-shadow: 0 1px 4px rgba(220, 53, 69, 0.1);
  }
/* Grid utilities */.rf-auth-container {
      padding: 1.5rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .rf-simple-nav {
      display: block; /* Keep home icon visible on mobile */
    }
    
    .rf-simple-nav a {
      font-size: 1.1rem; /* Make home icon slightly larger on mobile */
    }

  /* Cards utilities - CONSOLIDATED */
  .related-articles .card-img-top {
      height: 180px; /* Consolidated height from duplicate below */
      object-fit: cover;
    }

  /* Tables utilities */.rf-card-group .rf-card {
      width: 100%;
    }.rf-timeline {
      padding-left: 1.5rem;
    }

    .rf-timeline::before {
      left: 11px;
    }

    .rf-timeline-item::before {
      left: -1.5rem;
      width: 12px;
      height: 12px;
    }

    .rf-timeline-content {
      margin-left: 0.25rem;
    }.partner-logo {
          text-align: center;
          width: 50%;
          padding: 10px;
      }

      /* Dossier table compact line-height for all screen sizes */
      .rf-table .rf-table-cell {
          line-height: 21px;
          vertical-align: middle;
      }
      
      /* Always show Nieuw column on mobile and tablet */
      .rf-table th:nth-child(4), 
      .rf-table td:nth-child(4) {
          display: table-cell;
          min-width: 90px;
      }

/* Extra veiligheid voor kleinste schermen */
    /* Content wrapper */
    .article-content {
      padding: 0 0.5rem;
    }

    /* Horizontale kaarten op mobiel verbeteren */
    .card .row .col-md-4 {
      height: 200px;
    }

    /* Op mobiel de volgorde aanpassen zodat afbeelding bovenaan staat */
    .card .row.g-0 {
      flex-direction: column;
    }

    .card .row .col-md-8 {
      width: 100%;
      max-width: 100%;
    }

    /* Zorgen dat absolute positionering werkt op mobiel */
    .card .row.g-0 .col-md-4.p-0.d-flex {
      position: static;
      height: 200px;
    }

    .card .row.g-0 .col-md-4.p-0.d-flex img {
      position: static;
    }/* Hide less relevant columns as suggested by Harry */

      /* Hide even more columns */

      /* Keep only: Reference, Title, Status, Actions */

      /* But always keep the last column (actions) */.modal-dialog {
          max-width: 500px;
          margin: 1.75rem auto;
      }/* Services Section */
      .services-section {
          padding: 40px 0 0 0;
      }

      .service-card {
          margin-bottom: 30px;
          padding: 30px 20px;
          min-height: 320px;
          text-align: left;
      }

      .service-title {
          font-size: 1.3rem;
      }

      .red-section {
          margin-top: -40px;
          padding: 70px 0 50px 0;
          margin-left: calc(-50vw + 50%);
          margin-right: calc(-50vw + 50%);
      }

      .red-section h3 {
          font-size: 1.5rem;
      }

      /* Waarom Kiezen Section */
      .waarom-kiezen-section {
          padding: 50px 0;
      }

      .section-title {
          font-size: 1.8rem;
      }

      /* Voordelen vertical layout - mobile aanpassingen */
      .voordelen-vertical-list {
          gap: 1rem;
      }

      .voordeel-item {
          padding: 1rem;
          gap: 0.875rem;
          flex-direction: row;
          align-items: flex-start;
      }

      .voordeel-icon-container {
          width: 50px;
          height: 50px;
          flex-shrink: 0;
      }

      .voordeel-icon-container .voordeel-icon {
          width: 50px;
          height: 50px;
      }

      .voordeel-content .voordeel-title {
          font-size: 1.2rem;
          margin-bottom: 0.375rem;
      }

      .voordeel-content .voordeel-description {
          font-size: 0.875rem;
          line-height: 1.5;
      }

      /* Legacy grid layout voor backward compatibility */

      .voordeel-title {
          font-size: 1.3rem;
      }.section-title {
          font-size: 1.6rem;
      }

      .service-card {
          padding: 25px 15px;
          min-height: 300px;
          text-align: left;
      }

      .red-section {
          margin-top: -30px;
          padding: 60px 0 50px 0;
      }

      /* Voordelen vertical layout - kleine mobile aanpassingen */
      .voordelen-vertical-list {
          gap: 0.875rem;
      }

      .voordeel-item {
          padding: 0.875rem;
          gap: 0.75rem;
      }

      .voordeel-icon-container {
          width: 45px;
          height: 45px;
      }

      .voordeel-icon-container .voordeel-icon {
          width: 45px;
          height: 45px;
      }

      .voordeel-content .voordeel-title {
          font-size: 1.1rem;
          margin-bottom: 0.25rem;
      }

      .voordeel-content .voordeel-description {
          font-size: 0.825rem;
          line-height: 1.4;
      }

      /* Legacy cards voor kleine schermen */.timeline-title {
          font-size: 0.85rem;
      }

      /* Mobile badge stacking - onder elkaar ipv naast elkaar */
      .timeline-badges {
          flex-direction: column;
          align-items: flex-end;
          gap: 0.15rem;
      }

      .timeline-badges .badge {
          font-size: 0.7rem;
          padding: 0.25rem 0.5rem;
          line-height: 1.2;
          text-align: center;
          min-width: 60px;
      }

      /* Kleinere productie badges op mobile */
      .timeline-badges .badge[class*="bg-"] {
          font-size: 0.65rem;
          padding: 0.2rem 0.45rem;
      }/* Make table more compact on mobile */
      .table th,
      .table td {
          padding: 0.5rem;
          font-size: 0.875rem;
      }

      /* Hide less important columns on mobile */
      .table th:nth-child(3),
      .table td:nth-child(3) {
          display: none;
      }

      /* Modal adjustments for mobile */
      .modal-dialog {
          margin: 0.5rem auto;
      }

      #paymentDetailsModal .row {
          margin: 0;
      }

      #paymentDetailsModal .col-md-6 {
          padding: 0;
      } /* Duplicate .rf-data-table removed */

      /* Only apply min-width on tablet+ to prevent horizontal scroll on mobile */
      @media (min-width: 768px) {
          .rf-table {
              min-width: 800px; /* Ensure minimum table width */
          }
      }

      /* Hide less relevant columns as suggested by Harry */
      .rf-table th:nth-child(6), /* Toegewezen aan */
      .rf-table td:nth-child(6) {
          display: none;
      }

      .rf-table th:nth-child(7), /* Gestart op */
      .rf-table td:nth-child(7) {
          display: none;
      } /* Duplicate .rf-data-table removed */

      @media (min-width: 768px) {
          .rf-table {
              min-width: 600px;
          }
      }

      /* Hide even more columns */
      .rf-table th:nth-child(5), /* Priority/Client column */
      .rf-table td:nth-child(5),
      .rf-table th:nth-child(6), /* Toegewezen aan */
      .rf-table td:nth-child(6),
      .rf-table th:nth-child(7), /* Gestart op */
      .rf-table td:nth-child(7) {
          display: none;
      } /* Duplicate .rf-data-table removed */

      @media (min-width: 768px) {
          .rf-table {
              min-width: 500px;
          }
      }

      /* Keep only: Reference, Title, Status, Nieuw (badges), Actions */
      .rf-table th:nth-child(5), /* Prioriteit */
      .rf-table td:nth-child(5),
      .rf-table th:nth-child(6), /* Klant */
      .rf-table td:nth-child(6),
      .rf-table th:nth-child(7), /* Toegewezen aan */
      .rf-table td:nth-child(7),
      .rf-table th:nth-child(8), /* Gestart op */
      .rf-table td:nth-child(8) {
          display: none;
      }

      /* But always keep the last column (actions) */
      .rf-table th:last-child,
      .rf-table td:last-child {display: table-cell;
      }.version-item-clean {
          flex-direction: column;
          gap: 0.75rem;
      }

      .version-actions {
          justify-content: flex-start;
          width: 100%;
      }

      .version-history-container {
          margin-left: -0.5rem;
          margin-right: -0.5rem;
      }.rf-activity-stats .col {
          flex: 0 0 20%;
          max-width: 20%;
      }.rf-activity-stats .col {
          flex: 0 0 50%;
          max-width: 50%;
      }

      .rf-stat-card {
          margin-bottom: 0.75rem;
          height: auto;
      }

  /* Timeline utilities */.timeline-container {
          padding-right: 1rem;
      }

  /* Hero utilities */.hero-content h1 {
          font-size: 2rem;
      }

      .hero-content p.lead {
          font-size: 1rem;
      }

      .hero-img {
          height: 45vh; /* Aangepast naar 45vh op zeer kleine schermen */
      }

  /* Content utilities */.article-content .rf-quote {
          padding: 1rem 1.5rem;
          margin: 1.5rem 0;
      }

      .article-content .rf-quote::before {
          font-size: 2rem;
          top: -0.25rem;
      }.mobile-filter-actions.d-md-none {display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
      }

  /* Documents utilities */.rf-document-viewer h2 {
          font-size: 1.25rem;
      }

      .rf-document-iframe {
          height: 70vh; /* Use viewport height for better mobile experience */
          min-height: 400px; /* Minimum height fallback */
          width: 100% !important; /* Ensure full width on mobile */
      }.rf-document-display {
          background: #2d3748;
          border-color: #4a5568;
      }
      
      /* PDF Modal improvements for mobile */
      #documentPreviewModal .modal-dialog {
          margin: 0.5rem !important; /* Reduce margin on mobile */
          max-width: calc(100vw - 1rem) !important; /* Use almost full viewport width */
      }
      
      #documentPreviewModal .modal-body {
          padding: 0 !important; /* Remove padding for more space */
          max-height: 80vh !important; /* Limit modal height */
          overflow: auto !important; /* Allow scrolling if needed */
      }
      
      /* Fix PDF iframe on mobile - override inline styles */
      .preview-pdf-content iframe {
          height: 70vh !important; /* Override inline min-height: 600px */
          min-height: 300px !important; /* Smaller minimum for mobile */
          width: 100% !important;
          border: none !important;
      }
      
      /* CRITICAL: Ensure modal always works on mobile */
      #documentPreviewModal {
          display: none !important; /* Bootstrap default */
          z-index: 9999 !important; /* High z-index */
      }
      
      #documentPreviewModal.show {
          display: block !important; /* Force show when Bootstrap adds .show class */
      }
      
      /* Ensure modal backdrop works on mobile */
      .modal-backdrop {
          z-index: 9998 !important;
      }
      
      /* PRODUCTION MODAL FIX: Force correct z-index on mobile/tablet */
      #feedbackModal,
      #versionFeedbackModal,
      #approvalModal {
          z-index: 9999 !important;
      }
      
      #feedbackModal .modal-dialog,
      #versionFeedbackModal .modal-dialog, 
      #approvalModal .modal-dialog {
          z-index: 10000 !important;
          pointer-events: auto !important;
      }
      
      #feedbackModal .modal-content,
      #versionFeedbackModal .modal-content,
      #approvalModal .modal-content {
          z-index: 10001 !important;
          pointer-events: auto !important;
          background: white !important;
      }
      
      /* Ensure backdrop is below modal on mobile */
      #feedbackModal + .modal-backdrop,
      #versionFeedbackModal + .modal-backdrop,
      #approvalModal + .modal-backdrop {
          z-index: 9998 !important;
      }

      .rf-text-document {
          background: #2d3748;
          color: #e2e8f0;
          border-color: #4a5568;
      }

  /* Utilities utilities */.rf-notifications-empty {
      padding: 4rem 1rem;
    }.rf-status-change-details {
      flex-direction: column;
      align-items: flex-start;
    }

    .rf-status-badges {
      margin-bottom: 0.5rem;
    }

    .rf-status-change-meta {
      margin-top: 0.5rem;
    }

    .rf-note-meta,
    .rf-payment-meta,
    .rf-event-meta {
      flex-direction: column;
    }

    .rf-note-meta > span,
    .rf-payment-meta > span,
    .rf-event-meta > span {
      margin-bottom: 0.25rem;
    }.production-title {
          font-size: 1rem;
      }

      .badge-feedback,
      .badge-concept {
          font-size: 0.75rem;
          padding: 0.25rem 0.5rem;
      }.rf-detail-grid {
          grid-template-columns: 1fr;
      }
}

/* ===================================================================
   COMPONENTS FORMS
   =================================================================== */

/* Rechtfabriek - Form Components */

/* Form Group */
.rf-form-group {
  margin-bottom: 1.25rem;
  position: relative;
}

/* Compact Form Group */
.rf-form-group-compact {
  margin-bottom: 1rem;
  position: relative;
}

/* Compact Input Styling */
.rf-input-compact {
  padding: 0.875rem 1rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
  background-color: var(--bg-light);
}

.rf-input-compact:focus {
  background-color: white;
}

.rf-input-compact:focus:invalid {
  border-color: var(--color-primary);
}

.rf-input-compact::placeholder {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Form Labels */
.rf-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.rf-form-label .rf-required {
  color: var(--color-danger);
  margin-left: 0.125rem;
}

/* Form Inputs */
.rf-input,
.rf-input-compact,
.rf-select,
.rf-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: white;
  background-clip: padding-box;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.rf-input:focus,
.rf-input-compact:focus,
.rf-select:focus,
.rf-textarea:focus {
  outline: 0;
  border-color: var(--rf-red, #BD1E10);
  box-shadow: 0 0 0 0.25rem rgba(189, 30, 16, 0.25);
}

.rf-input:focus:invalid,
.rf-input-compact:focus:invalid,
.rf-select:focus:invalid,
.rf-textarea:focus:invalid {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(189, 30, 16, 0.25);
}

.rf-input::placeholder,
.rf-input-compact::placeholder,
.rf-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.rf-input:disabled,
.rf-input-compact:disabled,
.rf-select:disabled,
.rf-textarea:disabled {
  background-color: var(--bg-light);
  opacity: 0.75;
  cursor: not-allowed;
}

.rf-input-sm,
.rf-input-compact-sm,
.rf-select-sm {
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm);
}

.rf-input-lg,
.rf-input-compact-lg,
.rf-select-lg {
  padding: 1rem 1.25rem;
  font-size: var(--font-size-lg);
}

/* Textarea */
.rf-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select */
.rf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

/* Checkbox and Radio */
.rf-check-group {
  display: block;
  margin-bottom: 0.75rem;
}

.rf-check-label {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.rf-checkbox,
.rf-radio {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--border-dark);
  background-color: white;
  position: relative;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  flex-shrink: 0;
}

.rf-checkbox {
  border-radius: 4px;
}

.rf-radio {
  border-radius: 50%;
}

.rf-checkbox:checked,
.rf-radio:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.rf-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.rf-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}

.rf-checkbox:focus,
.rf-radio:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(189, 30, 16, 0.25);
}

/* Form Helper */
.rf-form-helper {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Form States */
.rf-input.is-invalid,
.rf-input-compact.is-invalid,
.rf-select.is-invalid,
.rf-textarea.is-invalid {
  border-color: var(--color-danger);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* GROENE VALIDATIE STYLING UITGESCHAKELD - alleen rode styling behouden */
.rf-input.is-valid,
.rf-input-compact.is-valid,
.rf-select.is-valid,
.rf-textarea.is-valid {
  border-color: #ced4da; /* Normale border kleur in plaats van groen */
  padding-right: 0.75rem; /* Reset padding - geen ruimte voor vinkje */
  background-image: none; /* Geen groen vinkje */
}

/* SPECIFIEKE OVERRIDE VOOR BOOTSTRAP CONFLICTEN - Extra specifiek voor alle combinaties */
html body .rf-inputinput.form-control:focus, select.form-control:focus, textarea.form-control:focus,
html body .rf-input-compactinput.form-control:focus, select.form-control:focus, textarea.form-control:focus,
html body .rf-select.form-select:focus,
html body .rf-textareainput.form-control:focus, select.form-control:focus, textarea.form-control:focus,
html body input.rf-input:focus,
html body input.rf-input-compact:focus,
html body select.rf-select:focus,
html body textarea.rf-textarea:focus,
html body .rf-input:focus,
html body .rf-input-compact:focus,
html body .form-control.rf-input:focus,
html body .form-control.rf-input-compact:focus,
html body input[class*="rf-"]:focus,
html body textarea[class*="rf-"]:focus,
html body select[class*="rf-"]:focus {border-color: var(--rf-red, #BD1E10);
  box-shadow: 0 0 0 0.25rem rgba(189, 30, 16, 0.25);
}

/* SIMPLIFIED FORM CONTROL OVERRIDE - Cleaner approach */
html body input.form-control,
html body select.form-control,
html body textarea.form-control,
.form-control,
.form-select {
  border: 1px solid #ced4da;
  outline: none;
  box-shadow: none;
  background-image: none;
}

/* Focus state - red border only */
html body input.form-control:focus, 
html body select.form-control:focus, 
html body textarea.form-control:focus,
.form-control:focus,
.form-select:focus {
  border-color: #BD1E10;
  box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25);
}

/* Force remove any bootstrap success/validation borders */
html body input.form-control:valid,
html body select.form-control:valid,
html body textarea.form-control:valid,
input.form-control:valid,
select.form-control:valid,
textarea.form-control:valid,
.form-control:valid,
.form-select:valid,
.form-control.is-valid,
.form-select.is-valid {
  border-color: #ced4da !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* When focused AND valid, still show red border */
html body input.form-control:focus:valid,
html body select.form-control:focus:valid,
html body textarea.form-control:focus:valid,
input.form-control:focus:valid,
select.form-control:focus:valid,
textarea.form-control:focus:valid,
.form-control:focus:valid,
.form-select:focus:valid,
.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: #BD1E10 !important;
  box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25) !important;
}

.rf-invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

.is-invalid ~ .rf-invalid-feedback {
  display: block;
}

/* GROENE VALID FEEDBACK UITGESCHAKELD */
.rf-valid-feedback {display: none; /* Altijd verbergen, ook als er een .is-valid klasse is */
  width: 100%;
  margin-top: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

.is-valid ~ .rf-valid-feedback {display: none; /* Verberg ook bij .is-valid selector */
}

/* Form Control with Icon */

.rf-input-icon-wrapper .rf-input,
.rf-input-icon-wrapper .rf-input-compact {
  padding-left: 2.5rem;
}

.rf-input-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1rem;
  pointer-events: none;
  transition: color 0.3s ease;
}

.rf-input-icon-wrapper .rf-input:focus ~ .rf-input-icon,
.rf-input-icon-wrapper .rf-input-compact:focus ~ .rf-input-icon {
  color: var(--color-primary);
}

.rf-input-suffix-wrapper {
  position: relative;
}

.rf-input-suffix-wrapper .rf-input,
.rf-input-suffix-wrapper .rf-input-compact {
  padding-right: 2.5rem;
}

.rf-input-suffix {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1rem;
}

/* Form Control with Clear Button */
.rf-input-clear-wrapper {
  position: relative;
}

.rf-input-clear-wrapper .rf-input,
.rf-input-clear-wrapper .rf-input-compact {
  padding-right: 2.5rem;
}

.rf-input-clear {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Input Group */
.rf-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.rf-input-group > .rf-input,
.rf-input-group > .rf-input-compact {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.rf-input-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
}

.rf-input-group > .rf-input-group-text:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rf-input-group > .rf-input:not(:first-child),
.rf-input-group > .rf-input-compact:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rf-input-group > .rf-input-group-text:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rf-input-group > .rf-input:not(:last-child),
.rf-input-group > .rf-input-compact:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Password strength indicator */
.rf-password-strength {
  display: flex;
  height: 4px;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 2px;
}

.rf-password-strength span {
  flex: 1;
  margin: 0 2px;
  background-color: var(--border-light);
}

.rf-password-strength.medium span:nth-child(1),
.rf-password-strength.medium span:nth-child(2) {
  background-color: var(--color-warning);
}

.rf-password-strength.strong span:nth-child(1),
.rf-password-strength.strong span:nth-child(2),
.rf-password-strength.strong span:nth-child(3) {
  background-color: var(--color-success);
}

/* Form Grid */
.rf-form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

.rf-form-col {
  flex: 1 0 0%;
  padding-right: 10px;
  padding-left: 10px;
}

/* Switch/Toggle */
.rf-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  margin: 0;
}

.rf-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rf-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-light);
  transition: .4s;
  border-radius: 24px;
}

.rf-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.rf-switch input:checked + .rf-switch-slider {
  background-color: var(--color-primary);
}

.rf-switch input:focus + .rf-switch-slider {
  box-shadow: 0 0 1px var(--color-primary);
}

.rf-switch input:checked + .rf-switch-slider:before {
  transform: translateX(24px);
}

.rf-switch-label {
  margin-left: 10px;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

/* Autocomplete */
.rf-autocomplete-wrapper {
  position: relative;
}

.rf-autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  margin-top: 0.25rem;
  padding: 0.5rem 0;
  background-color: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 300px;
  overflow-y: auto;
}

.rf-autocomplete-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.rf-autocomplete-item:hover,
.rf-autocomplete-item.active {
  background-color: var(--bg-light);
}

/* File Input */
.rf-file-input {
  position: relative;
  display: inline-block;
}

.rf-file-input input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  overflow: hidden;
}

.rf-file-input label {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.3s ease;
}

.rf-file-input label:hover {
  background-color: var(--rf-light-gray);
  border-color: var(--rf-gray);
}

.rf-file-input .rf-file-name {
  margin-left: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Multi-step form */
.rf-steps {
  display: flex;
  margin-bottom: 2rem;
  width: 100%;
}

.rf-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.rf-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--border-light);
  z-index: 1;
}

.rf-step.active ~ .rf-step:not(:last-child)::after {
  background-color: var(--border-light);
}

.rf-step.active:not(:last-child)::after,
.rf-step.completed:not(:last-child)::after {
  background-color: var(--color-secondary);
}

.rf-step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-light);
  border: 2px solid var(--border-light);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
  z-index: 2;
  position: relative;
}

.rf-step.active .rf-step-number {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: white;
}

.rf-step.completed .rf-step-number {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: white;
}

.rf-step.completed .rf-step-number::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
}

.rf-step-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
}

.rf-step.active .rf-step-label {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.rf-step.completed .rf-step-label {
  color: var(--color-secondary);
}

.rf-form-step {
  display: none;
}

.rf-form-step.active {
  display: block;
}

.rf-form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

/* ===================================================================
   COMPONENTS CARDS
   =================================================================== */

/* Rechtfabriek - Card Components */

/* Base Card */
.rf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.rf-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--rf-green);
}

/* Card Body */
.rf-card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}

/* Card Title */
.rf-card-title {
  margin-bottom: 0.75rem;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* Card Subtitle */
.rf-card-subtitle {
  margin-top: -0.5rem;
  margin-bottom: 0.75rem;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

/* Card Text */
.rf-card-text {
  margin-bottom: 1rem;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

/* Card Link */
.rf-card-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.rf-card-link:hover {
  color: #9e190e;
  text-decoration: underline;
}

/* Card Link Arrow */
.rf-card-link-arrow {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.rf-card-link-arrow::after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform 0.15s ease-in-out;
}

.rf-card-link-arrow:hover {
  color: #9e190e;
}

.rf-card-link-arrow:hover::after {
  transform: translateX(4px);
}

/* Card Header */
.rf-card-header {
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rf-card-header:first-child {
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

/* Card Footer */
.rf-card-footer {
  padding: 1.25rem 1.5rem;
  background-color: var(--bg-light);
  border-top: 1px solid var(--border-light);
}

.rf-card-footer:last-child {
  border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);
}

/* Card Image */
.rf-card-img-top {
  width: 100%;
  border-top-left-radius: calc(var(--radius-md) - 1px);
  border-top-right-radius: calc(var(--radius-md) - 1px);
}

.rf-card-img-bottom {
  width: 100%;
  border-bottom-left-radius: calc(var(--radius-md) - 1px);
  border-bottom-right-radius: calc(var(--radius-md) - 1px);
}

.rf-card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background-color: rgba(0, 0, 0, 0.5);
}

/* Card Horizontal */
.rf-card-horizontal {
  flex-direction: row;
}

.rf-card-horizontal .rf-card-img {
  width: 30%;
  border-top-right-radius: 0;
  border-bottom-left-radius: calc(var(--radius-md) - 1px);
  border-bottom-right-radius: 0;
  object-fit: cover;
}

/* Card Group */
.rf-card-group {
  display: flex;
  flex-wrap: wrap;
  margin: -0.75rem;
}

.rf-card-group .rf-card {
  margin: 0.75rem;
  width: calc(33.333% - 1.5rem);
}

/* Document Card (for timeline) */
.rf-document-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  padding: 1rem;
  margin-bottom: 1rem;
}

.rf-document-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.rf-document-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.rf-document-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1rem;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.rf-document-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.rf-document-meta {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.rf-document-type {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

.rf-document-type i {
  margin-right: 0.25rem;
}

.rf-document-time {
  display: flex;
  align-items: center;
}

.rf-document-content {
  margin-bottom: 1rem;
}

.rf-document-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  padding-top: 1rem;
}

/* Document Card Variants */
.rf-document-Rechtfabriek {
  border-left: 3px solid var(--rf-red);
}

.rf-document-Rechtfabriek .rf-document-icon {
  background-color: rgba(189, 30, 16, 0.1);
  color: var(--rf-red);
}

.rf-document-klant {
  border-left: 3px solid var(--rf-green);
}

.rf-document-klant .rf-document-icon {
  background-color: rgba(97, 206, 112, 0.1);
  color: var(--rf-green);
}

.rf-document-ai {
  border-left: 3px solid var(--rf-accent);
}

.rf-document-ai .rf-document-icon {
  background-color: rgba(59, 89, 152, 0.1);
  color: var(--rf-accent);
}

/* Dashboard Cards */
.dashboard-card {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.dashboard-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  background-color: #fafbfc;
}

.dashboard-card:hover .dashboard-card-title {
  color: var(--rf-red);
}

.dashboard-card:hover .dashboard-card-title i {
  transform: scale(1.1);
}

.dashboard-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
}

.dashboard-card-title i {
  margin-right: 0.75rem;
  color: var(--color-primary);
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.dashboard-card-content {
  color: var(--text-primary);
}

/* Statistic Cards */
.stat-card {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

/* Card with Icon Header */

/* Card with Corner Label */

/* ===================================================================
   COMPONENTS BADGES
   =================================================================== */

/* Rechtfabriek - Badge Components */

/* REMOVED: Conflicting badge base override - let Bootstrap handle it */

/* EENVOUDIGE stat-card badge positionering - GEEN overrides */
.rf-stat-icon {
    position: relative;
}

.rf-stat-icon .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    border: 2px solid white;
}

/* Initial state: hide all badges until JavaScript shows them */
/* Stat card badges */
#stat-communication-badge,
#stat-documents-badge,
#stat-parties-badge,
#stat-productions-badge,
#stat-financial-badge,
/* Financial page badges */
#financial-outstanding-count,
#financial-overdue-count,
/* Menu badges (dynamic class-based) */
span[id^="menu-badge-"] {
    display: none;
}

/* Sidebar badges - only hide when empty or zero */
#sidebar-parties-badge:empty,
#sidebar-communication-badge:empty,
#sidebar-production-badge:empty,
#sidebar-financial-badge:empty {
    display: none;
}

/* Base Badge */
.rf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--radius-pill);
}

/* Badge Colors - Only Used Variants */
.rf-badge-primary {
  background-color: var(--color-primary);
}

.rf-badge-secondary {
  background-color: var(--color-secondary);
}

.rf-badge-info {
  background-color: var(--color-info);
}

/* Person/Organization badges */
.rf-badge-person {
  background-color: #17a2b8; /* Bootstrap info/cyan color */
  color: white;
}

.rf-badge-organization {
  background-color: var(--rf-green);
  color: white;
}



/* GLOBAL BADGE ICON SPACING FIX */
.badge i,
.rf-badge i,
.rf-status-badge i {
  margin-right: 0.35em !important;
}

/* Status Badges (for documents) */
.rf-status-badge {
  /* Layout */
  display: inline-flex;
  align-items: center;
  
  /* Spacing */
  padding: 0.35rem 0.85rem;
  
  /* Typography */
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold, 600);
  line-height: 1;
  
  /* Styling */
  border-radius: var(--radius-pill, 20px);
  
  /* Transitions for enhanced interactivity */
  transition: all 0.2s ease;
}

.rf-status-badge-concept {
  color: var(--text-dark);
  background-color: rgba(108, 117, 125, 0.15);
}

.rf-status-badge-concept::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--state-concept);
  margin-right: 0.5em;
}

.rf-status-badge-intern {
  color: #fd7e14;
  background-color: rgba(253, 126, 20, 0.15);
}

.rf-status-badge-intern::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--state-intern);
  margin-right: 0.5em;
}

.rf-status-badge-published {
  color: var(--color-secondary);
  background-color: rgba(97, 206, 112, 0.15);
}

.rf-status-badge-published::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--state-published);
  margin-right: 0.5em;
}

.rf-status-badge-archived {
  color: var(--text-secondary);
  background-color: rgba(152, 152, 152, 0.15);
}

.rf-status-badge-archived::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--state-archived);
  margin-right: 0.5em;
}

.rf-status-badge-rejected {
  color: var(--color-danger);
  background-color: rgba(220, 53, 69, 0.15);
}

.rf-status-badge-rejected::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--state-rejected);
  margin-right: 0.5em;
}

/* Source Badges (for documents) */
.rf-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.85em;
  font-size: 0.75em;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
}

.rf-source-badge-Rechtfabriek {
  color: var(--rf-red);
  background-color: rgba(189, 30, 16, 0.1);
}

.rf-source-badge-Rechtfabriek i {
  margin-right: 0.35em;
}

.rf-source-badge-klant {
  color: var(--rf-green);
  background-color: rgba(97, 206, 112, 0.1);
}

.rf-source-badge-klant i {
  margin-right: 0.35em;
}

.rf-source-badge-ai {
  color: var(--rf-accent);
  background-color: rgba(59, 89, 152, 0.1);
}

.rf-source-badge-ai i {
  margin-right: 0.35em;
}

/* Counter Badge */
.rf-counter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.7em;
  font-weight: var(--font-weight-bold);
  color: white;
  background-color: var(--color-danger);
  border-radius: 50%;
  position: absolute;
  top: -8px;
  right: -8px;
}

/* Notification Badge */
.rf-notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.65em;
  font-weight: var(--font-weight-bold);
  color: white;
  background-color: var(--color-danger);
  border-radius: var(--radius-pill);
  position: absolute;
  top: -5px;
  right: -5px;
}

/* Tag Badge */
.rf-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.75em;
  font-size: 0.75em;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.rf-tag:hover {
  background-color: var(--rf-light-gray);
}

.rf-tag-removable {
  padding-right: 0.4em;
}

.rf-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.4em;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s ease;
}

.rf-tag-remove:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* NIEUW badge - standout style */
.badge-nieuw {
    background-color: #bd1e10;
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    /* Default opacity fade - for general pulse effects */
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Additional pulse variant for scale effects */
@keyframes pulse-scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Concept badges */
.badge-concept {
    /* Background and colors */
    background-color: var(--color-warning, #fff3cd);
    color: #856404;
    border: none;
    
    /* Typography */
    font-size: 0.75rem;
    font-weight: 500;
    
    /* Layout */
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}

/* Sent/Received badges */

.badge-ontvangen {
    background-color: #e2e3e5;
    color: #383d41;
    border: none;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

/* Status badges */

.badge-feedback {
    background-color: #ffeaa7;
    color: #d63031;
    border: 1px solid #fdcb6e;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

.badge-afgewezen {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

.badge-verzonden {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

/* Navigation Menu Badges */
.rf-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 0.65em;
    font-weight: 700;
    color: white;
    background-color: #dc3545;
    border-radius: 9px;
    margin-left: 6px;
    vertical-align: top;
    line-height: 1;
}

/* Warning badge for sidebar navigation */
.rf-nav-badge-warning {
    background-color: #ffc107;
    color: #000;
}

/* Navigation badge positioning for dropdown items */
.dropdown-item .rf-nav-badge,
.rf-menu-dropdown-item .rf-nav-badge {
    margin-left: auto;
    margin-right: 0;
}


/* ===================================================================
   COMPONENTS ALERTS
   =================================================================== */

/* Rechtfabriek - Alert Components */

/* Base Alert */
.rf-alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.rf-alert i {
  font-size: 1.25rem;
  margin-right: 1rem;
}

.rf-alert-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.25rem;
}

.rf-alert-message {
  margin-bottom: 0;
}

.rf-alert-content {
  flex: 1;
}

.rf-alert-close {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.15s ease-in-out;
  margin-left: auto;
  flex-shrink: 0;
}

.rf-alert-close:hover {
  opacity: 0.75;
}

/* Close button contrast fixes for different alert backgrounds */
.rf-alert-danger .rf-alert-close,
.rf-alert-dark .rf-alert-close {
  color: white;
  opacity: 0.8;
}

.rf-alert-danger .rf-alert-close:hover,
.rf-alert-dark .rf-alert-close:hover {
  opacity: 1;
}

/* Alert Variants - RF Brand Colors */
.rf-alert-primary {
  color: #8B4B6B;
  background-color: #F9EFEF;
  border-color: rgba(139, 75, 107, 0.3);
}

.rf-alert-secondary {
  color: var(--rf-green);
  background-color: rgba(97, 206, 112, 0.1);
  border-color: rgba(97, 206, 112, 0.3);
}

.rf-alert-success {
  color: #4A8F5A;
  background-color: rgba(97, 206, 112, 0.12);
  border-color: rgba(97, 206, 112, 0.3);
}

.rf-alert-danger {
  color: var(--rf-white);
  background-color: var(--rf-red);
  border-color: var(--rf-red);
}

.rf-alert-warning {
  color: #8B4B1E;
  background-color: #FDF2E7;
  border-color: rgba(189, 75, 30, 0.3);
}

.rf-alert-info {
  color: #4A6B8F;
  background-color: #EEF4F9;
  border-color: rgba(74, 107, 143, 0.3);
}

.rf-alert-light {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border-color: var(--border-light);
}

.rf-alert-dark {
  color: white;
  background-color: var(--text-dark);
  border-color: var(--text-dark);
}

/* Alert with border accent */
.rf-alert-accent-left {
  border-left: 4px solid;
}

.rf-alert-accent-left.rf-alert-primary {
  border-left-color: #8B4B6B;
}

.rf-alert-accent-left.rf-alert-secondary {
  border-left-color: var(--rf-green);
}

.rf-alert-accent-left.rf-alert-success {
  border-left-color: var(--rf-green);
}

.rf-alert-accent-left.rf-alert-danger {
  border-left-color: var(--rf-red);
}

.rf-alert-accent-left.rf-alert-warning {
  border-left-color: #BD4B1E;
}

.rf-alert-accent-left.rf-alert-info {
  border-left-color: #4A6B8F;
}

.rf-alert-accent-left.rf-alert-light {
  border-left-color: var(--border-dark);
}

.rf-alert-accent-left.rf-alert-dark {
  border-left-color: black;
}

/* Alert Container (for app-wide alerts) */
.rf-alert-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-modal);
  max-width: 350px;
  display: flex;
  flex-direction: column;
}

.rf-alert-container .rf-alert {
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s ease;
}

.rf-alert-container .rf-alert.show {
  transform: translateX(0);
  opacity: 1;
}

/* Persistent Alerts - Don't auto-dismiss */
.rf-alert-persistent {
  /* Visual indicator that this alert won't auto-dismiss */
  border-width: 1px;
}

.rf-alert-persistent.rf-alert-accent-left {
  border-left-width: 4px;
}

/* Optional: Add a subtle indicator for persistent alerts */
.rf-alert-persistent::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 8px;
  height: 8px;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0.3;
}

/* ===================================================================
   COMPONENTS NAVIGATION
   =================================================================== */

/* Rechtfabriek - Navigation Components */

/* Top Bar */
.rf-top-bar {
  background-color: var(--rf-red);
  color: white;
  padding: 0.25rem 0;
  font-size: var(--font-size-sm);
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Oude regel - vervangen door speciekere versie hieronder */
/* .rf-top-messages wordt nu gedefinieerd als .rf-top-bar .rf-top-messages */

.rf-top-message {
  display: flex;
  align-items: center;
  margin-right: 2rem;
  margin-left: 0.5rem;
}

.rf-top-message i {
  margin-right: 0.5rem;
}

.rf-social-icons {
  /* Layout and positioning */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  /* Positioning contexts */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  
  /* Spacing */
  padding-right: 15px;
  gap: 0.5rem;
  margin-left: auto;
  
  /* Behavior */
  flex-shrink: 0;
}

.rf-social-icons a {
  /* Sizing and layout */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  
  /* Styling */
  color: white;
  font-size: 1rem;
  
  /* Interactions */
  transition: opacity 0.15s ease-in-out;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
}

.rf-social-icons a:hover {
  opacity: 0.8;
}

/* Main Header */
.rf-header {
  /* Background and styling */
  background-color: white;
  border-bottom: 1px solid var(--border-light, #e9ecef);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  
  /* Layout and positioning */
  position: relative; /* Changed to fixed by JavaScript when sticky */
  width: 100%;
  min-height: var(--header-height-lg);
  z-index: 1040;
  
  /* Spacing */
  padding: 0.5rem 0;
  
  /* Transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
}

.rf-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rf-logo {
  display: flex;
  align-items: center;
  color: var(--rf-red);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  text-decoration: none;
}

.rf-logo img {
  height: 40px;
  width: auto;
}

/* Main Navigation */
.rf-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rf-menu-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.15s ease-in-out;
  text-transform: capitalize;
}

.rf-menu-link:hover,
.rf-menu-link.active {
  color: var(--rf-red);
}

.rf-menu-link.active::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background-color: var(--rf-red);
}

/* Dropdown Menu */
/* REMOVED: Desktop dropdown styling - causes mobile conflicts */

.rf-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  display: none;
  min-width: 12rem;
  padding: 0.5rem 0;
  margin: 0.5rem 0 0;
  background-color: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 80vh; /* Limit height to prevent off-screen overflow */
  overflow-y: auto; /* Enable scrolling for long dropdown menus */
}

/* We're removing this rule as we now handle display via JavaScript
.rf-menu-item:hover .rf-menu-dropdown {
  display: block;
}
*/

.rf-menu-dropdown-item {
  display: block;
  padding: 0.5rem 1.5rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  white-space: nowrap;
}

.rf-menu-dropdown-item:hover {
  background-color: var(--bg-light);
  color: var(--rf-red);
}

/* User Navigation */
.rf-user-nav {
  display: flex;
  align-items: center;
}

.rf-user-dropdown {
  position: relative;
}

.rf-user-toggle {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  color: var(--text-primary);
}

.rf-user-toggle:hover {
  color: var(--rf-red);
}

.rf-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  overflow: hidden;
}

.rf-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rf-user-avatar i {
  font-size: 1.5rem;
  color: var(--text-secondary);
}

.rf-user-name {
  font-weight: var(--font-weight-medium);
  margin-right: 0.5rem;
}

.rf-user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-dropdown);
  display: none;
  min-width: 200px;
  padding: 0.5rem 0;
  margin: 0.5rem 0 0;
  background-color: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.rf-user-dropdown:hover .rf-user-dropdown-menu,
.rf-user-dropdown-menu.show {
  display: block;
}

.rf-user-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.rf-user-dropdown-item:hover {
  background-color: var(--bg-light);
  color: var(--rf-red);
}

.rf-user-dropdown-item i {
  margin-right: 0.75rem;
  font-size: 1.125rem;
  width: 1.125rem;
  text-align: center;
}

.rf-user-dropdown-divider {
  height: 1px;
  margin: 0.5rem 0;
  background-color: var(--border-light);
}

/* Notification Dropdown */
.rf-notification-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  margin-right: 1rem;
  transition: color 0.15s ease-in-out;
}

.rf-notification-icon:hover {
  color: var(--rf-red);
}

.rf-notification-icon i {
  font-size: 1.25rem;
}

.rf-notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--color-danger);
  color: white;
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-notifications-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-dropdown);
  display: none;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
  margin: 0.5rem 0 0;
  background-color: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.rf-notification-icon:hover .rf-notifications-menu,
.rf-notifications-menu.show {
  display: block;
}

.rf-notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
}

.rf-notifications-title {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.rf-notifications-all {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.rf-notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rf-notification-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.15s ease-in-out;
}

.rf-notification-item:last-child {
  border-bottom: none;
}

.rf-notification-item:hover {
  background-color: var(--bg-light);
}

.rf-notification-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.rf-notification-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(97, 206, 112, 0.1);
  color: var(--rf-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.rf-notification-item-title {
  flex: 1;
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.rf-notification-item-content {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.rf-notification-item-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.rf-notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.rf-notifications-empty-icon {
  font-size: 2rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.rf-notifications-empty-text {
  color: var(--text-secondary);
  margin: 0;
}

.rf-mobile-user-info {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.rf-mobile-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  overflow: hidden;
}

.rf-mobile-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rf-mobile-user-avatar i {
  font-size: 1.75rem;
  color: var(--text-secondary);
}

.rf-mobile-user-details {
  flex: 1;
}

.rf-mobile-user-name {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.25rem;
}

.rf-mobile-user-email {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Breadcrumbs */
.rf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  margin-bottom: 1rem;
  list-style: none;
  background-color: transparent;
  align-items: center;
  font-size: var(--font-size-sm);
}

.rf-breadcrumb-item {
  display: flex;
  align-items: center;
}

.rf-breadcrumb-item + .rf-breadcrumb-item {
  padding-left: 0.5rem;
}

.rf-breadcrumb-item + .rf-breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: var(--text-muted);
  content: "/";
}

.rf-breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.rf-breadcrumb-item a:hover {
  color: var(--rf-red);
  text-decoration: underline;
}

.rf-breadcrumb-item.active {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* Footer Navigation */
.rf-footer {
  background-color: var(--rf-dark);
  color: white;
  padding: 3rem 0 1.5rem;
}

.rf-footer-brand {
  margin-bottom: 1.5rem;
}

.rf-footer-logo {
  display: inline-block;
  margin-bottom: 1rem;
}

.rf-footer-logo img {
  height: 40px;
  width: auto;
}

.rf-footer-description {
  color: rgba(255, 255, 255, 0.7);
  max-width: 300px;
  margin-bottom: 1.5rem;
}

.rf-footer-social {
  display: flex;
  margin-bottom: 1.5rem;
}

.rf-footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 1rem;
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background-color 0.15s ease-in-out;
}

.rf-footer-social-link:hover {
  background-color: var(--rf-red);
  color: white;
}

.rf-footer-heading {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1.25rem;
  color: white;
}

.rf-footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.rf-footer-link-item {
  margin-bottom: 0.5rem;
}

.rf-footer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.rf-footer-link:hover {
  color: white;
}

.rf-footer-contact-item {
  display: flex;
  margin-bottom: 1rem;
}

.rf-footer-contact-icon {
  margin-right: 1rem;
  color: var(--rf-red);
}

.rf-footer-contact-text {
  color: rgba(255, 255, 255, 0.7);
}

.rf-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.rf-footer-copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-sm);
  margin-bottom: 1rem;
}

.rf-footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
}

.rf-footer-bottom-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: var(--font-size-sm);
  margin-left: 1.5rem;
  transition: color 0.15s ease-in-out;
}

.rf-footer-bottom-link:hover {
  color: white;
}

/* Search Icon and Popup */
.rf-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  transition: color 0.15s ease-in-out;
}

.rf-search-icon i {
  font-size: 1.25rem;
}

.rf-search-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.rf-search-popup.active {
  opacity: 1;
  visibility: visible;
}

.rf-search-popup-content {
  width: 100%;
  max-width: 600px;
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
}

.rf-search-popup .container-fluid,
.rf-search-popup .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.rf-search-form {
  display: flex;
  align-items: center;
}

.rf-search-input {
  flex: 1;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-size: 1.5rem;
  padding: 1rem 3rem 1rem 0;
  outline: none;
  width: 100%;
  transition: border-color 0.15s ease-in-out;
}

.rf-search-input:focus {
  border-bottom-color: var(--rf-red);
}

.rf-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.rf-search-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1.5rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.15s ease-in-out;
}

.rf-search-button:hover {
  color: var(--rf-red);
}

.rf-search-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1.5rem;
  transition: color 0.15s ease-in-out;
}

.rf-search-close:hover {
  color: white;
}

/* ===================================================================
   COMPONENTS TIMELINE - MODERNE CONTENT TIMELINE (RF-styling compliant)
   =================================================================== */

/* Rechtfabriek - Timeline Component
 * Moderne versie voor [timeline] shortcode in artikelen/pages
 * Harry Heijes - Augustus 2025
 */

/* ===== ANTI-BULLETS PROTECTION ===== */
/* Voorkomt lijst styling conflicten die blauwe bullets veroorzaken */
.rf-timeline,
.rf-timeline *,
.rf-timeline ul,
.rf-timeline ol,
.rf-timeline li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  list-style-position: unset !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  background-image: none !important;
}

/* Extra bescherming tegen pseudo-element bullets */
.rf-timeline::before,
.rf-timeline::after,
.rf-timeline *::before,
.rf-timeline *::after {
  background-image: none !important;
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}


/* ===== LEGACY SUPPORT ===== */
/* Ondersteunt oude .rf-timeline-marker class voor backwards compatibility */
.rf-timeline-marker {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #28a745;
  border: 3px solid white;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ================================================================== */

/* Rechtfabriek - Quick Actions Component */

/* Quick Action Button */
.rf-quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background-color: var(--bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  color: var(--text-primary);
  text-decoration: none;
  height: 100%;
}

.rf-quick-action-btn:hover {
  background-color: rgba(189, 30, 16, 0.05);
  border-color: rgba(189, 30, 16, 0.3);
  transform: translateY(-2px);
  color: var(--rf-red);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.rf-quick-action-btn i {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--rf-red);
}

.rf-quick-action-btn span {
  font-weight: var(--font-weight-medium);
}

/* Klant Quick Actions */
.rf-role-klant .rf-quick-action-btn i {
  color: var(--rf-green);
}

.rf-role-klant .rf-quick-action-btn:hover {
  background-color: rgba(97, 206, 112, 0.05);
  border-color: rgba(97, 206, 112, 0.3);
  color: var(--rf-green);
}

/* Medewerker Quick Actions */
.rf-role-medewerker .rf-quick-action-btn i {
  color: var(--rf-red);
}

/* Kantoormanager Quick Actions */
.rf-role-kantoormanager .rf-quick-action-btn i {
  color: var(--rf-red);
}

/* Admin Quick Actions */
.rf-role-admin .rf-quick-action-btn i {
  color: var(--rf-accent);
}

.rf-role-admin .rf-quick-action-btn:hover {
  background-color: rgba(59, 89, 152, 0.05);
  border-color: rgba(59, 89, 152, 0.3);
  color: var(--rf-accent);
}

/* Quick Actions Grid */
.rf-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

@media (max-width: 576px) {
.rf-quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rf-quick-action-btn {
    padding: 1rem 0.5rem;
  }

  .rf-quick-action-btn i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
.modal-dialog {
        margin: 1rem auto;
    }

    .modal-header {
        padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 1rem;
    }
.rechtsbijstand-title {
        font-size: 1.6rem;
    }

    .rechtsbijstand-intro,
    .rechtsbijstand-description,
    .rechtsbijstand-footer,
    .rechtsbijstand-process {
        font-size: 0.9rem;
    }
.faq-section {
        padding: 2rem 0 1.5rem 0;
    }

    .faq-description h2 {
        font-size: 1.3rem;
    }

    .faq-description p {
        font-size: 0.9rem;
    }

    .faq-section .mini-faq-header h4 {
        font-size: 1.3rem;
    }
}

/* ===================================================================
   COMPONENTS STATUSCARDS
   =================================================================== */

/* Rechtfabriek - Status Cards & Badges Component */

/* Dashboard Stat Cards */
.stat-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  height: 100%;
  transition: var(--transition-fast);
  border: 1px solid var(--border-light);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin: var(--spacing-sm) 0;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Dashboard Cards */
.dashboard-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
  border: 1px solid var(--border-light);
  transition: var(--transition-fast);
}

.dashboard-card:hover {
  box-shadow: var(--shadow-md);
}

.dashboard-card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.dashboard-card-title i {
  margin-right: var(--spacing-sm);
}

.dashboard-card-content {
  flex: 1;
}

.dashboard-card-footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

/* Status Indicators */
.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--spacing-sm);
}

.status-healthy {
  background-color: var(--rf-green);
}

.status-warning {
  background-color: var(--color-warning);
}

.status-critical {
  background-color: var(--color-danger);
}

.status-error {
  background-color: var(--color-danger);
}

.status-unknown {
  background-color: var(--text-muted);
}

/* Health Progress */
.health-progress {
  height: 6px;
  background-color: var(--border-light);
  border-radius: var(--radius-sm);
}

.health-progress .progress-bar {
  border-radius: var(--radius-sm);
}

/* Button State Colors */

/* Refresh Indicator */
.refresh-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  z-index: var(--z-fixed);
  transition: var(--transition-fast);
}

.refresh-indicator.active {
  background-color: var(--rf-green);
  color: var(--text-white);
}

.refresh-indicator.inactive {
  background-color: var(--rf-red);
  color: var(--text-white);
}

/* Loading Animations */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
    /* Standard spin animation */
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Spin variant for centered elements */
@keyframes spin-centered {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Status Badge */
/* CONSOLIDATED: rf-status-badge properties merged into line 3965 */

/* Status Badge Variants */
.rf-status-badge-concept {
  background-color: var(--state-concept);
  color: white;
}

.rf-status-badge-intern {
  background-color: var(--state-intern);
  color: white;
}

.rf-status-badge-published,
.rf-status-badge-gepubliceerd {
  background-color: var(--state-published);
  color: white;
}

.rf-status-badge-archived,
.rf-status-badge-gearchiveerd {
  background-color: var(--state-archived);
  color: white;
}

.rf-status-badge-rejected,
.rf-status-badge-afgekeurd {
  background-color: var(--state-rejected);
  color: white;
}

/* Status Change Card */
.rf-status-change-card {
  display: flex;
  background-color: white;
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.rf-status-change-icon {
  margin-right: 1rem;
  font-size: 1.5rem;
  color: var(--rf-gray);
}

.rf-status-change-content {
  flex: 1;
}

.rf-status-change-title {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.rf-status-change-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.rf-status-change-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.rf-status-change-meta > span {
  margin-right: 1rem;
}

.rf-status-change-meta i {
  margin-right: 0.25rem;
}

.rf-status-change-message {
  background-color: var(--bg-light);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Note Card */
.rf-note-card {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--rf-gray);
  box-shadow: var(--shadow-sm);
}

.rf-note-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.rf-note-icon {
  margin-right: 1rem;
  font-size: 1.25rem;
  color: var(--rf-gray);
}

.rf-note-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.rf-note-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.rf-note-meta > span {
  margin-right: 1rem;
}

.rf-note-meta i {
  margin-right: 0.25rem;
}

.rf-note-content {
  padding: 0.75rem;
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* Payment Card */
.rf-payment-card {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--color-success);
  box-shadow: var(--shadow-sm);
}

.rf-payment-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.rf-payment-icon {
  margin-right: 1rem;
  font-size: 1.25rem;
  color: var(--color-success);
}

.rf-payment-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.rf-payment-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.rf-payment-meta > span {
  margin-right: 1rem;
}

.rf-payment-meta i {
  margin-right: 0.25rem;
}

.rf-payment-content {
  padding: 0.75rem;
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
}

.rf-payment-amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
  margin-bottom: 0.5rem;
}

.rf-payment-desc {
  font-size: var(--font-size-sm);
}

/* Event Card */
.rf-event-card {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.rf-event-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.rf-event-icon {
  margin-right: 1rem;
  font-size: 1.25rem;
  color: var(--rf-gray);
}

.rf-event-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.rf-event-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.rf-event-meta > span {
  margin-right: 1rem;
}

.rf-event-meta i {
  margin-right: 0.25rem;
}

.rf-event-content {
  padding: 0.75rem;
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* Responsive Adjustments */

/* ===================================================================
   COMPONENTS PASSWORD-TOGGLE
   =================================================================== */

/* Password toggle button styling - clean version without */
.password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    z-index: 5;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.password-toggle i {
    font-size: 1rem;
    color: var(--text-secondary);
    position: static;
    transform: none;
}

.password-toggle:hover i {
    color: var(--color-primary);
}

/* Ensure the input has proper padding on the right to accommodate the icon */
.rf-input-icon-wrapper .rf-input-compact,
.rf-input-icon-wrapper .rf-input {
    padding-right: 40px;
}

/* Fix for profile/account.html */
#password, #password_confirm {
    padding-right: 40px;
}

/* ===================================================================
   COMPONENTS SEARCH
   =================================================================== */

/* Rechtfabriek - Search Component - DUPLICATE REMOVED - First definition is used */

.rf-search {
  display: flex;
  align-items: center;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.rf-search-input {
  flex: 1;
  border: none;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  outline: none;
  background-color: white;
}

.rf-search-input::placeholder {
  color: var(--text-secondary);
}

.rf-search-button {
  border: none;
  outline: none;
  background-color: var(--rf-green);
  color: white;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0 999px 999px 0;
  height: inherit;
}

.rf-search-close {
  position: absolute;
  top: -50px;
  right: 0;background: none;
  border: none;color: white;
  cursor: pointer;
  font-size: 24px;
  transition: color 0.3s ease;padding: 5px;
}

@media (max-width: 480px) {
.rf-search-input {
    font-size: 0.9rem;
  }
  .rf-search-button i {
    font-size: 1rem;
  }
.hero-wrapper .hero-content {
        top: 25%;
    }

    .hero-overlay-container {
        bottom: -170px; /* Nog 75px lager voor mobiel: totaal 175px onder origineel */
        transform: translateX(-50%);
        max-width: 95%;
        padding: 0 0.5rem;
    }
    
    /* Add extra margin to first section after hero to prevent overlay from covering content */
    .betaalbare-rechtsbijstand-section {
        margin-top: 160px !important; /* Push section down so overlay doesn't cover image */
    }

    .hero-column {
        padding: 0.75rem;
    }

    .banner-text {
        font-size: 0.9rem;
    }

    .google-logo-container svg {
        width: 20px;
        height: 20px;
    }

    .review-rating {
        font-size: 1rem;
    }

    .review-subtitle {
        font-size: 0.8rem;
    }

    .sdg-logo {
        height: 40px;
    }

    .media-card-img {
        height: 100px;
    }
}

/* ===================================================================
   COMPONENTS HERO
   =================================================================== */

/* /static/css/components/hero.css */

/* Base hero styling - gebruikt door zowel legacy als PageBlock hero's */
.hero {
    background: white;     /* de "rest" onder de foto is wit */
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Hero tegen header - werkt voor alle hero pagina's */
/* Direct CSS detection (moderne browsers) */
body:has(.hero-wrapper) main,
body:has(.hero.pageblock-hero) main,
body:has(.hero-section) main,
body:has(.rf-hero) main {padding-top: 0;
}

/* Fallback classes voor JavaScript detection en specifieke templates */
.has-hero main,
.hero-page main {padding-top: 0;
}

/* Extra selector fixes na PurgeCSS - meer specifiek */
body.hero-page main,
body.has-hero main {padding-top: 0;margin-top: 0;
}

/* Verwijder padding van container-fluid voor hero om witte rand weg te nemen */
.hero-wrapper .container-fluid {padding: 0;
}

/* 🔧 FIXED: Hero afbeelding - rechthoekig gehouden voor beste resultaat */
.hero-img {
    width: 100%;
    height: 60vh; /* Teruggebracht naar 60vh voor betere proportie met overlay */
    filter: brightness(60%); /* Default brightness - kan overschreven worden door PageBlocks */
    object-fit: cover;
    display: block;
    /* Geen clip-path op afbeelding voor eenvoud */
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    padding: 0 1rem;
    max-width: 800px;
    z-index: 5; /* Zorg ervoor dat content altijd boven background staat */
}

/* Remove text shadow from buttons in hero */
.hero-content .rf-btn {
    text-shadow: none;
    color: white;
}

.hero-content h1 {
    font-size: 3.5rem;    /* groepeer hier gerust tot 4rem of wat jij prettig vindt */
    line-height: 1.1;
}

.hero-content p.lead {
    margin-top: 0.5rem;
    font-size: 1.25rem;
}

/* Hero styling - geen curve/wave - gewoon rechthoekig */
/* .hero::after weggehaald voor eenvoud */

/* Legacy hero-curve class UITGESCHAKELD voor eenvoud */
/*
.hero-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: white;
    clip-path: ellipse(150% 100% at 50% 0);
    z-index: 3;
}
*/

.pageblock-hero .hero-buttons {
    margin-top: 1rem;
}

.pageblock-hero .hero-buttons a {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem; /* Voor responsive wrapping */
}

/* Responsive adjustments */

/* =================================
   HERO OVERLAY STYLING - 3 KOLOMMEN
   ================================= */

/* Hero Overlay Container */
/* Base rule moved to before media queries to fix cascade */

/* 3-kolommen container */
.hero-three-column-container {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Basis kolom styling */
.hero-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1.125rem;
    flex: 1;
    text-align: center;
}

/* Kolom 1: Rode banner */
.hero-red-column {
    background: #c4302b;
    color: white;
}

.banner-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

/* Kolom 2: Google Review */
.hero-review-column {
    background: rgba(255, 255, 255, 0.98);
}

.google-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.google-logo-container svg {
    width: 24px;
    height: 24px;
}

.review-rating {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    line-height: 1;
}

.review-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    font-weight: 400;
    line-height: 1;
}

/* Kolom 3: SDG Impact */
.hero-sdg-column {
    background: rgba(255, 255, 255, 0.98);
}

.sdg-logo {
    height: 50px;
    width: auto;
    max-width: 150px;
}

/* Hero wrapper styling - Homepage specific */
.hero-wrapper {
    position: relative;
}

.hero-wrapper .hero {background: white;
}

/* .hero-wrapper .hero::after UITGESCHAKELD voor eenvoud */
/*
.hero-wrapper .hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: white;
    clip-path: ellipse(150% 100% at 50% 0);
    z-index: 2;
}
*/

.hero-wrapper .hero-content {
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Smooth fade-in animatie */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* =================================
   HERO BOTTOM MARGIN FIX - UITGESCHAKELD
   ================================= */

/* Alle curve-gerelateerde margin fixes uitgeschakeld voor eenvoud */
/*
.hero.hero-no-bottom-margin::after {
    display: none;
}

.hero + .pageblock[style*="background:"] .hero::after,
.hero + .pageblock .bg-white + .hero::after,
.hero + section[class*="bg-white"] ~ .hero::after {
    height: 60px;
}

.hero + .bg-white,
.hero + .pageblock.bg-white,
.hero + section.bg-white {
    margin-top: -60px;
    padding-top: 80px;
}
*/

/* =================================
   HERO OVERLAY RESPONSIVE DESIGN
   ================================= */

/* Hero overlay mobile positioning */

/* Accessibility: Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.hero-overlay-container {
        animation: none;
    }

    .hero-overlay-container:hover {
        transform: translateX(-50%) translateY(0);
    }
}

/* =================================
   🔧 DEBUG: Visualize Hero Curve (for testing)
   ================================= */

/* DEBUG MODE UITGESCHAKELD - normale styling */
/*
.hero::after {background-color: rgba(255, 0, 0, 0.5);
    border: 2px solid red;
}

.hero-img {
    opacity: 0.8;
}
*/

/* ===================================================================
   COMPONENTS MENU
   =================================================================== */

/* Clean menu.css - Bootstrap Custom Properties Override */

/* Direct Bootstrap variables overschrijven - drastische maar werkende methode */

/* Configuratie variabelen */

/* Verwijder default navbar rand en schaduw */
.navbar {
  box-shadow: none;
  border: none;
}

/* Algemene menu structuur - specifieke selectors om Bootstrap te overriden */
.navbar .nav-link,
.navbar .dropdown-item {
  text-decoration: none;
  outline: none;
  border: none;
  box-shadow: none;
  padding: var(--menu-item-padding);
  color: #333333;
}

/* Desktop navbar - hoofdmenu items grijs, submenu's roze */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background-color: var(--menu-main-hover-bg); /* Grijs voor hoofdmenu */
  color: var(--menu-hover-color);
  text-decoration: none;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--menu-hover-bg); /* Roze voor submenu's */
  color: var(--menu-hover-color);
  text-decoration: none;
}

.navbar .nav-link.active {
  color: var(--menu-active-color);
  background: none;
  font-weight: bold; /* Vet voor actieve items */
}

/* Dropdown menu styling - clean zonder overflow problemen */
.dropdown-menu {
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* Geen overflow restricties - laat Bootstrap zijn werk doen */
}

/* Bootstrap dropdown pijltjes gebruiken voor desktop */

/* Behoud Bootstrap's eigen ::after styling voor desktop submenu's */

/* Specifieke styling voor submenu niveaus */
.dropdown-menu .dropend > .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: -1px;
  z-index: 1000;
  min-width: 200px;
}

/* Toon submenu's bij hover en show classes */
.dropdown-menu .dropend.show > .dropdown-menu,
.dropdown-menu .dropend:hover > .dropdown-menu {
  display: block;
}

/* Active state voor dropdown toggles */
.dropdown-item.dropdown-toggle.show {
  color: var(--menu-hover-color);
  background-color: var(--menu-hover-bg);
}

.dropdown-menu .dropdown-item.active {
  color: var(--menu-active-color);
  background: none;
  font-weight: bold; /* Vet voor actieve submenu items */
}

/* Mobiele menu styling - positionering rechts */
.rf-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

.rf-mobile-menu {
  /* Positioning and layout */
  position: fixed;
  top: 0;
  right: -100%; /* Start off-screen, slide in when active */
  width: 320px; /* Optimized width */
  height: 100vh;
  
  /* Styling */
  background-color: white;
  overflow-y: auto;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  
  /* Layout */
  display: none; /* Hidden by default */
  flex-direction: column;
  padding: 2rem;
  
  /* Stacking and interactions */
  z-index: 2000;
  pointer-events: auto;
  
  /* Transitions */
  transition: right 0.3s ease;
}

.rf-mobile-menu.active {
  display: flex;
}

/* Mobiele responsive styling - Bootstrap override met maximale specificiteit */
@media (max-width: 992px) {
/* Mobile submenu styling - eenvoudiger zonder ::after */
/* CRITICAL FIX: Hide desktop actions when hamburger menu is active */
  .rf-actions {display: none;
  }

  .rf-desktop-nav {display: none;
  }

  .rf-hamburger {display: flex;
  }

  .rf-top-bar .rf-top-messages {
    justify-content: flex-start; /* Links uitlijnen - mobile */
  }

  .rf-top-message {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
  }

  .rf-footer-column {
    margin-bottom: 2rem;
  }

  .navbar .nav-link:focus {
    background-color: var(--menu-main-hover-bg);
    color: var(--menu-hover-color);
  }

  .navbar-light .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: var(--menu-hover-bg);
    color: var(--menu-hover-color);
  }

  .navbar .nav-link.active {
    color: var(--menu-active-color);
    font-weight: bold;
  }

  .navbar .dropdown-item.active {
    color: var(--menu-active-color);
    font-weight: bold;
  }

  .dropdown-menu .dropend > .dropdown-menu {
    position: static;
    width: 100%;
    margin-left: 1rem;
    box-shadow: none;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }

  .dropdown-item.dropdown-toggle {
    position: relative;
  }

  .article-header {
    width: 100%;
    position: static;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .article-header .row {
    display: block;
    width: 100%;
    margin: 0;
  }

  .article-header-content {
    width: 100%;
    max-width: 100%;
    padding: 2rem 1rem;
    display: block;
  }

  .article-header-image {
    width: 100%;
    max-width: 100%;
    height: 300px;
    min-height: 250px;
    position: static;
    order: -1;
    display: block;
    overflow: hidden;
  }

  .article-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .rf-parties-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .rf-desktop-nav .navbar-nav {
    gap: 1rem;
  }

  .rf-desktop-nav .nav-link {
    padding: 6px 8px;
    font-size: 14px;
  }
/* Tables utilities */.rf-card-group .rf-card {
      width: calc(50% - 1.5rem);
    }body .rf-mobile-dossier-info,
      body .rf-sidebar-desktop,
      body .col-12.d-lg-none {
          display: none;
      }

      body .rf-content-main {
          width: 100%;
          flex: none;
      }.services-section {
          padding: 60px 0 0 0;
      }

      .waarom-kiezen-section {
          padding: 60px 0;
      }

      .section-title {
          font-size: 2rem;
      }

      /* Voordelen vertical layout - tablet aanpassingen */
      .voordelen-vertical-list {
          gap: 1.25rem;
      }

      .voordeel-item {
          padding: 1.25rem;
          gap: 1rem;
      }

      .voordeel-icon-container {
          width: 55px;
          height: 55px;
      }

      .voordeel-icon-container .voordeel-icon {
          width: 55px;
          height: 55px;
      }

      .voordeel-content .voordeel-title {
          font-size: 1.3rem;
      }

      .voordeel-content .voordeel-description {
          font-size: 0.9rem;
      }

  /* Hero utilities */

  /* Content utilities */.rf-social-icons {
      justify-content: flex-end; /* Keep right alignment on mobile */
      padding-right: 15px;
    }.rechtsbijstand-content {
          padding-left: 0;
          margin-top: 2rem;
      }

      .rechtsbijstand-title {
          font-size: 2rem;
          text-align: center;
      }

      .rf-dossier-content {
          margin: var(--spacing-sm);
          padding: var(--spacing-lg);
      }
      .rf-parties-filters {
          justify-content: center;
      }

      .rf-parties-actions {
          justify-content: center;
      }

  /* Documents utilities */.rf-document-viewer .col-lg-4 {
          margin-top: 2rem;
      }

  /* Utilities utilities *//* Verwijder problematische vw units */
      /* Forceer column layout */
      /* Reset flexbox behavior */
      /* Volledige breedte op mobiel */
      /* Reset alle flexbox en positioning */.rf-sidebar-desktop {
          display: none;
      }.faq-section {
          padding: 4rem 0 3rem 0;
      }

      .faq-description h2 {
          font-size: 1.5rem;
      }
      
      /* TABLET/MOBILE TABLES: Keep font small and show badges */
      .rf-table th,
      .rf-table td {
          font-size: 0.875rem;
          padding: 0.5rem 0.25rem;
      }
      
      /* Keep only: Reference, Title, Status, Nieuw (badges), Actions */
      /* For kantoormanager: 1=Ref, 2=Onderwerp, 3=Status, 4=Nieuw, 5=Prioriteit, 6=Klant, 7=Toegewezen, 8=Gestart, 9=Acties */
      .rf-table th:nth-child(5), /* Prioriteit - hide */
      .rf-table td:nth-child(5),
      .rf-table th:nth-child(6), /* Klant - hide */
      .rf-table td:nth-child(6),
      .rf-table th:nth-child(7), /* Toegewezen aan - hide */
      .rf-table td:nth-child(7),
      .rf-table th:nth-child(8), /* Gestart op - hide */
      .rf-table td:nth-child(8) {
          display: none;
      }
      
      /* Always show actions column */
      .rf-table th:last-child,
      .rf-table td:last-child {
          display: table-cell;
      }
}

/* Legacy rf-menu support - mobiele styling consistent maken */
.rf-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* Verticaal op mobiel */
}

.rf-menu-item {
  position: relative;
}

.rf-menu-link {
  display: block;
  padding: 1rem;
  color: var(--menu-default-color);
  text-decoration: none;
  font-weight: 500;
}

.rf-menu-link:hover {
  background-color: var(--menu-main-hover-bg); /* Grijs voor hoofdmenu */
  color: var(--menu-hover-color);
  text-decoration: none;
}

.rf-menu-link.active {
  color: var(--menu-active-color);
  font-weight: bold;
  text-decoration: none;
}

/* Dropdown styling voor legacy menu - consistente kleuren */
.rf-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  z-index: 10;
  padding: 0.5rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.rf-menu-item:hover > .rf-menu-dropdown {
  display: block;
}

.rf-menu-dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--menu-default-color);
  text-decoration: none;
}

.rf-menu-dropdown-item:hover {
  background-color: var(--menu-hover-bg); /* Roze voor submenu's */
  color: var(--menu-hover-color);
  text-decoration: none;
}

.rf-menu-dropdown-item.active {
  color: var(--menu-active-color);
  font-weight: bold;
  text-decoration: none;
}

/* ===================================================================
   COMPONENTS FOOTER
   =================================================================== */

/* Footer styling */
/* Sticky Footer Grid Setup */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Body styling consolidated above */

header {
    grid-row: 1;
}

main {
    grid-row: 2;
}

footer {
    grid-row: 3;
}

.rf-footer-main {
    background-color: var(--rf-light-red) ;
    /* #F9EFEF; /* Lichtroze achtergrond */
    color: #333;
}

/* Stijl voor bullits en hover effect in rood */
.rf-footer-links li {
    position: relative;
    padding-left: 15px;
}

.rf-footer-links li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--rf-red, #BD1E10);
}

.rf-footer-links a:hover {color: var(--rf-red, #BD1E10);
}

.rf-footer-universities {
    background-color: white; /* Witte achtergrond voor universiteiten sectie */
    padding: 30px 0;
}

/* Aanpassingen voor universiteitslogo's */
.university-logos {
    gap: 20px;
}

.partner-logo {
    padding: 0 15px;
}

.rf-footer-copyright {
    background-color: var(--rf-red, #BD1E10); /* Rode achtergrond */
    color: white;
}

.rf-footer-copyright .row {
    display: flex;
    align-items: center;
}

.rf-footer-copyright .col-md-12 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rf-footer-copyright .rf-social-icons {
    display: flex;
    margin-right: 15px;
}

.rf-footer-copyright .rf-social-icons a {
    color: white;
    margin-left: 15px;
    font-size: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: opacity 0.3s ease;
}

.rf-footer-copyright .rf-social-icons a:first-child {
    background-color: #1877f2; /* Facebook blauw */
}

.rf-footer-copyright .rf-social-icons a:nth-child(2) {
    background-color: #000000; /* Twitter/X zwart */
}

.rf-footer-copyright .rf-social-icons a:nth-child(3) {
    background-color: #0077b5; /* LinkedIn blauw */
}

.rf-footer-copyright .rf-social-icons a:hover {
    opacity: 0.8;
}

/* Responsive aanpassingen */

/* Simple Footer specifieke styling */
.rf-simple-footer {
    background-color: var(--rf-light-red);
}

footer {
    /* Zorgt ervoor dat alles onder de footer (de body achtergrond) wit is */
    background-color: transparent;
    border-bottom: none; /* Verwijdert eventuele border onderaan de footer */
}

/* Zorgen dat geen elementen onder de footer verschijnen */
body::after {display: none;
}

.rf-simple-footer-links {
    text-align: center;
    width: 100%;
}

.rf-simple-footer-links a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.rf-simple-footer-links a:hover {
    color: #BD1E10;
}

/* Footer links - ensure black color */
.rf-footer-main a {color: #333;
    text-decoration: none;
}

.rf-footer-main a:hover {color: #BD1E10;
}

/* ===================================================================
   COMPONENTS ARTICLE
   =================================================================== */

/* Artikel component styling */

/* Google Font Import - Lato */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* Article Cards - Overview Page */

/* Article Detail Page */
.article-header {
  background-color: #F9EFEF;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-bottom: var(--spacing-xl);
  overflow: hidden;
  display: flex;
}

/* Zorgt dat de rij volledig gevuld is */
.article-header .row {
  width: 100%;
  margin: 0;
}

.article-header-content {
  padding: 3rem;
  flex: 1; /* Vult resterende ruimte na foto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.article-header-image {
  padding: 0;
  flex: 0 0 auto; /* Dynamische breedte op basis van foto */
  width: auto; /* Laat foto zelf breedte bepalen */
  max-width: 60%; /* Maximaal 60% van header breedte */
  height: 400px; /* Vaste hoogte voor consistentie */
  overflow: hidden;
  display: flex;
  align-items: stretch;
  position: relative;
  min-height: 400px; /* Zet een minimale hoogte */
}

.article-header-image img {
  width: auto; /* Breedte volgt natuurlijke verhouding van foto */
  height: 100%; /* Volledige hoogte van header gebruiken */
  object-fit: cover; /* Vult hoogte, behoudt verhoudingen */
  object-position: center; /* Gecentreerd binnen beschikbare ruimte */
  display: block;
  max-width: none; /* Geen breedte beperking */
}

.article-content {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: var(--spacing-xl);
}

.article-content p {
  margin-bottom: var(--spacing-md);
}

.article-content h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.article-content h3 {
  font-size: var(--font-size-lg);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.article-content ul, .article-content ol {
  margin-left: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.article-content li {
  margin-bottom: var(--spacing-xs);
}

.article-content img {
  max-width: 100%;
  height: auto;
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius-md);
}

.article-content blockquote {
  font-style: italic;
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  background-color: var(--bg-secondary);
  border-left: 4px solid var(--color-primary);
}

.article-meta {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.article-tags {
  margin: var(--spacing-lg) 0;
}

.article-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-pill);
  color: var(--rf-red);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  transition: var(--transition-base);
}

a.article-tag:hover {
  background-color: var(--rf-red);
  color: white;
  text-decoration: none;
}

/* Actieve/huidige tag styling - rood met witte tekst */
.article-tag.fw-bold {
  background-color: var(--rf-red);
  color: white;
  font-weight: 700;
}

/* FORCE article-tag styling over Bootstrap card-body overrides */
.card-body .article-tag,
.card-footer .article-tag,
article .article-tag,
.search-result .article-tag {
  background-color: var(--bg-secondary) !important;
  color: var(--rf-red) !important;
  text-decoration: none !important;
}

.card-body .article-tag:hover,
.card-footer .article-tag:hover,
article .article-tag:hover,
.search-result .article-tag:hover {
  background-color: var(--rf-red) !important;
  color: white !important;
  text-decoration: none !important;
}

.card-body .article-tag.fw-bold,
.card-footer .article-tag.fw-bold,
article .article-tag.fw-bold,
.search-result .article-tag.fw-bold {
  background-color: var(--rf-red) !important;
  color: white !important;
  font-weight: 700 !important;
}

/* Fix populaire artikelen sidebar line-height */
.articles-page .list-group.list-group-flush .list-group-item {
    line-height: 1.5;
}

/* Fix kenniscentrum section paragraph line-height and margin */
.kenniscentrum-section p {
    line-height: 1.5;
    margin-bottom: 2rem;
}

/* Fix reviews section line-height */
.review-text {
    line-height: 1.5;
}

/* Social sharing icons */
.social-share a {
  text-decoration: none;
  transition: var(--transition-base);
}

.social-share a:hover {
  opacity: 0.7;
}

.social-facebook {
  color: #3b5998;
}

.social-linkedin {
  color: #0077b5;
}

.social-twitter {
  color: #000000;
}

.social-instagram {
  color: #e1306c;
}

.social-email {
  color: #D44638;
}

.author-image img {
  object-fit: cover;
}

/* Profile Picture Container */
.profile-picture-container {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* Indicates interactivity */
}

.profile-picture-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid var(--rf-light-gray);
  border-radius: 50%; /* Force circular shape */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* Hover effect for profile picture */
.profile-picture-container:hover img {
  transform: scale(1.75); /* 75% larger on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
  z-index: 10; /* Ensure it appears above other elements */
  position: relative;
}

.profile-picture-container div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: 1.25rem;
}

/* Related Articles */
.related-articles {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-light);
}

.related-articles .card {
  height: 100%;
  transition: var(--transition-base);
}

/* Compact homepage featured articles styling */
.col-md-6.col-lg-4 .card .card-body {
    padding: 1rem;
}

.col-md-6.col-lg-4 .card .card-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    display: block;
}

.col-md-6.col-lg-4 .card .card-title a {
    color: var(--rf-red);
    text-decoration: none;
    display: block;
}

.col-md-6.col-lg-4 .card .card-text {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Compact article cards styling - only for articles page container */
.articles-page .row.row-cols-1.row-cols-md-2.g-4 .card .card-body {
    padding: 1rem;
}

.articles-page .row.row-cols-1.row-cols-md-2.g-4 .card .card-text {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.articles-page .row.row-cols-1.row-cols-md-2.g-4 .card .card-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.articles-page .row.row-cols-1.row-cols-md-2.g-4 .card .card-title a {
    color: var(--rf-red);
    text-decoration: none;
}

.articles-page .row.row-cols-1.row-cols-md-2.g-4 .card .small.text-muted {
    font-size: 0.75rem;
    line-height: 1.2;
    margin-bottom: 0.375rem;
}

.related-articles .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* CONSOLIDATED: .related-articles .card-img-top moved to responsive section above */

/* Algemene styling voor artikel kaarten - voor consistentie op alle pagina's */
.card-img-top {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

/* Horizontale kaart afbeelding (links) styling */
.card .row .col-md-4 {
  overflow: hidden;
  padding-right: 0; /* Verwijder padding aan de rechterkant */
  height: 100%; /* Zodat afbeelding volledige hoogte krijgt */
}

.card .row .col-md-4 img {
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  width: 100%;
  display: block; /* Voorkomt witruimte onder de afbeelding */
}

/* Specifieke styling voor recente artikelen op homepage */
section .row .col-lg-6 .card .row .col-md-4 {
  padding: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

section .row .col-lg-6 .card .row .col-md-4 img {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

/* Override some standard typography for articles */
.article-content {
  font-size: var(--font-size-md);
}

/* Responsive Adjustments */

/* Fix voor tablet en mobiel - belangrijkste wijziging */

/* Extra small screens - mobiel portrait */

/* Extra styling voor horizontale kaarten in recente artikelen */
.card .row.g-0 .col-md-4.p-0.d-flex {
  position: relative;
  max-height: 100%;
}

.card .row.g-0 .col-md-4.p-0.d-flex img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .row.g-0 .col-md-8.d-flex.flex-column {
  display: flex;
  flex-direction: column;
}

.card .row.g-0 .col-md-8.d-flex.flex-column .card-body {
  flex: 1;
}

/* =================================
   UNIFORME INTERNE LINK STYLING
   ================================= */

/* Alle interne links (pages, articles, bookmarks) krijgen dezelfde styling */

/* Hover state - alleen onderstreep */

/* Broken links blijven zoals ze waren */

/* Extra kleine schermen */

/* =================================
   CMS CONTENT COMPONENTS
   ================================= */

/* Anchor/Bookmark Styling */
.rf-anchor {
    /* Invisible anchor points for smooth scrolling */
    display: inline-block;
    position: relative;
    pointer-events: none;
    /* Ensure anchor doesn't take visual space */
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Debug styling (optioneel - alleen voor testing) */
.rf-anchor-debug {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(189, 30, 16, 0.3);
    border: 1px solid var(--rf-red);
    border-radius: 50%;
    margin-left: 5px;
    pointer-events: none;
}

/* Quote Component for Articles */
.article-content .rf-quote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: #f8f9fa;
    border-left: 4px solid #61CE70;
    border-radius: 0 0.5rem 0.5rem 0;
    position: relative;
}

.article-content .rf-quote::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    font-size: 3rem;
    color: #61CE70;
    font-family: Georgia, serif;
    line-height: 1;
}

.article-content .rf-quote-text {
    font-size: 1.125rem;
    font-style: italic;
    color: #1c1f2b;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.article-content .rf-quote-text:last-child {
    margin-bottom: 0;
}

.article-content .rf-quote-author {
    display: block;
    text-align: right;
    font-style: normal;
    font-weight: 500;
    color: #989898;
    font-size: 0.9rem;
}

/* Info Box for Articles */
.article-content .rf-info-box {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-start;
}

/* CTA Button spacing in articles */
.article-content .rf-btn {
    display: inline-block;
    text-decoration: none;
}

/* Mobile responsiveness for CMS components */

/* =================================
   HORIZONTALE ARTIKEL KAARTEN
   ================================= */

/* Speciale CSS voor horizontale artikel-kaarten zonder gaten */

/* Image container neemt 1/3 van de breedte in */

/* Content container neemt 2/3 van de breedte in */

/* Zorg dat de afbeelding de hele container vult */

/* Responsive aanpassingen voor horizontale kaarten */

/* ===================================================================
   COMPONENTS DATA_TABLE
   =================================================================== */

/* RF Data Table Styling */
.rf-data-table-container {
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}

/* Alternerende rij kleuren - belangrijke selector om specifiek te zijn */

/* Improved horizontal scroll styling */

/* Address & Contact Display Helpers */

/* Client badges */

/* Dropdown Filter Styling - Override Bootstrap Defaults */

/* Fix voor dropdown styling inconsistenties */

/* Enhanced Responsive Design - Per Harry's requirements */

/* From 864px to 1024px - horizontal scroll but still functional */

/* From 768px to 864px - more columns hidden */

/* Small screens 576px to 768px - keep essential columns + actions */

/* Extra small screens - card layout to show more info per row */

    /* Add labels for better UX on mobile */

    /* Show more rows per item on mobile */

/* ===================================================================
   COMPONENTS MODAL
   =================================================================== */

/* Modal styling moved to components/modal.css */

/* Modal component styling moved to components/modal.css */

/* Modal form and content styling moved to components/modal.css */

/* Embedded page content and responsive modal styling moved to components/modal.css */

/* ===================================================================
   COMPONENTS MODAL-CLOSE-FIX
   =================================================================== */

/* Modal Close Button Fix - Global Styling
 * Zorgt ervoor dat alle close buttons in modals goed zichtbaar zijn
 * FIXED: Alleen kruisje zichtbaar, geen kader
 * Harry Heijes - 11 augustus 2025
 */

/* SCOPED modal close button styling - specificiteit-based, geen meer nodig */
.modal .btn-close:not(.rf-btn),
.modal-header .btn-close:not(.rf-btn) {
    /* Remove all backgrounds and borders to show only the X */
    background: none;
    border: none;
    box-shadow: none;

    /* Size and positioning */
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;

    /* Center the X icon */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Text styling */
    color: white;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    opacity: 0.9;

    /* Smooth transitions */
    transition: all 0.2s ease;
}

/* Hover effects - subtle and clean - specificiteit-based */
.modal .btn-close:hover:not(.rf-btn),
.modal .btn-close:focus:not(.rf-btn),
.modal-header .btn-close:hover:not(.rf-btn),
.modal-header .btn-close:focus:not(.rf-btn) {
    background: none;
    border: none;
    box-shadow: none;
    color: white;
    opacity: 1;
    transform: scale(1.15);
}

/* Remove focus outline - specificiteit-based */
.modal .btn-close:focus:not(.rf-btn),
.modal-header .btn-close:focus:not(.rf-btn) {
    outline: none;
    box-shadow: none;
}

/* Custom X icon using CSS content - specificiteit-based */
.modal .btn-close:not(.rf-btn)::before,
.modal-header .btn-close:not(.rf-btn)::before {
    content: '×';
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    color: white;
}

/* Voor lichte achtergronden - specificiteit-based */
.modal-header.bg-light .btn-close,
.modal-header.bg-white .btn-close {
    color: #333333;
}

.modal-header.bg-light .btn-close::before,
.modal-header.bg-white .btn-close::before {
    color: #333333;
}

.modal-header.bg-light .btn-close:hover,
.modal-header.bg-white .btn-close:hover {
    color: #000000;
}

.modal-header.bg-light .btn-close:hover::before,
.modal-header.bg-white .btn-close:hover::before {
    color: #000000;
}

/* Special case: Remove Bootstrap's default rf-btn-close background image - specificiteit-based */
.modal .btn-close:not(.rf-btn) {
    background-image: none;
}

/* Header button protection verwijderd - niet meer nodig met consistente btn rf-btn-green systeem */

/* Ensure the X is always visible on colored backgrounds - specificiteit-based */
.modal-header .btn-close::before {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* EMERGENCY: Bootstrap modal base styles - ensure modals work - NUCLEAR Z-INDEX */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal.show {display: block;
    z-index: 9999;
}

/* Bootstrap fade class - critical for modal animations */
.fade {
    transition: opacity 0.15s linear;
}

.fade:not(.show) {
    opacity: 0;
}

.fade.show {
    opacity: 1;
}

/* Ensure fading modals still display correctly */
.modal.fade.show {display: block;
    opacity: 1;
    z-index: 9999;
}

/* CRITICAL: Bootstrap modal structure CSS - THE REAL PROBLEM */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem auto;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    border-radius: 0.5rem; /* Consistent rounding voor perfecte uitlijning */
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    outline: 0;
}

.modal-xl {
    max-width: 1140px;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040; /* FIXED: Lower z-index as default */
    width: 100%;
    height: 100%;
    background-color: #000;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Modal z-index management - specific modals with controlled stacking */
#feedbackModal {
    z-index: 1050;
}

#versionFeedbackModal {
    z-index: 1055;
}

#approvalModal {
    z-index: 1060;
}

/* TARGETED FIX: Only feedbackModal specific issue - HIGHER Z-INDEX */
#feedbackModal.modal.show {display: block;
    z-index: 2100;
}

#feedbackModal .modal-dialog {margin: 30px auto;
    max-width: 90%;
    z-index: 2101;
    pointer-events: auto;
}

#feedbackModal .modal-content {background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2102;
    pointer-events: auto;
}

#feedbackModal .modal-header {
    z-index: 2103;
    pointer-events: auto;
    /* Use consistent RF header styling - removed white background override */
}

/* Fix backdrop effect - ensure modal content is interactive */
#feedbackModal.modal.show * {
    pointer-events: auto;
}

#versionFeedbackModal,
#versionFeedbackModal.modal,
#versionFeedbackModal.modal.show {
    z-index: 9999;
}

#approvalModal,
#approvalModal.modal,
#approvalModal.modal.show {
    z-index: 9999;
}

/* Modal backdrop conflicts need to override Bootstrap */
#feedbackModal + .modal-backdrop,
#versionFeedbackModal + .modal-backdrop,
#approvalModal + .modal-backdrop {
    z-index: 2099; /* CRITICAL: Must be LOWER than modal z-index 2100 */
}

/* ===================================================================
   COMPONENTS CONTENT-TABLE
   =================================================================== */

/* Rechtfabriek - Content Table Styling
 * Toegevoegd aan tabs.css voor communicatie data table
 * Harry Heijes - 27 mei 2025
 */

/* ===== CONTENT TABLE STYLING ===== */
.rf-content-table {
    margin-bottom: 0;
}

.rf-content-table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #BD1E10;
    font-weight: 600;
    color: #333333;
    font-size: 0.875rem;
    padding: 1rem 0.75rem;
    vertical-align: middle;
}

.rf-content-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #f8f9fa;
}

.rf-content-table tbody tr:hover {
    background: rgba(189, 30, 16, 0.02);
}

/* Unread indicator kolom */
.rf-content-table .rf-unread-indicator {
    width: 8px;
    height: 8px;
    background: #BD1E10;
    border-radius: 50%;
    margin: 0 auto;
}

.rf-content-table .rf-read-indicator {
    width: 8px;
    height: 8px;
    background: #e9ecef;
    border-radius: 50%;
    margin: 0 auto;
}

/* Type kolom badges */
.rf-content-type-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}

.rf-content-type-badge-sm i {
    font-size: 0.625rem;
}

.rf-type-message {
    background: rgba(97, 206, 112, 0.1);
    border-color: rgba(97, 206, 112, 0.3);
    color: #61CE70;
}

.rf-type-document {
    background: rgba(189, 30, 16, 0.1);
    border-color: rgba(189, 30, 16, 0.3);
    color: #BD1E10;
}

/* Van kolom styling */
.rf-content-author {
    font-weight: 500;
    color: #333333;
}

.rf-content-author.rf-author-klant {
    color: #61CE70;
}

.rf-content-author.rf-author-rechtfabriek {
    color: #BD1E10;
}

/* Datum kolom */
.rf-content-date {
    color: #666666;
    font-size: 0.875rem;
}

/* Status badges in table */
.rf-content-status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-weight: 500;
    border: 1px solid;
}

.rf-status-nieuw {
    background: rgba(59, 89, 152, 0.1);
    border-color: rgba(59, 89, 152, 0.3);
    color: #3b5998;
}

.rf-status-gelezen {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #6c757d;
}

.rf-status-belangrijk {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

/* Acties kolom */
.rf-content-actions-sm {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.rf-content-action-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9ecef;
    background: white;
    border-radius: 4px;
    color: #666666;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.rf-content-action-btn:hover {
    background: #f8f9fa;
    border-color: #BD1E10;
    color: #BD1E10;
}

/* JavaScript helper classes */
.switchToTab {
    cursor: pointer;
    color: #BD1E10;
    text-decoration: underline;
}

.switchToTab:hover {
    color: #9e190e;
}

/* ===================================================================
   COMPONENTS PARTIES
   =================================================================== */

/* Rechtfabriek - Parties Management Component
 * Voor partijen beheer binnen dossiers
 * Updated to follow component guidelines
 * Harry Heijes - 27 mei 2025
 */

/* ===== PARTIES CONTENT CONTAINER ===== */
.rf-parties-content {
    padding: 1rem 0;
}

/* ===================================================================
   COMPONENTS FEEDBACK
   =================================================================== */

/* Rechtfabriek - Feedback Component
 * Voor document feedback systeem
 * Harry Heijes - 27 mei 2025
 * Updated: 11 augustus 2025 - Nieuwe feedback modal styling
 */

/* CSS Variables voor Rechtfabriek kleuren */

/* ===== FEEDBACK CONTAINER ===== */
.rf-feedback-container {
    padding: 1rem 0;
}

/* ===================================================================
   COMPONENTS VERSIONS
   =================================================================== */

/* Rechtfabriek - Versions Component
 * Voor document versiebeheer
 * Harry Heijes - 27 mei 2025
 */

/* ===== VERSIONS CONTAINER ===== */
.rf-versions-container {
    padding: 1rem 0;
}

.rf-versions-list {
    max-height: 400px;
    overflow-y: auto;
}

/* ===== VERSION SELECTOR ===== */
.rf-version-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.rf-version-selector label {
    font-weight: 600;
    color: #333333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rf-version-selector select {
    flex: 1;
    max-width: 300px;
}

/* ===== VERSION ITEMS ===== */
.rf-version-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    position: relative;
}

.rf-version-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #BD1E10;
}

.rf-version-item:last-child {
    margin-bottom: 0;
}

.rf-version-item.active {
    border-color: #BD1E10;
    box-shadow: 0 0 0 2px rgba(189, 30, 16, 0.1);
}

.rf-version-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #BD1E10;
    border-radius: 4px 0 0 4px;
}

/* ===== VERSION HEADER ===== */
.rf-version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.rf-version-number {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rf-version-number .badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.rf-version-date {
    font-size: 0.875rem;
    color: #666666;
    font-weight: 500;
}

/* ===== VERSION SUMMARY ===== */
.rf-version-summary {
    padding: 0.75rem 1rem;
    background: rgba(189, 30, 16, 0.02);
    border-bottom: 1px solid #f8f9fa;
    color: #333333;
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
}

/* ===== VERSION AUTHOR ===== */
.rf-version-author {
    padding: 0.5rem 1rem;
    color: #666666;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rf-version-author i {
    color: #BD1E10;
}

/* ===== VERSION ACTIONS ===== */
.rf-version-actions {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Updated: Removed .btn reference, use .rf-btn instead */
.rf-version-actions .rf-btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* ===== VERSION COMPARISON ===== */
.rf-version-comparison {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
}

.rf-comparison-header {
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rf-comparison-title {
    font-weight: 600;
    color: #1c1f2b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rf-comparison-controls {
    display: flex;
    gap: 0.5rem;
}

.rf-comparison-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e9ecef;
}

.rf-comparison-side {
    background: white;
    padding: 1rem;
    position: relative;
}

.rf-comparison-side-title {
    font-weight: 600;
    color: #666666;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f8f9fa;
}

.rf-comparison-old {
    border-right: 1px solid #e9ecef;
}

/* ===== VERSION CHANGES ===== */
.rf-version-changes {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.rf-changes-title {
    font-weight: 600;
    color: #1c1f2b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rf-changes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rf-change-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.rf-change-added {
    background: rgba(97, 206, 112, 0.1);
    border-left: 3px solid #61CE70;
}

.rf-change-removed {
    background: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #dc3545;
}

.rf-change-modified {
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
}

.rf-change-icon {
    color: #666666;
    font-size: 0.875rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.rf-change-added .rf-change-icon {
    color: #61CE70;
}

.rf-change-removed .rf-change-icon {
    color: #dc3545;
}

.rf-change-modified .rf-change-icon {
    color: #ffc107;
}

/* ===== VERSION RESTORE ===== */
.rf-version-restore {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.rf-restore-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rf-restore-warning i {
    color: #ffc107;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.rf-restore-content {
    flex: 1;
}

.rf-restore-title {
    font-weight: 600;
    color: #856404;
    margin-bottom: 0.5rem;
}

.rf-restore-text {
    color: #856404;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.rf-restore-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== VERSION HISTORY TIMELINE ===== */
.rf-version-timeline {
    position: relative;
    padding: 1rem 0;
}

.rf-version-timeline::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #BD1E10, #e9ecef);
}

.rf-timeline-version {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 3rem;
}

.rf-timeline-version::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #BD1E10;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #BD1E10;
}

.rf-timeline-version.current::before {
    background: #61CE70;
    box-shadow: 0 0 0 2px #61CE70;
}

/* ===== EMPTY STATE ===== */
.rf-versions-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #666666;
}

.rf-versions-empty i {
    font-size: 3rem;
    color: #e9ecef;
    margin-bottom: 1rem;
}

.rf-versions-empty h4 {
    color: #666666;
    margin-bottom: 0.5rem;
}

.rf-versions-empty p {
    color: #999999;
}

/* ===== RESPONSIVE DESIGN ===== */

/* ===== PRINT STYLES ===== */

/* ===================================================================
   COMPONENTS DOCUMENT-VIEWER
   =================================================================== */

/*
Document Viewer Components CSS
Voor overview.html en andere pagina's die document viewer functionaliteit nodig hebben
Gebaseerd op simple-document-viewer.css met component-gebaseerde benadering
*/

/* Document Viewer Layout */
.rf-document-viewer {
    min-height: 600px;
}

.rf-document-display {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
}

/* Document Types */
.rf-document-iframe {
    border: none;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.rf-document-image {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.rf-text-document {
    background: #fff;
    border-radius: 8px;
    min-height: 400px;
    font-family: 'Courier New', monospace;
    line-height: 1.6;
    border: 1px solid #e9ecef;
}

.text-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-family: inherit;
    font-size: 0.9rem;
}

/* Loading States */

/* Status Badges */
/* CONSOLIDATED: rf-status-badge properties merged into line 3965 */

.rf-status-concept {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.rf-status-draft {
    background: #cce5ff;
    color: #004085;
    border: 1px solid #b3d9ff;
}

.rf-status-review {
    background: #ffe0b3;
    color: #8b4513;
    border: 1px solid #ffd280;
}

.rf-status-approved {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.rf-status-sent {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Unsupported File Type */

/* Responsive Design */

/* Print Styles */

/* Accessibility */
.rf-document-viewer:focus-within {
    outline: 2px solid var(--rf-green);
    outline-offset: 2px;
}

/* Dark mode support (if implemented) */

/* Animation for smooth transitions */
.rf-document-content {
    transition: opacity 0.3s ease;
}

/* Focus indicators for better accessibility */
/* REMOVED: Bootstrap .btn:focus - use .rf-btn:focus instead */
input.form-control:focus, select.form-control:focus, textarea.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--rf-green);
    outline-offset: 2px;
}

/* ===================================================================
   COMPONENTS DOSSIER
   =================================================================== */

/* Dossier Component Styling */

/* Status Badges */
/* CONSOLIDATED: rf-status-badge properties merged into line 3965 */

.rf-status-badge i {
    margin-right: 0.5rem; /* Add space between icon and text */
}

/* Status Colors */
.rf-status-open {
    background-color: #28a745; /* Green for open */
    color: white;
}

.rf-status-closed {
    background-color: #212529; /* Black for closed */
    color: white;
}

.rf-status-concept {
    background-color: #6c757d; /* Gray for concept/low priority */
    color: white;
}

.rf-status-in_behandeling,
.rf-status-in-behandeling {
    background-color: #28a745; /* Green for medium priority */
    color: white;
}

.rf-status-afgekeurd {
    background-color: #dc3545; /* Red for high priority/rejected */
    color: white;
}

.rf-status-goedgekeurd {
    background-color: #28a745; /* Green for approved */
    color: white;
}

/* Timeline Styling */
.rf-timeline-filter {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.rf-timeline-filter-label {
    margin-right: 1rem;
    font-weight: 500;
}

.rf-timeline-filter-options {
    display: flex;
    gap: 0.5rem;
}

.rf-timeline-filter-option {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    background-color: #f8f9fa;
}

.rf-timeline-filter-option.active {
    background-color: #007bff;
    color: white;
}

/* CONFLICTING TIMELINE CSS REMOVED - using modern timeline CSS from line ~6000 instead */

.rf-timeline-date {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* Source-specific styling */
.rf-item-klant::before {
    background-color: #28a745;
}

.rf-item-Rechtfabriek::before {
    background-color: #007bff;
}

.rf-item-ai::before {
    background-color: #6f42c1;
}

/* Document Cards */
.rf-document-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: white;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.rf-document-header {
    display: flex;
    margin-bottom: 0.5rem;
}

.rf-document-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: #6c757d;
}

.rf-document-info {
    flex: 1;
}

.rf-document-title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.rf-document-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.rf-document-content {
    font-size: 0.875rem;
}

.rf-document-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rf-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #212529;
    text-decoration: none;
    transition: background-color 0.2s;
}

.rf-btn-icon:hover {
    background-color: #e9ecef;
    color: #007bff;
}

/* Source-specific document styling */
.rf-document-klant {
    border-left: 4px solid #28a745;
}

.rf-document-Rechtfabriek {
    border-left: 4px solid #007bff;
}

.rf-document-ai {
    border-left: 4px solid #6f42c1;
}

/* Production/Phase Cards */
.rf-phase-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    background-color: white;
    overflow: hidden;
}

.rf-phase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f8f9fa;
    cursor: pointer;
}

.rf-phase-title {
    font-size: 1.125rem;
    margin: 0;
}

.rf-phase-status-badges {
    display: flex;
    gap: 0.5rem;
}

.rf-phase-content {
    padding: 0 1rem;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.rf-phase-description {
    padding-top: 1rem;
    margin-bottom: 1rem;
    border-top: 1px solid #dee2e6;
}

.rf-document-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.rf-document-list-title {
    font-size: 1rem;
    margin: 0;
}

.rf-document-list-actions {
    display: flex;
    gap: 0.5rem;
}

/* Dashboard Cards */
.dashboard-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background-color: white;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    overflow: hidden;
}

.dashboard-card-title {color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);background-color: transparent;
    border-bottom: none;padding: 0;
}

.dashboard-card-title i {
    margin-right: 0.75rem;
   color: var(--rf-green);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.dashboard-card-content {
    padding: 1rem;
}

/* Dossier Header */
.rf-dossier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rf-dossier-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.rf-dossier-reference {
    color: #6c757d;
    margin-bottom: 0;
}

.rf-dossier-status {
    display: flex;
    gap: 0.5rem;
}

/* ===================================================================
   COMPONENTS HEADER
   =================================================================== */

/**
 * Rechtfabriek Header - Clean Bootstrap Implementation
 * Harry Heijes - Juni 2025
 * CACHE BUST: v3.2 - AGGRESSIVE SPINNING LINE FIX - 2025-06-10 17:15
 *
 * Clean approach: minimal, Bootstrap-compliant, maintainable
 */

/* ===== CSS VARIABLES ===== */

/* ===== BODY SETUP ===== */
/* Body padding-top styling consolidated above */

/* PHASE 2A: Commented out to eliminate reflow storm */
/* body.header-sticky {
    padding-top: var(--header-height-lg);
} */

/* Smooth sticky transitions */
.rf-top-bar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
    backface-visibility: hidden; /* Prevents flickering */
}

/* CONSOLIDATED: rf-header transition properties merged into line 4579 */

/* PHASE 2B: Consolidated sticky header definition - merged both rules */
.rf-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(0);
    will-change: transform;
    z-index: 1041; /* Above base header z-index */
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== TOP BAR (RED STRIP) ===== */
.rf-top-bar {
    background-color: var(--rf-red);
    color: white;
    padding: 8px 0;
    font-size: 14px;
    min-height: var(--topbar-height);
    width: 100%;
    position: relative;
    z-index: 1030;
}

/* Specifieke regel voor top content - hoger in CSS specificiteit */
.rf-top-bar .rf-top-content {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Links uitlijnen */
    height: 100%;
    position: relative;
}

/* Specifieke regel voor top messages - hoger in CSS specificiteit */
.rf-top-bar .rf-top-messages {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    justify-content: flex-start; /* Links uitlijnen */
}

.rf-top-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* CONSOLIDATED: rf-social-icons properties merged into line 4547 */

/* CONSOLIDATED: rf-social-icons a properties merged into line 4561 */

.rf-social-icons a:hover {
    opacity: 0.8;
    color: white;
    text-decoration: none;
}

.rf-social-icons a.facebook { background-color: #3b5998; }
.rf-social-icons a.twitter { background-color: #000000; }
.rf-social-icons a.linkedin { background-color: #0077b5; }

/* PHASE 2B: Duplicate sticky definition removed - consolidated above */

.rf-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 10px 0;
}

/* ===== LOGO ===== */
.rf-logo-container img {
    height: 60px;
    width: auto;
}

/* ===== DESKTOP NAVIGATION ===== */
.rf-desktop-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    margin-left: 1rem;
}

/* Bootstrap navbar customization - NO needed */
.rf-desktop-nav .navbar {
    margin: 0 auto;
    padding: 0;
}

.rf-desktop-nav .navbar-nav {
    gap: 1.5rem;
}

.rf-desktop-nav .nav-link {
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--rf-dark);
    transition: all 0.3s ease;
}

.rf-desktop-nav .nav-link:hover,
.rf-desktop-nav .nav-link:focus {
    background-color: var(--rf-light);
    color: var(--rf-red);
}

.rf-desktop-nav .nav-link.active {
    color: var(--rf-red);
    font-weight: 600;
}

/* Dropdown menus */
.rf-desktop-nav .dropdown-menu {
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.rf-desktop-nav .dropdown-item:hover {
    background-color: var(--rf-light);
    color: var(--rf-red);
}

/* ===== ACTION BUTTONS ===== */
.rf-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Button styling now handled in buttons.css - no duplication needed */

/* Responsive button text */
.rf-btn .rf-text-short {
    display: none;
}

/* ===== SEARCH ICON ===== */
.rf-search-icon {
    margin-left: 10px;
    cursor: pointer;
    font-size: 20px;
    color: var(--rf-dark);
    transition: color 0.3s ease;
}

.rf-search-icon:hover {
    color: var(--rf-red);
}

/* ===== HAMBURGER MENU ===== */
.rf-hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    border: none;
    background: none;
    gap: 4px;
    z-index: 2100;
    position: relative;
}

.rf-hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--rf-dark);
    transition: all 0.3s ease;
}

.rf-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.rf-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.rf-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== MOBILE MENU OVERLAY ===== */
.rf-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1900;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.rf-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== MOBILE MENU ===== */
/* CONSOLIDATED: rf-mobile-menu properties merged into line 6762 */

.rf-mobile-menu.active {
    right: 0;
}

.rf-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rf-light);
}

.rf-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--rf-dark);
}

/* ===== MOBILE MENU ITEMS (CLEAN APPROACH) ===== */
.rf-mobile-menu .rf-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rf-mobile-menu .rf-menu-item {
    margin-bottom: 0;
    border-bottom: 1px solid var(--rf-light);
}

.rf-mobile-menu .rf-menu-link {
    display: block;
    color: var(--rf-dark);
    text-decoration: none;
    padding: 12px 0;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.rf-mobile-menu .rf-menu-link:hover {
    color: var(--rf-red);
    text-decoration: none;
}

/* Dropdown styling - CLEAN & MINIMAL */
.rf-mobile-menu .rf-menu-item-dropdown {
    position: relative;
}

.rf-mobile-menu .rf-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

/* REMOVED: dropdown icon with animation */

.rf-mobile-menu .rf-menu-dropdown {
    display: none;
    padding-left: 1.5rem;
    background-color: transparent;
    margin: 0;
    border-radius: 0;
    border-left: 2px solid var(--rf-green);
    margin-left: 1rem;
}

.rf-mobile-menu .rf-menu-dropdown.show {
    display: block;
}

.rf-mobile-menu .rf-menu-dropdown-item {
    display: block;
    font-size: 0.9em;
    color: var(--rf-dark);
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.rf-mobile-menu .rf-menu-dropdown-item:hover {
    color: var(--rf-red);
    text-decoration: none;
}

/* Submenu styling - SIMPLIFIED */
.rf-mobile-menu .rf-menu-submenu-container {
    position: relative;
}

.rf-mobile-menu .rf-submenu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.rf-mobile-menu .rf-submenu-icon {
    font-size: 10px;
    margin-left: auto;
    color: var(--rf-gray);
}

.rf-mobile-menu .rf-menu-subdropdown {
    display: none;
    padding-left: 2rem;
    margin: 0;
    background-color: transparent;
    border-radius: 4px;
}

.rf-mobile-menu .rf-menu-subdropdown.show {
    display: block;
}

.rf-mobile-menu .rf-menu-sub-item {
    font-size: 0.85em;
    color: var(--rf-dark);
    padding: 6px 0;
    border: none;
}

.rf-mobile-menu .rf-menu-sub-item:hover {
    color: var(--rf-green);
}

/* Mobile menu elements - clean approach without */
.rf-mobile-menu .rf-menu,
.rf-mobile-menu .rf-menu-item,
.rf-mobile-menu .rf-menu-link {
    display: block;
    visibility: visible;
    opacity: 1;
    color: var(--rf-dark);
    text-decoration: none;
}

.rf-mobile-menu .rf-menu-link:hover {
    color: var(--rf-red);
    text-decoration: none;
    background-color: rgba(0,0,0,0.05);
}

.rf-mobile-menu .rf-menu-dropdown-item {
    display: block;
    font-size: 0.9em;
    color: var(--rf-dark);
    padding: 8px 0;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    background: none;
}

.rf-mobile-menu .rf-menu-dropdown-item:hover {
    color: var(--rf-red);
    text-decoration: none;
    background-color: rgba(189, 30, 16, 0.05);
}

/* Mobile actions */
.rf-mobile-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rf-light);
}

.rf-mobile-actions .rf-btn {
    justify-content: center;
    width: 100%;
}

/* ===== DOSSIER MENU INTEGRATION - UPDATED STYLING ===== */
.rf-dossier-menu {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0 0 0;
    border: 1px solid #e9ecef;
}

.rf-dossier-menu h6 {
    color: var(--rf-dark);
    margin-bottom: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.rf-dossier-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rf-dossier-links li {
    margin-bottom: 0.25rem;
}

.rf-dossier-links li.divider {
    margin: 0.75rem 0;
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
}

.rf-dossier-links a {
    color: var(--rf-dark);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.rf-dossier-links a:hover,
.rf-dossier-links a.active {
    background-color: white;
    color: var(--rf-red);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Hide desktop dossier sidebar and mobile collapsible when hamburger menu includes dossier */

/* Navigation section styling */
.rf-main-nav-section {
    margin: 1rem 0 0.5rem 0;
}

.rf-nav-section-title {
    color: var(--rf-gray);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--rf-light);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Desktop Medium (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1200px) {
.rf-actions {
        gap: 0.5rem;
    }

    .rf-btn {
        padding: 0.4rem 1.2rem;
        font-size: 13px;
    }

    .rf-btn .rf-text-full {
        display: none;
    }

    .rf-btn .rf-text-short {
        display: inline;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 992px) {
/* PHASE 2A: Commented out to eliminate reflow storm */
/* body.header-sticky {
        padding-top: var(--header-height-md);
    } */

    .rf-logo-container img {
        height: 60px;
    }

    /* Fix red bar alignment - keep left aligned */
.rf-activity-stats .col {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Mobile Large (576px - 767px) */
@media (min-width: 576px) and (max-width: 768px) {
/* PHASE 2A: Commented out to eliminate reflow storm */
/* body.header-sticky {
        padding-top: var(--header-height-sm);
    } */

    .rf-logo-container img {
        height: 50px;
    }

    /* Fix red bar alignment - keep left aligned */
    .rf-social-icons {
        padding-right: 10px;
        gap: 0.25rem;
    }

    .rf-social-icons a {
        width: 28px;
        height: 28px;
        font-size: 14px;
        margin-left: 0.5rem;
    }
.rf-activity-stats .col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .rf-stat-card {
        margin-bottom: 0.75rem;
        height: auto;
    }
}

/* Mobile Small (< 576px) */
@media (max-width: 576px) {
.rf-social-icons {
        padding-right: 5px;
        gap: 0.2rem;
    }

    .rf-social-icons a {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    /* PHASE 2A: Commented out to eliminate reflow storm */
    /* body.header-sticky {
        padding-top: var(--header-height-xs);
    } */

    .rf-logo-container img {
        height: 40px;
    }

    /* Fix red bar alignment - keep left aligned */
.rf-data-table {
        overflow: visible;
    }

    .rf-table {
        display: block;
    }

    .rf-table thead {
        display: none;
    }

    .rf-table tbody {
        display: block;
    }

    .rf-table-row {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        padding: 1rem;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .rf-table-cell {
        display: block;
        padding: 0.25rem 0;
        border: none;
        text-align: left;
    }

    /* Add labels for better UX on mobile */
    .rf-table-cell:before {
        content: attr(data-label) ': ';
        font-weight: 600;
        color: #6c757d;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 0.5rem;
    }

    .rf-table-cell:first-child {
        font-size: 1.1rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9ecef;
    }

    .rf-table-cell:first-child:before {
        display: none;
    }

    .rf-table-actions {
        text-align: center;
        padding-top: 0.75rem;
        margin-top: 0.75rem;
        border-top: 1px solid #e9ecef;
    }

    .rf-table-actions:before {
        display: none;
    }

    /* Show more rows per item on mobile */
.rf-top-bar .rf-top-content {
    justify-content: flex-start;
    padding-right: 80px /* Even less space */;
  }

  .rf-top-message {
    font-size: 11px;
  }

  .rf-header {
    min-height: var(--header-height-xs);
  }

  .rf-header-content {
    padding: 5px 0;
  }

  /* Deze regel is al gedefinieerd als .rf-top-bar .rf-top-messages hierboven */
/* Cards utilities */.rf-activity-stats .row {
          display: block;
      }.rf-activity-stats .row {
          display: block;
      }

      .rf-stat-card {
          margin-bottom: 1rem;
          height: auto;
      }

  /* Tables utilities */.rf-social-icons {
          padding-right: 3px;
      }

      .rf-social-icons a {
          width: 22px;
          height: 22px;
          font-size: 11px;
      }/* Voor hele kleine schermen - optionele stack layout */

      /* Default blijft horizontaal - alleen als expliciet gevraagd wordt gestacked */
      .voordelen-vertical-list {
          gap: 0.75rem;
      }

      .voordeel-item {
          padding: 0.75rem;
          gap: 0.625rem;
      }

      .voordeel-icon-container {
          width: 42px;
          height: 42px;
      }

      .voordeel-icon-container .voordeel-icon {
          width: 42px;
          height: 42px;
      }

      .voordeel-content .voordeel-title {
          font-size: 1rem;
          margin-bottom: 0.25rem;
      }

      .voordeel-content .voordeel-description {
          font-size: 0.8rem;
          line-height: 1.4;
      }

  /* Hero utilities */
.rf-activity-stats .row {
        display: block;
    }

    .rf-stat-card {
        margin-bottom: 1rem;
        height: auto;
    }
}

/* Extra small screens - hide second message earlier */

/* Search popup styling handled in search.css - no duplication needed */

/* ===================================================================
   COMPONENTS FAQ
   =================================================================== */

/* FAQ Publieke Pagina Styling */

/* FAQ Tab Navigation - Clean Design zonder grijze achtergrond */
.faq-category-nav {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}

/* Bootstrap Tabs RF Huisstijl - Unified Styling */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
}

/* FAQ Tab Styling - Clean Design without */
.faq-category-nav .nav-tabs .nav-item .nav-link {
    /* Default state: zwarte tekst, witte achtergrond */
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #6c757d; /* donkerder grijs voor betere waarneembaarheid */
    border-bottom: none;
    margin-right: 2px;
    padding: 5px 5px 5px 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 0.375rem 0.375rem 0 0;
    text-decoration: none;
}

.faq-category-nav .nav-tabs .nav-item .nav-link:hover {
    /* Hover state: meer transparante lichtgroene achtergrond */
    background-color: rgba(97, 206, 112, 0.2); /* transparanter lichtgroen */
    color: var(--rf-dark-green);
    border-color: var(--rf-green);
    text-decoration: none;
}

.faq-category-nav .nav-tabs .nav-item .nav-link.active {
    /* Active state: witte tekst, groene achtergrond */
    background-color: var(--rf-green);
    color: #ffffff;
    border-color: var(--rf-green);
    border-bottom: 1px solid var(--rf-green);
}

.faq-category-nav .nav-tabs .nav-item .nav-link.active:hover {
    /* Active hover: behoud active styling */
    background-color: var(--rf-green);
    color: #ffffff;
    border-color: var(--rf-green);
}

/* Icon styling binnen tabs */
.faq-category-nav .nav-tabs .nav-item .nav-link i {
    margin-right: 0.5rem;
}

.nav-tabs .nav-link .badge {
    font-size: 0.7em;
    padding: 0.25em 0.5em;
    background: rgba(33, 37, 41, 0.1);
    color: #212529;
}

.nav-tabs .nav-link.active .badge {
    background: rgba(255,255,255,0.2);
    color: white;
}

.nav-tabs .nav-link:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(97, 206, 112, 0.25);
}

/* Tab Content Styling - Seamless aansluiting met tabs */
.tab-content {
    background-color: #ffffff;
    border: 1px solid #6c757d;
    border-top: none;
    padding: 2rem;
    border-radius: 0 0 0.375rem 0.375rem;
    margin-top: 0;
}

/* Tab pane display control */
.tab-content .tab-pane {
    display: none;
}
.tab-content .tab-pane.active {
    display: block;
}
.tab-content .tab-pane.show {
    display: block;
}

.tab-pane {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FAQ Accordion Styling - Clean Design met Hover Effects */
.faq-accordion .accordion-item {
    border: 1px solid #e9ecef;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.2s ease;
}

/* Hover effect voor hele FAQ accordion item */
.faq-accordion .accordion-item:hover {
    border-color: var(--rf-red);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
    transform: translateY(-1px);
}

/* FAQ Accordion Buttons - DRY Architecture */
.faq-accordion .accordion-button {
    /* Base styling for all states */
    border: none;
    padding: 1.25rem 1.5rem;
    font-weight: 500;
    font-size: 1rem;
    text-align: left;
    transition: all 0.3s ease;
    width: 100%;
    cursor: pointer;

    /* Default colors: roze achtergrond, rode tekst */
    background: var(--rf-light-red);
    color: var(--rf-red);
}

/* Collapsed state: wit ipv roze */
.faq-accordion .accordion-button.collapsed {
    background: white;
    color: var(--rf-text-dark, #333333); /* Donkere tekst voor collapsed state */
}

/* Expanded state: lichtroze achtergrond, witte tekst */
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--rf-light-red); /* lichtroze achtergrond */
    color: var(--rf-red); /* rode tekst */
}

/* Hover: altijd roze achtergrond (behalve expanded) */
.faq-accordion .accordion-button:hover {
    background: var(--bg-accent);
    color: var(--rf-red);
}

/* Expanded hover: blijf groen */
.faq-accordion .accordion-button:not(.collapsed):hover {
    background: var(--rf-light-red); /* lichtroze achtergrond */
    color: var(--rf-red); /* rode tekst */
}

/* Focus state: geen outline */
.faq-accordion .accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.faq-accordion .accordion-body {
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

/* FAQ Accordion Arrow Styling - Clean without */
.faq-accordion .accordion-button::after {
    color: var(--rf-red);
    font-weight: 700;
    font-size: 1.1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%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-.708z'/%3e%3c/svg%3e");
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    color: white !important;
    font-weight: 700;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%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-.708z'/%3e%3c/svg%3e");
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Contact button styling */

/* ===================================================================
   COMPONENTS PROFILE-PICTURE
   =================================================================== */

/* Profile Picture Component - Universele styling voor alle formaten */

/* Base styling voor alle profile pictures */
.profile-picture,
.profile-picture img,
.rounded-circle {
  border-radius: 50%;
}

/* Zorg dat alle img elementen in rounded containers correct worden weergegeven */
.rounded-circle img,
.profile-picture img,
.profile-picture-container img,
.profile-picture-large img,
.profile-picture-medium img,
.profile-picture-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

/* Verschillende formaten */
.profile-picture-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-picture-medium {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-picture-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Algemene profile picture container (backwards compatibility) */
.profile-picture-container {
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Fallback div styling voor placeholders */
.profile-picture div,
.profile-picture-container div,
.profile-picture-large div,
.profile-picture-medium div,
.profile-picture-small div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 50%;
  background-color: var(--bs-secondary, #6c757d);
  color: white;
}

/* Hover effects voor interactieve elements */
.profile-picture-container.interactive:hover img,
.profile-picture.interactive:hover img {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Specifieke fix voor DataTables en gebruikerslijsten */
table .profile-picture,
table .profile-picture-container,
table .rounded-circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Bootstrap override voor consistentie */
.table td img.rounded-circle,
.list-group-item img.rounded-circle,
.card img.rounded-circle {
  object-fit: cover;
  object-position: center;
}

/* Fix voor inline profiel elementen in tekst */
.d-inline-flex.align-items-center.justify-content-center.rounded-circle {
  overflow: hidden;
}

.d-inline-flex.align-items-center.justify-content-center.rounded-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================================================================
   MAIN INDEX
   =================================================================== */

/* =================================
   RECHTFABRIEK INDEX.CSS - COMPLETE
   ================================= */

/* ===== BESTAANDE COMPONENTS ===== */

/* ===== BETAALBARE RECHTSBIJSTAND SECTION ===== */
.betaalbare-rechtsbijstand-section {
    background: white;
    padding: 30px 0;
    position: relative;
    margin-top: 0; /* Default - overridden by media queries */
}

.rechtsbijstand-image-container {
    text-align: center;
}

.rechtsbijstand-image-container img {
    border-radius: 12px;
}

/* Banner link styling - hover lift effect */
.banner-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.banner-link:hover {
    transform: translateY(-5px);
}

.banner-link:focus,
.banner-link:active {
    outline: none;
    box-shadow: none;
}

.banner-link img {
    transition: box-shadow 0.3s ease;
}

.banner-link:hover img {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Mobile styling voor rechtsbijstand image */
@media (max-width: 767px) {
    .rechtsbijstand-image-container img {
        max-width: 90%;
    }
}

.rechtsbijstand-content {
    padding-left: 2rem;
}

.rechtsbijstand-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--rf-red);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.rechtsbijstand-intro,
.rechtsbijstand-description,
.rechtsbijstand-footer {
    color: #333;
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.rechtsbijstand-process {
    color: #333;
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.rechtsbijstand-process strong {
    font-weight: 600;
}

.rechtsbijstand-link {
    color: var(--rf-red);
    text-decoration: none;
    font-weight: 500;
}

.rechtsbijstand-link:hover {
    color: var(--rf-secondary-red);
    text-decoration: underline;
}

.rechtsbijstand-examples-link {
    color: var(--rf-red);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.rechtsbijstand-examples-link:hover {
    color: var(--rf-secondary-red);
    text-decoration: none;
    transform: translateX(5px);
}

.rechtsbijstand-examples-link span {
    font-size: 1.2rem;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.rechtsbijstand-examples-link:hover span {
    transform: translateX(3px);
}

/* Responsive design voor Betaalbare Rechtsbijstand */

/* ===== SERVICES SECTION ===== */
.services-section {
    background: white;
    padding: 60px 0 100px 0;
    position: relative;
    margin-bottom: 0;
}

.service-card {
    background: white;
    border-radius: 8px;
    padding: 40px 30px;
    text-align: left;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: none;
    min-height: 360px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.service-icon {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 20px;
    text-align: left;
}

/* SVG icon styling for service cards */
.service-icon svg {
    width: 48px;
    height: 48px;
    fill: var(--rf-red);
    stroke: var(--rf-red);
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon svg {
    transform: scale(1.1);
}

/* IMG icon styling for service cards */
.service-icon img {
    width: 48px;
    height: 48px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(82%) saturate(2492%) hue-rotate(349deg) brightness(89%) contrast(96%);
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon img {
    transform: scale(1.1);
}

.service-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.service-divider {
    width: 40px;
    height: 2px;
    background-color: var(--rf-red, #BD1E10);
    margin-bottom: 20px;
    border-radius: 1px;
}

.service-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    text-align: left;
}

/* ===== RODE SECTIE MET PIJL ===== */
.red-section {
    background: var(--rf-red);
    color: white;
    text-align: center;
    padding: 80px 0 80px 0;
    position: relative;
    margin-top: -60px;
    margin-bottom: -50px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    z-index: 1;
}

.red-section h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Pijl naar beneden */
.arrow-down-red {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid var(--rf-red);
}
.arrow-down-pink {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #F9EFEF;
    z-index: 10;
}

/* ===== WAAROM KIEZEN SECTION ===== */
.waarom-kiezen-section {
    background: #F9EFEF;
    padding: 80px 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.waarom-kiezen-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.waarom-kiezen-section .row {
    align-items: stretch;
}

.waarom-kiezen-section .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
}

.section-underline {
    width: 60px;
    height: 3px;
    background: #dc3545;
    margin-bottom: 50px;
}

/* Advocaat illustratie container */
.illustration-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
    margin-bottom: 30px;
    height: 100%;
}

.advocate-illustration {
    max-width: 100%;
    width: 90%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.1));
}

/* ===== VOORDEEL VERTICAL LAYOUT - NIEUWE STYLING ===== */

/* Verticale lijst container */
.voordelen-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
}

/* Individueel voordeel item - horizontale layout */
.voordeel-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.voordeel-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Icon container - links gepositioneerd - GEEN achtergrond */
.voordeel-icon-container {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.voordeel-item:hover .voordeel-icon-container {
    transform: scale(1.05);
}

/* Icon styling - volledige grootte van container */
.voordeel-icon-container .voordeel-icon {
    width: 60px;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(82%) saturate(2492%) hue-rotate(349deg) brightness(89%) contrast(96%);
    transition: transform 0.3s ease;
    object-fit: contain;
}

.voordeel-item:hover .voordeel-icon-container .voordeel-icon {
    transform: scale(1.05);
}

/* Content area - rechts van icon */
.voordeel-content {
    flex: 1;
    text-align: left;
}

/* Titel styling - links uitgelijnd */
.voordeel-content .voordeel-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--rf-red);
    margin-bottom: 0.25rem;
    line-height: 1.2;
    margin-top: 0;
}

/* Beschrijving styling - links uitgelijnd */
.voordeel-content .voordeel-description {
    color: #2b2b2b;
    line-height: 1.4;
    font-size: 0.95rem;
    margin-bottom: 0;
    margin: 0;
}

/* ===== LEGACY VOORDEEL CARDS - BEHOUDEN VOOR BACKWARD COMPATIBILITY ===== */

/* Legacy voordeel icon styling */
.voordeel-icon {
    font-size: 2.5rem;
    color: var(--rf-red);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0;
}

/* SVG images binnen legacy voordeel-icon */
.voordeel-icon img,
img.voordeel-icon {
    width: 48px;
    height: 48px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(82%) saturate(2492%) hue-rotate(349deg) brightness(89%) contrast(96%);
    transition: transform 0.3s ease;
    object-fit: contain;
}

/* Bootstrap icons behouden hun kleur van parent */
.voordeel-icon i {
    color: inherit;
}

/* Legacy hover effects */

.voordeel-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--rf-red);
    margin-bottom: 0.25rem;
    margin-top: 0;
}

.voordeel-description {
    color: #2b2b2b;
    line-height: 1.4;
    font-size: 0.95rem;
    margin: 0;
}

/* Legacy grid layout voor voordelen */

/* =================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ================================= */

/* ===== TABLET (max-width: 992px) ===== */

/* ===== MOBILE (max-width: 768px) ===== */

/* ===== KENNISCENTRUM SECTIE ===== */
.kenniscentrum-section {
    position: relative;
    z-index: 2;
    background: white;padding-top: 60px;
}

/* ===== SMALL MOBILE (max-width: 576px) ===== */

/* ===== EXTRA SMALL MOBILE (max-width: 480px) ===== */

/* ===== FAQ/CONTACT DOORVERWIJZING SECTIE ===== */
.faq-contact-section-fullwidth {
    background: #f8f9fa;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 3rem 0;
}

.faq-contact-section-fullwidth h3 {
    color: #333;
    font-weight: 600;
    font-size: 1.75rem;
}

.faq-contact-section-fullwidth p {
    color: #6c757d;
    font-size: 1.1rem;
}

/**
 * PRODUCTIONS CSS - Consolidated from dossier/productions.css + modules/productions.css
 * Productions UX Redesign v2.0 - Card-based Interface
 * Harry's Simplified Production Workflow
 *
 * Focus: 1 card per productie, uitklapbare versie geschiedenis
 * Design: Clean, intuitive, consistent met communication.html
 */

/* ====== Concept Banner (Consistent met Communication) ====== */
.concept-banner {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-md);
}

.concept-banner h6 {
    color: var(--color-warning);
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

/* ====== Productions Container ====== */
.productions-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ====== Production Cards - 1 Card per Productie ====== */
.production-card {
    background: white;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-lg, 0.5rem);
    padding: 1rem;
    transition: all 0.2s ease;
    border-left: 3px solid var(--rf-gray-200, #e5e7eb);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.production-card:hover {
    border-left-color: var(--rf-green, #61ce70);
    box-shadow: 0 4px 12px rgba(97, 206, 112, 0.15);
    transform: translateY(-1px);
}

/* ====== Production Header ====== */
.production-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.production-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.production-icon {
    flex-shrink: 0;
    color: var(--rf-gray-600, #4b5563);
    font-size: 1.5rem;
    margin-top: 0.125rem;
}

.production-details {
    flex: 1;
    min-width: 0;
}

.production-title {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ====== Status Badges - Harry's Simplified Logic ====== */

/* CONSOLIDATED: badge-concept properties merged into line 4226 */

.badge-nieuw {background-color: var(--rf-red, #bd1e10);color: white;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
}

.badge-feedback {
    background-color: #dc3545;
    color: #fff;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    border: none;
}

/* DISABLED: Pulse feedback animation removed per user request
@keyframes pulse-feedback {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        transform: scale(1);
    }
}

/* ====== Primary Actions - Most Used Functions ====== */

/* ====== Expandable Version History ====== */
.version-history-container {
    /* Background and borders */
    background: var(--bg-light, #f8f9fa);
    border: 1px solid var(--border-light, #e9ecef);
    border-top: 1px solid var(--border-light);
    border-radius: var(--radius-md, 6px);
    
    /* Spacing */
    margin-top: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: -1rem;
    padding: 1rem;
    padding-top: 1rem;
}

.version-history-header {
    margin-bottom: 0.75rem;
}

.version-history-header h6 {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ====== Version Stack Items - HARRY'S CLEAN STYLE ====== */
.version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: white;
    transition: all 0.2s ease;
}

/* Clean white version without blue background */
.version-item-clean {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    background: white;
    transition: all 0.2s ease;
    border-left: 3px solid #e5e7eb;
}

.version-item-clean:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-left-color: var(--rf-green, #61ce70);
}

.version-item:hover {
    border-color: var(--rf-gray-300, #d1d5db);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.1);
}

.version-item:last-child {
    margin-bottom: 0;
}

/* Concept versies styling */

/* Verzonden versies styling */

/* Latest version highlighting */

.version-info {
    flex: 1;
    min-width: 0;
}

.version-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.version-meta strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.badge-concept-small {
    background-color: #ffc107;
    color: #000;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: var(--font-weight-medium);
}

.badge-sent {
    background-color: #d1f2eb;
    color: #0f5132;
    border: 1px solid #28a745;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.badge-ontvangen {
    background-color: #cff4fc;
    color: #055160;
    border: none;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.badge-goedgekeurd {
    background-color: #d1f2eb;
    color: #0f5132;
    border: 1px solid #28a745;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

/* Version description styling */
.version-description {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid #f8f9fa;
}

.version-description small {
    line-height: 1.4;
    color: #6c757d;
}

.desc-toggle i {
    transition: transform 0.2s ease;
}

.desc-toggle.expanded i {
    transform: rotate(180deg);
}

/* ====== Version Actions ====== */
.version-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ====== Timeline Meta Layout (zoals Communication.html) ====== */
.timeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

/* Timeline Badges - consistent with communication */

/* Updated: Removed .btn reference, use .rf-btn instead */
.version-actions .rf-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

/* ====== Empty State ====== */
.productions-container .text-center.py-5 {
    background: linear-gradient(135deg, var(--bg-light) 0%, #f8f9fa 100%);
    border-radius: var(--radius-lg);
    margin: 2rem 0;
    padding: 3rem 2rem;
    border: 2px dashed var(--border-light);
}

/* ====== Toggle Button States ====== */

.production-card .collapse-text,
.production-card .collapse-icon {
    transition: opacity 0.2s ease;
}

/* ====== PDF Preview Modal ====== */

/* ====== Modal Enhancements ====== */
.modal-xl .modal-dialog {
    max-width: 90vw;
}

.modal .form-control[type="file"]:hover {
    border-color: var(--rf-green, #61ce70);
    background-color: rgba(97, 206, 112, 0.05);
}

/* ====== Responsive Design ====== */

/* ====== Loading States ====== */

/* CONSOLIDATED: spin animation merged with line 5919 */

/* ====== Focus Management ====== */
.production-card:focus-within {
    outline: 2px solid var(--rf-green, #61ce70);
    outline-offset: 2px;
}

/* ====== Success States ====== */

/* ====== Feedback Modal Styling ====== */
.feedback-item {
    transition: all 0.2s ease;
}

.feedback-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feedback-content p {color: #212529;
    font-weight: 500;
    line-height: 1.5;
}

.accordion-button:not(.collapsed) {
    background-color: var(--rf-green, #61ce70);
    color: white;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(97, 206, 112, 0.25);
}

/* ====== Print Styles ====== */

/* END PRODUCTIONS CSS */

/**
 * DOSSIER SIDEBAR CSS - Consolidated from dossier/sidebar.css
 * Rechtfabriek Dossier Sidebar CSS
 */

/* ====== Dossier Layout - Direct Implementation ====== */
.rf-dossier-layout {
    background-color: var(--bg-secondary);
}

/* ====== Layout Containers - Custom Grid ====== */
.rf-dossier-layout .row.g-0 {
    display: flex;
    margin: 0;
    padding: 0;
}

/* Desktop Sidebar - OPTIE 1: COMPACT DESIGN */
.rf-sidebar-desktop {
    width: 200px; /* Reduced from 250px */
    flex-shrink: 0;
    background-color: transparent;
}

/* Hide sidebar on mobile */

/* Main Content */
.rf-content-main {
    flex: 1;
    min-width: 0;
}

/* ====== Sidebar Styling ====== */
.rf-sidebar-wrapper {
    position: sticky;
    top: 1rem;
    height: calc(100vh - 140px);
    overflow-y: auto;
    padding: var(--spacing-md);
    background-color: transparent;
}

.rf-sidebar {
    background-color: transparent;
}

.rf-sidebar-nav {
    margin-bottom: var(--spacing-md);
}

.rf-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px; /* Halved margin between menu items */
}

.rf-nav-item {
    margin: 0;
}

.rf-nav-link {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced from var(--spacing-sm, 0.75rem) */
    padding: 8px 12px; /* Restored original padding */
    color: var(--text-primary, #1c1f2b); /* Changed to neutral color */
    text-decoration: none;
    background-color: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-light, #dfe1e3);
    border-radius: 4px; /* Reduced from var(--radius-lg, 1rem) */
    transition: all var(--transition-fast, 0.15s ease);
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px; /* Added smaller font size */
    box-shadow: none; /* Removed shadow for cleaner look */
}

.rf-nav-link:hover {
    background-color: #f1f3f4; /* Lighter hover color */
    color: var(--rf-red, #1c1f2b);
    text-decoration: none;
    transform: none; /* Removed transform for subtler effect */
    box-shadow: none; /* Removed shadow */
    border-color: var(--rf-green, #61CE70);
}

.rf-nav-link.rf-nav-active {
    background-color: var(--rf-green, #61CE70); /* Solid color instead of gradient */
    color: white;
    border-color: var(--rf-green, #61CE70);
    box-shadow: none; /* Removed shadow for cleaner look */
}

/* Extra specifieke regel om conflicten te voorkomen */
.rf-sidebar-nav .rf-nav-list .rf-nav-item .rf-nav-link.rf-nav-active {
    background: var(--rf-green); 
    /* background: linear-gradient(135deg, var(--rf-green) 0%, rgba(97, 206, 112, 0.9) 100%); */
    color: white;
    border-color: var(--rf-green);
}

.rf-nav-link i {
    font-size: 18px; /* Reduced from 1.1rem */
    width: 16px; /* Reduced from 20px */
    text-align: center;
    flex-shrink: 0;
}

.rf-nav-link span:not(.badge) {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Ensure badges don't flex-grow in nav links */
.rf-nav-link .badge {
    flex: none;
}

.rf-nav-badge {
    background-color: var(--rf-red);
    color: white;
    font-size: 10px; /* Reduced from 0.7rem */
    font-weight: bold;
    padding: 2px 5px; /* Reduced padding */
    border-radius: 10px; /* Smaller radius */
    min-width: 16px; /* Reduced from 18px */
    height: 16px; /* Reduced from 18px */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



/* Stats card icon positioning voor badges */
.rf-stat-icon {
    position: relative;
    display: inline-block;
}

.rf-nav-badge-warning {
    background-color: var(--color-warning, #ffc107);
    color: var(--text-dark, #000);
}

/* OPERATION CLEAN SLATE: Disabled navigation styles */
.rf-nav-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.rf-nav-badge-disabled {
    background-color: var(--color-muted);
    color: var(--text-white);
    font-size: 0.6rem;
}

/* 🚀 V2 BETA STYLING */
.rf-nav-beta {
    border-left: 3px solid #0d6efd;
    background: rgba(13, 110, 253, 0.05);
    position: relative;
}

.rf-nav-beta::before {
    content: "NEW";
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(45deg, #0d6efd, #198754);
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}

.rf-nav-badge-beta {
    background: linear-gradient(45deg, #0d6efd, #198754);
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    animation: pulse 2s infinite;
}

/* CONSOLIDATED: pulse animation merged with line 4212 */

.rf-nav-beta:hover {
    background: rgba(13, 110, 253, 0.1);
    border-left-color: #0d6efd;
}

/* ====== Content Area - Full Width on Desktop ====== */
.rf-dossier-content {
    background-color: var(--bg-primary);
    border-radius: 6px; /* Reduced from var(--radius-lg) */
    padding: 20px; /* Restored original content padding */
    min-height: calc(100vh - 140px);
    box-shadow: var(--shadow-sm);
    margin: 6px; /* Halved from var(--spacing-md) - smaller margin between header and content */
}

/* Make content use full available width */

/* ====== Mobile Sidebar ====== */
.rf-mobile-dossier-info {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.rf-mobile-info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-md);
}

.rf-mobile-reference {
    background: var(--rf-green);
    color: var(--text-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.rf-mobile-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}

.rf-sidebar-mobile {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

/* ====== Dashboard Cards - Full Width ====== */
.dashboard-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--spacing-lg);
}

.dashboard-card-title {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.dashboard-card-title i {
    color: var(--rf-green);
}

/* ====== Responsive Design ====== */

/* END DOSSIER SIDEBAR CSS */

/* Updated: Removed .btn reference, use .rf-btn instead */
.faq-contact-section-fullwidth a:not(.rf-btn) {
    color: var(--rf-green);
    text-decoration: none;
    font-weight: 600;
}

.faq-contact-section-fullwidth a:not(.rf-btn):hover {
    color: #218838;
    text-decoration: underline;
}

.faq-contact-section-fullwidth .rf-btn {
    font-size: 1rem;
    padding: 0.75rem 2rem;
}

/* Mobile responsive */


/* =================================
   HOMEPAGE FAQ SECTIE - MINI-FAQ COMPONENT
   ================================= */

.faq-section {
    background: white;
    position: relative;
    z-index: 2;
    scroll-margin-top: 60px; /* Extra offset voor FAQ sectie bookmark */
}

/* FAQ Illustratie Container - Homepage Specifiek */
.faq-illustration-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.faq-description {
    text-align: left;
}

.faq-description h2 {
    color: var(--rf-red);
    font-weight: 600;
    margin-bottom: 1rem;
}

.faq-description p {
    color: #6c757d;
    line-height: 1.6;
    font-size: 1rem;
}

/* FAQ Component Container */
.faq-component-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Mini-FAQ Component Override voor Homepage */
.faq-section .mini-faq-component {
    background: transparent;
    border: none;
    padding: 0;
    height: 100%;
}

.faq-section .mini-faq-header h4 {
    color: #333;
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Homepage FAQ Responsive Design */

/**
 * COMMUNICATION.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/**
 * Communication Module Specific Styling
 * Voor de nieuwe unified communication interface
 *
 * Gebruikt RF design system uit main.css voor buttons, badges, colors etc.
 * Alleen module-specifieke styling hier gedefinieerd
 */

/* ====== Timeline Container & Items ====== */
.timeline-container {
    max-height: 85vh; /* Meer hoogte voor meer items */
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom scrollbar styling */
.timeline-container::-webkit-scrollbar {
    width: 6px;
}

.timeline-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background: var(--rf-green);
    border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
    background: var(--rf-red-dark, #9e190e);
}

/* Timeline Items - Compacter voor meer items per pagina */
.timeline-item {
    border-left: 3px solid var(--rf-green);
    padding: 0.75rem; /* Minder padding */
    margin-bottom: 0.75rem; /* Minder ruimte tussen items */
    transition: all 0.2s ease-in-out;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    background-color: white;
    line-height: 1.3; /* Compactere line-height */
}

.timeline-item:hover {border-color: var(--rf-red);
    box-shadow: 0 2px 8px rgba(189, 30, 16, 0.1);
}

/* Timeline item status variations */
.timeline-item[data-status="concept"] {
    border-left-color: var(--color-warning);
}

.timeline-item[data-status="ontvangen"] {
    border-left-color: var(--rf-blue);
}

.timeline-item[data-status="verzonden"] {
    border-left-color: var(--rf-green);
}

/* ====== Read/Unread Status Styling ====== */
.timeline-item.unread {
    background-color: rgba(97, 206, 112, 0.08); /* Licht groen achtergrond */border-color: var(--rf-green);border-left-color: var(--rf-green);
    box-shadow: 0 1px 3px rgba(97, 206, 112, 0.15);
}

.timeline-item.unread .timeline-title {
    font-weight: 600;
    color: #000; /* Zwart voor contrast */
}

.timeline-item.read {
    background-color: white;
}

.timeline-item.read .timeline-title {
    font-weight: 600;
    color: #000; /* Zwarter voor meer contrast */
}

.timeline-item.read .content-preview p,
.timeline-item.read .timeline-date {
    color: #333; /* Donkerder dan standaard text-secondary */
}

/* Nieuw badge styling */
.badge-nieuw {
   background-color: var(--rf-red);color: white;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
}

/* ====== Timeline Layout ====== */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem; /* Minder gap */
    margin-bottom: 0.25rem; /* Minder margin */
}

.timeline-header .content-section {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.timeline-icon {
    margin-right: 0.75rem;
    flex-shrink: 0;
    color: var(--rf-blue);
}

.timeline-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.timeline-badges {
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
}

.timeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem; /* Minder margin */
}

.timeline-date {
    flex: 1;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.timeline-actions {
    flex-shrink: 0;
}

/* ====== Content Preview - Compacter ====== */
.content-preview {
    margin-top: 0.4rem; /* Minder margin */
    margin-bottom: 0.4rem;
    line-height: 1.3; /* Compacter */
}

.content-preview p {
    margin-bottom: 0;
    font-size: 0.85rem; /* Kleiner font */
    line-height: 1.25; /* Compacter */
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ====== Communication-Specific Badges ====== */
/* Using RF badge system but with communication-specific colors */
/* CONSOLIDATED: badge-concept properties merged into line 4226 */

.badge-verzonden {
    background-color: var(--rf-green);
    color: white;
    font-weight: var(--font-weight-medium);
}

.badge-ontvangen {
    background-color: var(--rf-blue);
    color: white;
    font-weight: var(--font-weight-medium);
}

/* ====== Concept Banner ====== */
.concept-banner {
    background-color: rgba(189, 30, 16, 0.05);
    border: 1px solid var(--rf-red);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.concept-banner h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

/* ====== Mobile Filter Actions Layout ====== */
.mobile-filter-actions {display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.filter-container-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.filter-select-mobile {
    flex: 1;
    min-width: 140px;
    max-width: 180px;
}

/* ====== Filter Label Styling ====== */
.form-label.text-nowrap {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* Desktop filter styling */
.filter-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-select {
    width: 200px;
    max-width: 200px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

/* ====== File Info Display ====== */
.file-info {
    background-color: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

/* ====== Empty State Styling ====== */
.text-center.py-5 {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--rf-light-gray) 100%);
    border-radius: var(--radius-lg);
    margin: 2rem 0;
    padding: 3rem 2rem;
}

.text-center.py-5 i {
    color: var(--text-secondary);
}

.text-center.py-5 h5,
.text-center.py-5 p {
    color: var(--text-secondary);
}

/* ====== Pulse Animation ====== */

/* CONSOLIDATED: pulse animation merged with line 4212 */

/* ====== Mobile Badge Responsiveness - Harry's Request ====== */

/* Desktop specific adjustments */

/* ====== Modal Improvements ====== */
/* Enhanced modal spacing and UX */
.modal-lg .modal-body {
    padding: 1.5rem 2rem;
}

.modal-lg .modal-header {
    padding: 0.9375rem 2rem; /* 75% van 1.25rem = 0.9375rem */
    border-bottom: 1px solid var(--border-light);
}

.modal-lg .modal-footer {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--border-light);
}

/* Better form spacing in modals */
.modal .form-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 0.5rem;
}

.modal .form-text i {
    color: var(--rf-blue);
}

/* Enhanced button spacing */
/* Updated: Removed .btn reference, use .rf-btn instead */
.modal-footer .rf-btn {
    min-width: 120px;
    font-weight: var(--font-weight-medium);
}

/* Better textarea in modals */
.modal textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* File input styling in modals */
.modal .form-control[type="file"] {
    padding: 0.75rem;
    border: 2px dashed var(--border-light);
    background-color: var(--bg-light);
    transition: all 0.2s ease;
}

.modal .form-control[type="file"]:hover {
    border-color: var(--rf-green);
    background-color: rgba(97, 206, 112, 0.05);
}

.modal .form-control[type="file"]:focus {
    border-color: var(--rf-green);
    box-shadow: 0 0 0 0.2rem rgba(97, 206, 112, 0.25);
}

/* Checkbox styling improvements */
.modal .form-check {
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.modal .form-check-label {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

/* Mobile modal improvements */

/* ====== SIMPLIFIED COMMUNICATION LAYOUT ====== */

/* Communication Container - Simplified */
.communication-container {
    width: 100%;
}

/* Production Items - Simple styling */
.timeline-item[data-status="productie"] {border-left-color: var(--rf-blue);
    background: linear-gradient(90deg, rgba(59, 89, 152, 0.05) 0%, transparent 100%);
}

.timeline-item[data-status="productie"]:hover {border-left-color: var(--rf-red);
    background: linear-gradient(90deg, rgba(189, 30, 16, 0.05) 0%, transparent 100%);
}

/* Badge Styling - Simplified Colors */
/* DUPLICATE REMOVED: .badge.bg-primary consolidated above */

/* REMOVED: Bootstrap .badge.bg-warning - use .rf-badge-warning */

/* REMOVED: Conflicting !important badge override */

/* Bootstrap margin utility classes */
.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

/* Stat-card badge positioning */
.rf-stat-icon {
    position: relative;
}

/* REMOVED: This was overriding Bootstrap badge padding and making badges unreadable 
   The padding: 0 rule removed all text spacing, making numbers invisible */

/* ====== Print Styles ====== */

/**
 * OVERVIEW.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/* Activiteit Overzicht Cards - Gelijke hoogte */
.rf-activity-stats {
    margin-bottom: 1rem;
}

.rf-stat-card {
    /* Background and borders */
    background: var(--bg-primary, white);
    border: 1px solid var(--border-light, #e9ecef);
    border-radius: var(--radius-lg, 0.5rem);
    
    /* Layout */
    padding: 0.75rem; /* 50% smaller - Harry's request */
    height: 100%;
    display: flex;
    flex-direction: row; /* Changed from column to row for left alignment */
    align-items: center; /* Center vertically instead of flex-start */
    gap: 0.5rem; /* Kleinere gap voor tightere layout */
    
    /* Interactions */
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
    
    /* Shadows */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rf-stat-card:hover {
    transform: translateY(-1px); /* Smaller hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: var(--rf-red);
}

.rf-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--rf-red);
    font-size: 1.6rem; /* 20% kleiner: van 2rem naar 1.6rem */
    /* Roze achtergrond weggehaald */
}

.rf-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; /* Explicit left alignment */
    min-width: 0; /* Allow content to shrink if needed */
}

.rf-stat-number {
    font-size: 1rem; /* Smaller from 1.25rem - Harry's request */
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.rf-stat-label {
    font-size: 0.8rem; /* Smaller from 1rem */
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    margin-bottom: auto;
    line-height: 1.3;
}

.rf-stat-description {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
    margin-top: 0.125rem;
    line-height: 1.2;
}

.rf-stat-badge {
    background: rgba(var(--rf-red-rgb), 0.1);
    color: var(--rf-red);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    margin-top: 0.5rem;
    align-self: flex-start;
}

.rf-stat-warning {
    background: rgba(var(--color-warning-rgb), 0.1);
    color: var(--color-warning);
    font-size: 0.75rem; /* Kleinere tekst voor betere fit */
    font-weight: var(--font-weight-semibold);
    padding: 0.125rem 0.25rem; /* Compactere padding */
    border-radius: var(--radius-pill);
    margin-top: 0.25rem; /* Minder ruimte naar boven */
    align-self: flex-start;
    white-space: nowrap; /* Voorkom line wrapping */
}

/* Enhanced Responsive - per Harry's requirements */

/* Large screens - 5 cards equally distributed */

/* Medium screens - 5 cards equally distributed */

/* Small screens - 2-3 cards per row */

/* Extra small screens only - cards stack */

.rf-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rf-detail-item-full {
    grid-column: 1 / -1;
}

.rf-detail-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    display: block;
}

.rf-detail-value {
    color: var(--text-primary);
    font-size: 0.875rem;
}

.rf-counterparty-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rf-counterparty-warning i {
    color: var(--color-warning);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.rf-counterparty-warning-content {
    flex: 1;
}

.rf-counterparty-warning-title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.rf-counterparty-warning-text {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.rf-todo-item, .rf-activity-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.rf-todo-item:last-child, .rf-activity-item:last-child {
    border-bottom: none;
}

.rf-todo-content, .rf-activity-content {
    flex: 1;
}

.rf-todo-content h6 {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/**
 * FINANCIAL.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/**
 * Financial Tab Styling
 * RF Design System compatible
 */

/* Payment Table Styling */
.table-responsive {
    border-radius: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Zebra striping voor tabel - eerste rij wit, tweede grijs, etc. */
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Verwijder alle achtergrondkleuren van status rijen */
.table tr.table-warning,
.table tr.table-success,
.table tr.table-danger {background-color: transparent;
}

/* Consolidated table styling - see main table definitions below */

/* Modal styling */
#paymentDetailsModal .modal-body {
    min-height: 200px;
}

#paymentDetailsModal .table-sm td {
    padding: 0.5rem 0;
}

/* Empty & Error States */
.text-center i {
    opacity: 0.3;
}

/* EXCEPTION: Icons in buttons should be fully opaque */
.text-center .rf-btn i,
.text-center a.rf-btn i {
    opacity: 1;
}

/* Badge styling within table */
.table .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Button group styling */
/* REMOVED: Bootstrap .rf-btn-group-sm > .btn - use .rf-btn instead */
.rf-btn-group-sm > .rf-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Alert styling within modal */
.modal-body .alert {
    margin-bottom: 0;
}

/* Responsive Design */

/* Print Styles */

/**
 * NEW_DOSSIER.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/* Custom CSS for new dossier form */
.file-upload-container {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 15px;
    transition: all 0.3s;
}

.file-upload-container.highlight {
    border-color: var(--rf-primary);
    background-color: rgba(var(--rf-primary-rgb), 0.05);
}

.rf-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--rf-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Accordion styling */
.accordion-button:not(.collapsed) {
    color: var(--rf-primary);
    background-color: transparent;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-item + .accordion-item {
    margin-top: 10px;
}

/**
 * DATA_TABLE.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/* RF Data Table Styling */
.rf-data-table-container {
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}

/* Alternerende rij kleuren - belangrijke selector om specifiek te zijn */
.rf-table > tbody > tr:nth-of-type(odd) {background-color: #ffffff;
}

.rf-table > tbody > tr:nth-of-type(even) {
    background-color: rgba(97, 206, 112, 0.05);/* background-color: #f8f9fa; */
}

.rf-data-table-header {
    padding: 1rem 1rem 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    background-color: #f8f9fa;
    border-radius: 0.25rem 0.25rem 0 0;
}

.rf-table {
    /* Base table styling */
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
}

.rf-table-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.rf-table-header th {
    color: #495057;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem;
    border-bottom: none;
    white-space: nowrap;
}

.rf-table-row {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.15s ease-in-out;
}

.rf-table-row:hover {background-color: rgba(0,0,0,0.03);
}

.rf-table-cell {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: none;
}

.rf-table-actions {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.rf-table-empty {
    padding: 2rem;
    color: #6c757d;
}

/* Improved horizontal scroll styling */
.rf-data-table::-webkit-scrollbar {
    height: 8px;
}

.rf-data-table::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.rf-data-table::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.rf-data-table::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.rf-table-empty .bi {
    color: #dee2e6;
    font-size: 3rem;
}

/* Address & Contact Display Helpers */
.rf-address-display,
.rf-contact-display {
    line-height: 1.4;
}



/* Dropdown Filter Styling - Override Bootstrap Defaults */
.rf-data-table-container .dropdown-menu .dropdown-item {color: #333333;
  text-decoration: none;background-color: transparent;
  transition: all 0.15s ease-in-out;
}

.rf-data-table-container .dropdown-menu .dropdown-item:hover,
.rf-data-table-container .dropdown-menu .dropdown-item:focus {
    background-color: #F9EFEF; /* RF roze achtergrond */
    color: var(--rf-red); /* RF rode tekst */
    text-decoration: none;
}

.rf-data-table-container .dropdown-menu .dropdown-item:active {
    background-color: var(--rf-red); /* RF rode achtergrond voor active */
    color: white; /* Witte tekst op rode achtergrond */
}

.rf-data-table-container .form-select {
  border: 1px solid #ced4da;
  background-color: white;
  color: #333333;
  transition: all 0.15s ease-in-out;
}

.rf-data-table-container .form-select:hover {
  border-color: var(--rf-green);
  background-color: rgba(97, 206, 112, 0.02);
}

.rf-data-table-container .form-select:focus {
  border-color: var(--rf-green);
  box-shadow: 0 0 0 0.2rem rgba(97, 206, 112, 0.25);
}

/* Fix voor dropdown styling inconsistenties */
.rf-data-table-container .rf-btn-group .dropdown-toggle {
  color: #333333;
  border-color: #ced4da;
  background-color: white;
  transition: all 0.15s ease-in-out;
}

.rf-data-table-container .rf-btn-group .dropdown-toggle:hover {
  color: var(--rf-green);
  border-color: var(--rf-green);
  background-color: rgba(97, 206, 112, 0.02);
  text-decoration: none;
}

.rf-data-table-container .rf-btn-group .dropdown-toggle:focus,
.rf-data-table-container .rf-btn-group .dropdown-toggle:active {
  color: var(--rf-green);
  border-color: var(--rf-green);
  box-shadow: 0 0 0 0.2rem rgba(97, 206, 112, 0.25);
  text-decoration: none;
}

/* Enhanced Responsive Design - Per Harry's requirements */

/* From 864px to 1024px - horizontal scroll but still functional */

/* From 768px to 864px - more columns hidden */

/* Small screens 576px to 768px - keep essential columns + actions */

/* Extra small screens - card layout to show more info per row */

/**
 * PARTIES.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/* Rechtfabriek - Parties Management Component
 * Voor partijen beheer binnen dossiers
 * Updated to follow component guidelines
 * Harry Heijes - 27 mei 2025
 */

/* ===== PARTIES CONTENT CONTAINER ===== */
.rf-parties-content {
    padding: 1rem 0;
}

/* ===== PARTIES HEADER ===== */
.rf-parties-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.rf-parties-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rf-parties-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== PARTY CARDS ===== */
.rf-party-card {
    border: none; /* Geen border - parent rf-content-card heeft al border */
    border-radius: var(--radius-md, 8px);
    padding: 1rem;
    background-color: var(--bg-primary, #ffffff);
    transition: all 0.2s ease;
    box-shadow: none; /* Geen shadow - parent heeft al shadow */
    border-bottom: 1px solid var(--border-light, #e9ecef); /* Alleen bottom border voor scheiding tussen cards */
}

.rf-party-card:last-child {
    border-bottom: none; /* Laatste card geen bottom border */
}

.rf-party-card:hover {
    background-color: var(--bg-light, #f8f9fa);
    border-left: 4px solid var(--rf-red, #BD1E10);
    padding-left: calc(1rem - 4px); /* Compenseer voor left border */
    transition: all 0.2s ease;
}

/* ===== PARTY CARD HEADER ===== */
.rf-party-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.rf-party-info {
    flex: 1;
}

.rf-party-name {
    margin-bottom: 0.25rem;
    color: var(--text-primary, #333333);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
}

.rf-party-name i {
    color: var(--rf-green, #61CE70);
    margin-right: 0.5rem;
    font-size: 1rem;
}

.rf-party-role {
    background-color: var(--bg-light, #f8f9fa);
    color: var(--text-secondary, #666666);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill, 50px);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

/* Role select dropdown for staff members */
.rf-party-role-select {
    width: auto;
    min-width: 130px;
    max-width: 160px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--border-color, #dee2e6);
    background-color: var(--bg-light, #f8f9fa);
    color: var(--text-secondary, #666666);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rf-party-role-select:hover {
    border-color: var(--rf-green, #61CE70);
}

.rf-party-role-select:focus {
    border-color: var(--rf-green, #61CE70);
    box-shadow: 0 0 0 0.2rem rgba(97, 206, 112, 0.25);
    outline: none;
}

.rf-party-role-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rf-party-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.rf-party-actions .rf-btn {
    min-width: 40px;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
}

/* ===== PARTY DETAILS ===== */
.rf-party-details {
    color: var(--text-secondary, #666666);
    font-size: 0.875rem;
    line-height: 1.5;
}

.rf-party-details .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.rf-party-details .col-md-4,
.rf-party-details .col-md-6 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.rf-party-details small {
    display: inline-block;
    color: var(--text-muted, #999999);
    font-weight: 600;
    margin-bottom: 0;
    margin-right: 0.5rem;
}

.rf-party-details a {
    color: var(--text-secondary, #666666);
    text-decoration: none;
}

.rf-party-details a:hover {
    color: var(--rf-green, #61CE70);
    text-decoration: underline;
}

/* ===== ADDRESS STYLING ===== */
.rf-address-item {
    margin-top: 0.25rem;
    padding-left: 1rem;
    line-height: 1.4;
    position: relative;
}

.rf-address-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 4px;
    height: 4px;
    background-color: var(--rf-green, #61CE70);
    border-radius: 50%;
}

.rf-address-type {
    font-weight: 600;
    color: var(--rf-green, #61CE70);
    display: inline-block;
    margin-right: 0.5rem;
}

.rf-address-default {
    font-size: 0.75rem;
    color: var(--rf-green, #61CE70);
    font-weight: 600;
}

/* ===== CONTACT PERSONS ===== */
.rf-contact-item {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--bg-light, #f8f9fa);
    border-radius: var(--radius-sm, 4px);
    border-left: 3px solid var(--rf-green, #61CE70);
}

.rf-contact-item:first-child {
    margin-top: 0.25rem;
}

.rf-contact-item strong {
    color: var(--text-primary, #333333);
}

.rf-contact-item small {
    display: inline-block;
    margin-top: 0;
    margin-right: 1rem;
}

.rf-contact-item a {
    color: var(--text-secondary, #666666);
    text-decoration: none;
}

.rf-contact-item a:hover {
    color: var(--rf-green, #61CE70);
    text-decoration: underline;
}

/* ===== EMPTY STATE ===== */
.rf-parties-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.rf-parties-empty i {
    font-size: 4rem;
    color: #e9ecef;
    margin-bottom: 1.5rem;
}

.rf-parties-empty h5 {
    color: #666666;
    margin-bottom: 0.5rem;
}

.rf-parties-empty p {
    color: #999999;
    margin-bottom: 2rem;
}

/* ===== FORM STYLING ===== */
.rf-form {
    background: white;
}

.rf-form-group {
    margin-bottom: 1rem;
}

.rf-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary, #333333);
}

.rf-required {
    color: var(--color-danger, #dc3545);
}

.rf-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-input, #ced4da);
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: white;
}

.rf-input:focus {border-color: #BD1E10;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25);
}

.rf-input.is-invalid {
    border-color: var(--color-danger, #dc3545);
}

.rf-input-icon-wrapper {
    position: relative;
}

.rf-input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #999999);
    pointer-events: none;
    font-size: 0.875rem;
}

.rf-input-icon-wrapper .rf-input {
    padding-left: 2.5rem;
}

/* ===== PARTY TYPE TOGGLE ===== */
.rf-btn-group .rf-btn-check:checked + .rf-btn {
    background-color: var(--rf-green, #61CE70);
    border-color: var(--rf-green, #61CE70);
    color: white;
}

.rf-btn-group .rf-btn {
    flex: 1;
    text-align: center;
}


/* ===== WARNING STYLING ===== */
.text-warning {color: #ffc107;
}

.text-warning i {
    margin-right: 0.25rem;
}

/* ===== RESPONSIVE DESIGN ===== */

/* ===== PRINT STYLES ===== */

/**
 * FEEDBACK.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/* Rechtfabriek - Feedback Component
 * Voor document feedback systeem
 * Harry Heijes - 27 mei 2025
 * Updated: 11 augustus 2025 - Nieuwe feedback modal styling
 */

/* CSS Variables voor Rechtfabriek kleuren */

/* ===== FEEDBACK CONTAINER ===== */
.rf-feedback-container {
    padding: 1rem 0;
}

.rf-feedback-list {
    max-height: 500px;
    overflow-y: auto;
}

/* ===== FEEDBACK ITEMS ===== */
.rf-feedback-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.rf-feedback-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #BD1E10;
}

.rf-feedback-item:last-child {
    margin-bottom: 0;
}

/* ===== FEEDBACK HEADER ===== */
.rf-feedback-header {
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rf-feedback-meta {
    flex: 1;
}

.rf-feedback-author {
    font-weight: 600;
    color: #1c1f2b;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.rf-feedback-date {
    font-size: 0.875rem;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rf-feedback-badges {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* ===== FEEDBACK CATEGORIES ===== */
.rf-feedback-category {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}

.rf-feedback-category i {
    font-size: 0.625rem;
}

/* Category specific colors */
.rf-category-content-correctie {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

.rf-category-toon-stijl {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.rf-category-vraag {
    background: rgba(59, 89, 152, 0.1);
    border-color: rgba(59, 89, 152, 0.3);
    color: #3b5998;
}

.rf-category-compliment {
    background: rgba(97, 206, 112, 0.1);
    border-color: rgba(97, 206, 112, 0.3);
    color: #61CE70;
}

.rf-category-algemeen {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #6c757d;
}

/* ===== PRIORITY BADGES ===== */
.rf-feedback-priority {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}

.rf-priority-high {
    background: rgba(189, 30, 16, 0.1);
    border-color: rgba(189, 30, 16, 0.3);
    color: #BD1E10;
}

.rf-priority-medium {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.rf-priority-low {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #6c757d;
}

/* ===== FEEDBACK CONTENT ===== */
.rf-feedback-content {
    padding: 1rem;
}

.rf-feedback-text {
    color: #333333;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* ===== FEEDBACK STATUS ===== */
.rf-feedback-status {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rf-feedback-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}

.rf-status-open {
    background: rgba(59, 89, 152, 0.1);
    border-color: rgba(59, 89, 152, 0.3);
    color: #3b5998;
}

.rf-status-in-behandeling {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.rf-status-opgelost {
    background: rgba(97, 206, 112, 0.1);
    border-color: rgba(97, 206, 112, 0.3);
    color: #61CE70;
}

.rf-status-afgesloten {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.3);
    color: #6c757d;
}

/* ===== FEEDBACK ACTIONS ===== */
.rf-feedback-actions {
    display: flex;
    gap: 0.5rem;
}

/* Updated: Removed .btn reference, use .rf-btn instead */
.rf-feedback-actions .rf-btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* ===== INTERNAL FEEDBACK STYLING ===== */
/* HARRY'S COLOR SCHEME UPDATES - 7 augustus 2025 */

/* Rechtfabriek (Staff) Feedback - Pink Background */
.rf-feedback-item.rf-staff {
    border-left: 4px solid #FF1493;
}

.rf-feedback-item.rf-staff .rf-feedback-header {
    background: rgba(255, 20, 147, 0.1); /* Pink background zoals footer */
}

.rf-feedback-item.rf-staff .rf-feedback-author {
    color: #333333; /* Zwarte letters op witte achtergrond voor titel */
}

/* Client Feedback - Light Green Background */
.rf-feedback-item.rf-client {
    border-left: 4px solid #90EE90;
}

.rf-feedback-item.rf-client .rf-feedback-header {
    background: rgba(144, 238, 144, 0.2); /* Lichtgroene achtergrond */
}

.rf-feedback-item.rf-client .rf-feedback-author {
    color: #333333; /* Zwarte letters op witte achtergrond voor titel */
}

/* Legacy internal class - redirect to staff styling */
.rf-feedback-item.rf-internal {
    border-left: 4px solid #FF1493;
}

.rf-feedback-item.rf-internal .rf-feedback-header {
    background: rgba(255, 20, 147, 0.1);
}

.rf-internal-badge {
    background: rgba(255, 20, 147, 0.1);
    border-color: rgba(255, 20, 147, 0.3);
    color: #FF1493;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid;
}

/* Feedback Title - Always Black on White */
.rf-feedback-modal .modal-title {color: #000000;background: #ffffff;
}

/* ===== RECHTFABRIEK FEEDBACK MODAL STYLING ===== */
/* Modal Header with Rechtfabriek Branding */
.modal-header {
    background: linear-gradient(135deg, var(--rf-red), var(--rf-secondary-red));
    color: var(--rf-text-light);
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
    position: relative;
}

.modal-header .modal-title {
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;color: white;
}


/* Ensure close button is visible in ALL modal headers */
.modal-header .btn-close {color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* For light backgrounds, use dark close button */
.modal-header.bg-light .btn-close,
.modal-header.bg-white .btn-close {color: #333333;
    text-shadow: none;
    filter: none;
}

.modal-header.bg-light .btn-close:hover,
.modal-header.bg-white .btn-close:hover {background: rgba(0, 0, 0, 0.1);color: #000000;
}

/* Feedback Sections */

.feedback-history {
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--rf-text-secondary);
}

.empty-state i {
    font-size: 3rem;
    color: var(--rf-light-grey);
    margin-bottom: 1rem;
}

.empty-state h6 {
    color: var(--rf-text-dark);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* Feedback Form */
.feedback-form {
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
}

.feedback-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Version Info Badge - HARRY'S FIX: Subtle styling instead of blue */
.version-info {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #e9ecef;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* CONFLICTING RF BUTTON SECTION REMOVED - Using original definitions */

/* Modal Body Adjustments */
.modal-body {
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
    max-height: 80vh;
    overflow-y: auto;
}

/* Accordion Styling voor Eerdere Feedback */
.accordion-button {background-color: var(--rf-light-grey);color: var(--rf-text-dark);
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.accordion-button:not(.collapsed) {
   background-color: var(--rf-red);color: white;
    box-shadow: none;
}

.accordion-button::after {
    filter: invert(25%);
}

.accordion-button:not(.collapsed)::after {
    filter: invert(100%);
}

.accordion-body {
    padding: 1rem;
    background-color: #fafbfc;
}

.modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
    background: #fafbfc;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Legacy Feedback Form Styling */
.rf-feedback-form {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.rf-feedback-form-header {
    padding: 1rem;
    background: #ffffff; /* Witte achtergrond voor titel */
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.5rem 0.5rem 0 0;
}

.rf-feedback-form-header .modal-title {color: #000000; /* Zwarte letters voor titel */
}

.rf-feedback-form-body {
    padding: 0.75rem 1.5rem; /* 75% hoogte, consistent */
}

.rf-feedback-form-footer {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== FEEDBACK QUICK ACTIONS ===== */
.rf-feedback-quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f8f9fa;
}

.rf-quick-resolve {
    background: #61CE70;
    border-color: #4cae5a;
    color: white;
}

.rf-quick-resolve:hover {
    background: #4cae5a;
    border-color: #3e8b47;
    color: white;
}

.rf-quick-defer {
    background: #ffc107;
    border-color: #e0a800;
    color: #212529;
}

.rf-quick-defer:hover {
    background: #e0a800;
    border-color: #c69500;
    color: #212529;
}

/* ===== EMPTY STATE ===== */
.rf-feedback-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #666666;
}

.rf-feedback-empty i {
    font-size: 3rem;
    color: #e9ecef;
    margin-bottom: 1rem;
}

.rf-feedback-empty h4 {
    color: #666666;
    margin-bottom: 0.5rem;
}

.rf-feedback-empty p {
    color: #999999;
    margin-bottom: 1.5rem;
}

/* ===== RESPONSIVE DESIGN ===== */

/* ===== PRINT STYLES ===== */

/**
 * VERSIONS_CLEAN.CSS - Consolidated
 * Added to fix missing styling after template cleanup
 */

/* Rechtfabriek - Clean Versions Component
 * HARRY'S FEEDBACK: Minder opvallende versioning interface
 * Weg met blauwe achtergronden, subtiele styling
 * 11 augustus 2025
 */

/* ===== CLEAN VERSION ITEMS ===== */
.version-item-clean {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    padding: 1rem;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.version-item-clean:hover {
    border-color: #BD1E10;
    box-shadow: 0 2px 8px rgba(189, 30, 16, 0.15);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.version-item-clean:last-child {
    margin-bottom: 0;
}

/* ===== VERSION INFO SECTION ===== */
.version-info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.version-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.version-header strong {
    color: #333;
    font-size: 0.95rem;
    font-weight: 600;
}

/* CONSOLIDATED: badge-concept properties merged into line 4226 */

.badge-sent {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

.badge-goedgekeurd {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

/* ===== VERSION DESCRIPTION WITH EXPAND/COLLAPSE ===== */
.version-description {
    margin-top: 0.5rem;
}

.version-description small {
    line-height: 1.4;
}

.desc-toggle-expanded {color: #BD1E10;
    text-decoration: none;
}

.desc-toggle-expanded:hover {color: #9a1711;
    text-decoration: underline;
}

/* ===== VERSION ACTIONS ===== */
.version-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    align-items: flex-start;
}

/* Updated: Removed .btn reference, use .rf-btn instead */
.version-actions .rf-btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
}

/* REMOVED: Bootstrap .btn-sm - use .rf-btn-sm */

/* REMOVED: Bootstrap .rf-btn-outline-red and .rf-btn-outline-green in version-actions */
/* Use .rf-btn-outline-green and .rf-btn-outline-red instead */

/* CONSOLIDATED: version-history-container properties merged into line 10937 */

.version-history-container.d-none {display: none;
}

.version-history-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
}

.version-history-header i {
    color: #BD1E10;
    font-size: 1rem;
}

.version-history-header h6 {
    margin: 0;
    color: #495057;
    font-size: 0.9rem;
}

/* ===== PREVIOUS VERSIONS LIST ===== */
.previous-versions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===== RESPONSIVE DESIGN ===== */

/* ===== PRODUCTION CARD VERSION TOGGLE BUTTONS ===== */
.rf-btn-outline-green {
    background: white;
    border-color: #61CE70;
    color: #61CE70;
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}

.rf-btn-outline-green:hover {
    background: #61CE70;
    border-color: #61CE70;
    color: white;
}

/* ===== CLEAN FEEDBACK INDICATOR ===== */

/* ===== LOADING STATES ===== */

/* ===== ERROR STATES ===== */

/* ===== EMPTY STATES ===== */

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.version-item-clean:focus-within {
    outline: 2px solid #BD1E10;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Updated: Removed .btn reference, use .rf-btn instead */
.version-actions .rf-btn:focus {
    box-shadow: 0 0 0 2px rgba(189, 30, 16, 0.25);
}

/* ===== PRINT STYLES ===== */

/* ===============================================
   ADMIN MODULE - Consolidated from admin.css
   Admin interface styling and components
   =============================================== */

/* Admin Styling - Modal examples */
.example-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-family: monospace;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Admin CSS */

/* Fix for admin layout */
/* Top navbar */

/* Content area - REMOVED 56px margin for better header spacing */

.editor-toolbar {
    background-color: #f8f9fa;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.CodeMirror {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border: 1px solid #ced4da;
}

/* SimpleMDE Editor Fixes - Enhanced for Modal Visibility */
.editor-toolbar {
    z-index: 10000;
    position: relative;background: white;
    border: 1px solid #ced4da;
    border-bottom: none;
    border-radius: 0.25rem 0.25rem 0 0;display: block;
    opacity: 1;visibility: visible;
    height: auto;
    overflow: visible;
}

.modal .editor-toolbar {
    z-index: 10000;display: block;
    position: static;visibility: visible;
    opacity: 1;
}

.editor-toolbar.fullscreen {
    z-index: 99999;
}

.CodeMirror-fullscreen {
    z-index: 99999;
}

/* SimpleMDE toolbar buttons - Enhanced visibility */
.editor-toolbar a {color: #333;background: transparent;
    border: none;display: inline-block;padding: 8px 10px;margin: 0;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    border-radius: 3px;
    cursor: pointer;
    min-width: 32px;
    text-align: center;
}

.editor-toolbar a:hover {background: #f0f0f0;color: #333;
}

/* Fallback icons when FontAwesome is blocked by CSP - Enhanced visibility */
.editor-toolbar a.fa-bold::after {
    content: "B";
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-italic::after {
    content: "I";
    font-style: italic;
    font-size: 14px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-header::after {
    content: "H";
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-quote-left::after {
    content: "\201D";
    font-size: 18px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-list-ul::after {
    content: "•";
    font-size: 18px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-list-ol::after {
    content: "1.";
    font-size: 14px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-link::after {
    content: "🔗";
    font-size: 14px;
    display: inline-block;
}
.editor-toolbar a.fa-picture-o::after {
    content: "🖼";
    font-size: 14px;
    display: inline-block;
}
.editor-toolbar a.fa-table::after {
    content: "⊞";
    font-size: 14px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-minus::after {
    content: "—";
    font-size: 14px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-eye::after {
    content: "👁";
    font-size: 14px;
    display: inline-block;
}
.editor-toolbar a.fa-external-link::after {
    content: "↗";
    font-size: 14px;
    display: inline-block;
    color: #333;
}
.editor-toolbar a.fa-question-circle::after {
    content: "?";
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    color: #333;
}

/* Communication Filter Layout Fixes - Ultra Specific */

/* Hide mobile filters on ALL screen sizes first */
.mobile-filter-actions.d-md-none {display: none;
}

/* Show mobile filters ONLY on mobile */

/* Hide desktop container on ALL screen sizes first */
.d-none.d-md-flex {display: none;
}

/* Show desktop filters ONLY on desktop */

.mobile-filter-actions {display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Button styling */

/* Make action icons smaller */

/* Adjust table row height */

/* Action buttons styling voor FAQ admin */

/* Toast container styling */
/* Afbeelding selector specifieke styling */
/* Extracted from upload.html - Block 1 */

.upload-area {
    border: 2px dashed #ced4da;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
}

/* Loading state */

/* CONSOLIDATED: spin animation merged with line 5919 */

/* Responsive aanpassingen */

/* Focus management voor toegankelijkheid */

/* Hidden state voor gefilterde items */

/* Admin Dashboard Cards - From Dossier Overview */

/* Responsive - Large screens - 5 cards equally distributed */

/* Medium screens - 5 cards equally distributed */

/* Small screens - 2-3 cards per row */

/* Extra small screens only - cards stack */

/* Badge styling for notifications */

/* Content card styling */

.rf-content-card .card-body {
    padding: 1.5rem; /* Consolidated: consistent padding */
}

/* ===================================================================
   AUTHENTICATION STYLES
   =================================================================== */

/* Auth Page */
.rf-auth-page {
  background-color: var(--bg-light);
  min-height: 100vh;
}

/* Auth Container */
.rf-auth-container {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* FORCE geen groene borders in auth forms - alleen rode focus styling */
.rf-auth-container .form-control.is-valid,
.rf-auth-container .form-select.is-valid,
.rf-auth-container .rf-input.is-valid,
.rf-auth-container .rf-input-compact.is-valid,
.rf-auth-container .rf-select.is-valid,
.rf-auth-container .rf-textarea.is-valid,
.rf-auth-container .was-validated .form-control:valid,
.rf-auth-container .was-validated .form-select:valid,
.rf-auth-container .was-validated .rf-input:valid,
.rf-auth-container .was-validated .rf-input-compact:valid,
.rf-auth-container .was-validated .rf-select:valid,
.rf-auth-container .was-validated .rf-textarea:valid {
  border-color: #ced4da !important; /* Normale grijze border */
  background-image: none !important; /* Geen groen vinkje */
  padding-right: 0.75rem !important; /* Reset padding */
}

/* Focus states voor auth forms - alleen RF rood, geen groen */
.rf-auth-container .form-control.is-valid:focus,
.rf-auth-container .form-select.is-valid:focus,
.rf-auth-container .rf-input.is-valid:focus,
.rf-auth-container .rf-input-compact.is-valid:focus,
.rf-auth-container .rf-select.is-valid:focus,
.rf-auth-container .rf-textarea.is-valid:focus,
.rf-auth-container .was-validated .form-control:valid:focus,
.rf-auth-container .was-validated .form-select:valid:focus,
.rf-auth-container .was-validated .rf-input:valid:focus,
.rf-auth-container .was-validated .rf-input-compact:valid:focus,
.rf-auth-container .was-validated .rf-select:valid:focus,
.rf-auth-container .was-validated .rf-textarea:valid:focus {
  border-color: #BD1E10 !important; /* Gebruik standaard RF focus kleur */
  box-shadow: 0 0 0 0.2rem rgba(189, 30, 16, 0.25) !important; /* RF focus shadow */
}

/* Verberg alle groene feedback berichten in auth forms */
.rf-auth-container .valid-feedback,
.rf-auth-container .rf-valid-feedback,
.rf-auth-container .is-valid ~ .valid-feedback,
.rf-auth-container .is-valid ~ .rf-valid-feedback,
.rf-auth-container .was-validated :valid ~ .valid-feedback,
.rf-auth-container .was-validated :valid ~ .rf-valid-feedback {
  display: none !important;
}

/* Normale border voor alle input fields in auth forms (geen groene/rode borders tenzij gefocust) */
.rf-auth-container .form-control,
.rf-auth-container .form-select,
.rf-auth-container .rf-input,
.rf-auth-container .rf-input-compact,
.rf-auth-container .rf-select,
.rf-auth-container .rf-textarea {
  border-color: #ced4da !important; /* Altijd grijze border tenzij focus */
}

/* MAIN CONTENT SPACING - voor pagina's die wel spacing willen */
.rf-main-spaced {
  padding-top: 0.75rem; /* Gehalveerd van 1.5rem naar 0.75rem voor betere header spacing */
  padding-bottom: 1.5rem;
}

.rf-main-tight {
  padding-top: 0;
  padding-bottom: 0;
}

/* PHASE 2A: Commented out to eliminate reflow storm */
/* REDUCE spacing als er al body sticky header padding is */
/* body.header-sticky .rf-main-spaced {
  padding-top: 0.5rem; /* Minimaal i.p.v. 1.5rem */
/* } */

/* Container spacing voor content die direct tegen header moet */
.rf-content-flush {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Pre-content blocks (zoals heroes) moeten altijd tegen header */
main > .rf-content-flush:first-child,
main > .container-fluid.rf-content-flush:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Simple Header */
.rf-simple-header {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rf-simple-nav ul {
  list-style: none;
}

.rf-simple-nav a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.15s ease-in-out;
}

.rf-simple-nav a:hover {
  color: var(--rf-red);
}

/* Auth Forms */
.rf-form {
  margin-bottom: 1rem;
}

.rf-form-link {
  color: var(--rf-red);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.rf-form-link:hover {
  color: var(--rf-red);
  text-decoration: underline;
}

.rf-auth-footer {
  color: var(--text-secondary);
  border-top: 1px solid var(--border-light);
  padding-top: 1.5rem;
}

/* Responsive Auth */

/* ===================================================================
   PROFILE/VIEW_PARTY STYLES
   =================================================================== */

/* Party Type Toggle Styling */
.toggle-group .rf-btn-group {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 6px;
}

/* Toggle Button Base Styling */
.rf-btn-toggle {
    background-color: white;
    /* Aanpassen */
    border-color: #dee2e6;
    color: var(--rf-red);
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-width: 1px;
}

.rf-btn-toggle:hover {
    background-color: var(--rf-light-red);
    border-color: var(--rf-red);
    color: var(--rf-red);
}

/* Checked state */
.rf-btn-check:checked + .rf-btn-toggle {
    background-color: var(--rf-red);
    border-color: var(--rf-red);
    color: var(--rf-white);
}

.rf-btn-check:checked + .rf-btn-toggle:hover {
    background-color: var(--rf-red);
    border-color: var(--rf-red);
    color: white;
}

/* CRITICAL FIX: Force Bootstrap icons in checked buttons to inherit color */
.rf-btn-check:checked + .rf-btn-toggle i,
.rf-btn-check:checked + .rf-btn-toggle i::before {
    color: inherit;
}

/* Toggle button border radius fixes */
.toggle-group .rf-btn-toggle:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.toggle-group .rf-btn-toggle:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Updated: Removed .btn reference, use .rf-btn instead */
.toggle-group .rf-btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Form transition animations */
#persoon-details, #organisatie-details {
    transition: opacity 0.3s ease;
}


/* Form field highlight for migrated data */
.form-control.migrated {
    background-color: #e8f5e8;
    border-color: var(--rf-green);
}

/* Zebra effect voor Dossiers lijst */
.dossiers-zebra .list-group-item:nth-child(odd) {
    background-color: #fafafa; /* Zeer licht grijs */
}

.dossiers-zebra .list-group-item:nth-child(even) {
    background-color: #f1f8f1; /* Zeer subtiel groen tint */
}

/* Behoud hover effect */
.dossiers-zebra .list-group-item:hover {
    background-color: var(--rf-green);
    color: white;
}

/* ===================================================================
   EDITOR COMPONENT STYLES
   =================================================================== */

.rf-editor-container {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: white;
}

.rf-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.rf-editor-toolbar-group {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.5rem;
    border-right: 1px solid var(--border-light);
}

.rf-editor-toolbar-group:last-child {
    border-right: none;
}

.rf-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    text-decoration: none;
}

.rf-editor-btn:hover {
    background: var(--bg-primary);
    color: var(--rf-red);
    border-color: var(--border-primary);
}

.rf-editor-btn.active {
    background: var(--rf-red);
    color: white;
    border-color: var(--rf-red);
}

/* CMS specific button styling */
.rf-cms-btn {
    min-width: auto;
    padding: 0.375rem 0.75rem;
    background: var(--rf-green);
    color: white;
    border-color: var(--rf-green);
}

.rf-cms-btn:hover {
    background: #4eb85a;
    color: white;
    border-color: #4eb85a;
}

.rf-cms-btn .rf-btn-text {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
}

.rf-cms-tools {
    border-left: 2px solid var(--rf-green);
    padding-left: 0.75rem;
}

.rf-editor-format-select {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-primary);
    font-size: 0.875rem;
    min-width: 120px;
}

/* Editor content area */
.rf-editor-content {
    min-height: 200px;
    padding: 1rem;
    outline: none;
    line-height: 1.6;
    color: var(--text-primary);
}

.rf-editor-content:focus {
    box-shadow: inset 0 0 0 2px rgba(189, 30, 16, 0.1);
}

/* Textarea for CMS mode */
.rf-editor-textarea {
    width: 100%;
    border: none;
    outline: none;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    background: #fafafa;
}

.rf-editor-textarea:focus {
    background: white;
    box-shadow: inset 0 0 0 2px rgba(189, 30, 16, 0.1);
}

/* Content styling for WYSIWYG mode */
.rf-editor-content p {
    margin-bottom: 1rem;
}

.rf-editor-content p:last-child {
    margin-bottom: 0;
}

.rf-editor-content h1,
.rf-editor-content h2,
.rf-editor-content h3,
.rf-editor-content h4,
.rf-editor-content h5,
.rf-editor-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-semibold);
}

.rf-editor-content h1 { font-size: 2rem; }
.rf-editor-content h2 { font-size: 1.75rem; }
.rf-editor-content h3 { font-size: 1.5rem; }
.rf-editor-content h4 { font-size: 1.25rem; }
.rf-editor-content h5 { font-size: 1.125rem; }
.rf-editor-content h6 { font-size: 1rem; }

.rf-editor-content blockquote {
    padding-left: 1rem;
    border-left: 4px solid var(--rf-red);
    margin: 1rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

.rf-editor-content ul,
.rf-editor-content ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.rf-editor-content li {
    margin-bottom: 0.25rem;
}

.rf-editor-content a {
    color: var(--rf-red);
    text-decoration: underline;
}

.rf-editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* Responsive design for editor */

/* ===================================================================
   MOBILE MENU FIX - Z-INDEX OVERRIDE
   =================================================================== */

/* Ensure mobile menu appears above all header content */
/* CONSOLIDATED: rf-mobile-menu z-index merged into line 6762 */

.rf-mobile-menu.active {
    right: 0;display: flex;
}

/* Ensure mobile menu items are clickable */
.rf-mobile-menu .rf-menu-link,
.rf-mobile-menu .rf-menu-dropdown-item,
.rf-mobile-menu .rf-dropdown-toggle {
    pointer-events: auto;
    position: relative;
    z-index: 2001;
}

/* Mobile menu backdrop */
.rf-mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    display: none;
}

.rf-mobile-menu-backdrop.active {
    display: block;
}

/* ===================================================================
   MOBILE MENU ACCORDION IMPROVEMENTS
   =================================================================== */

/* Smooth accordion animation */
.rf-mobile-menu .rf-menu-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.rf-mobile-menu .rf-menu-dropdown.show {
    max-height: 400px;
    transition: max-height 0.3s ease-in;
}

/* Visual hierarchy improvements */
.rf-mobile-menu .rf-menu-item {
    border-bottom: 1px solid #f0f0f0;
}

.rf-mobile-menu .rf-menu-item:last-child {
    border-bottom: none;
}

/* REMOVED: dropdown icon animation */

/* NO ROTATION - static chevron */

/* ===================================================================
   MOBILE MENU FINANCIEEL ICON FIX
   =================================================================== */

/* Alternative: Force icon via CSS if Bootstrap icon fails */
.rf-mobile-menu .rf-dossier-links a[href*="financial"] .bi-euro:before {
    content: "€";
    font-family: inherit;
    font-weight: bold;
}

/* ===================================================================
   MOBILE MENU ACCORDION - NUCLEAR OPTION - OVERRIDE EVERYTHING
   =================================================================== */

/* Force accordion behavior with maximum specificity */
.rf-mobile-menu .rf-menu-dropdown {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    min-width: auto;margin: 0;padding-left: 1.5rem;background-color: transparent;
    border: none;
    border-left: 2px solid var(--rf-green);margin-left: 1rem;
    border-radius: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.rf-mobile-menu .rf-menu-dropdown.show {
    position: static;display: block;
    max-height: 400px;
    transition: max-height 0.3s ease-in;
}

/* Force proper dropdown item styling */
.rf-mobile-menu .rf-menu-dropdown-item {
    position: static;padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;background-color: transparent;
    white-space: normal;
}

.rf-mobile-menu .rf-menu-dropdown-item:hover {background-color: rgba(189, 30, 16, 0.05);padding-left: 0.5rem;
    transition: all 0.2s ease;
}

/* ===================================================================
   RESPONSIVE NAVIGATION & MENU - CONSOLIDATED
   =================================================================== */

/* === MOBILE ONLY === */

/* === TABLET & MOBILE === */

/* === DESKTOP SMALL & BELOW === */

/* === LARGE DESKTOP === */
@media (min-width: 1400px) {
  .article-header-image {
    max-height: 450px /* Limiteert de hoogte op brede schermen */;
  }
}

/* === PRINT STYLES === */

/* ===================================================================
   RESPONSIVE LAYOUT UTILITIES - CONSOLIDATED
   =================================================================== */

/* === LAYOUT - MOBILE ONLY === */

/* === LAYOUT - TABLET & MOBILE === */

/* === LAYOUT - DESKTOP SMALL & BELOW === */

/* === LAYOUT - TABLET & DESKTOP === */
@media (min-width: 768px) {
/* Content utilities */.d-none.d-md-flex {display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
      }

      .filter-container-desktop {display: flex;
          align-items: center;
          gap: 0.5rem;
      }

  /* Utilities utilities */main {padding-top: 1.5rem;
      }.mobile-filter-actions {display: none;
      }
main {
        padding-top: 1.5rem;
    }
}

/* === LAYOUT - DESKTOP LARGE === */
@media (min-width: 992px) {
/* Tables utilities */.rf-dossier-content {
          width: calc(100% - 2rem);
          max-width: none;
      }

      /* Force dashboard cards to use full width */
      .dashboard-card,
      .rf-content-card {
          width: 100%;
          max-width: none;
      }

      /* Make activity timeline use full width */
      .rf-activity-item,
      .rf-todo-item,
      .rf-notification-item {
          width: 100%;
          max-width: none;
      }.rf-activity-stats .col {
          flex: 0 0 20%;
          max-width: 20%;
      }
.rf-activity-stats .col {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* === LAYOUT - PRINT STYLES === */

/* ===================================================================
   ADMIN CSS INTEGRATION - Phase 7B
   Integrated from admin.css (776 lines) for complete consolidation
   =================================================================== */

/* Admin Styling - Modal examples */
.example-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-family: monospace;
    font-size: 0.875rem;
    line-height: 1.4;
}

.example-box code {
    background: none;
    padding: 0;
    color: #6f42c1;
}

.rf-modal .modal-body {
    padding: 2rem;
}

.rf-modal .modal-header {
    background: linear-gradient(135deg, var(--rf-red) 0%, #9e190e 100%);
    color: white;
}

.rf-modal .modal-title {
    color: white;
    font-weight: 600;
}

.rf-modal .btn-close {
    filter: invert(1);
}

/* Admin CSS */

/* Fix for admin layout */
.container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* Top navbar */
.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
    top: .25rem;
    right: 1rem;
}

/* Content area - REMOVED 56px margin for better header spacing */

.editor-toolbar {
    background-color: #f8f9fa;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.CodeMirror {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border: 1px solid #ced4da;
}

/* Button styling */

/* REMOVED: Bootstrap .btn-sm - use .rf-btn-sm */

/* REMOVED: Bootstrap .rf-btn-group-sm > .btn - use RF equivalents */

/* CONSOLIDATED: Main table styling (replaces duplicates above) */
.table td {
    padding: 0.75rem;
    vertical-align: middle;
}

.table th {
    padding: 0.75rem;
    vertical-align: middle;
    background-color: var(--rf-grey, #f8f9fa);
    border-bottom-width: 1px;
    border-top: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--rf-text-secondary);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Action buttons styling voor FAQ admin */
.faq-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Toast container styling */
.faq-toast-container {
    z-index: 1050;
}
/* Afbeelding selector specifieke styling */
/* Upload page specific styling - should be scoped to upload context */
.upload-page body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Extracted from upload.html - Block 1 */

.upload-area {
    border: 2px dashed #ced4da;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
}

.upload-area.active {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.preview-item {
    position: relative;
}

.preview-item .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.preview-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 5px;
}

.preview-item .file-info {
    font-size: 12px;
    margin-top: 5px;
}
.media-card-img-container {
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}
.media-card-img-container img {
    max-height: 100%;
    object-fit: contain;
}
.file-type-icon {
    width: 100%;
    color: #6c757d;
}
.media-item.hidden {
    display: none;
}
.header-minimal {
    background: white;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.search-controls {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.media-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
}

.media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: #0d6efd;
}

.media-card:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.media-card-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    background: #f8f9fa;
    display: block;
}

.media-card-body {
    padding: 0.5rem;
}

.media-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.125rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #212529;
}

.media-card-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0;
}

/* Safari specifieke fixes */
@supports (-webkit-appearance: none) {
    .media-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .media-card:hover {
        -webkit-transform: translateY(-2px) translateZ(0);
        transform: translateY(-2px) translateZ(0);
    }
}

/* Loading state */
.media-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.media-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* CONSOLIDATED: spin animation merged with line 5919 */

/* Responsive aanpassingen */

/* Focus management voor toegankelijkheid */
.media-card:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Hidden state voor gefilterde items */
.media-card[style*="display: none"] {
    display: none;
}

/* Admin Dashboard Cards - From Dossier Overview */
.rf-activity-stats {
    margin-bottom: 1rem;
}

.rf-activity-stats .row {
    display: flex;
    align-items: stretch;
}

/* CONSOLIDATED: rf-stat-card properties merged into line 12037 */

.rf-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    border-color: var(--rf-red, #dc2626);
}

.rf-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--rf-red, #dc2626);
    font-size: 1.6rem;
}

.rf-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    min-width: 0;
}

.rf-stat-number {
    font-size: 1rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary, #1f2937);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.rf-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    font-weight: var(--font-weight-medium, 500);
    margin-bottom: auto;
    line-height: 1.3;
}

.rf-stat-description {
    font-size: 0.7rem;
    color: var(--text-muted, #9ca3af);
    font-weight: var(--font-weight-normal, 400);
    margin-top: 0.125rem;
    line-height: 1.2;
}

/* Responsive - Large screens - 5 cards equally distributed */

/* Medium screens - 5 cards equally distributed */

/* Small screens - 2-3 cards per row */

/* Extra small screens only - cards stack */


/* DUPLICATE REMOVED: rf-content-card styling consolidated in foundation section above */

/* SEO Dashboard specific improvements */
.table-responsive {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    overflow-y: hidden;
}

/* Progress bar visibility improvements */
.progress {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

.progress-bar {
    box-shadow: none;
    border-radius: inherit;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* REMOVED: This was also overriding Bootstrap badge styling */

/* Type badges - RF red styling */
.badge[style*="var(--rf-red)"] {
    background-color: var(--rf-red);
    color: white;
    border-color: #b91c1c;
}

/* Status badges with better contrast */
.badge[style*="#28a745"] {
    background-color: #28a745;
    color: white;
    border-color: #1e7e34;
}

.badge[style*="#6c757d"] {
    background-color: #6c757d;
    color: white;
    border-color: #545b62;
}

/* Table cell alignment and padding improvements */
.table td.text-center {
    vertical-align: middle;
    font-size: 1.2rem;
}

/* Icon improvements for better visibility */
.table .bi-check-circle {
    color: #28a745;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.table .bi-x-circle {
    color: var(--rf-red, #dc2626);
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.table .bi-x-circle[style*="#6c757d"] {
    color: #6c757d;
}

.table .bi-x-circle[style*="#ffc107"] {
    color: #ffc107;
}

/* Button group improvements */
.rf-btn-outline-green {
    border-color: #28a745;
    color: #28a745;
    background: white;
    transition: all 0.15s ease;
}

.rf-btn-outline-green:hover {
    background-color: #28a745;
    color: white;
    border-color: #1e7e34;
}

/* Debug box improvements */
.rf-content-card .card-body > div[style*="background-color: #f8f9fa"] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* CONSOLIDATED: Table cell sizing - see responsive section below */

/* REMOVED: Conflicting rule that made odd rows also grey - breaks zebra striping */

.table-hover tbody tr:hover td {
    background-color: rgba(var(--rf-red-rgb, 220, 38, 38), 0.05);
}

/* CONSOLIDATED: rf-stat-card properties merged into line 12037 */
/* CONSOLIDATED: rf-stat-card:hover properties merged into line 12052 */

/* ==========================================
   ADMIN TABLE ACTION BUTTONS - CONSISTENT WIDTH
   ========================================== */
/* Fix inconsistent button widths in admin tables */

/* Base styling for all admin action buttons */
/* REMOVED: Bootstrap .btn reference - use RF button system only */
.rf-btn-group-sm > .rf-btn-outline-green,
.rf-btn-group-sm > .rf-btn-outline-red {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

/* Specific button type fixes */
/* REMOVED: Bootstrap .btn-outline-danger - use .rf-btn-outline-red instead */

/* RF button outline fixes for consistency */
.rf-btn-group-sm > .rf-btn-outline-green {
    border-color: #28a745;
    color: #28a745;
    background: white;
}

.rf-btn-group-sm > .rf-btn-outline-green:hover {
    background-color: #28a745;
    color: white;
    border-color: #1e7e34;
}

/* Ensure button group spacing is consistent */
.rf-btn-group.rf-btn-group-sm {
    gap: 2px;
}

/* REMOVED: Bootstrap .btn references in rf-btn-group-sm - use .rf-btn instead */
.rf-btn-group.rf-btn-group-sm .rf-btn:not(:first-child) {
    margin-left: 2px;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.rf-btn-group.rf-btn-group-sm .rf-btn:not(:last-child) {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Table cell width to accommodate fixed button sizes */
/* ===================================================================
   RESPONSIVE TABLE FIXES - CONSOLIDATED
   =================================================================== */

/* Mobile-first responsive table behavior */
.rf-data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100vw; /* Prevent viewport overflow */
}

/* Force proper responsive behavior on tablets (920px viewport issue) */
@media (max-width: 991px) {
    .rf-data-table-container {
        margin: 0 -15px; /* Extend to container edges */
        border-radius: 0; /* Remove border radius for full width */
    }
    
    .rf-data-table {
        font-size: 0.875rem; /* Smaller text on tablets */
    }
    
    /* Make table more compact */
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }
    
    /* RESPONSIVE COLUMNS: Hide less important columns to ensure action buttons remain visible */
    
    /* ALGEMEEN: Beperk ONDERWERP kolom width voor meer ruimte */
    .rf-data-table .table th:nth-child(2), /* ONDERWERP/OMSCHRIJVING column */
    .rf-data-table .table td:nth-child(2) {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Hide columns 3, 4, 5 to make room for action buttons */
    .rf-data-table .table th:nth-child(3),
    .rf-data-table .table td:nth-child(3),
    .rf-data-table .table th:nth-child(4),
    .rf-data-table .table td:nth-child(4),
    .rf-data-table .table th:nth-child(5),
    .rf-data-table .table td:nth-child(5) {
        display: none;
    }
    
    /* Also hide column 7 (GESTART OP) if present */
    .rf-data-table .table th:nth-child(7),
    .rf-data-table .table td:nth-child(7) {
        display: none;
    }
}

/* CONSOLIDATED: Responsive table cell sizing (mobile-first) */
.table td:has(.rf-btn-group) {
    min-width: 70px; /* Mobile: minimum for action buttons */
    width: auto;
}

.table td:has(.progress) {
    min-width: 100px; /* Mobile: minimum for progress bars */
    width: auto;
}

/* Tablet+ improvements */
@media (min-width: 768px) {
    .table td:has(.rf-btn-group) {
        min-width: 90px; /* Tablet+: more space for action buttons */
    }
    
    .table td:has(.progress) {
        min-width: 120px; /* Tablet+: more space for progress bars */
    }
}

/* Remove conflicting overflow on larger screens */
@media (min-width: 992px) {
    .rf-data-table {
        overflow-x: visible;
    }
    
    /* Restore all hidden columns on desktop */
    .rf-data-table .table th:nth-child(3),
    .rf-data-table .table td:nth-child(3),
    .rf-data-table .table th:nth-child(4),
    .rf-data-table .table td:nth-child(4),
    .rf-data-table .table th:nth-child(5),
    .rf-data-table .table td:nth-child(5),
    .rf-data-table .table th:nth-child(7),
    .rf-data-table .table td:nth-child(7) {
        display: table-cell;
    }
    
    /* Restore ONDERWERP column full width on desktop */
    .rf-data-table .table th:nth-child(2),
    .rf-data-table .table td:nth-child(2) {
        max-width: none;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }
}

/* ===================================================================
   DOSSIER COMMUNICATION ICON FIXES
   =================================================================== */

/* Communication timeline icons should be rf-red - ENHANCED SELECTORS */
.timeline-icon .bi-paperclip,
.timeline-icon .bi-chat-text,
.timeline-icon .bi-envelope,
.timeline-icon .text-primary,
.timeline-icon i.text-primary,
.timeline-icon i.bi-paperclip,
.timeline-icon i.bi-envelope {
    color: var(--rf-red);
}

/* Override ALL text-primary in timeline icons - MORE SPECIFIC */
.timeline-icon .bi-paperclip.text-primary,
.timeline-icon .bi-envelope.text-primary,
.timeline-icon i.bi-paperclip.text-primary,
.timeline-icon i.bi-envelope.text-primary,
.timeline-header .timeline-icon .text-primary,
.timeline-header .timeline-icon i.text-primary {
    color: var(--rf-red);
}

/* Timeline item hover fixes - rf-green border with shadow */
.timeline-item {
    border-left: 3px solid var(--rf-green); /* Default green left border */
    border: 1px solid #dee2e6; /* Ensure all borders are visible */
    margin-top: 2px; /* Space for hover effect top border */
}
.timeline-item:first-child {
    margin-top: 4px; /* Extra space for first item hover effect */
}

.timeline-item:hover {
    border: 1px solid var(--rf-green); /* Green border all around on hover */
    border-left: 3px solid var(--rf-green); /* Keep left border thicker */
    box-shadow: 0 4px 12px rgba(97, 206, 112, 0.15); /* Green shadow */
    transform: translateY(-1px); /* Subtle lift effect */
    z-index: 2; /* Ensure hover item is above others */
    position: relative; /* Ensure z-index works */
}
/* Ensure timeline container has enough padding */
.timeline-container {
    padding-top: 6px; /* Space for first item hover effect */
}

/* Production icons should be rf-red */
.production-icon .bi-file-earmark-pdf {
    color: var(--rf-red);
}

/* Productions hover styling - consistent with communication */
.production-card,
.rf-content-card {
    border-left: 3px solid var(--rf-green);
    transition: all 0.2s ease;
}

.production-card:hover,
.rf-content-card:hover {
    border-color: var(--rf-green);
    border-left-color: var(--rf-green);
    box-shadow: 0 4px 12px rgba(97, 206, 112, 0.15);
    transform: translateY(-1px);
}

/* Overview stat card icons should be rf-red */
.rf-stat-icon .bi-chat-left-text,
.rf-stat-icon .bi-file-earmark-text {
    color: var(--rf-red);
}

/* ===================================================================
   KLANTBEHEER FIXES
   =================================================================== */

/* Profile icons should be rf-red */
.bi-person-circle,
.bi-building {
    color: var(--rf-red);
}

/* Dossiers badges should be rf-green */
/* DUPLICATE REMOVED: .badge.bg-primary consolidated in foundation section */

/* Remove link styling from phone numbers */
a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}

/* Table row hover effects */
.rf-data-table .table tbody tr:hover {
    background-color: rgba(189, 30, 16, 0.04); /* RF red hover - distinct from green zebra */
    cursor: pointer;
}

/* Action buttons sharpening */
/* Updated: Removed .btn reference, use .rf-btn instead */
.rf-data-table .rf-btn-group-sm .rf-btn {
    border-radius: 0.25rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-width: 1px;
}

/* CONSOLIDATED: rf-stat-card alignment merged into line 12037 */

.rf-stat-icon {
    align-items: center; /* Center icon content */
    justify-content: center;
}

.rf-stat-content {
    justify-content: center; /* Center text content vertically */
}

/* ===================================================================
   DESKTOP MENU HOVER STYLING
   =================================================================== */

/* Desktop dropdown menu level 2 & 3 hover - roze background met rf-red text */
.rf-menu-dropdown .dropdown-item:hover,
.rf-menu-subdropdown .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
    background-color: #F9EFEF; /* Correct footer pink background */
    color: var(--rf-red); /* rf-red text */
}

/* ===================================================================
   SEO DASHBOARD IMPROVEMENTS
   =================================================================== */

/* SEO Dashboard zebra striping - Override Bootstrap CSS Variables */
.rf-content-card .card-body .table-responsive .table.table-striped.table-hover {
    --bs-table-striped-bg: transparent;  /* Bootstrap makes odd rows colored by default, we want them white */
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(189, 30, 16, 0.06); /* RF red hover */
    --bs-table-hover-color: var(--bs-body-color);
}

/* Make odd rows white (override Bootstrap default) */
.rf-content-card .card-body .table-responsive .table.table-striped.table-hover tbody tr:nth-of-type(odd) td {
    background-color: white;
    background-image: none; /* Remove Bootstrap's background-image */
}

/* Improve readability of Meta, Keyword, Afbeelding columns */
.container .table td,
.container-fluid .table td {
    opacity: 1;
}
/* Icons in SEO table with proper colors */
.container .table td .bi,
.container .table td i,
.container-fluid .table td .bi,
.container-fluid .table td i {
    opacity: 1;
    z-index: 10;
}
/* Specific icon color fixes */
.container .table td .bi-check-circle,
.container-fluid .table td .bi-check-circle { 
    color: #28a745; 
}
.container .table td .bi-x-circle,
.container-fluid .table td .bi-x-circle { 
    color: #dc3545; 
}
.container .table td .bi-exclamation-circle,
.container-fluid .table td .bi-exclamation-circle { 
    color: #ffc107; 
}

/* Make even rows green for zebra striping */
.rf-content-card .card-body .table-responsive .table.table-striped.table-hover tbody tr:nth-of-type(even) td {
    background-color: rgba(97, 206, 112, 0.08);
    background-image: none; /* Remove Bootstrap's background-image */
}
/* Combined Bootstrap variable overrides merged above */

/* Maintain hover effect - Override Bootstrap table-hover with RF red */
.rf-content-card .card-body .table-responsive .table.table-striped.table-hover tbody tr:hover td {
    background-color: rgba(189, 30, 16, 0.06); /* RF red hover - distinct from green zebra */
}

/* ===================================================================
   SYSTEM DASHBOARD STATUS STYLING
   =================================================================== */

/* System status - Ensure dashboard-header has white text */
.dashboard-header,
.dashboard-header h1,
.dashboard-header h2,
.dashboard-header h3,
.dashboard-header p,
.dashboard-header span,
.dashboard-header div {
    color: white;
}

/* Icon sizing within buttons */
/* REMOVED: Bootstrap .btn reference - use .rf-btn instead */
/* REMOVED: Bootstrap .btn-outline-danger reference - use .rf-btn-outline-red instead */
.rf-btn-group-sm .rf-btn-outline-green i {
    font-size: 0.75rem;
    line-height: 1;
}

/* Disabled button styling */
/* REMOVED: Bootstrap .btn:disabled reference - use .rf-btn:disabled instead */
.rf-btn-group-sm > .rf-btn-outline-green:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile responsive adjustments */

/* === END ADMIN CSS INTEGRATION === */

\n\n
/* ===================================================================
   MOBILE MENU - FIXED VERSION
   Proper overlay that doesn't expand header
   =================================================================== */

/* Hamburger button - show only on mobile/tablet */

.rf-hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    border: none;
    background: none;
    gap: 4px;
    z-index: 2100;
    position: relative;
}

.rf-hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--rf-dark);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.rf-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.rf-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.rf-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile menu overlay */
.rf-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.rf-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile menu - slide-in from right */
/* CONSOLIDATED: rf-mobile-menu properties merged into line 6762 */

.rf-mobile-menu.active {
    right: 0;
}

/* Mobile menu header */
.rf-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
    background-color: var(--rf-red);
    color: white;
}

.rf-mobile-menu-header h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.rf-menu-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile menu header */
.rf-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
    background-color: var(--rf-red);
    color: white;
    text-align: right; /* Right align header content */
}

.rf-mobile-menu-header h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white; /* Ensure white text */
    flex: 1;
    text-align: right; /* Right align "Menu" text */
    margin-right: 1rem; /* Space from close button */
}

.rf-menu-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.rf-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile menu content */
.rf-mobile-menu nav {
    flex: 0 0 auto; /* DON'T grow - only take needed space */
    padding: 1rem 0 0 0; /* NO bottom padding - seamless connection to dossier */
}

.rf-mobile-actions {
    padding: 1.5rem 2rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile responsive rules */
@media (max-width: 992px) {
    /* Hide desktop navigation and show hamburger */
    .rf-desktop-nav {
        display: none;
    }
    
    .rf-actions {
        display: none;
    }
    
    .rf-hamburger {
        display: flex;
    }
}

@media (min-width: 993px) {
    /* Hide mobile menu completely on desktop */
    .rf-hamburger {
        display: none;
    }
    
    .rf-mobile-menu {
        display: none;
    }
    
    .rf-overlay {
        display: none;
    }
}


/* ===================================================================
   MOBILE MENU NAVIGATION ITEMS - RIGHT ALIGNED
   =================================================================== */

.rf-mobile-menu nav {
    flex: 0 0 auto; /* DON'T grow - only take needed space */
    padding: 1.5rem 0 0 0; /* NO bottom padding - seamless dossier connection */
    text-align: right; /* Right align all navigation */
}

/* Mobile menu lists */
.rf-mobile-menu .rf-menu-list,
.rf-mobile-menu .rf-menu-vertical {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

/* Mobile menu items */
.rf-mobile-menu .rf-menu-item {
    text-align: right;
    margin: 0;
    padding: 0;
}

/* Mobile menu links */
.rf-mobile-menu .rf-menu-link {
    display: block;
    padding: 0.75rem 2rem; /* Good padding from right edge */
    text-decoration: none;
    color: var(--rf-dark);
    font-size: 1rem;
    font-weight: 500;
    text-align: right;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.2s ease;
    position: relative;
}

.rf-mobile-menu .rf-menu-link:hover {
    background-color: #f8f9fa;
    color: var(--rf-red);
    padding-right: 2.5rem; /* Slight indent on hover */
}

.rf-mobile-menu .rf-menu-link:active {
    background-color: var(--rf-red);
    color: white;
}

/* Mobile dropdown styling */
.rf-mobile-menu .rf-dropdown-toggle {
    display: block;
    padding: 0.75rem 2rem;
    text-decoration: none;
    color: var(--rf-dark);
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
    border-bottom: 1px solid #f8f9fa;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.rf-mobile-menu .rf-dropdown-toggle::after {
    content: '▼';
    font-size: 0.75rem;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

/* NO ROTATION - static chevron */

.rf-mobile-menu .rf-dropdown-toggle:hover {
    background-color: #f8f9fa;
    color: var(--rf-red);
}

/* Mobile submenu */
.rf-mobile-menu .rf-dropdown-menu {
    background-color: #f8f9fa;
    padding: 0.5rem 0;
    margin: 0;
    display: none;
    list-style: none;
}

.rf-mobile-menu .rf-dropdown-menu.show {
    display: block;
}

.rf-mobile-menu .rf-dropdown-item {
    display: block;
    padding: 0.5rem 3rem; /* Extra indent for submenu */
    text-decoration: none;
    color: #6c757d;
    font-size: 0.9rem;
    text-align: right;
    transition: all 0.2s ease;
}

.rf-mobile-menu .rf-dropdown-item:hover {
    background-color: #e9ecef;
    color: var(--rf-red);
    padding-right: 3.5rem; /* Slight indent on hover */
}

/* Mobile menu section headers */
.rf-mobile-menu h6 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1.5rem 2rem 0.5rem 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
    text-align: right;
}

/* Mobile dossier menu styling - SEAMLESS INTEGRATION */
.rf-mobile-menu .rf-dossier-menu {
    margin: 0; /* NO extra margin - direct connection */
    padding-left: 1.5rem; /* Same as other dropdown sections */
    border: none; /* NO borders - clean integration */
    background-color: #f8f9fa; /* Light gray background like other sections */
    border-left: 2px solid var(--rf-green); /* GREEN ACCENT like other sections */
    margin-left: 1rem; /* Same indentation as other sections */
}

.rf-mobile-menu .rf-dossier-menu h6 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.5rem 2rem 0.5rem 2rem; /* REDUCED top margin - no whitespace */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
    text-align: right; /* FORCE right alignment */
    display: block;
    /* Direct connection to menu above */
}

.rf-mobile-menu .rf-dossier-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rf-mobile-menu .rf-dossier-links li {
    text-align: right;
}

.rf-mobile-menu .rf-dossier-links a {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 2rem;
    text-decoration: none;
    color: var(--rf-dark);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    flex-wrap: nowrap;
}

.rf-mobile-menu .rf-dossier-links a:hover {
    background-color: #f8f9fa;
    color: var(--rf-red);
    padding-right: 2.5rem;
}

/* Badge styling in mobile dossier menu */
.rf-mobile-menu .rf-dossier-links .badge {
    font-size: 0.75rem;
    flex-shrink: 0;
    min-width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rf-mobile-menu .rf-dossier-links .divider {
    height: 1px;
    background-color: #e9ecef;
    margin: 0.5rem 2rem;
}

/* Mobile actions styling */
.rf-mobile-actions {
    padding: 1.5rem 2rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #f8f9fa;
    text-align: right; /* Right align action buttons */
}

.rf-mobile-actions .rf-btn {
    justify-self: flex-end;
    align-self: flex-end;
    max-width: 200px; /* Don't make buttons too wide */
}\n\n
/* ===================================================================
   MOBILE MENU HIERARCHY - FIXED VERSION
   Right-aligned with proper left indentation for submenus
   =================================================================== */

/* Mobile dropdown buttons - single clean chevron */
.rf-mobile-menu .rf-dropdown-toggle {
    display: block;
    padding: 0.75rem 2rem;
    text-decoration: none;
    color: var(--rf-dark);
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
    border-bottom: 1px solid #f8f9fa;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* Single chevron icon - NO ROTATION */
.rf-mobile-menu .rf-dropdown-toggle::after {
    content: '▼';
    font-size: 0.75rem;
    margin-left: 0.5rem;
    color: #6c757d;
    /* NO transform/rotation - keep it simple */
}

.rf-mobile-menu .rf-dropdown-toggle:hover {
    background-color: #f8f9fa;
    color: var(--rf-red);
}

.rf-mobile-menu .rf-dropdown-toggle:hover::after {
    color: var(--rf-red);
}

/* MOBILE MENU DROPDOWN - CORRECTE SELECTORS MET RIGHT ALIGNMENT */
.rf-mobile-menu .rf-menu-dropdown {
    background-color: #f8f9fa; /* Light gray background */
    padding: 0.75rem 0;
    margin: 0.5rem 1.5rem 0.5rem 0.5rem; /* Indent from RIGHT */
    display: none;
    position: static;
    top: auto;
    left: auto;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--rf-green);
    max-height: none;
    overflow: visible;
    transition: none;
}

.rf-mobile-menu .rf-menu-dropdown.show {
    display: block;
}

/* Mobile submenu items - INSIDE gray container */
.rf-mobile-menu .rf-menu-dropdown-item {
    display: block;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: #6c757d;
    font-size: 0.9rem;
    text-align: right;
    transition: all 0.2s ease;
    position: static;
    border-radius: 4px;
    margin: 0.1rem 0.5rem;
    background-color: transparent;
    border-bottom: none;
    white-space: normal;
}

.rf-mobile-menu .rf-menu-dropdown-item:hover {
    background-color: #e9ecef;
    color: var(--rf-red);
}

/* Submenu chevron icon for nested menus */
.rf-mobile-menu .rf-submenu-chevron {
    float: right;
    font-size: 0.75rem;
    color: #6c757d;
    margin-left: 0.5rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.rf-mobile-menu .rf-submenu-toggle:hover .rf-submenu-chevron {
    color: var(--rf-red);
}

.rf-mobile-menu .rf-submenu-toggle.active .rf-submenu-chevron {
    transform: rotate(90deg);
    color: var(--rf-red);
}

/* Main menu links - standard padding */
.rf-mobile-menu .rf-menu-link {
    display: block;
    padding: 0.75rem 2rem; /* Standard padding for main items */
    text-decoration: none;
    color: var(--rf-dark);
    font-size: 1rem;
    font-weight: 500;
    text-align: right;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.2s ease;
    position: relative;
}

.rf-mobile-menu .rf-menu-link:hover {
    background-color: #f8f9fa;
    color: var(--rf-red);
    /* Subtle visual feedback without changing indentation */
}

/* Clear visual distinction between levels */
.rf-mobile-menu .rf-menu-item {
    position: relative;
}

/* Remove bottom border from last menu item to prevent whitespace before dossier section */
.rf-mobile-menu .rf-menu-item:last-child .rf-menu-link {
    border-bottom: none;
}

.rf-mobile-menu nav .rf-menu-item:last-child .rf-menu-link {
    border-bottom: none;
}

/* Remove any conflicting Bootstrap dropdown icons */
.rf-mobile-menu .dropdown-toggle::after {
    display: none;
}

/* Ensure proper stacking and no icon conflicts */
.rf-mobile-menu .nav-link.dropdown-toggle::after,
/* Updated: Removed .btn reference, use .rf-btn instead */
.rf-mobile-menu .rf-btn.dropdown-toggle::after {
    display: none;
}

/* Invoice Status Badge - Fixed width for timeline alignment */
.invoice-status-badge {
    width: 80px;
    text-align: center;
}

.rf-icon-large {
    font-size: 4rem !important;
}

/* Badge visibility control - Hide badges with count 0 */
.rf-stat-icon .badge[data-count="0"],
.rf-stat-icon .badge:empty,
/* Also hide sidebar badges when zero */
span[id^="sidebar-"][id$="-badge"][data-count="0"],
span[id^="sidebar-"][id$="-badge"]:empty {
    display: none !important;
}

/* Sidebar badges - ensure they display properly when shown */
span[id^="sidebar-"][id$="-badge"] {
    font-size: 0.75rem !important;
    font-weight: 600;
    line-height: 1.2;
    min-width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Ensure parties badge with "!" has consistent width with other badges */
#sidebar-parties-badge,
#mobile-parties-badge {
    min-width: 1.5rem;
    text-align: center;
}

/* Form focus styling handled by consolidated section above */

/* Ensure consistent form field borders */
.modal-body .form-control,
.modal-body .form-select,
.modal-body textarea {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Active field should have only ONE border */
.modal-body .form-control:focus {
    border: 1px solid var(--rf-red) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.25) !important;
}

/* Fix for floating labels if used */
.form-floating > .form-control:focus ~ label {
    color: var(--rf-red) !important;
}

/* Fix for input groups */
.input-group .form-control:focus {
    z-index: 5;
    border-color: var(--rf-red) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.25) !important;
}

/* Form validation states */
.was-validated .form-control:valid:focus {
    border-color: var(--rf-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.was-validated .form-control:invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    padding: 0.25rem;
    text-align: center;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===================================================================
   PARTY MODAL STYLING FIXES
   =================================================================== */

/* Fix step number badges - make them RF red */
#newPartyModal .badge.bg-primary {
    background-color: var(--rf-red, #BD1E10) !important;
}

/* Hide radio buttons in role selection - make entire cards clickable */
#newPartyModal .form-check-card .form-check-input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Hide radio buttons in type partij section (RF button group) */
#newPartyModal .rf-btn-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Enhanced card styling for better clickability */
#newPartyModal .form-check-card .card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #dee2e6;
}

#newPartyModal .form-check-card .card:hover {
    border-color: var(--rf-red, #BD1E10);
    box-shadow: 0 2px 4px rgba(189, 30, 16, 0.1);
    transform: translateY(-1px);
}

/* Selected state styling */
#newPartyModal .form-check-card .form-check-input:checked + .form-check-label .card {
    border-color: var(--rf-red, #BD1E10);
    background-color: rgba(189, 30, 16, 0.05);
    box-shadow: 0 2px 8px rgba(189, 30, 16, 0.2);
}

/* ===== DOSSIER CONTAINER RESPONSIVE BEHAVIOR ===== */
.rf-dossier-container {
    /* Desktop: Full width like container-fluid for sidebar layout */
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

/* ===== RF TOTALS CARD STYLING ===== */
.rf-totals-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.rf-totals-card__header {
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding: 12px 16px;
}

.rf-totals-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.rf-totals-card__body {
    padding: 0;
}

.rf-totals-card__row {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f3f4;
}

.rf-totals-card__row:last-child {
    border-bottom: none;
}

.rf-totals-card__row--total {
    background: #f8f9fa;
    border-top: 2px solid #28a745;
    font-weight: 600;
}

.rf-totals-card__label {
    font-weight: 500;
    color: #6c757d;
}

.rf-totals-card__amount {
    font-weight: 600;
    color: #495057;
}

.rf-totals-card__amount--total {
    color: #28a745;
    font-size: 1.1em;
}

/* Mobile/tablet: MAXIMIZE SPACE - eliminate all unnecessary padding layers */
@media (max-width: 991px) {
    /* Layer 1: rf-dossier-container - reduce from 14px to minimal */
    .rf-dossier-container {
        max-width: 100%;
        padding-right: 4px; /* Was 14px - save 20px */
        padding-left: 4px;  /* Was 14px - save 20px */
    }
    
    /* Layer 2: container-fluid inside dossier container - eliminate padding */
    .rf-dossier-container .container-fluid {
        padding-right: 4px; /* Was 21px - save 34px */
        padding-left: 4px;  /* Was 21px - save 34px */
    }
    
    /* Layer 3: rf-dossier-content - already fixed */
    .rf-dossier-container .rf-dossier-content {
        padding: 8px; /* Was 20px - save 24px */
        margin: 2px;  /* Was 6px - save 8px */
        /* Total space saved across all layers: ~78px = MUCH wider cards! */
    }
    
    /* FIX: invoices.html responsive layout - make it behave like dossiers/clients */
    
    /* Basic container padding reduction */
    .container-fluid {
        padding-right: 4px;
        padding-left: 4px;
    }
    
    /* Fix header elements stacking */
    .container-fluid .row .col-12 .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    /* Keep badges horizontal */
    .container-fluid .d-flex.gap-2:has(.badge) {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    /* Stack filter controls vertically */
    .rf-data-table-header .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    /* Make filter dropdowns wrap better */
    .rf-data-table-header .d-flex.gap-2.flex-wrap {
        gap: 0.5rem;
    }
    
    /* Full width search */
    .rf-data-table-header .input-group {
        width: 100%;
    }
    
    /* Fix totals footer responsive */
    .rf-data-table-footer .row {
        flex-direction: column;
    }
    
    .rf-data-table-footer .col-md-8,
    .rf-data-table-footer .col-md-4 {
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    /* Ensure totals card is full width */
    .rf-totals-card {
        width: 100%;
        margin: 0;
    }
    
    /* CRITICAL FIX: CSRF div is making page too wide */
    div[data-csrf-auto] {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}


/* ===== RESPONSIVE CARD LAYOUT SYSTEM ===== */

/* Hide table on mobile and tablet, show card layout instead */
@media (max-width: 991px) {
    /* Hide the table - rf-data-table containers */
    .rf-data-table .table-responsive {
        display: none !important;
    }
    
    /* Hide oversight dashboard table specifically */
    .rf-data-table-container .table-responsive {
        display: none !important;
    }
    
    /* Show card layout */
    .rf-card-layout {
        display: block !important;
    }
    
    /* Hide per-page selector on mobile to save space */
    @media (max-width: 767px) {
        .rf-per-page-selector {
            display: none !important;
        }
    }
}

/* Desktop: Hide card layout, show table */
@media (min-width: 992px) {
    .rf-card-layout {
        display: none !important;
    }
    
    .rf-data-table .table-responsive {
        display: block !important;
    }
}

/* Card styling */
.rf-card-layout {
    display: none; /* Hidden by default, shown on mobile/tablet */
}

.rf-card-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rf-card-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s ease;
}

.rf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.rf-card-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin: 0;
    flex: 1;
    margin-right: 12px;
}

.rf-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.rf-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.rf-card-label {
    font-weight: 500;
    color: #666;
    min-width: 80px;
}

.rf-card-value {
    color: #333;
    text-align: right;
    flex: 1;
}

.rf-card-badges {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

/* Invoice filters - structured mobile layout */
@media (max-width: 991px) {
    /* Row 1: Status and Year filters side by side, left aligned */
    .rf-data-table-header .d-flex:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .rf-data-table-header .d-flex:first-child > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    /* Row 2: Search bar on own line, left aligned */
    .rf-data-table-header .d-flex:first-child > div:last-child {
        align-self: flex-start !important;
    }
    
    /* Row 3: Date range form restructured */
    #dateRangeForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    /* Row 3a: 'Datum bereik:' and first date input on same line */
    .date-range-first-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Make 'Datum bereik:' text fixed width for alignment */
    .date-range-first-row > small.text-muted {
        width: 85px;
        text-align: left;
        margin-right: 0 !important;
    }
    
    /* Row 3b: 'tot:' indented and second date with button */
    .date-range-second-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 0px; /* No indent - align 'tot:' with 'Datum bereik:' */
    }
    
    /* Make 'tot:' text same width as 'Datum bereik:' for proper alignment */
    .date-range-second-row > span.text-muted {
        width: 85px; /* Same as 'Datum bereik:' width */
        text-align: left;
    }
    
    /* Make date inputs consistent size */
    .date-range-first-row .input-group,
    .date-range-second-row .input-group {
        width: 140px !important;
        min-width: 140px;
    }
    
/* Desktop: Place filter button inline with date selectors */
@media (min-width: 992px) {
    /* Form is already row on desktop due to Bootstrap classes */
    
    /* Fix the date range rows - they need to be flex containers */
    .date-range-first-row,
    .date-range-second-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0;
        white-space: nowrap;
    }
    
    /* Button styling */
    .date-range-second-row .rf-btn {
        margin-left: 8px;
    }
}
    
    /* Reset filters section alignment */
    .rf-data-table-header .d-flex:last-child > div:last-child {
        align-self: flex-end !important;
    }
}

/* Invoice specific responsive filters and table hiding */
@media (max-width: 991px) {
    /* Hide complex filters on mobile/tablet - keep only status and year */
    #month-filter, 
    #week-filter {
        display: none !important;
    }
    
    /* CRITICAL: Hide invoice table completely - ULTRA SPECIFIC */
    .rf-data-table,
    .rf-data-table *,
    div.rf-data-table,
    body .rf-data-table {
        display: none !important;
    }
    
    /* Force show card layout */
    .rf-card-layout,
    div.rf-card-layout {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Stack filter elements vertically on mobile */
    @media (max-width: 767px) {
        .rf-data-table-header .d-flex.justify-content-between {
            flex-direction: column;
            gap: 12px;
        }
        
        .rf-data-table-header .d-flex.gap-2.flex-wrap {
            flex-wrap: wrap;
        }
        
        /* Hide totals badges on very small screens */
        .badge.bg-primary.fs-6,
        .badge.bg-info.fs-6 {
            font-size: 0.75rem !important;
            padding: 0.25rem 0.5rem !important;
        }
    }
}

/* ===================================================================
   WIZARD/STEPPER COMPONENT STYLING - Payment Creation Modal
   ================================================================== */

/* Wizard Progress Container */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
    margin: 0 auto;
    max-width: 400px;
}

/* Individual Wizard Step */
.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Wizard Step Number Circle */
.wizard-step .wizard-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    border: 3px solid #dee2e6;
    background-color: #f8f9fa;
    color: #6c757d;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

/* Wizard Step Label */
.wizard-step .wizard-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
    text-align: center;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* Wizard Connector Line */
.wizard-connector {
    flex: 1;
    height: 3px;
    background-color: #dee2e6;
    margin: 0 1rem;
    position: relative;
    top: -16px; /* Align with middle of circle */
    z-index: 1;
    transition: background-color 0.3s ease;
}

/* Active Step Styling */
.wizard-step.active .wizard-number {
    background-color: var(--rf-green, #28a745);
    border-color: var(--rf-green, #28a745);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2);
}

.wizard-step.active .wizard-label {
    color: var(--rf-green, #28a745);
    font-weight: 600;
}

/* Completed Step Styling */
.wizard-step.completed .wizard-number {
    background-color: var(--rf-green, #28a745);
    border-color: var(--rf-green, #28a745);
    color: white;
}

.wizard-step.completed .wizard-label {
    color: var(--rf-green, #28a745);
    font-weight: 500;
}

/* Completed Connector */
.wizard-connector.completed {
    background-color: var(--rf-green, #28a745);
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
    .wizard-progress {
        max-width: 300px;
        padding: 1rem 0;
    }
    
    .wizard-step .wizard-number {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .wizard-step .wizard-label {
        font-size: 12px;
    }
    
    .wizard-connector {
        margin: 0 0.5rem;
        top: -14px;
    }
}

/* Payment Creation Modal Specific Enhancements */
#paymentCreationModal .modal-header {
    position: relative;
    overflow: hidden;
}

#paymentCreationModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--rf-green, #28a745) 0%, #20c997 100%);
    z-index: -1;
}

/* Summary Box Styling in Confirmation Step */
.summary-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.summary-box h6 {
    color: var(--rf-green, #28a745);
    margin-bottom: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.summary-box h6::before {
    content: '\F4A5'; /* Bootstrap icon check-circle */
    font-family: 'bootstrap-icons';
    margin-right: 0.5rem;
}

/* Confirmation Details Styling */
.confirmation-details .alert {
    border-left: 4px solid #17a2b8;
    background-color: rgba(23, 162, 184, 0.1);
    border-color: rgba(23, 162, 184, 0.2);
}

/* Price Calculation Enhancement */
.rf-price-calculation {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
}

.rf-price-calculation .price-line {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid #e9ecef;
}

.rf-price-calculation .price-line:last-child {
    border-bottom: none;
}

.rf-price-calculation .price-line.total {
    border-top: 2px solid var(--rf-green, #28a745);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    background-color: rgba(40, 167, 69, 0.1);
}

/* Style discount amount in green */
#discountAmount {
    color: #28a745;
}

/* ===================================================================
   COOKIE CONSENT BANNER STYLING
   =================================================================== */

/* Cookie Banner - Fixed bottom banner */
.rf-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--rf-white);
    border-top: 3px solid var(--rf-green);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    padding: 20px;
}

.rf-cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.rf-cookie-text h5 {
    margin: 0 0 8px 0;
    color: var(--rf-green);
    font-weight: 600;
}

.rf-cookie-text p {
    margin: 0;
    font-size: 14px;
    color: var(--rf-text-secondary);
    line-height: 1.4;
}

.rf-cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Cookie category styling for within RF modal */
.rf-cookie-category {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rf-light-gray);
}

.rf-cookie-category:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.rf-cookie-category-header {
    margin-bottom: 10px;
}

.rf-cookie-category-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}

.rf-cookie-category-description {
    margin: 0;
    font-size: 14px;
    color: var(--rf-text-secondary);
    line-height: 1.4;
}

/* Mobile responsive cookie banner */
@media (max-width: 768px) {
    .rf-cookie-content {
        flex-direction: column;
        gap: 15px;
    }

    .rf-cookie-buttons {
        width: 100%;
        justify-content: center;
    }

    .rf-cookie-buttons .rf-btn {
        flex: 1;
        font-size: 12px;
        padding: 8px 12px;
    }
}


/* ==========================================================================
   Legal Document Styling
   ========================================================================== */

/* Legal Document Styling - for static legal pages loaded in modals */
.rf-legal-document {
    font-family: var(--font-primary);
    padding: 1.5rem 0;
    color: var(--text-primary);
    line-height: 1.6;
}

.rf-legal-document h1 {
    color: var(--rf-green);
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.75rem;
}

.rf-legal-document h2 {
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.25rem;
}

.rf-legal-document p {
    margin-bottom: 1rem;
}

.rf-legal-document ul,
.rf-legal-document ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.rf-legal-document li {
    margin-bottom: 0.5rem;
}

.rf-legal-document strong {
    font-weight: 600;
}

.rf-legal-document a {
    color: var(--rf-green);
    text-decoration: underline;
}

.rf-legal-document a:hover {
    color: var(--rf-green-dark);
}

@media (max-width: 768px) {
    .rf-legal-document {
        padding: 1rem 0;
    }

    .rf-legal-document h1 {
        font-size: 1.5rem;
    }

    .rf-legal-document h2 {
        font-size: 1.1rem;
    }
}

/* Hero Discount Banner - Alleen deze CSS toevoegen */
.hero-discount-banner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    width: 200px;
    height: 200px;
    overflow: hidden;
    pointer-events: none;
}

.hero-discount-banner::before {
    content: "";
    position: absolute;
    top: 45px;
    right: -70px;
    width: 320px;
    height: 40px;
    background: var(--rf-red);
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(189, 30, 16, 0.4);
}

.discount-text {
    position: absolute;
    top: 70px;
    right: -70px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    transform: rotate(45deg);
    white-space: nowrap;
    z-index: 21;
    text-align: center;
    width: 280px;
}

/* Services Price Ribbon - Alleen deze CSS toevoegen */
.services-price-ribbon {
    position: absolute;
    top: 45px;
    right: 15px;
    z-index: 10;
    background: var(--rf-red);
    color: white;
    padding: 8px 16px;
    transform: rotate(12deg);
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(189, 30, 16, 0.3);
}

.services-price-text {
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Responsive voor discount banner en price ribbon */
@media (max-width: 768px) {
    .hero-discount-banner {
        width: 140px;
        height: 140px;
    }
    
    .hero-discount-banner::before {
        top: 35px;
        right: -50px;
        width: 220px;
        height: 30px;
    }
    
    .discount-text {
        top: 47px;
        right: -42px;
        font-size: 0.8rem;
        width: 200px;
    }

    .services-price-ribbon {
        top: 35px;
        right: 15px;
        padding: 6px 12px;
    }

    .services-price-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .hero-discount-banner {
        width: 100px;
        height: 100px;
    }
    
    .hero-discount-banner::before {
        top: 25px;
        right: -35px;
        width: 160px;
        height: 25px;
    }
    
    .discount-text {
        top: 35px;
        right: -31px;
        font-size: 0.65rem;
        width: 140px;
    }

    .services-price-ribbon {
        top: 50px;
        right: 10px;
        padding: 5px 10px;
    }

    .services-price-text {
        font-size: 0.8rem;
    }
}

/* Service Card Ribbons */
.service-card-ribbon {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 10;
    background: var(--rf-red);
    color: white;
    padding: 6px 14px;
    transform: rotate(12deg);
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(189, 30, 16, 0.3);
}

.service-card-price {
    font-weight: 700;
    font-size: 0.8rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

/* Responsive voor service card ribbons */
@media (max-width: 768px) {
    .service-card-ribbon {
        top: -3px;
        right: -3px;
        padding: 5px 12px;
        transform: rotate(8deg);
    }

    .service-card-price {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .service-card-ribbon {
        top: -2px;
        right: -2px;
        padding: 4px 10px;
        transform: rotate(5deg);
    }

    .service-card-price {
        font-size: 0.8rem;
    }
}

/* ===================================================================
   BUTTON COLOR FIXES - Fix conflicting rf-btn-outline-green colors
   ================================================================ */

/* CRITICAL: Override all conflicting rf-btn-outline-green hover colors
   Force consistent usage of var(--rf-green) across entire application */
button.rf-btn.rf-btn-outline-green:hover,
a.rf-btn.rf-btn-outline-green:hover,
.rf-btn.rf-btn-outline-green:hover {
    background-color: var(--rf-green) !important;
    border-color: var(--rf-green) !important;
    color: white !important;
    box-shadow: 0 8px 20px var(--rf-shadow-green) !important;
    transform: translateY(-4px) !important;
}

/* Also fix focus states */
button.rf-btn.rf-btn-outline-green:focus,
a.rf-btn.rf-btn-outline-green:focus,
.rf-btn.rf-btn-outline-green:focus {
    background-color: var(--rf-green) !important;
    border-color: var(--rf-green) !important;
    color: white !important;
    box-shadow: 0 8px 20px var(--rf-shadow-green) !important;
    transform: translateY(-4px) !important;
}

/* ============================================
   iOS TOUCH COMPATIBILITY STYLES
   Added: 2025-01-20 - Fix iPad Chrome menu issues
   ============================================ */

/* iOS requires cursor:pointer for tap recognition */
.rf-mobile-menu .rf-dropdown-toggle,
.rf-mobile-menu .rf-submenu-toggle,
.rf-mobile-menu .rf-menu-dropdown-item,
.rf-mobile-menu .rf-menu-link,
.rf-mobile-menu .rf-menu-sub-item {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(189, 30, 16, 0.1);
    -webkit-touch-callout: none;
}

/* Ensure touch targets meet iOS minimum (44x44px) */
.rf-mobile-menu .rf-dropdown-toggle,
.rf-mobile-menu .rf-submenu-toggle,
.rf-mobile-menu .rf-menu-link,
.rf-mobile-menu .rf-menu-dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* iOS touch active state feedback */
.rf-mobile-menu .rf-dropdown-toggle:active,
.rf-mobile-menu .rf-submenu-toggle:active,
.rf-mobile-menu .rf-menu-dropdown-item:active,
.rf-mobile-menu .rf-menu-link:active {
    background-color: rgba(189, 30, 16, 0.05);
    transition: background-color 0.1s;
}

/* Prevent iOS text selection on tap */
.rf-mobile-menu .rf-dropdown-toggle,
.rf-mobile-menu .rf-submenu-toggle {
    -webkit-user-select: none;
    user-select: none;
}

/* Quick Advice modal trigger - iOS touch support */
[data-bs-toggle="modal"],
.modal-trigger {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(189, 30, 16, 0.1);
}

/* END iOS TOUCH COMPATIBILITY */