/* ========================================
   UNIVERSAL BUTTON STYLING - ALL PAGES
   ======================================== */

/* Base button styling that applies to ALL buttons */
button, .btn, [role="button"] {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    outline: none;
    user-select: none;
    padding: 10px 18px;
    font-size: 0.875rem;
    min-height: 40px;
}

/* SPECIFIC BUTTON STYLING BY ID */

/* Calculate Total Button - Blue/Primary */
#calculateTotalBtn {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

#calculateTotalBtn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4) !important;
    background: linear-gradient(135deg, #3730a3, #4f46e5) !important;
}

/* Clear List Button - Original Red Style */
#clearListBtn {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

#clearListBtn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4) !important;
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
}

/* Copy Template Button (Genereer Advocaat Aanvraag) - Green/Success */
#copyTemplateBtn {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

#copyTemplateBtn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4) !important;
    background: linear-gradient(135deg, #047857, #059669) !important;
}

/* Copy and Go to Discord Button - Darker Discord Purple */
#copyAndGoToDiscordBtn {
    background: linear-gradient(135deg, #4752C4, #5865F2) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(71, 82, 196, 0.4) !important;
}

#copyAndGoToDiscordBtn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(71, 82, 196, 0.5) !important;
    background: linear-gradient(135deg, #3C44A8, #4752C4) !important;
}

/* MEOS Copy Buttons (Genereer MEOS Notitie) - Blue */
#copyMeosTitleBtn, #copyMeosDescriptionBtn {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

#copyMeosTitleBtn:hover, #copyMeosDescriptionBtn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4) !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
}

/* Primary button style (default for other buttons) */
button:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.copy-button):not(.copy-discord-button):not(.copy-meos-button):not(#themeToggle):not(.user-dropdown-button):not(#userDropdownBtn):not(#logoutBtn):not(#clearArtikelSearch):not(#calculateTotalBtn):not(#clearListBtn):not(#copyTemplateBtn):not(#copyAndGoToDiscordBtn):not(#copyMeosTitleBtn):not(#copyMeosDescriptionBtn),
.btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Primary hover effects */
button:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.copy-button):not(.copy-discord-button):not(.copy-meos-button):not(#themeToggle):not(.user-dropdown-button):not(#userDropdownBtn):not(#logoutBtn):not(#clearArtikelSearch):not(#calculateTotalBtn):not(#clearListBtn):not(#copyTemplateBtn):not(#copyAndGoToDiscordBtn):not(#copyMeosTitleBtn):not(#copyMeosDescriptionBtn):hover,
.btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #3730a3, #4f46e5);
}

/* Active states */
button:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.copy-button):not(.copy-discord-button):not(.copy-meos-button):not(#themeToggle):not(.user-dropdown-button):not(#userDropdownBtn):not(#logoutBtn):not(#clearArtikelSearch):not(#calculateTotalBtn):not(#clearListBtn):not(#copyTemplateBtn):not(#copyAndGoToDiscordBtn):not(#copyMeosTitleBtn):not(#copyMeosDescriptionBtn):active,
.btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):active {
    transform: translateY(0) scale(0.98);
}

/* Secondary button style */
.btn-secondary,
button.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    color: white;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    padding: 10px 18px;
    font-size: 0.875rem;
    min-height: 40px;
}

.btn-secondary:hover,
button.btn-secondary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(107, 114, 128, 0.4);
    background: linear-gradient(135deg, #4b5563, #6b7280);
}

/* Danger/Red button style */
.btn-danger,
button.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    padding: 10px 18px;
    font-size: 0.875rem;
    min-height: 40px;
}

.btn-danger:hover,
button.btn-danger:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
    background: linear-gradient(135deg, #b91c1c, #dc2626);
}

/* Success/Green button style */
.btn-success,
button.btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    padding: 10px 18px;
    font-size: 0.875rem;
    min-height: 40px;
}

.btn-success:hover,
button.btn-success:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
    background: linear-gradient(135deg, #15803d, #16a34a);
}

/* Warning/Orange button style */
.btn-warning,
button.btn-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    padding: 10px 18px;
    font-size: 0.875rem;
    min-height: 40px;
}

.btn-warning:hover,
button.btn-warning:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, #b45309, #d97706);
}

/* Discord specific buttons - Darker styling */
button[class*="discord"]:not(#themeToggle):not(.user-dropdown-button):not(#userDropdownBtn):not(#logoutBtn), .btn-discord {
    background: linear-gradient(135deg, #4752C4, #5865F2) !important;
    box-shadow: 0 4px 12px rgba(71, 82, 196, 0.4) !important;
    color: white !important;
    padding: 12px 20px !important;
    font-size: 0.875rem !important;
    min-height: 44px !important;
}

button[class*="discord"]:not(#themeToggle):not(.user-dropdown-button):not(#userDropdownBtn):not(#logoutBtn):hover, .btn-discord:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(71, 82, 196, 0.5) !important;
    background: linear-gradient(135deg, #3C44A8, #4752C4) !important;
}

/* Disabled state for all buttons */
button:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Shine effect for all buttons */
button:not(:disabled):not(#themeToggle):not(.user-dropdown-button):not(#userDropdownBtn):not(#logoutBtn):not(#clearArtikelSearch):not(.penalty-remove)::before, 
.btn:not(:disabled):not(.penalty-remove)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

button:not(:disabled):not(#themeToggle):not(.user-dropdown-button):not(#userDropdownBtn):not(#logoutBtn):not(#clearArtikelSearch):not(.penalty-remove):hover::before, 
.btn:not(:disabled):not(.penalty-remove):hover::before {
    left: 100%;
}

/* Protocol apply button - better styling, less orange */
#applyProtocolBtn {
    background: linear-gradient(135deg, #dc2626, #dc2626) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

#applyProtocolBtn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4) !important;
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
}

/* ========================================
   END UNIVERSAL BUTTON STYLING
   ======================================== */

.calculation-highlight {
    background-color: rgba(99, 102, 241, 0.3); /* Primary color */
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin: 0 0.25rem;
}

.dark .calculation-highlight {
    background-color: rgba(129, 140, 248, 0.3); /* Primary color in dark mode */
}

.explanation-text {
    font-size: 0.875rem;
    color: #4338ca; /* Primary-700 */
    margin-top: 0.5rem;
    font-style: italic;
}

.dark .explanation-text {
    color: #818cf8; /* Primary-400 in dark mode */
}

.modifier-badge {
    display: inline-block;
    background-color: #e0e7ff; /* primary-100 */
    color: #4338ca; /* primary-700 */
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.dark .modifier-badge {
    background-color: #312e81; /* primary-900 */
    color: #818cf8; /* primary-400 */
}

/* Enhanced checkbox styling with gradients and animations */
input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
    border: 2px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    background: linear-gradient(135deg, #ffffff, #f9fafb) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

input[type="checkbox"]:hover {
    border-color: #6366f1 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2) !important;
}

input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border-color: #4f46e5 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
}

.dark input[type="checkbox"] {
    border-color: #4b5563 !important;
    background: linear-gradient(135deg, #374151, #4b5563) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dark input[type="checkbox"]:hover {
    border-color: #818cf8 !important;
    box-shadow: 0 4px 8px rgba(129, 140, 248, 0.3) !important;
}

.dark input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

.article-section {
    margin-bottom: 1rem;
    border-left: 3px solid #6366f1; /* primary-500 as default */
    padding-left: 0.75rem;
}

.dark .article-section {
    border-left-color: #4f46e5; /* primary-600 as default for dark mode */
}

/* Base penalty-item MET border-left styling - laat category colors door */
.penalty-item {
    border-left: 4px solid #e5e7eb; /* Default grijze border die overschreven wordt door categories */
    padding-left: 0.75rem;
    position: relative;
}

/* Dark mode heeft geen aparte penalty-item regel meer nodig */

.total-summary {
    font-weight: 600;
    background: rgba(240, 240, 255, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
    transition: all 0.3s ease;
}

.total-summary:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
}

.dark .total-summary {
    background: rgba(30, 30, 60, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.4);
}

/* ================================================================
   TOTALE STRAFBEREKENING HEADER - CLEAN PROFESSIONAL STYLING
   Schone header zonder overdreven effecten
   ================================================================ */

/* Clean styling voor de hoofdheader van Totale Strafberekening */
#resultContainer h2 {
    color: #4f46e5 !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    margin-bottom: 1.5rem !important;
    padding: 16px 0 !important;
    border-bottom: 2px solid rgba(99, 102, 241, 0.3) !important;
}

#resultContainer h2 i.fas.fa-gavel {
    color: #6366f1 !important;
    margin-right: 8px !important;
}

.dark #resultContainer h2 {
    color: #818cf8 !important;
    border-bottom-color: rgba(129, 140, 248, 0.3) !important;
}

.dark #resultContainer h2 i.fas.fa-gavel {
    color: #a78bfa !important;
}

/* Clean result container styling */
#resultContainer {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(229, 231, 235, 0.8) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    padding: 24px !important;
    margin-top: 24px !important;
}

.dark #resultContainer {
    background: rgba(31, 41, 55, 0.95) !important;
    border: 1px solid rgba(75, 85, 99, 0.8) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.advocaataanvraag {
    font-weight: 600;
    border-top: 2px solid #6366f1; /* primary-500 */
    padding-top: 1rem;
    margin-top: 1rem;
}

.dark .advocaataanvraag {
    border-top-color: #4f46e5; /* primary-600 */
}

/* Enhanced copy button styling with modern effects */
/* Modern copyTemplateBtn styling - Enhanced */

#advocateTemplateText {
    font-family: monospace;
    line-height: 1.5;
}

/* MEOS template styling */
#meosTemplate {
    transition: all 0.3s ease;
}

#meosTemplateText {
    font-family: monospace;
    line-height: 1.5;
}

#meosTitleText, #meosDescriptionText {
    font-family: monospace;
    line-height: 1.5;
}

#meosCustomTitleInput {
    transition: all 0.2s ease;
}

#meosCustomTitleInput:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* MEOS template styling - Enhanced with new copy buttons */

/* Orange styling for Perdonit link */
.bg-orange-500 {
    background-color: #f97316;
}

.hover\:bg-orange-600:hover {
    background-color: #ea580c;
}

/* Template buttons styling */
#generateAdvocateBtn, #generateMeosBtn {
    transition: all 0.2s ease;
}

#generateAdvocateBtn:hover, #generateMeosBtn:hover {
    transform: translateY(-2px);
}

#generateAdvocateBtn:active, #generateMeosBtn:active {
    transform: translateY(1px);
}

/* Copy button feedback animation */
@keyframes copy-success {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.copy-success {
    animation: copy-success 0.5s ease;
}

/* Footer styling */
footer {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(99, 102, 241, 0.1);
}

.dark footer a {
    background-color: rgba(99, 102, 241, 0.2);
}

/* Creating a sticky footer */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    flex: 1 0 auto;
    padding-bottom: 2rem; /* Add space for footer */
}

/* Footer styling */
.footer {
    flex-shrink: 0;
    width: 100%;
    background-color: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    padding: 1.5rem 0;
    margin-top: auto;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05), 0 -2px 4px -1px rgba(0, 0, 0, 0.03);
    z-index: 10;
}

.dark .footer {
    background-color: #1f2937;
    border-top-color: #374151;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* Developer profile styling */
.footer img.rounded-full {
    transition: all 0.3s ease;
}

.footer img.rounded-full:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}

.footer a {
    transition: all 0.2s ease;
}

.footer a:hover {
    transform: scale(1.1);
}

/* Add hover effect to developer names */
.footer .text-xs.font-medium {
    transition: color 0.3s ease;
}

.footer .text-xs.font-medium:hover {
    color: #4f46e5;
}

.dark .footer .text-xs.font-medium:hover {
    color: #818cf8;
}

/* Category-specific colors for penalties - Altijd zichtbaar */
.penalty-item.category-I {
    border-left: 4px solid #f59e0b !important; /* Amber/Orange for Verkeersdelicten */
}

.penalty-item.category-II {
    border-left: 4px solid #8b5cf6 !important; /* Purple for Vermogensdelicten */
}

.penalty-item.category-III {
    border-left: 4px solid #ef4444 !important; /* Red for Geweldsdelicten */
}

.penalty-item.category-IV {
    border-left: 4px solid #10b981 !important; /* Green for Opiumwet */
}

.penalty-item.category-V {
    border-left: 4px solid #3b82f6 !important; /* Blue for Wet Wapens en Munitie */
}

.penalty-item.category-VI {
    border-left: 4px solid #facc15 !important; /* Yellow for Overige */
}

/* Dark mode colors - Altijd zichtbaar */
.dark .penalty-item.category-I {
    border-left: 4px solid #d97706 !important; /* Darker Amber for dark mode */
}

.dark .penalty-item.category-II {
    border-left: 4px solid #7c3aed !important; /* Darker Purple for dark mode */
}

.dark .penalty-item.category-III {
    border-left: 4px solid #dc2626 !important; /* Darker Red for dark mode */
}

.dark .penalty-item.category-IV {
    border-left: 4px solid #059669 !important; /* Darker Green for dark mode */
}

.dark .penalty-item.category-V {
    border-left: 4px solid #2563eb !important; /* Darker Blue for dark mode */
}

.dark .penalty-item.category-VI {
    border-left: 4px solid #eab308 !important; /* Darker Yellow for dark mode */
}

/* Search styling */
#artikelSearch:focus + #clearSearch {
    display: block;
}

#artikelSearch:focus + div + button {
    display: flex;
}

#clearSearch {
    cursor: pointer;
}

/* Styled dropdown when opened */
select[size] {
    height: auto;
    max-height: 250px;
    overflow-y: auto;
    border-color: #6366f1; /* primary-500 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 50;
    position: relative;
    margin-top: 0.25rem;
}

.dark select[size] {
    border-color: #4f46e5; /* primary-600 */
}

/* Search result highlight in dropdown */
select option.bg-primary-100 {
    background-color: #e0e7ff !important;
    font-weight: 500;
}

.dark select option.dark\:bg-primary-900 {
    background-color: #312e81 !important;
    color: white;
    font-weight: 500;
}

/* Fix for search input */
#artikelSearch:focus {
    z-index: 20;
    position: relative;
}

/* Enhanced navigation with micro-animations and gradients */
nav a {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s ease;
}

nav a:hover::before {
    left: 100%;
}

nav a:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

nav a:active {
    transform: translateY(-2px) scale(0.98);
}

/* Special styling for different button types */
nav a.bg-gradient-to-r.from-green-500 {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

nav a.bg-gradient-to-r.from-green-500:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

nav a.bg-gradient-to-r.from-blue-500 {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

nav a.bg-gradient-to-r.from-blue-500:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

nav a.bg-orange-500 {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.2);
}

nav a.bg-orange-500:hover {
    background: linear-gradient(135deg, #ea580c, #dc2626) !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}

nav a.bg-gradient-to-r.from-teal-500 {
    background: linear-gradient(135deg, #14b8a6, #0891b2) !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
}

nav a.bg-gradient-to-r.from-teal-500:hover {
    background: linear-gradient(135deg, #0f766e, #0e7490) !important;
    box-shadow: 0 8px 25px rgba(20, 184, 166, 0.3);
}

/* Advanced Animations */
@keyframes copySuccess {
    0% { 
        transform: scale(1) rotate(0deg);
        background: linear-gradient(135deg, #10b981, #059669);
    }
    50% { 
        transform: scale(1.1) rotate(5deg);
        background: linear-gradient(135deg, #34d399, #10b981);
    }
    100% { 
        transform: scale(1) rotate(0deg);
        background: linear-gradient(135deg, #10b981, #059669);
    }
}

@keyframes skeletonLoading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

@keyframes floatIcon {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
    }
    50% { 
        transform: translateY(-10px) rotate(5deg);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.copy-success {
    animation: copySuccess 0.6s ease !important;
}

.skeleton-loading {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200px 100%;
    animation: skeletonLoading 1.5s infinite;
}

.float-animation {
    animation: floatIcon 3s ease-in-out infinite;
}

.gradient-shift {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Smooth scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 4px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: scale(1.1);
}

/* Modern Visual Effects */
.glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-effect {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.layered-shadow {
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

.enhanced-focus:focus {
    outline: none;
    box-shadow: 
        0 0 0 3px rgba(99, 102, 241, 0.1),
        0 0 0 6px rgba(99, 102, 241, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: #6366f1;
}

.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-container:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Accessibility & Performance */
html {
    scroll-behavior: smooth;
}

/* Smooth theme transitions */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Better focus indicators - Subtiele styling */
button:focus, a:focus, input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3) !important;
    border-radius: 8px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bg-gradient-to-r {
        background: solid !important;
    }
    
    button, a {
        border: 2px solid currentColor !important;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .float-animation,
    .gradient-shift,
    .copy-success {
        animation: none !important;
    }
}

/* Performance optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

.optimized-repaint {
    contain: layout style paint;
}

/* V2 Functions dropdown styling */
#v2FunctionsMenu {
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: top right;
}

#v2FunctionsMenu.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

#v2FunctionsMenu:not(.hidden) {
    opacity: 1;
    transform: scale(1);
}

/* Status badge styling */
.bg-yellow-100 {
    background-color: rgba(254, 240, 138, 0.7);
}

.dark .bg-yellow-900 {
    background-color: rgba(113, 63, 18, 0.5);
}

.bg-blue-100 {
    background-color: rgba(219, 234, 254, 0.7);
}

.dark .bg-blue-900 {
    background-color: rgba(30, 58, 138, 0.5);
}

/* Fix for search input */
#artikelSearch:focus {
    z-index: 20;
    position: relative;
}

/* User dropdown styles */
.user-dropdown {
    transition: all 0.2s ease-in-out;
    transform-origin: top right;
    z-index: 999999 !important;
}

.user-dropdown.hidden {
    display: none !important;
}

.user-dropdown:not(.hidden) {
    display: block !important;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Clean profile picture styling */
.profile-avatar {
    border: 2px solid rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
}

.profile-avatar:hover {
    border-color: rgba(99, 102, 241, 0.6);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.user-dropdown-button {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.8);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.user-dropdown-button:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dark .user-dropdown-button {
    background: rgba(31, 41, 55, 0.95);
    border-color: rgba(75, 85, 99, 0.6);
}

.dark .user-dropdown-button:hover {
    background: rgba(31, 41, 55, 1);
    border-color: rgba(99, 102, 241, 0.4);
}

/* Enhanced Penalty list item styling met moderne veroordeling kleuren */
.penalty-item {
    position: relative;
    border-left: 5px solid #e5e7eb;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 12px;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Eerste Veroordeling - Elegant Green - Achtergrond styling zonder border override */
.penalty-item.eerste-veroordeling,
.penalty-item.category-I.eerste-veroordeling,
.penalty-item.category-II.eerste-veroordeling,
.penalty-item.category-III.eerste-veroordeling,
.penalty-item.category-IV.eerste-veroordeling,
.penalty-item.category-V.eerste-veroordeling,
.penalty-item.category-VI.eerste-veroordeling {
    background: linear-gradient(135deg, 
        rgba(5, 150, 105, 0.12) 0%, 
        rgba(5, 150, 105, 0.06) 40%, 
        rgba(5, 150, 105, 0.02) 70%, 
        transparent 100%) !important;
    box-shadow: 
        0 4px 12px rgba(5, 150, 105, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(5, 150, 105, 0.2) !important;
    border-right: 1px solid rgba(5, 150, 105, 0.2) !important;
    border-bottom: 1px solid rgba(5, 150, 105, 0.2) !important;
    border-left-width: 4px !important;
}

/* Tweede Veroordeling - Elegant Orange - Achtergrond styling zonder border override */
.penalty-item.tweede-veroordeling,
.penalty-item.category-I.tweede-veroordeling,
.penalty-item.category-II.tweede-veroordeling,
.penalty-item.category-III.tweede-veroordeling,
.penalty-item.category-IV.tweede-veroordeling,
.penalty-item.category-V.tweede-veroordeling,
.penalty-item.category-VI.tweede-veroordeling {
    background: linear-gradient(135deg, 
        rgba(234, 88, 12, 0.12) 0%, 
        rgba(234, 88, 12, 0.06) 40%, 
        rgba(234, 88, 12, 0.02) 70%, 
        transparent 100%) !important;
    box-shadow: 
        0 4px 12px rgba(234, 88, 12, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(234, 88, 12, 0.2) !important;
    border-right: 1px solid rgba(234, 88, 12, 0.2) !important;
    border-bottom: 1px solid rgba(234, 88, 12, 0.2) !important;
    border-left-width: 4px !important;
}

/* Meerdere Veroordeling - Elegant Red - Achtergrond styling zonder border override */
.penalty-item.meerdere-veroordeling,
.penalty-item.category-I.meerdere-veroordeling,
.penalty-item.category-II.meerdere-veroordeling,
.penalty-item.category-III.meerdere-veroordeling,
.penalty-item.category-IV.meerdere-veroordeling,
.penalty-item.category-V.meerdere-veroordeling,
.penalty-item.category-VI.meerdere-veroordeling {
    background: linear-gradient(135deg, 
        rgba(220, 38, 38, 0.12) 0%, 
        rgba(220, 38, 38, 0.06) 40%, 
        rgba(220, 38, 38, 0.02) 70%, 
        transparent 100%) !important;
    box-shadow: 
        0 4px 12px rgba(220, 38, 38, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(220, 38, 38, 0.2) !important;
    border-right: 1px solid rgba(220, 38, 38, 0.2) !important;
    border-bottom: 1px solid rgba(220, 38, 38, 0.2) !important;
    border-left-width: 4px !important;
}

/* Dark mode variants met verbeterde kleuren - Achtergrond styling zonder border overrides */
.dark .penalty-item.eerste-veroordeling,
.dark .penalty-item.category-I.eerste-veroordeling,
.dark .penalty-item.category-II.eerste-veroordeling,
.dark .penalty-item.category-III.eerste-veroordeling,
.dark .penalty-item.category-IV.eerste-veroordeling,
.dark .penalty-item.category-V.eerste-veroordeling,
.dark .penalty-item.category-VI.eerste-veroordeling {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.18) 0%, 
        rgba(16, 185, 129, 0.08) 40%, 
        rgba(16, 185, 129, 0.03) 70%, 
        transparent 100%) !important;
    box-shadow: 
        0 4px 12px rgba(16, 185, 129, 0.25),
        inset 0 1px 0 rgba(16, 185, 129, 0.1) !important;
    border-top: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-right: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-left-width: 4px !important;
}

.dark .penalty-item.tweede-veroordeling,
.dark .penalty-item.category-I.tweede-veroordeling,
.dark .penalty-item.category-II.tweede-veroordeling,
.dark .penalty-item.category-III.tweede-veroordeling,
.dark .penalty-item.category-IV.tweede-veroordeling,
.dark .penalty-item.category-V.tweede-veroordeling,
.dark .penalty-item.category-VI.tweede-veroordeling {
    background: linear-gradient(135deg, 
        rgba(249, 115, 22, 0.18) 0%, 
        rgba(249, 115, 22, 0.08) 40%, 
        rgba(249, 115, 22, 0.03) 70%, 
        transparent 100%) !important;
    box-shadow: 
        0 4px 12px rgba(249, 115, 22, 0.25),
        inset 0 1px 0 rgba(249, 115, 22, 0.1) !important;
    border-top: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-right: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-left-width: 4px !important;
}

.dark .penalty-item.meerdere-veroordeling,
.dark .penalty-item.category-I.meerdere-veroordeling,
.dark .penalty-item.category-II.meerdere-veroordeling,
.dark .penalty-item.category-III.meerdere-veroordeling,
.dark .penalty-item.category-IV.meerdere-veroordeling,
.dark .penalty-item.category-V.meerdere-veroordeling,
.dark .penalty-item.category-VI.meerdere-veroordeling {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.18) 0%, 
        rgba(239, 68, 68, 0.08) 40%, 
        rgba(239, 68, 68, 0.03) 70%, 
        transparent 100%) !important;
    box-shadow: 
        0 4px 12px rgba(239, 68, 68, 0.25),
        inset 0 1px 0 rgba(239, 68, 68, 0.1) !important;
    border-top: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-right: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left-width: 4px !important;
}

/* Subtiele hover effecten zonder animatie */
.penalty-item:hover {
    /* Geen transform animatie meer */
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.penalty-item.eerste-veroordeling:hover,
.penalty-item.category-I.eerste-veroordeling:hover,
.penalty-item.category-II.eerste-veroordeling:hover,
.penalty-item.category-III.eerste-veroordeling:hover,
.penalty-item.category-IV.eerste-veroordeling:hover,
.penalty-item.category-V.eerste-veroordeling:hover,
.penalty-item.category-VI.eerste-veroordeling:hover {
    box-shadow: 
        0 4px 15px rgba(5, 150, 105, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, 
        rgba(5, 150, 105, 0.15) 0%, 
        rgba(5, 150, 105, 0.08) 40%, 
        rgba(5, 150, 105, 0.03) 70%, 
        transparent 100%) !important;
    border-left-color: #059669 !important;
}

.penalty-item.tweede-veroordeling:hover,
.penalty-item.category-I.tweede-veroordeling:hover,
.penalty-item.category-II.tweede-veroordeling:hover,
.penalty-item.category-III.tweede-veroordeling:hover,
.penalty-item.category-IV.tweede-veroordeling:hover,
.penalty-item.category-V.tweede-veroordeling:hover,
.penalty-item.category-VI.tweede-veroordeling:hover {
    box-shadow: 
        0 4px 15px rgba(234, 88, 12, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, 
        rgba(234, 88, 12, 0.15) 0%, 
        rgba(234, 88, 12, 0.08) 40%, 
        rgba(234, 88, 12, 0.03) 70%, 
        transparent 100%) !important;
    border-left-color: #ea580c !important;
}

.penalty-item.meerdere-veroordeling:hover,
.penalty-item.category-I.meerdere-veroordeling:hover,
.penalty-item.category-II.meerdere-veroordeling:hover,
.penalty-item.category-III.meerdere-veroordeling:hover,
.penalty-item.category-IV.meerdere-veroordeling:hover,
.penalty-item.category-V.meerdere-veroordeling:hover,
.penalty-item.category-VI.meerdere-veroordeling:hover {
    box-shadow: 
        0 4px 15px rgba(220, 38, 38, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, 
        rgba(220, 38, 38, 0.15) 0%, 
        rgba(220, 38, 38, 0.08) 40%, 
        rgba(220, 38, 38, 0.03) 70%, 
        transparent 100%) !important;
    border-left-color: #dc2626 !important;
}

/* Avatar loading animation */
.avatar-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.dark .avatar-loading {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* Enhanced button styling for action buttons */
#addToListBtn, #calculateTotalBtn, #clearListBtn, #applyProtocolBtn, #generateAdvocateBtn, #generateMeosBtn {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.025em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* Shine effect for buttons */
#addToListBtn::before, #calculateTotalBtn::before, #clearListBtn::before, #applyProtocolBtn::before, #generateAdvocateBtn::before, #generateMeosBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

#addToListBtn:hover::before, #calculateTotalBtn:hover::before, #clearListBtn:hover::before, #applyProtocolBtn:hover::before, #generateAdvocateBtn:hover::before, #generateMeosBtn:hover::before {
    left: 100%;
}

/* Specific styling for each button type */
#addToListBtn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

#addToListBtn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

#addToListBtn:active {
    transform: translateY(-1px) scale(0.98);
}

#addToListBtn:disabled {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.2);
    transform: none;
    cursor: not-allowed;
}

#calculateTotalBtn {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

#calculateTotalBtn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #059669, #047857);
}

#calculateTotalBtn:active {
    transform: translateY(-1px) scale(0.98);
}

#calculateTotalBtn:disabled {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.2);
    transform: none;
    cursor: not-allowed;
}

#clearListBtn {
    background: linear-gradient(135deg, #ff0000, #ff0000) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

#clearListBtn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
}

#clearListBtn:active {
    transform: translateY(-1px) scale(0.98);
}

#clearListBtn:disabled {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.2);
    transform: none;
    cursor: not-allowed;
}

#applyProtocolBtn {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

#applyProtocolBtn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
    background: linear-gradient(135deg, #ea580c, #c2410c);
}

#applyProtocolBtn:active {
    transform: translateY(-1px) scale(0.98);
}

#applyProtocolBtn:disabled {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.2);
    transform: none;
    cursor: not-allowed;
}

#generateAdvocateBtn {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3) !important;
}

#generateAdvocateBtn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4) !important;
    background: linear-gradient(135deg, #047857, #059669) !important;
}

#generateAdvocateBtn:active {
    transform: translateY(-1px) scale(0.98);
}

#generateMeosBtn {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
}

#generateMeosBtn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
}

#generateMeosBtn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Button icons positioning */
#addToListBtn i, #calculateTotalBtn i, #clearListBtn i, #applyProtocolBtn i, #generateAdvocateBtn i, #generateMeosBtn i {
    position: relative;
    z-index: 2;
}

/* Button text positioning */
#addToListBtn span, #calculateTotalBtn span, #clearListBtn span, #applyProtocolBtn span, #generateAdvocateBtn span, #generateMeosBtn span {
    position: relative;
    z-index: 2;
}

/* Loading state for buttons */
.button-loading {
    position: relative;
    pointer-events: none;
}

.button-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: button-spin 1s linear infinite;
    z-index: 3;
}

@keyframes button-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dark mode adjustments for buttons */
.dark #addToListBtn:disabled,
.dark #calculateTotalBtn:disabled,
.dark #clearListBtn:disabled,
.dark #applyProtocolBtn:disabled {
    background: linear-gradient(135deg, #4b5563, #374151);
    color: #9ca3af;
}

/* Penalty item delete button styling */
.penalty-remove {
    background: none !important;
    color: #dc2626 !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.penalty-remove:hover {
    background: none !important;
    color: #dc2626 !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
    outline: none !important;
}

.penalty-remove:focus {
    background: none !important;
    color: #dc2626 !important;
    box-shadow: none !important;
    outline: none !important;
}

.penalty-remove:active {
    background: none !important;
    color: #dc2626 !important;
    transform: none !important;
}

.penalty-remove i {
    color: #dc2626 !important;
    font-size: 12px !important;
    background: none !important;
    box-shadow: none !important;
}

/* Enhanced styling for template generation buttons - moved to main button section */

/* Enhanced template container styling */
#advocateTemplate, #meosTemplate {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    border: 2px solid #cbd5e1;
    border-radius: 20px;
    padding: 28px;
    margin-top: 24px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.12),
        0 5px 15px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#advocateTemplate:hover, #meosTemplate:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dark #advocateTemplate, 
.dark #meosTemplate {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1a202c 100%);
    border: 2px solid #475569;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dark #advocateTemplate:hover, 
.dark #meosTemplate:hover {
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.5),
        0 10px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Template container accent borders */
#advocateTemplate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #059669, #10b981, #34d399);
    border-radius: 16px 16px 0 0;
}

#meosTemplate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa);
    border-radius: 16px 16px 0 0;
}

/* Template text area styling */
#advocateTemplateText, #meosTemplateText, #meosTitleText, #meosDescriptionText {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.dark #advocateTemplateText, 
.dark #meosTemplateText, 
.dark #meosTitleText, 
.dark #meosDescriptionText {
    background: rgba(30, 41, 59, 0.9);
    border: 2px solid #475569;
    color: #e2e8f0;
}

#advocateTemplateText:focus, 
#meosTemplateText:focus, 
#meosTitleText:focus, 
#meosDescriptionText:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Modern Copy Button Styling - Clean & Professional */
#copyTemplateBtn, #copyMeosTitleBtn, #copyMeosDescriptionBtn, #copyAndGoToDiscordBtn,
.copy-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 12px 20px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Discord button specific styling - Darker theme */
#copyAndGoToDiscordBtn, .copy-discord-button {
    background: linear-gradient(135deg, #4752C4, #5865F2);
    box-shadow: 0 6px 20px rgba(71, 82, 196, 0.4);
}

/* MEOS button specific styling */
.copy-meos-button {
    font-size: 0.8rem;
    padding: 10px 16px;
    min-height: 38px;
}

/* Hover effects */
#copyTemplateBtn:hover, #copyMeosTitleBtn:hover, #copyMeosDescriptionBtn:hover,
.copy-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #3730a3, #4f46e5);
}

#copyAndGoToDiscordBtn:hover, .copy-discord-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(71, 82, 196, 0.5);
    background: linear-gradient(135deg, #3C44A8, #4752C4);
}

/* Active states */
#copyTemplateBtn:active, #copyMeosTitleBtn:active, #copyMeosDescriptionBtn:active, #copyAndGoToDiscordBtn:active,
.copy-button:active {
    transform: translateY(0) scale(0.98);
}

/* Shine effect on hover */
#copyTemplateBtn::before, #copyMeosTitleBtn::before, #copyMeosDescriptionBtn::before, #copyAndGoToDiscordBtn::before,
.copy-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

#copyTemplateBtn:hover::before, #copyMeosTitleBtn:hover::before, #copyMeosDescriptionBtn:hover::before, #copyAndGoToDiscordBtn:hover::before,
.copy-button:hover::before {
    left: 100%;
}

/* Success feedback animation */
@keyframes copy-pulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(34, 197, 94, 0.5);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    }
}

.copy-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    animation: copy-pulse 0.6s ease;
}

/* Template header styling */
.template-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
}

.dark .template-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* ================================================================
   TOTALE STRAFBEREKENING - CLEAN PROFESSIONAL STYLING
   Elegante, schone penalty result cards zonder overdreven effecten
   ================================================================ */

.penalty-result-celstraf {
    background: rgba(254, 242, 242, 0.8) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 12px 0 !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1) !important;
    transition: all 0.3s ease !important;
}

.penalty-result-celstraf:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.dark .penalty-result-celstraf {
    background: rgba(127, 29, 29, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.penalty-result-taakstraf {
    background: rgba(255, 251, 235, 0.8) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 12px 0 !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1) !important;
    transition: all 0.3s ease !important;
}

.penalty-result-taakstraf:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.dark .penalty-result-taakstraf {
    background: rgba(120, 53, 15, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.penalty-result-boete {
    background: rgba(240, 253, 244, 0.8) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 12px 0 !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.1) !important;
    transition: all 0.3s ease !important;
}

.penalty-result-boete:hover {
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.dark .penalty-result-boete {
    background: rgba(20, 83, 45, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

.penalty-result-rijontzegging {
    background: rgba(250, 245, 255, 0.8) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 12px 0 !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.1) !important;
    transition: all 0.3s ease !important;
}

.penalty-result-rijontzegging:hover {
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

.dark .penalty-result-rijontzegging {
    background: rgba(107, 33, 168, 0.15) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
}

/* ================================================================
   PENALTY RESULT TEXT STYLING - CLEAN & PROFESSIONAL
   Schone tekstkleuren met goede leesbaarheid
   ================================================================ */

.penalty-result-celstraf .penalty-label {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

.penalty-result-celstraf .penalty-value {
    color: #b91c1c !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

.dark .penalty-result-celstraf .penalty-label {
    color: #f87171 !important;
}

.dark .penalty-result-celstraf .penalty-value {
    color: #fca5a5 !important;
}

.penalty-result-taakstraf .penalty-label {
    color: #d97706 !important;
    font-weight: 600 !important;
}

.penalty-result-taakstraf .penalty-value {
    color: #b45309 !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

.dark .penalty-result-taakstraf .penalty-label {
    color: #fbbf24 !important;
}

.dark .penalty-result-taakstraf .penalty-value {
    color: #fcd34d !important;
}

.penalty-result-boete .penalty-label {
    color: #16a34a !important;
    font-weight: 600 !important;
}

.penalty-result-boete .penalty-value {
    color: #15803d !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

.dark .penalty-result-boete .penalty-label {
    color: #4ade80 !important;
}

.dark .penalty-result-boete .penalty-value {
    color: #86efac !important;
}

.penalty-result-rijontzegging .penalty-label {
    color: #9333ea !important;
    font-weight: 600 !important;
}

.penalty-result-rijontzegging .penalty-value {
    color: #7c3aed !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

.dark .penalty-result-rijontzegging .penalty-label {
    color: #c084fc !important;
}

.dark .penalty-result-rijontzegging .penalty-value {
    color: #d8b4fe !important;
}

/* ================================================================
   ULTIMATE VEROORDELING COLOR OVERRIDE - FINAL AUTHORITY!
   Deze CSS heeft de hoogste prioriteit en overschrijft ALLES!
   ================================================================ */

/* FORCE EERSTE VEROORDELING TO BE GREEN - NO EXCEPTIONS! */
div.penalty-item.eerste-veroordeling,
.penalty-item.eerste-veroordeling,
div[class*="penalty-item"][class*="eerste-veroordeling"],
[class*="penalty-item"][class*="eerste-veroordeling"],
.penalty-item.category-I.eerste-veroordeling,
.penalty-item.category-II.eerste-veroordeling,
.penalty-item.category-III.eerste-veroordeling,
.penalty-item.category-IV.eerste-veroordeling,
.penalty-item.category-V.eerste-veroordeling,
.penalty-item.category-VI.eerste-veroordeling {
    border-left-color: #10b981 !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

/* FORCE TWEEDE VEROORDELING TO BE ORANGE - NO EXCEPTIONS! */
div.penalty-item.tweede-veroordeling,
.penalty-item.tweede-veroordeling,
div[class*="penalty-item"][class*="tweede-veroordeling"],
[class*="penalty-item"][class*="tweede-veroordeling"],
.penalty-item.category-I.tweede-veroordeling,
.penalty-item.category-II.tweede-veroordeling,
.penalty-item.category-III.tweede-veroordeling,
.penalty-item.category-IV.tweede-veroordeling,
.penalty-item.category-V.tweede-veroordeling,
.penalty-item.category-VI.tweede-veroordeling {
    border-left-color: #f97316 !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

/* FORCE MEERDERE VEROORDELING TO BE RED - NO EXCEPTIONS! */
div.penalty-item.meerdere-veroordeling,
.penalty-item.meerdere-veroordeling,
div[class*="penalty-item"][class*="meerdere-veroordeling"],
[class*="penalty-item"][class*="meerdere-veroordeling"],
.penalty-item.category-I.meerdere-veroordeling,
.penalty-item.category-II.meerdere-veroordeling,
.penalty-item.category-III.meerdere-veroordeling,
.penalty-item.category-IV.meerdere-veroordeling,
.penalty-item.category-V.meerdere-veroordeling,
.penalty-item.category-VI.meerdere-veroordeling {
    border-left-color: #ef4444 !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

/* ================================================================
   END ULTIMATE OVERRIDE
   ================================================================ */