/* Loading Screen Styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4682b4 0%, #6495ed 50%, #5f9ea0 100%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    overflow: hidden;
}

.loading-screen.active {
    display: flex;
}

/* Ensure loading screen covers any potential white flash */
.loading-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
}

.loading-screen::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: tuevBackgroundMove 20s linear infinite;
    opacity: 0.3;
}

@keyframes tuevBackgroundMove {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(-50px, -50px) rotate(360deg);
    }
}

.loading-content {
    text-align: center;
    color: #ffffff;
    animation: loadingContentSlideIn 1s ease-out;
}

.loading-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    animation: tuevIconPulse 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.loading-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    letter-spacing: 2px;
    animation: titleSlideIn 1.2s ease-out 0.3s both;
}

.loading-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 2rem 0;
    opacity: 0.9;
    animation: subtitleSlideIn 1.2s ease-out 0.6s both;
}

.loading-progress {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto 1rem auto;
    animation: progressBarSlideIn 1.2s ease-out 0.9s both;
    position: relative;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ffffff 0%, #e6f3ff 50%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: width 0.3s ease-out;
}

.progress-percentage {
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    animation: percentageSlideIn 1.2s ease-out 1.2s both;
}

.loading-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
    font-size: 0.85rem;
    opacity: 0.8;
    animation: detailsSlideIn 1.2s ease-out 1.5s both;
}

.current-task {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    transition: all 0.3s ease;
}

.eta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-style: italic;
}

/* Loading Animations */
@keyframes loadingFadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes loadingContentSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tuevIconPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    25% {
        transform: scale(1.05) rotate(5deg);
        opacity: 0.9;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    }
    50% {
        transform: scale(1.1) rotate(0deg);
        opacity: 0.8;
        text-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
    }
    75% {
        transform: scale(1.05) rotate(-5deg);
        opacity: 0.9;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    }
}

@keyframes titleSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes subtitleSlideIn {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 0.9;
        transform: translateX(0);
    }
}

@keyframes progressBarSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes percentageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes detailsSlideIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 0.8;
        transform: translateY(0);
    }
}

/* Hide main content during loading with overlay approach */
.app-container {
    background-color: #f8fafc !important;
    min-height: 100vh;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: none; /* Remove transition to prevent flash */
}

/* Flying Robot Bot Animation - True 3D Design */
.flying-robot-bot {
    position: fixed;
    top: 15%;
    left: -300px;
    z-index: 1001;
    perspective: 2000px;
    animation: robot3DFlyAcross 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.robot-3d-container {
    position: relative;
    width: 180px;
    height: 220px;
    transform-style: preserve-3d;
    transform: 
        perspective(800px)
        rotateX(20deg) 
        rotateY(35deg) 
        rotateZ(-5deg)
        translateZ(0px);
    animation: voxel3DRotation 12s linear infinite;
    filter: 
        drop-shadow(30px 30px 50px rgba(0, 0, 0, 0.4))
        drop-shadow(15px 15px 25px rgba(0, 68, 148, 0.3));
}

/* VOXEL-3D-ROBOTER KOPF - REALISTISCH */
.robot-head-3d {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    transform-style: preserve-3d;
}

/* ALLE 6 SEITEN SICHTBAR - ECHTER WÜRFEL */
.head-face {
    position: absolute;
    width: 70px;
    height: 70px;
    opacity: 1;
}

/* Vorderseite - DIREKTES LICHT */
.head-face.front {
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 1) 0%,
            rgba(240, 248, 255, 0.95) 20%,
            rgba(220, 240, 255, 0.9) 80%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: translateZ(35px);
    border: 1px solid rgba(0, 68, 148, 0.8);
    box-shadow: 
        inset -10px -10px 20px rgba(0, 68, 148, 0.2),
        inset 10px 10px 30px rgba(255, 255, 255, 0.9);
}

/* Rückseite - KEIN LICHT */
.head-face.back {
    background: 
        linear-gradient(135deg, 
            rgba(0, 40, 80, 0.9) 0%,
            rgba(0, 60, 120, 0.8) 50%,
            rgba(0, 80, 160, 0.7) 100%);
    transform: translateZ(-35px) rotateY(180deg);
    border: 1px solid rgba(0, 40, 80, 0.9);
}

/* Linke Seite - SCHATTEN */
.head-face.left {
    background: 
        linear-gradient(135deg, 
            rgba(100, 150, 200, 0.8) 0%,
            rgba(80, 130, 180, 0.85) 50%,
            rgba(0, 68, 148, 0.9) 100%);
    transform: rotateY(-90deg) translateZ(35px);
    border: 1px solid rgba(0, 68, 148, 0.9);
}

/* Rechte Seite - SEITENLICHT */
.head-face.right {
    background: 
        linear-gradient(135deg, 
            rgba(200, 230, 255, 0.9) 0%,
            rgba(150, 200, 250, 0.85) 50%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: rotateY(90deg) translateZ(35px);
    border: 1px solid rgba(0, 68, 148, 0.8);
}

/* Oberseite - OBERLICHT */
.head-face.top {
    background: 
        linear-gradient(135deg, 
            rgba(240, 248, 255, 0.95) 0%,
            rgba(200, 230, 255, 0.9) 50%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: rotateX(90deg) translateZ(35px);
    border: 1px solid rgba(0, 68, 148, 0.8);
}

/* Unterseite - SCHATTEN */
.head-face.bottom {
    background: 
        linear-gradient(135deg, 
            rgba(0, 40, 80, 0.95) 0%,
            rgba(0, 60, 120, 0.9) 50%,
            rgba(0, 80, 160, 0.85) 100%);
    transform: rotateX(-90deg) translateZ(35px);
    border: 1px solid rgba(0, 40, 80, 0.95);
}

.robot-eye {
    width: 12px;
    height: 12px;
    background: 
        radial-gradient(circle at 25% 25%, 
            rgba(0, 255, 255, 1) 0%,
            rgba(0, 200, 255, 0.9) 30%,
            rgba(0, 150, 255, 0.8) 60%,
            rgba(0, 100, 200, 0.9) 100%);
    border-radius: 50%;
    position: absolute;
    top: 22px;
    animation: voxelEyeGlow 3s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 1),
        0 0 30px rgba(0, 200, 255, 0.8),
        inset 0 0 6px rgba(255, 255, 255, 1),
        inset -2px -2px 4px rgba(0, 100, 200, 0.5);
    transform: translateZ(38px);
}

.robot-eye.left {
    left: 18px;
}

.robot-eye.right {
    right: 18px;
}

.robot-eye::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 50%;
    animation: cuteEyeShine 3s ease-in-out infinite;
    transform: translateZ(2px);
}

.robot-eye::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: conic-gradient(from 0deg, transparent 70%, rgba(96, 165, 250, 0.4) 80%, transparent 90%);
    border-radius: 50%;
    animation: cuteEyeScan 5s linear infinite;
}

.robot-antenna {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) translateZ(5px);
    width: 4px;
    height: 20px;
    background: linear-gradient(to top, #003875 0%, #0056b3 50%, #60a5fa 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 56, 117, 0.5);
}

.robot-antenna::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -4px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #ef4444 30%, #dc2626 70%);
    border-radius: 50%;
    animation: antenna3DSignal 1.2s infinite;
    border: 2px solid #ffffff;
    box-shadow: 
        0 0 12px rgba(239, 68, 68, 0.8),
        0 0 25px rgba(239, 68, 68, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    transform: translateZ(2px);
}

/* VOXEL-3D-ROBOTER TORSO - REALISTISCH */
.robot-torso-3d {
    position: relative;
    width: 90px;
    height: 110px;
    margin: 0 auto 10px;
    transform-style: preserve-3d;
}

/* ALLE 6 SEITEN SICHTBAR */
.torso-face {
    position: absolute;
    opacity: 1;
}

/* Vorderseite - DIREKTES LICHT */
.torso-face.front {
    width: 90px;
    height: 110px;
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 1) 0%,
            rgba(240, 248, 255, 0.95) 20%,
            rgba(220, 240, 255, 0.9) 80%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: translateZ(45px);
    border: 1px solid rgba(0, 68, 148, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 
        inset -15px -15px 25px rgba(0, 68, 148, 0.2),
        inset 15px 15px 35px rgba(255, 255, 255, 0.9);
}

/* Rückseite - KEIN LICHT */
.torso-face.back {
    width: 90px;
    height: 110px;
    background: 
        linear-gradient(135deg, 
            rgba(0, 40, 80, 0.9) 0%,
            rgba(0, 60, 120, 0.8) 50%,
            rgba(0, 80, 160, 0.7) 100%);
    transform: translateZ(-45px) rotateY(180deg);
    border: 1px solid rgba(0, 40, 80, 0.9);
}

/* Linke Seite - SCHATTEN */
.torso-face.left {
    width: 90px;
    height: 110px;
    background: 
        linear-gradient(135deg, 
            rgba(100, 150, 200, 0.8) 0%,
            rgba(80, 130, 180, 0.85) 50%,
            rgba(0, 68, 148, 0.9) 100%);
    transform: rotateY(-90deg) translateZ(45px);
    border: 1px solid rgba(0, 68, 148, 0.9);
}

/* Rechte Seite - SEITENLICHT */
.torso-face.right {
    width: 90px;
    height: 110px;
    background: 
        linear-gradient(135deg, 
            rgba(200, 230, 255, 0.9) 0%,
            rgba(150, 200, 250, 0.85) 50%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: rotateY(90deg) translateZ(45px);
    border: 1px solid rgba(0, 68, 148, 0.8);
}

/* Oberseite - OBERLICHT */
.torso-face.top {
    width: 90px;
    height: 90px;
    background: 
        linear-gradient(135deg, 
            rgba(240, 248, 255, 0.95) 0%,
            rgba(200, 230, 255, 0.9) 50%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: rotateX(90deg) translateZ(55px);
    border: 1px solid rgba(0, 68, 148, 0.8);
}

/* Unterseite - SCHATTEN */
.torso-face.bottom {
    width: 90px;
    height: 90px;
    background: 
        linear-gradient(135deg, 
            rgba(0, 40, 80, 0.95) 0%,
            rgba(0, 60, 120, 0.9) 50%,
            rgba(0, 80, 160, 0.85) 100%);
    transform: rotateX(-90deg) translateZ(55px);
    border: 1px solid rgba(0, 40, 80, 0.95);
}

.tuv-logo {
    font-size: 16px;
    font-weight: 900;
    color: #003875;
    letter-spacing: 2px;
    text-shadow: 
        0 2px 6px rgba(0, 56, 117, 0.4),
        0 0 15px rgba(96, 165, 250, 0.3);
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 2px solid rgba(0, 56, 117, 0.2);
}

/* VOXEL-3D-ROBOTER ARME - REALISTISCH */
.robot-arms-3d {
    position: relative;
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
    z-index: 10;
}

.robot-arm-3d {
    position: absolute;
    width: 18px;
    height: 50px;
    transform-style: preserve-3d;
    animation: voxelArmWave 4s ease-in-out infinite;
    transform-origin: top center;
}

.robot-arm-3d.left {
    left: -35px;
    top: -15px;
    animation-delay: 0.5s;
    z-index: 15;
}

.robot-arm-3d.right {
    right: -35px;
    top: -15px;
    animation-delay: 1s;
    z-index: 15;
}

/* ALLE 6 ARM-SEITEN SICHTBAR */
.arm-face {
    position: absolute;
    opacity: 1;
}

/* Vorderseite - DIREKTES LICHT */
.arm-face.front {
    width: 18px;
    height: 50px;
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 1) 0%,
            rgba(240, 248, 255, 0.95) 30%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: translateZ(9px);
    border: 1px solid rgba(0, 68, 148, 0.8);
    box-shadow: 
        inset -5px -5px 10px rgba(0, 68, 148, 0.2),
        inset 5px 5px 15px rgba(255, 255, 255, 0.9);
}

/* Rückseite - KEIN LICHT */
.arm-face.back {
    width: 18px;
    height: 50px;
    background: 
        linear-gradient(135deg, 
            rgba(0, 40, 80, 0.9) 0%,
            rgba(0, 80, 160, 0.7) 100%);
    transform: translateZ(-9px) rotateY(180deg);
    border: 1px solid rgba(0, 40, 80, 0.9);
}

/* Linke Seite - SCHATTEN */
.arm-face.left {
    width: 18px;
    height: 50px;
    background: 
        linear-gradient(135deg, 
            rgba(100, 150, 200, 0.8) 0%,
            rgba(0, 68, 148, 0.9) 100%);
    transform: rotateY(-90deg) translateZ(9px);
    border: 1px solid rgba(0, 68, 148, 0.9);
}

/* Rechte Seite - SEITENLICHT */
.arm-face.right {
    width: 18px;
    height: 50px;
    background: 
        linear-gradient(135deg, 
            rgba(200, 230, 255, 0.9) 0%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: rotateY(90deg) translateZ(9px);
    border: 1px solid rgba(0, 68, 148, 0.8);
}

/* Oberseite - OBERLICHT */
.arm-face.top {
    width: 18px;
    height: 18px;
    background: 
        linear-gradient(135deg, 
            rgba(240, 248, 255, 0.95) 0%,
            rgba(0, 68, 148, 0.8) 100%);
    transform: rotateX(90deg) translateZ(25px);
    border: 1px solid rgba(0, 68, 148, 0.8);
}

/* Unterseite - SCHATTEN */
.arm-face.bottom {
    width: 18px;
    height: 18px;
    background: 
        linear-gradient(135deg, 
            rgba(0, 40, 80, 0.95) 0%,
            rgba(0, 80, 160, 0.85) 100%);
    transform: rotateX(-90deg) translateZ(25px);
    border: 1px solid rgba(0, 40, 80, 0.95);
}

.robot-hand {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f0f9ff 30%, #dbeafe 60%, #bfdbfe 100%);
    border: 4px solid #1e40af;
    border-radius: 50%;
    box-shadow: 
        0 8px 20px rgba(30, 64, 175, 0.5),
        0 0 30px rgba(96, 165, 250, 0.3),
        inset 0 4px 10px rgba(255, 255, 255, 0.9);
    animation: spaceHandGlow 6s ease-in-out infinite;
    z-index: 20;
}

.robot-screen {
    width: 60px;
    height: 70px;
    background: linear-gradient(145deg, #000000, #001f3f, #003875);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 2px solid #0056b3;
    box-shadow: 
        inset 0 3px 12px rgba(0, 86, 179, 0.4),
        inset 0 -2px 6px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(0, 255, 136, 0.3);
    transform: translateZ(3px);
    position: relative;
}

.robot-screen::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 10px 10px 0 0;
    transform: translateZ(1px);
}

.screen-line {
    height: 3px;
    background: linear-gradient(90deg, #00ff88, #00d4aa, #00ff88);
    border-radius: 2px;
    animation: screen3DFlicker 1.8s infinite;
    box-shadow: 
        0 0 6px rgba(0, 255, 136, 0.8),
        0 0 12px rgba(0, 255, 136, 0.4);
    transform: translateZ(1px);
    position: relative;
}

.screen-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    border-radius: 2px;
    animation: screen3DScan 3s linear infinite;
}

.screen-line:nth-child(2) {
    animation-delay: 0.3s;
    width: 85%;
}

.screen-line:nth-child(3) {
    animation-delay: 0.6s;
    width: 70%;
}

/* 3D Robot Propeller */
.robot-propeller-3d {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    animation: propeller3DFloat 2s ease-in-out infinite;
}

.propeller-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    transform-style: preserve-3d;
}

.center-face {
    position: absolute;
    background: linear-gradient(145deg, #003875, #0056b3);
    border: 2px solid #002d5a;
    border-radius: 50%;
}

.center-face.front {
    width: 20px;
    height: 20px;
    transform: translateZ(10px);
    background: radial-gradient(circle, #0056b3 30%, #003875 70%);
}

.center-face.back {
    width: 20px;
    height: 20px;
    transform: translateZ(-10px) rotateY(180deg);
    background: radial-gradient(circle, #003875 30%, #001f3f 70%);
}

.center-face.sides {
    width: 20px;
    height: 20px;
    background: conic-gradient(from 0deg, #003875, #0056b3, #003875);
    border-radius: 0;
    animation: centerSpin 0.5s linear infinite;
}

.propeller-blade-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 8px;
    transform-style: preserve-3d;
    transform-origin: center;
    animation: true3DPropellerSpin 0.12s linear infinite;
}

.propeller-blade-3d.blade1 {
    transform: translate(-50%, -50%) rotate(0deg);
}

.propeller-blade-3d.blade2 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.propeller-blade-3d.blade3 {
    transform: translate(-50%, -50%) rotate(90deg);
}

.propeller-blade-3d.blade4 {
    transform: translate(-50%, -50%) rotate(135deg);
}

.blade-face {
    position: absolute;
    background: linear-gradient(145deg, #003875, #0056b3);
    border: 1px solid #002d5a;
}

.blade-face.top {
    width: 50px;
    height: 8px;
    transform: translateZ(4px);
    border-radius: 25px 25px 0 0;
    background: linear-gradient(90deg, #003875 0%, #0056b3 50%, #60a5fa 100%);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
}

.blade-face.bottom {
    width: 50px;
    height: 8px;
    transform: translateZ(-4px) rotateX(180deg);
    border-radius: 0 0 25px 25px;
    background: linear-gradient(90deg, #001f3f 0%, #003875 50%, #0056b3 100%);
}

.blade-face.front {
    width: 8px;
    height: 8px;
    transform: rotateY(90deg) translateZ(25px);
    border-radius: 50%;
    background: radial-gradient(circle, #60a5fa 30%, #0056b3 70%);
}

.blade-face.back {
    width: 8px;
    height: 8px;
    transform: rotateY(-90deg) translateZ(25px);
    border-radius: 50%;
    background: radial-gradient(circle, #0056b3 30%, #003875 70%);
}

.robot-arms {
    position: absolute;
    top: 85px;
    width: 100%;
    height: 60px;
}

.robot-arm {
    position: absolute;
    width: 12px;
    height: 60px;
    background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 50%, #e0f2fe 100%);
    border-radius: 8px;
    border: 3px solid #003875;
    box-shadow: 
        0 4px 12px rgba(0, 56, 117, 0.3),
        inset 0 2px 6px rgba(255, 255, 255, 0.6);
    transform-origin: top center;
}

.robot-arm.left {
    left: -18px;
    animation: arm3DWaveLeft 3s ease-in-out infinite;
    transform: rotateY(-10deg);
}

.robot-arm.right {
    right: -18px;
    animation: arm3DWaveRight 3s ease-in-out infinite;
    transform: rotateY(10deg);
}

.robot-arm::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) translateZ(2px);
    width: 18px;
    height: 12px;
    background: linear-gradient(145deg, #ffffff, #f0f9ff);
    border: 3px solid #003875;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 56, 117, 0.3);
}

.robot-propeller {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) translateZ(15px);
    width: 100px;
    height: 100px;
    z-index: 1;
}

.propeller-blade {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 8px;
    background: linear-gradient(90deg, #003875, #0056b3, #60a5fa, #0056b3, #003875);
    border-radius: 4px;
    transform-origin: center;
    animation: propeller3DSpin 0.15s linear infinite;
    box-shadow: 
        0 0 10px rgba(0, 86, 179, 0.8),
        0 0 20px rgba(96, 165, 250, 0.4);
}

.propeller-blade::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent, rgba(0, 56, 117, 0.2));
    border-radius: 4px;
    transform: translateZ(1px);
}

.propeller-blade:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg);
}

.propeller-blade:nth-child(2) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.propeller-blade:nth-child(3) {
    transform: translate(-50%, -50%) rotate(90deg);
}

.propeller-blade:nth-child(4) {
    transform: translate(-50%, -50%) rotate(135deg);
}

.robot-speech-bubble {
    position: absolute;
    top: -65px;
    right: -145px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 249, 255, 0.95) 50%, rgba(224, 242, 254, 0.9) 100%);
    padding: 18px 25px;
    border-radius: 35px;
    border: 4px solid #003875;
    font-size: 17px;
    font-weight: 800;
    color: #003875;
    box-shadow: 
        0 12px 35px rgba(0, 56, 117, 0.5),
        0 0 25px rgba(96, 165, 250, 0.3),
        inset 0 3px 12px rgba(255, 255, 255, 0.9),
        inset 0 -2px 8px rgba(0, 56, 117, 0.1);
    animation: cuteSpeechBubble 4s ease-in-out infinite;
    white-space: nowrap;
    transform: translateZ(12px) rotateY(-3deg);
    text-shadow: 
        0 2px 4px rgba(0, 56, 117, 0.3),
        0 0 8px rgba(96, 165, 250, 0.2);
}

.robot-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #003875;
    transform: translateZ(-1px);
}

.robot-speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 32px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 13px solid rgba(255, 255, 255, 0.98);
    transform: translateZ(1px);
}

/* True 3D Robot Animations */
@keyframes robot3DFlyAcross {
    0% {
        transform: translateX(-300px) translateY(0px) rotateY(-30deg) rotateZ(-15deg) scale(0.6);
        opacity: 0;
    }
    20% {
        transform: translateX(15vw) translateY(-40px) rotateY(20deg) rotateZ(8deg) scale(1.0);
        opacity: 1;
    }
    40% {
        transform: translateX(40vw) translateY(-20px) rotateY(-10deg) rotateZ(-3deg) scale(1.4);
        opacity: 1;
    }
    60% {
        transform: translateX(65vw) translateY(-50px) rotateY(15deg) rotateZ(6deg) scale(1.2);
        opacity: 1;
    }
    80% {
        transform: translateX(75vw) translateY(-30px) rotateY(0deg) rotateZ(0deg) scale(1.0);
        opacity: 1;
    }
    100% {
        transform: translateX(75vw) translateY(-30px) rotateY(0deg) rotateZ(0deg) scale(1.0);
        opacity: 1;
    }
}

@keyframes robotTrue3DRotate {
    0% {
        transform: rotateX(10deg) rotateY(0deg) rotateZ(2deg);
    }
    25% {
        transform: rotateX(15deg) rotateY(90deg) rotateZ(-3deg);
    }
    50% {
        transform: rotateX(5deg) rotateY(180deg) rotateZ(4deg);
    }
    75% {
        transform: rotateX(20deg) rotateY(270deg) rotateZ(-2deg);
    }
    100% {
        transform: rotateX(10deg) rotateY(360deg) rotateZ(2deg);
    }
}

@keyframes real3DHeadFloat {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
    }
    50% {
        transform: rotateX(5deg) rotateY(15deg) translateY(-8px);
    }
}

@keyframes real3DTorsoFloat {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
    }
    50% {
        transform: rotateX(-3deg) rotateY(-10deg) translateY(-5px);
    }
}

@keyframes real3DArmWave {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(15deg);
    }
    50% {
        transform: rotateX(10deg) rotateY(20deg) rotateZ(45deg);
    }
}

/* VOXEL-3D-ANIMATIONEN - REALISTISCH */
@keyframes voxel3DRotation {
    0% {
        transform: 
            perspective(800px)
            rotateX(20deg) 
            rotateY(35deg) 
            rotateZ(-5deg);
    }
    25% {
        transform: 
            perspective(800px)
            rotateX(25deg) 
            rotateY(125deg) 
            rotateZ(0deg);
    }
    50% {
        transform: 
            perspective(800px)
            rotateX(15deg) 
            rotateY(215deg) 
            rotateZ(5deg);
    }
    75% {
        transform: 
            perspective(800px)
            rotateX(30deg) 
            rotateY(305deg) 
            rotateZ(-3deg);
    }
    100% {
        transform: 
            perspective(800px)
            rotateX(20deg) 
            rotateY(395deg) 
            rotateZ(-5deg);
    }
}

@keyframes voxelEyeGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 1),
            0 0 30px rgba(0, 200, 255, 0.8),
            inset 0 0 6px rgba(255, 255, 255, 1),
            inset -2px -2px 4px rgba(0, 100, 200, 0.5);
    }
    50% {
        box-shadow: 
            0 0 35px rgba(0, 255, 255, 1),
            0 0 50px rgba(0, 200, 255, 1),
            0 0 70px rgba(0, 150, 255, 0.8),
            inset 0 0 8px rgba(255, 255, 255, 1),
            inset -3px -3px 6px rgba(0, 100, 200, 0.7);
    }
}

@keyframes voxelArmWave {
    0%, 100% {
        transform: rotateZ(15deg) rotateX(0deg);
    }
    25% {
        transform: rotateZ(25deg) rotateX(10deg);
    }
    50% {
        transform: rotateZ(35deg) rotateX(-5deg);
    }
    75% {
        transform: rotateZ(25deg) rotateX(10deg);
    }
}

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

@keyframes torso3DFloat {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
    }
    50% {
        transform: rotateX(-3deg) rotateY(-8deg) translateY(-3px);
    }
}

@keyframes arm3DFloat {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: rotateX(15deg) rotateY(10deg) rotateZ(-30deg);
    }
    75% {
        transform: rotateX(-10deg) rotateY(-15deg) rotateZ(25deg);
    }
}

@keyframes propeller3DFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0px);
    }
    50% {
        transform: translateX(-50%) translateY(-8px);
    }
}

@keyframes true3DPropellerSpin {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateX(0deg);
    }
    25% {
        transform: translate(-50%, -50%) rotateZ(90deg) rotateX(5deg);
    }
    50% {
        transform: translate(-50%, -50%) rotateZ(180deg) rotateX(0deg);
    }
    75% {
        transform: translate(-50%, -50%) rotateZ(270deg) rotateX(-5deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateZ(360deg) rotateX(0deg);
    }
}

@keyframes centerSpin {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

/* Cute Robot Animations */
@keyframes cuteEyeBlink {
    0%, 85%, 100% {
        transform: translateZ(4px) scaleY(1);
    }
    90%, 95% {
        transform: translateZ(4px) scaleY(0.1);
    }
}

@keyframes cuteEyeShine {
    0%, 100% {
        opacity: 0.8;
        transform: translateZ(2px) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateZ(2px) scale(1.4);
    }
}

@keyframes cuteEyeScan {
    0% {
        transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.2;
    }
}

@keyframes cuteArmFloat {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: rotateX(20deg) rotateY(15deg) rotateZ(-25deg);
    }
    50% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    75% {
        transform: rotateX(-15deg) rotateY(-20deg) rotateZ(30deg);
    }
}

@keyframes cuteHandWiggle {
    0%, 100% {
        transform: translateX(-50%) rotateZ(0deg) scale(1);
    }
    25% {
        transform: translateX(-50%) rotateZ(-5deg) scale(1.1);
    }
    50% {
        transform: translateX(-50%) rotateZ(0deg) scale(1);
    }
    75% {
        transform: translateX(-50%) rotateZ(5deg) scale(1.1);
    }
}

@keyframes cuteSpeechBubble {
    0%, 100% {
        transform: translateZ(12px) rotateY(-3deg) scale(1);
    }
    25% {
        transform: translateZ(15px) rotateY(-1deg) scale(1.05) rotateX(2deg);
    }
    50% {
        transform: translateZ(12px) rotateY(-3deg) scale(1.02);
    }
    75% {
        transform: translateZ(15px) rotateY(-5deg) scale(1.05) rotateX(-2deg);
    }
}

/* Space Robot Animations */
@keyframes spaceFloatHead {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
        filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.6));
    }
    33% {
        transform: rotateX(8deg) rotateY(12deg) translateY(-8px);
        filter: drop-shadow(0 0 30px rgba(96, 165, 250, 0.8));
    }
    66% {
        transform: rotateX(-5deg) rotateY(-8deg) translateY(-3px);
        filter: drop-shadow(0 0 25px rgba(96, 165, 250, 0.7));
    }
}

@keyframes spaceFloatTorso {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
        filter: drop-shadow(0 0 25px rgba(96, 165, 250, 0.5));
    }
    50% {
        transform: rotateX(-4deg) rotateY(-10deg) translateY(-5px);
        filter: drop-shadow(0 0 40px rgba(96, 165, 250, 0.7));
    }
}

@keyframes spaceArmFloat {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.6));
    }
    25% {
        transform: rotateX(25deg) rotateY(20deg) rotateZ(-35deg);
        filter: drop-shadow(0 0 25px rgba(96, 165, 250, 0.8));
    }
    50% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.6));
    }
    75% {
        transform: rotateX(-20deg) rotateY(-25deg) rotateZ(40deg);
        filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.7));
    }
}

@keyframes spaceHandGlow {
    0%, 100% {
        transform: translateX(-50%) rotateZ(0deg) scale(1);
        box-shadow: 
            0 8px 20px rgba(30, 64, 175, 0.5),
            0 0 30px rgba(96, 165, 250, 0.3),
            inset 0 4px 10px rgba(255, 255, 255, 0.9);
    }
    25% {
        transform: translateX(-50%) rotateZ(-8deg) scale(1.15);
        box-shadow: 
            0 12px 30px rgba(30, 64, 175, 0.7),
            0 0 50px rgba(96, 165, 250, 0.5),
            inset 0 4px 10px rgba(255, 255, 255, 0.9);
    }
    50% {
        transform: translateX(-50%) rotateZ(0deg) scale(1.05);
        box-shadow: 
            0 8px 20px rgba(30, 64, 175, 0.5),
            0 0 30px rgba(96, 165, 250, 0.3),
            inset 0 4px 10px rgba(255, 255, 255, 0.9);
    }
    75% {
        transform: translateX(-50%) rotateZ(8deg) scale(1.15);
        box-shadow: 
            0 12px 30px rgba(30, 64, 175, 0.7),
            0 0 50px rgba(96, 165, 250, 0.5),
            inset 0 4px 10px rgba(255, 255, 255, 0.9);
    }
}

@keyframes spaceEyeBlink {
    0%, 88%, 100% {
        transform: translateZ(6px) scaleY(1);
        box-shadow: 
            0 0 30px rgba(96, 165, 250, 1),
            0 0 60px rgba(37, 99, 235, 0.6),
            0 0 100px rgba(30, 64, 175, 0.3),
            inset 0 4px 12px rgba(255, 255, 255, 0.9),
            inset 0 -3px 8px rgba(30, 58, 138, 0.4);
    }
    92%, 96% {
        transform: translateZ(6px) scaleY(0.1);
        box-shadow: 
            0 0 20px rgba(96, 165, 250, 0.7),
            0 0 40px rgba(37, 99, 235, 0.4),
            0 0 80px rgba(30, 64, 175, 0.2),
            inset 0 4px 12px rgba(255, 255, 255, 0.9),
            inset 0 -3px 8px rgba(30, 58, 138, 0.4);
    }
}

@keyframes robot3DBlink {
    0%, 90%, 100% {
        transform: translateZ(5px) scaleY(1);
    }
    95% {
        transform: translateZ(5px) scaleY(0.1);
    }
}

@keyframes eye3DShine {
    0%, 100% {
        opacity: 0.8;
        transform: translateZ(2px) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateZ(2px) scale(1.3);
    }
}

@keyframes eye3DScan {
    0% {
        transform: rotate(0deg);
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.3;
    }
}

@keyframes antenna3DSignal {
    0%, 50%, 100% {
        background: radial-gradient(circle, #ef4444 30%, #dc2626 70%);
        box-shadow: 
            0 0 15px rgba(239, 68, 68, 0.8),
            0 0 30px rgba(239, 68, 68, 0.4),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
        transform: translateZ(3px) scale(1);
    }
    25%, 75% {
        background: radial-gradient(circle, #00ff88 30%, #00d4aa 70%);
        box-shadow: 
            0 0 20px rgba(0, 255, 136, 0.9),
            0 0 40px rgba(0, 255, 136, 0.5),
            inset 0 2px 4px rgba(255, 255, 255, 0.4);
        transform: translateZ(3px) scale(1.1);
    }
}

@keyframes screen3DFlicker {
    0%, 100% {
        opacity: 1;
        background: linear-gradient(90deg, #00ff88, #00d4aa, #00ff88);
        box-shadow: 
            0 0 8px rgba(0, 255, 136, 0.8),
            0 0 15px rgba(0, 255, 136, 0.4);
        transform: translateZ(2px);
    }
    30% {
        opacity: 0.9;
        background: linear-gradient(90deg, #00d4aa, #00ff88, #00d4aa);
    }
    60% {
        opacity: 0.8;
        background: linear-gradient(90deg, #00ff88, #60ffa8, #00ff88);
        box-shadow: 
            0 0 12px rgba(0, 255, 136, 1),
            0 0 25px rgba(0, 255, 136, 0.6);
    }
}

@keyframes screen3DScan {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes arm3DWaveLeft {
    0%, 100% {
        transform: rotateY(-10deg) rotateZ(0deg);
    }
    30% {
        transform: rotateY(-15deg) rotateZ(-30deg) rotateX(10deg);
    }
    70% {
        transform: rotateY(-5deg) rotateZ(20deg) rotateX(-5deg);
    }
}

@keyframes arm3DWaveRight {
    0%, 100% {
        transform: rotateY(10deg) rotateZ(0deg);
    }
    30% {
        transform: rotateY(15deg) rotateZ(30deg) rotateX(10deg);
    }
    70% {
        transform: rotateY(5deg) rotateZ(-20deg) rotateX(-5deg);
    }
}

@keyframes propeller3DSpin {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateX(0deg);
    }
    25% {
        transform: translate(-50%, -50%) rotateZ(90deg) rotateX(5deg);
    }
    50% {
        transform: translate(-50%, -50%) rotateZ(180deg) rotateX(0deg);
    }
    75% {
        transform: translate(-50%, -50%) rotateZ(270deg) rotateX(-5deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateZ(360deg) rotateX(0deg);
    }
}

@keyframes speech3DBubble {
    0%, 100% {
        transform: translateZ(10px) rotateY(-5deg) scale(1);
    }
    25% {
        transform: translateZ(12px) rotateY(-3deg) scale(1.08) rotateX(2deg);
    }
    50% {
        transform: translateZ(10px) rotateY(-5deg) scale(1.05);
    }
    75% {
        transform: translateZ(12px) rotateY(-7deg) scale(1.08) rotateX(-2deg);
    }
}

/* Login Screen Styles */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4a90e2 0%, #5ba0f2 50%, #6bb0ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999998;
    overflow: hidden;
}

.login-screen.active {
    display: flex;
}

/* Main Header Text über alles */
.main-header-text {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 1001;
}

.main-header-text h2 {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

/* ISO Standards Grid Layout */
.iso-standards-grid {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: isoFadeIn 1.5s ease-out 0.5s both;
}



.iso-row {
    display: flex;
    gap: 20px;
    align-items: center;
}

.iso-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 16px 24px;
    text-align: center;
    color: white;
    width: 220px;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.iso-badge:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.iso-badge.selected {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.iso-badge.selected:hover {
    transform: translateY(-3px) scale(1.15);
}

.selection-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #22c55e;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    z-index: 10;
}

.iso-badge.selected .selection-indicator {
    opacity: 1;
    transform: scale(1);
}

.iso-badge i {
    font-size: 2.8rem;
    margin-bottom: 10px;
    display: block;
    color: #ffffff;
    text-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Farbige Icons für Grid-Layout */
/* Erste Reihe */
.iso-row:nth-child(1) .iso-badge:nth-child(1) i { color: #ffd700; } /* ISO 9001 - Gold */
.iso-row:nth-child(1) .iso-badge:nth-child(2) i { color: #22c55e; } /* ISO 14001 - Grün */
.iso-row:nth-child(1) .iso-badge:nth-child(3) i { color: #ef4444; } /* ISO 27001 - Rot */

/* Zweite Reihe */
.iso-row:nth-child(2) .iso-badge:nth-child(1) i { color: #f59e0b; } /* ISO 45001 - Amber */
.iso-row:nth-child(2) .iso-badge:nth-child(2) i { color: #10b981; } /* ISO 50001 - Emerald */
.iso-row:nth-child(2) .iso-badge:nth-child(3) i { color: #3b82f6; } /* ISO 19011 - Blau */

/* Dritte Reihe */
.iso-row:nth-child(3) .iso-badge:nth-child(1) i { color: #8b5cf6; } /* ISO 27701 - Violett */
.iso-row:nth-child(3) .iso-badge:nth-child(2) i { color: #f97316; } /* ISO 31000 - Orange */
.iso-row:nth-child(3) .iso-badge:nth-child(3) i { color: #06b6d4; } /* ISO 26000 - Cyan */

/* Vierte Reihe */
.iso-row:nth-child(4) .iso-badge:nth-child(1) i { color: #ec4899; } /* ISO 13485 - Pink */
.iso-row:nth-child(4) .iso-badge:nth-child(2) i { color: #64748b; } /* ISO 16949 - Slate */
.iso-row:nth-child(4) .iso-badge:nth-child(3) i { color: #f97316; } /* ISO 22000 - Orange */

/* Fünfte Reihe */
.iso-row:nth-child(5) .iso-badge:nth-child(1) i { color: #6366f1; } /* ISO 21001 - Indigo */
.iso-row:nth-child(5) .iso-badge:nth-child(2) i { color: #84cc16; } /* ISO 14006 - Lime */
.iso-row:nth-child(5) .iso-badge:nth-child(3) i { color: #f43f5e; } /* ISO 15189 - Rose */

/* Sechste Reihe */
.iso-row:nth-child(6) .iso-badge:nth-child(1) i { color: #8b5cf6; } /* ISO 17025 - Violett */
.iso-row:nth-child(6) .iso-badge:nth-child(2) i { color: #0ea5e9; } /* ISO 41001 - Sky */
.iso-row:nth-child(6) .iso-badge:nth-child(3) i { color: #eab308; } /* ISO 37001 - Yellow */

.iso-badge span {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.iso-badge small {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
    hyphens: auto;
}

/* Spezielle Anpassungen für längere Texte */
.iso-badge small {
    max-width: 100%;
    overflow-wrap: break-word;
}

@keyframes isoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes isoSelect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes isoDeselect {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive Design für ISO Grid */
@media (max-width: 1400px) {
    .iso-standards-grid {
        left: 30px;
        gap: 16px;
    }
    
    .iso-row {
        gap: 16px;
    }
    
    .iso-badge {
        width: 190px;
        height: 140px;
        padding: 12px 20px;
    }
    
    .iso-badge i {
        font-size: 2.2rem;
    }
    
    .iso-badge span {
        font-size: 1.2rem;
    }
    
    .iso-badge small {
        font-size: 1rem;
    }
}

@media (max-width: 1200px) {
    .iso-standards-grid {
        left: 20px;
        gap: 12px;
    }
    
    .iso-row {
        gap: 12px;
    }
    
    .iso-badge {
        width: 160px;
        height: 120px;
        padding: 8px 16px;
    }
    
    .iso-badge i {
        font-size: 2rem;
    }
    
    .iso-badge span {
        font-size: 1.1rem;
    }
    
    .iso-badge small {
        font-size: 0.9rem;
    }
}

@media (max-width: 900px) {
    .iso-standards-grid {
        display: none;
    }
    
    .login-side-text {
        display: none;
    }
}

.login-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 80px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 700px;
    width: 90%;
    animation: loginSlideIn 0.8s ease-out;
}

.login-side-text {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 1.4rem;
    font-weight: 400;
    width: 800px;
    padding: 45px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 25px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.login-side-text h3 {
    color: white;
    font-size: 2.0rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.login-side-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.login-side-text li {
    margin-bottom: 18px;
    padding-left: 30px;
    position: relative;
    line-height: 1.4;
    font-size: 1.15rem;
}

.login-side-text li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
    font-size: 1.4rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.login-side-text strong {
    color: #E8F4FD;
    font-weight: 600;
    font-size: 1.2rem;
}

.login-header {
    margin-bottom: 30px;
}

.login-icon {
    font-size: 3rem;
    color: #003875;
    margin-bottom: 1rem;
    animation: loginIconPulse 2s ease-in-out infinite;
}

.login-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #003875;
    margin: 0 0 0.5rem 0;
}

.login-subtitle {
    font-size: 1rem;
    color: #666;
    margin: 0 0 1.5rem 0;
}

.login-form {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #003875;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(0, 56, 117, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
}

.form-group input:focus {
    outline: none;
    border-color: #003875;
    box-shadow: 0 0 0 3px rgba(0, 56, 117, 0.1);
}

/* Benutzerdefiniertes Sprach-Dropdown Styling */
.custom-language-dropdown {
    position: relative;
    width: 100%;
}

.language-selected {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(0, 56, 117, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.9);
    color: #003875;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.language-selected:hover {
    border-color: #003875;
    box-shadow: 0 0 0 3px rgba(0, 56, 117, 0.1);
}

.language-selected .flag {
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    vertical-align: middle;
}

.language-selected .language-name {
    flex: 1;
}

.dropdown-arrow {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.custom-language-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.language-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(0, 56, 117, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    margin-top: 4px;
}

.custom-language-dropdown.open .language-options {
    display: block;
}

.language-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    color: #003875;
    font-size: 1rem;
}

.language-option:hover {
    background: rgba(0, 56, 117, 0.1);
}

.language-option.selected {
    background: rgba(0, 56, 117, 0.2);
    font-weight: 600;
}

.language-option .flag {
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    vertical-align: middle;
}

/* CSS Flag Icons mit visuellen Flaggen */
.flag-de {
    background: linear-gradient(to bottom, #000000 33.33%, #dd0000 33.33%, #dd0000 66.66%, #ffce00 66.66%);
}

.flag-en {
    background: 
        linear-gradient(to bottom, #012169 40%, #ffffff 40%, #ffffff 60%, #c8102e 60%),
        linear-gradient(to right, #012169 40%, #ffffff 40%, #ffffff 60%, #c8102e 60%);
    background-size: 100% 50%, 50% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
}

.flag-fr {
    background: linear-gradient(to right, #002654 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ce1126 66.66%);
}

.flag-es {
    background: 
        linear-gradient(to bottom, #c60b1e 25%, #ffc400 25%, #ffc400 75%, #c60b1e 75%);
}

.flag-it {
    background: linear-gradient(to right, #009246 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ce2b37 66.66%);
}

.flag-nl {
    background: linear-gradient(to bottom, #21468b 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ae1c28 66.66%);
}

.flag-pt {
    background: linear-gradient(to right, #046a38 50%, #d52b1e 50%);
}

.flag-ru {
    background: linear-gradient(to bottom, #ffffff 33.33%, #0039a6 33.33%, #0039a6 66.66%, #d52b1e 66.66%);
}

.flag-zh {
    background: #de2910;
}

.flag-ja {
    background: radial-gradient(circle at center, #bc002d 25%, #ffffff 25%);
}

.flag-ar {
    background: linear-gradient(to bottom, #000000 33.33%, #ffffff 33.33%, #ffffff 66.66%, #007a3d 66.66%);
}

.flag-pl {
    background: linear-gradient(to bottom, #ffffff 50%, #dc143c 50%);
}

.flag-tr {
    background: #e30a17;
}

.flag-sv {
    background: linear-gradient(to bottom, #006aa7 25%, #fecc00 25%, #fecc00 75%, #006aa7 75%);
}

.flag-no {
    background: 
        linear-gradient(to bottom, #ef2b2d 40%, #ffffff 40%, #ffffff 60%, #ef2b2d 60%),
        linear-gradient(to right, #002868 30%, #ffffff 30%, #ffffff 40%, #002868 40%);
}

.flag-da {
    background: 
        linear-gradient(to bottom, #c8102e 40%, #ffffff 40%, #ffffff 60%, #c8102e 60%),
        linear-gradient(to right, #c8102e 30%, #ffffff 30%, #ffffff 40%, #c8102e 40%);
}

.flag-fi {
    background: 
        linear-gradient(to bottom, #003580 40%, #ffffff 40%, #ffffff 60%, #003580 60%),
        linear-gradient(to right, #003580 30%, #ffffff 30%, #ffffff 40%, #003580 40%);
}

.flag-cs {
    background: linear-gradient(to bottom, #ffffff 50%, #d7141a 50%);
}

.flag-hu {
    background: linear-gradient(to bottom, #cd212a 33.33%, #ffffff 33.33%, #ffffff 66.66%, #436f4d 66.66%);
}

.flag-ro {
    background: linear-gradient(to right, #002b7f 33.33%, #fcd116 33.33%, #fcd116 66.66%, #ce1126 66.66%);
}

.flag-bg {
    background: linear-gradient(to bottom, #ffffff 33.33%, #00966e 33.33%, #00966e 66.66%, #d62612 66.66%);
}

.flag-hr {
    background: linear-gradient(to bottom, #ff0000 33.33%, #ffffff 33.33%, #ffffff 66.66%, #171796 66.66%);
}

.flag-sk {
    background: linear-gradient(to bottom, #ffffff 33.33%, #0b4ea2 33.33%, #0b4ea2 66.66%, #ee1c25 66.66%);
}

.language-option .language-name {
    flex: 1;
}

/* Firmen-Eingabefeld besonderes Styling */
#company {
    position: relative;
}

#company::placeholder {
    color: rgba(0, 56, 117, 0.6);
    font-style: italic;
}

.login-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #003875 0%, #0056b3 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.login-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 56, 117, 0.3);
}

.login-btn:disabled {
    background: linear-gradient(135deg, #ccc 0%, #999 100%);
    cursor: not-allowed;
    opacity: 0.6;
}

.login-btn.ready {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    animation: loginBtnReady 0.5s ease-out;
}

@keyframes loginBtnReady {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.login-links {
    margin-top: 15px;
    text-align: center;
}

.forgot-password-link {
    color: #003875;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 6px;
}

.forgot-password-link:hover {
    color: #0056b3;
    background: rgba(0, 56, 117, 0.1);
    transform: translateY(-1px);
}

.forgot-password-link i {
    font-size: 0.8rem;
}

.login-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 56, 117, 0.2);
}

.login-status {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

#loginCountdown {
    font-weight: 600;
    color: #003875;
}

/* Login Animations */
@keyframes loginSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes loginIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Loading screen overlay covers everything */
.loading-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Aggressive anti-flash measures */
html, body {
    background-color: #003875 !important; /* Force loading screen color */
    margin: 0 !important;
    padding: 0 !important;
}

html.loaded, html.loaded body {
    background-color: #f8fafc !important;
    transition: background-color 0.5s ease !important;
}

/* Ensure scrolling works after app loads */
body.loaded {
    overflow: auto !important;
}

/* CSS Variables for Color Themes */
:root {
    /* Default Theme */
    --primary-bg: #1e293b;
    --primary-bg-gradient: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --secondary-bg: #f8fafc;
    --accent-color: #3b82f6;
    --text-primary: #334155;
    --text-secondary: #e2e8f0;
    --border-color: #334155;
    --card-bg: #ffffff;
    --hover-bg: rgba(59, 130, 246, 0.1);
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-bg: #0f172a;
    --primary-bg-gradient: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    --secondary-bg: #1f2937;
    --accent-color: #1e40af;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --border-color: #374151;
    --card-bg: #111827;
    --hover-bg: rgba(30, 64, 175, 0.1);
}

/* Light Theme */
[data-theme="light"] {
    --primary-bg: #f8fafc;
    --primary-bg-gradient: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    --secondary-bg: #ffffff;
    --accent-color: #2563eb;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --border-color: #e2e8f0;
    --card-bg: #ffffff;
    --hover-bg: rgba(37, 99, 235, 0.1);
}

/* Green Theme */
[data-theme="green"] {
    --primary-bg: #064e3b;
    --primary-bg-gradient: linear-gradient(180deg, #064e3b 0%, #022c22 100%);
    --secondary-bg: #ecfdf5;
    --accent-color: #059669;
    --text-primary: #065f46;
    --text-secondary: #d1fae5;
    --border-color: #047857;
    --card-bg: #f0fdf4;
    --hover-bg: rgba(5, 150, 105, 0.1);
}

/* Blue Theme */
[data-theme="blue"] {
    --primary-bg: #1e3a8a;
    --primary-bg-gradient: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
    --secondary-bg: #eff6ff;
    --accent-color: #3b82f6;
    --text-primary: #1e40af;
    --text-secondary: #dbeafe;
    --border-color: #2563eb;
    --card-bg: #f0f9ff;
    --hover-bg: rgba(59, 130, 246, 0.1);
}

/* Red Theme */
[data-theme="red"] {
    --primary-bg: #7f1d1d;
    --primary-bg-gradient: linear-gradient(180deg, #7f1d1d 0%, #991b1b 100%);
    --secondary-bg: #fef2f2;
    --accent-color: #dc2626;
    --text-primary: #991b1b;
    --text-secondary: #fecaca;
    --border-color: #dc2626;
    --card-bg: #fef2f2;
    --hover-bg: rgba(220, 38, 38, 0.1);
}

/* Purple Theme */
[data-theme="purple"] {
    --primary-bg: #581c87;
    --primary-bg-gradient: linear-gradient(180deg, #581c87 0%, #7c3aed 100%);
    --secondary-bg: #faf5ff;
    --accent-color: #8b5cf6;
    --text-primary: #6b21a8;
    --text-secondary: #e9d5ff;
    --border-color: #8b5cf6;
    --card-bg: #faf5ff;
    --hover-bg: rgba(139, 92, 246, 0.1);
}

/* Orange Theme */

/* Audit Exchange Specific Styles */
.exchange-tabs {
    display: flex;
    background: var(--secondary-bg);
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 2rem 0;
    border: 2px solid var(--border-color);
    overflow-x: auto;
    gap: 0.25rem;
}

.exchange-tabs .tab-btn {
    flex: 1;
    min-width: 180px;
    background: transparent;
    border: none;
    padding: 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.exchange-tabs .tab-btn.active {
    background: var(--card-bg);
    color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.exchange-tabs .tab-btn:hover {
    background: var(--hover-bg);
}

.exchange-tab-content {
    display: none;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 1rem;
    border: 2px solid var(--border-color);
    margin-top: 1rem;
}

.exchange-tab-content.active {
    display: block;
}

.exchange-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.exchange-stat-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.exchange-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.exchange-stat-card i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.exchange-stat-card h3 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.exchange-stat-card p {
    color: var(--text-secondary);
    font-weight: 500;
}

.exchange-form {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem 0;
}

.exchange-form h3 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.exchange-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.exchange-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.exchange-form-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.exchange-form-group input,
.exchange-form-group select,
.exchange-form-group textarea {
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.exchange-form-group input:focus,
.exchange-form-group select:focus,
.exchange-form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.exchange-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.exchange-search {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 1rem;
}

.exchange-search input,
.exchange-search select {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

.exchange-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.exchange-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
}

.exchange-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.exchange-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.exchange-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.exchange-card-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.exchange-card-description {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.exchange-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.exchange-status {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.exchange-status.verfuegbar {
    background: #dcfce7;
    color: #15803d;
}

.exchange-status.vergeben {
    background: #fed7d7;
    color: #c53030;
}

.exchange-status.pending {
    background: #fef3c7;
    color: #d97706;
}

.exchange-actions {
    display: flex;
    gap: 0.5rem;
}

.exchange-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.exchange-btn-primary {
    background: var(--accent-color);
    color: white;
}

.exchange-btn-primary:hover {
    background: var(--text-primary);
    transform: translateY(-1px);
}

.exchange-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.exchange-btn-secondary:hover {
    background: var(--hover-bg);
    border-color: var(--accent-color);
}

.exchange-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.exchange-modal-content {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.exchange-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.exchange-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.exchange-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
}

.exchange-modal-close:hover {
    color: var(--text-primary);
}

.exchange-type-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 1rem;
}

.exchange-type-badge.intern {
    background: #dbeafe;
    color: #1e40af;
}

.exchange-type-badge.extern {
    background: #f3e8ff;
    color: #7c3aed;
}

.exchange-type-badge.zertifizierung {
    background: #fef3c7;
    color: #d97706;
}

.no-exchanges {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.no-exchanges i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--border-color);
}

@media (max-width: 768px) {
    .exchange-tabs {
        flex-direction: column;
    }
    
    .exchange-tabs .tab-btn {
        min-width: unset;
    }
    
    .exchange-form-grid {
        grid-template-columns: 1fr;
    }
    
    .exchange-search {
        flex-direction: column;
    }
    
    .exchange-search input,
    .exchange-search select {
        min-width: unset;
    }
    
    .exchange-cards {
        grid-template-columns: 1fr;
    }
    
    .exchange-card-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .exchange-actions {
        justify-content: center;
    }
}
[data-theme="orange"] {
    --primary-bg: #9a3412;
    --primary-bg-gradient: linear-gradient(180deg, #9a3412 0%, #ea580c 100%);
    --secondary-bg: #fff7ed;
    --accent-color: #f97316;
    --text-primary: #c2410c;
    --text-secondary: #fed7aa;
    --border-color: #f97316;
    --card-bg: #fff7ed;
    --hover-bg: rgba(249, 115, 22, 0.1);
}

/* Cyan Theme */
[data-theme="cyan"] {
    --primary-bg: #164e63;
    --primary-bg-gradient: linear-gradient(180deg, #164e63 0%, #0891b2 100%);
    --secondary-bg: #ecfeff;
    --accent-color: #06b6d4;
    --text-primary: #0e7490;
    --text-secondary: #a5f3fc;
    --border-color: #06b6d4;
    --card-bg: #ecfeff;
    --hover-bg: rgba(6, 182, 212, 0.1);
}

/* Pink Theme */
[data-theme="pink"] {
    --primary-bg: #9d174d;
    --primary-bg-gradient: linear-gradient(180deg, #9d174d 0%, #e91e63 100%);
    --secondary-bg: #fdf2f8;
    --accent-color: #ec4899;
    --text-primary: #be185d;
    --text-secondary: #f9a8d4;
    --border-color: #ec4899;
    --card-bg: #fdf2f8;
    --hover-bg: rgba(236, 72, 153, 0.1);
}

/* Yellow Theme */
[data-theme="yellow"] {
    --primary-bg: #a16207;
    --primary-bg-gradient: linear-gradient(180deg, #a16207 0%, #eab308 100%);
    --secondary-bg: #fefce8;
    --accent-color: #facc15;
    --text-primary: #a16207;
    --text-secondary: #fef3c7;
    --border-color: #facc15;
    --card-bg: #fefce8;
    --hover-bg: rgba(250, 204, 21, 0.1);
}

/* Indigo Theme */
[data-theme="indigo"] {
    --primary-bg: #3730a3;
    --primary-bg-gradient: linear-gradient(180deg, #3730a3 0%, #4f46e5 100%);
    --secondary-bg: #eef2ff;
    --accent-color: #6366f1;
    --text-primary: #4338ca;
    --text-secondary: #c7d2fe;
    --border-color: #6366f1;
    --card-bg: #eef2ff;
    --hover-bg: rgba(99, 102, 241, 0.1);
}

/* Teal Theme */
[data-theme="teal"] {
    --primary-bg: #134e4a;
    --primary-bg-gradient: linear-gradient(180deg, #134e4a 0%, #0f766e 100%);
    --secondary-bg: #f0fdfa;
    --accent-color: #14b8a6;
    --text-primary: #0f766e;
    --text-secondary: #99f6e4;
    --border-color: #14b8a6;
    --card-bg: #f0fdfa;
    --hover-bg: rgba(20, 184, 166, 0.1);
}

/* Rose Theme */
[data-theme="rose"] {
    --primary-bg: #9f1239;
    --primary-bg-gradient: linear-gradient(180deg, #9f1239 0%, #e11d48 100%);
    --secondary-bg: #fff1f2;
    --accent-color: #f43f5e;
    --text-primary: #be123c;
    --text-secondary: #fda4af;
    --border-color: #f43f5e;
    --card-bg: #fff1f2;
    --hover-bg: rgba(244, 63, 94, 0.1);
}

/* Emerald Theme */
[data-theme="emerald"] {
    --primary-bg: #064e3b;
    --primary-bg-gradient: linear-gradient(180deg, #064e3b 0%, #047857 100%);
    --secondary-bg: #ecfdf5;
    --accent-color: #10b981;
    --text-primary: #065f46;
    --text-secondary: #a7f3d0;
    --border-color: #10b981;
    --card-bg: #ecfdf5;
    --hover-bg: rgba(16, 185, 129, 0.1);
}

/* Sky Theme */
[data-theme="sky"] {
    --primary-bg: #0c4a6e;
    --primary-bg-gradient: linear-gradient(180deg, #0c4a6e 0%, #0284c7 100%);
    --secondary-bg: #f0f9ff;
    --accent-color: #0ea5e9;
    --text-primary: #0369a1;
    --text-secondary: #bae6fd;
    --border-color: #0ea5e9;
    --card-bg: #f0f9ff;
    --hover-bg: rgba(14, 165, 233, 0.1);
}

/* Slate Theme */
[data-theme="slate"] {
    --primary-bg: #334155;
    --primary-bg-gradient: linear-gradient(180deg, #334155 0%, #475569 100%);
    --secondary-bg: #f8fafc;
    --accent-color: #64748b;
    --text-primary: #475569;
    --text-secondary: #cbd5e1;
    --border-color: #64748b;
    --card-bg: #f8fafc;
    --hover-bg: rgba(100, 116, 139, 0.1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--secondary-bg);
    color: var(--text-primary);
    line-height: 1.6;
}

/* App Container */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: 390px;
    background: var(--primary-bg-gradient);
    color: var(--text-secondary);
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.company-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.company-logo i {
    font-size: 2.5rem;
    color: var(--accent-color);
}

.company-info h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #f1f5f9;
}

.editable-company-name {
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.editable-company-name:hover {
    background: rgba(59, 130, 246, 0.1);
}

.company-name-input {
    background: #334155;
    border: 1px solid #475569;
    border-radius: 0.375rem;
    color: #f1f5f9;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    width: 100%;
    font-family: inherit;
}

.company-name-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.company-name-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-company-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s, background-color 0.2s;
    font-size: 0.875rem;
}

.edit-company-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.company-info p {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
}

.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 500;
    color: #f1f5f9;
    font-size: 1.3rem;
}

.user-role {
    font-size: 1.1rem;
    color: #94a3b8;
}

/* Sidebar Menu */
.sidebar-menu {
    padding: 1rem 0;
}

.menu-items {
    list-style: none;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-size: 1.3rem;
    font-weight: 500;
}

.menu-item:hover {
    background: rgba(51, 65, 85, 0.4);
    color: #f1f5f9;
}

.menu-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-right: 3px solid #3b82f6;
}

.menu-item i {
    width: 1.6rem;
    font-size: 1.4rem;
}

.menu-item.hidden {
    display: none;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid #334155;
    margin-top: auto;
}

.user-selector label {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.user-selector select {
    width: 100%;
    padding: 0.5rem;
    background: #334155;
    border: 1px solid #475569;
    border-radius: 0.5rem;
    color: #e2e8f0;
    font-size: 0.875rem;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 390px;
    background: #f8fafc;
}

.content-header {
    background: white;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.content-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    left: 0.75rem;
    color: #94a3b8;
}

.search-box input {
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #f9fafb;
    font-size: 0.875rem;
    width: 250px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input:focus {
    outline: none;
    border-color: #3b82f6;
}

.search-box.search-active {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

/* Search Results Styles */
.search-results {
    position: fixed;
    top: 80px;
    left: 300px;
    right: 20px;
    bottom: 20px;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.search-results-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.close-search-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: color 0.2s, background-color 0.2s;
}

.close-search-btn:hover {
    color: #1e293b;
    background: #e2e8f0;
}

.search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 2rem;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid transparent;
    margin-bottom: 0.75rem;
}

.search-result-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.search-result-item:last-child {
    margin-bottom: 0;
}

.result-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.result-content {
    flex: 1;
    min-width: 0;
}

.result-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.result-category {
    display: inline-block;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.result-content p {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Search highlighting */
mark {
    background: #fef3c7;
    color: #92400e;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* No results */
.search-results.no-results .search-results-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
}

.no-results-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.no-results-content p {
    margin: 0;
    font-size: 1rem;
}

/* Responsive search results */
@media (max-width: 768px) {
    .search-results {
        left: 20px;
        top: 60px;
    }
}

.notification-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #64748b;
    transition: background-color 0.2s;
}

.notification-btn:hover {
    background: #f1f5f9;
}

.notification-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: #ef4444;
    color: white;
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    min-width: 1.25rem;
    text-align: center;
}

/* Content Body */
.content-body {
    padding: 2rem;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

/* Dashboard Styles */
.dashboard-grid {
    display: grid;
    gap: 2rem;
}

.kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.kpi-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.kpi-card.safety .kpi-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.kpi-card.quality .kpi-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.kpi-card.environment .kpi-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.kpi-card.health .kpi-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.kpi-content h3 {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.kpi-content p {
    font-size: 0.75rem;
    color: #94a3b8;
}

.kpi-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.edit-kpi-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s, background-color 0.2s;
    font-size: 0.75rem;
}

.edit-kpi-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

/* Dashboard Widgets */
.dashboard-widgets {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.widget {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.widget h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.widget-header h3 {
    margin-bottom: 0;
}

.widget-actions {
    display: flex;
    gap: 0.5rem;
}

.dashboard-certifications,
.dashboard-internal-audits,
.dashboard-external-audits {
    margin-bottom: 1.5rem;
}

.dashboard-certifications:last-child,
.dashboard-internal-audits:last-child,
.dashboard-external-audits:last-child {
    margin-bottom: 0;
}

.dashboard-certifications h4,
.dashboard-internal-audits h4,
.dashboard-external-audits h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.cert-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.cert-name {
    font-weight: 500;
    color: #1e293b;
}

.cert-validity {
    color: #64748b;
    font-size: 0.75rem;
}

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audit-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    align-items: center;
}

.audit-type {
    font-weight: 500;
    color: #1e293b;
}

.audit-date {
    font-size: 0.875rem;
    color: #64748b;
}

.audit-result {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 500;
}

.audit-item.passed .audit-result {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.audit-item.pending .audit-result {
    background: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
}

.audit-item.in-progress .audit-result {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.no-content {
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Custom KPI Styles */
.custom-kpi-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid #e2e8f0;
}

.kpi-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kpi-icon-preview {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.kpi-icon-preview.kpi-color-blue { background: #3b82f6; }
.kpi-icon-preview.kpi-color-green { background: #22c55e; }
.kpi-icon-preview.kpi-color-red { background: #ef4444; }
.kpi-icon-preview.kpi-color-yellow { background: #f59e0b; }
.kpi-icon-preview.kpi-color-purple { background: #8b5cf6; }
.kpi-icon-preview.kpi-color-orange { background: #f97316; }
.kpi-icon-preview.kpi-color-gray { background: #64748b; }

.kpi-info h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.kpi-value-preview {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.kpi-info p {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}

.kpi-actions {
    display: flex;
    gap: 0.5rem;
}

.existing-items {
    margin-bottom: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
}

.add-custom-kpi-form {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

/* Custom KPI Cards on Dashboard */
.kpi-card.custom.kpi-color-blue { border-left: 4px solid #3b82f6; }
.kpi-card.custom.kpi-color-green { border-left: 4px solid #22c55e; }
.kpi-card.custom.kpi-color-red { border-left: 4px solid #ef4444; }
.kpi-card.custom.kpi-color-yellow { border-left: 4px solid #f59e0b; }
.kpi-card.custom.kpi-color-purple { border-left: 4px solid #8b5cf6; }
.kpi-card.custom.kpi-color-orange { border-left: 4px solid #f97316; }
.kpi-card.custom.kpi-color-gray { border-left: 4px solid #64748b; }

.kpi-card.custom .kpi-icon {
    color: #64748b;
}

.kpi-card.custom.kpi-color-blue .kpi-icon { color: #3b82f6; }
.kpi-card.custom.kpi-color-green .kpi-icon { color: #22c55e; }
.kpi-card.custom.kpi-color-red .kpi-icon { color: #ef4444; }
.kpi-card.custom.kpi-color-yellow .kpi-icon { color: #f59e0b; }
.kpi-card.custom.kpi-color-purple .kpi-icon { color: #8b5cf6; }
.kpi-card.custom.kpi-color-orange .kpi-icon { color: #f97316; }
.kpi-card.custom.kpi-color-gray .kpi-icon { color: #64748b; }

.satisfaction-score {
    text-align: center;
}

.score-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}

.score {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

/* Content Cards */
.content-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.content-card {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.content-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.training-progress {
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.psa-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.psa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.status-ok {
    color: #22c55e;
    font-weight: 500;
}

.status-warning {
    color: #f59e0b;
    font-weight: 500;
}

/* Document List */
.document-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.document-item i {
    font-size: 1.25rem;
    color: #ef4444;
}

.document-item span {
    flex: 1;
    font-weight: 500;
    color: #1e293b;
}

.download-btn {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.download-btn:hover {
    background: #2563eb;
}

/* Upload Area */
.upload-area {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    margin-bottom: 1.5rem;
}

.upload-zone:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.02);
}

.upload-zone i {
    font-size: 2rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.upload-zone p {
    color: #64748b;
    font-size: 1rem;
}

.upload-zone input[type="file"] {
    display: none;
}

.upload-categories {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.upload-categories select {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    font-size: 0.875rem;
}

.upload-btn {
    padding: 0.75rem 1.5rem;
    background: #22c55e;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.upload-btn:hover {
    background: #16a34a;
}

/* Satisfaction Details */
.satisfaction-details {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.satisfaction-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.metric {
    text-align: center;
}

.metric h4 {
    font-size: 1rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.rating {
    font-size: 1.125rem;
    color: #f59e0b;
}

/* Audit Overview */
.audit-overview {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.cert-status {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cert-item {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border-left: 4px solid #22c55e;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        position: relative;
        height: auto;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .content-header {
        padding: 1rem;
    }
    
    .content-header h1 {
        font-size: 1.5rem;
    }
    
    .header-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .search-box input {
        width: 200px;
    }
    
    .content-body {
        padding: 1rem;
    }
    
    .kpi-cards {
        grid-template-columns: 1fr;
    }
    
    .dashboard-widgets {
        grid-template-columns: 1fr;
    }
    
    .content-cards {
        grid-template-columns: 1fr;
    }
    
    .satisfaction-metrics {
        grid-template-columns: 1fr;
    }
    
    .upload-categories {
        flex-direction: column;
    }
}

/* Section Content */
.section-content {
    max-width: 1200px;
}

.section-content h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.section-content p {
    color: #64748b;
    margin-bottom: 2rem;
}

/* Hide elements based on role */
.putzkraft-only {
    display: none;
}

body[data-role="putzkraft"] .putzkraft-only {
    display: flex;
}

body[data-role="putzkraft"] .document-item:not(.putzkraft-only) {
    display: none;
}

/* Uploaded Documents Styles */
.uploaded-documents {
    margin-top: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.uploaded-documents h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.uploaded-doc {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
}

.document-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.document-name {
    font-weight: 500;
    color: #1e293b;
}

.document-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #64748b;
}

.document-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.delete-btn {
    padding: 0.5rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s;
}

.delete-btn:hover {
    background: #dc2626;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.uploaded-work-instructions {
    margin-top: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #22c55e;
}

.uploaded-work-instructions h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

/* User Profile Styles */
.user-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.edit-profile-btn,
.logout-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.edit-profile-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.logout-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.user-details {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal.active {
    display: block;
}

/* Enterprise Issue Modal Styling */
.enterprise-issue-modal .modal-content {
    max-width: 1400px !important;
    width: 98% !important;
    max-height: 95vh !important;
    overflow: hidden;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ultra-professional {
    border: 2px solid rgba(220, 38, 38, 0.3);
    box-shadow: 0 30px 60px rgba(220, 38, 38, 0.15), 0 0 0 1px rgba(220, 38, 38, 0.1);
}

.enterprise-header {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 25%, #991b1b 50%, #7f1d1d 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 1rem 1rem 0 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.enterprise-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="warning-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M10,2 L18,16 L2,16 Z" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23warning-pattern)"/></svg>');
    pointer-events: none;
}

.header-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.header-title-section {
    margin-bottom: 1rem;
}

.title-with-animation {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.title-with-animation i {
    font-size: 1.5rem;
}

.pulse-animation {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.live-status-indicator {
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    animation: blink 1.5s infinite;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.system-info {
    display: flex;
    gap: 2rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.minimize-btn, .fullscreen-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.minimize-btn:hover, .fullscreen-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.advanced-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.version-badge.premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #92400e;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.ai-status-badge {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 5px rgba(139, 92, 246, 0.5); }
    to { box-shadow: 0 0 20px rgba(139, 92, 246, 0.8); }
}

.header-content h2 {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.header-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.version-badge, .priority-indicator, .machine-indicator {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.priority-indicator {
    background: rgba(34, 197, 94, 0.3);
}

.machine-indicator {
    background: rgba(59, 130, 246, 0.3);
}

/* Advanced Action Dashboard */
.advanced-action-dashboard {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.dashboard-section {
    margin-bottom: 2rem;
}

.dashboard-section:last-child {
    margin-bottom: 0;
}

.dashboard-section h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Smart Templates */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.template-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.template-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}

.template-btn.hydraulic::before { background: linear-gradient(90deg, #06b6d4, #0891b2); }
.template-btn.electrical::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.template-btn.mechanical::before { background: linear-gradient(90deg, #64748b, #475569); }
.template-btn.software::before { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }

.template-btn:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.template-btn:hover::before {
    height: 6px;
}

.template-icon {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 0.75rem;
    color: #64748b;
    transition: all 0.3s ease;
}

.template-btn:hover .template-icon {
    background: #eff6ff;
    color: #3b82f6;
    transform: scale(1.1);
}

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

.template-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.template-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.template-desc {
    color: #64748b;
    font-size: 0.8rem;
}

.template-indicator {
    font-size: 1.5rem;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.template-btn:hover .template-indicator {
    opacity: 1;
    transform: rotate(10deg) scale(1.2);
}

/* AI Tools */
.ai-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.ai-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ai-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-btn:hover::before {
    opacity: 1;
}

.ai-btn:hover {
    border-color: #8b5cf6;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.ai-btn i {
    font-size: 2rem;
    color: #8b5cf6;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.ai-btn:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
}

.ai-btn span {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

.ai-status {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Express Actions */
.express-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.express-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
    text-align: center;
}

.express-btn.emergency {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2, #fecaca);
}

.express-btn.emergency:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
}

.express-btn.priority {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #fed7aa);
}

.express-btn.priority:hover {
    background: #f59e0b;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}

.express-btn.duplicate,
.express-btn.save-draft {
    border-color: #6b7280;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

.express-btn.duplicate:hover,
.express-btn.save-draft:hover {
    background: #6b7280;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(107, 114, 128, 0.3);
}

.express-btn i {
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.express-btn:hover i {
    transform: scale(1.2);
}

.express-btn span {
    font-weight: 600;
    font-size: 0.85rem;
}

/* Quick Action Bar (legacy support) */
.quick-action-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    overflow-x: auto;
}

.quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
}

.quick-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.quick-btn i {
    font-size: 1.25rem;
}

/* Tab Navigation */
.form-tabs {
    display: flex;
    background: #f8fafc;
    border-radius: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
}

.tab-btn {
    flex: 1;
    min-width: 150px;
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.tab-btn.active {
    background: white;
    color: #dc2626;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    margin: 0.25rem;
}

.tab-btn:hover {
    color: #dc2626;
}

/* Tab Content */
.tab-content {
    display: none;
    min-height: 400px;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Enterprise Grid */
.enterprise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.grid-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
}

.grid-section h3 {
    margin: 0 0 1.5rem 0;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Machine Info Card */
.machine-info-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
}

.machine-info-card h4 {
    margin: 0 0 1rem 0;
    color: #dc2626;
    font-size: 1rem;
    font-weight: 600;
}

.machine-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    font-size: 0.9rem;
}

.machine-details-grid div {
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

/* Character Counter */
.character-counter {
    text-align: right;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Media Upload Section */
.media-upload-section {
    padding: 1rem;
}

.upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.upload-area {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

.upload-area:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

.upload-area i {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.upload-area:hover i {
    color: #3b82f6;
}

.upload-area p {
    font-weight: 500;
    margin: 0.5rem 0;
}

.upload-area small {
    color: #9ca3af;
}

/* Uploaded Files */
.uploaded-files-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
}

.files-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-name {
    font-weight: 500;
    color: #374151;
}

.file-size {
    color: #6b7280;
    font-size: 0.8rem;
}

.remove-file-btn {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
}

/* Analysis Section */
.analysis-section {
    padding: 1rem;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.analysis-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.analysis-card h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-result {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.5rem;
    padding: 1rem;
}

.analysis-result h5 {
    margin: 0 0 0.75rem 0;
    color: #0369a1;
}

.analysis-result ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.analysis-result li {
    padding: 0.25rem 0;
    color: #0f172a;
    font-size: 0.9rem;
}

/* Workflow Section */
.workflow-section {
    padding: 1rem;
}

.workflow-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.workflow-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
}

.workflow-card h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #dc2626;
}

/* Workflow Timeline */
.workflow-timeline {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
}

.timeline-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border-left: 4px solid #dc2626;
}

.timeline-time {
    font-weight: 600;
    color: #dc2626;
    min-width: 80px;
    font-size: 0.8rem;
}

.timeline-action {
    color: #374151;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .enterprise-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-action-bar {
        flex-wrap: wrap;
    }
    
    .upload-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analysis-grid,
    .workflow-options {
        grid-template-columns: 1fr;
    }
    
    .machine-details-grid {
        grid-template-columns: 1fr;
    }
    
    .form-tabs {
        overflow-x: scroll;
    }
    
    .tab-btn {
        min-width: 120px;
        font-size: 0.8rem;
        padding: 0.75rem 1rem;
    }
}

.modal-content {
    background-color: white;
    margin: 5vh auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90vw !important;
    max-width: 90vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
    overflow-y: auto;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* Spezielle Regeln für Auditplan-Generator - KEIN RAND */
#audit-plan-generator-tab .modal-content,
.auditor-management .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

/* Auditplan-Generator Eingabefelder vergrößern */
#audit-plan-generator-tab input,
#audit-plan-generator-tab textarea,
#audit-plan-generator-tab select {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 16px !important;
    padding: 15px !important;
}

#audit-plan-generator-tab .form-group {
    margin-bottom: 20px !important;
}

#audit-plan-generator-tab .modal-body {
    padding: 30px !important;
}

/* ALLE Modals im Auditplan-Generator vergrößern */
#auditResultsModal .modal-content,
#basicDataModal .modal-content,
#auditDetailsModal .modal-content,
#auditorModal .modal-content,
#auditPlanModal .modal-content,
.audit-modal .modal-content,
.auditor-modal .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

/* Alle Input-Felder in Audit-Modals vergrößern */
#auditResultsModal input,
#auditResultsModal textarea,
#auditResultsModal select,
#basicDataModal input,
#basicDataModal textarea,
#basicDataModal select,
#auditDetailsModal input,
#auditDetailsModal textarea,
#auditDetailsModal select,
#auditorModal input,
#auditorModal textarea,
#auditorModal select,
#auditPlanModal input,
#auditPlanModal textarea,
#auditPlanModal select,
.audit-modal input,
.audit-modal textarea,
.audit-modal select,
.auditor-modal input,
.auditor-modal textarea,
.auditor-modal select {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 16px !important;
    padding: 15px !important;
}

/* Modal Bodies in Audit-Modals mit Padding */
#auditResultsModal .modal-body,
#basicDataModal .modal-body,
#auditDetailsModal .modal-body,
#auditorModal .modal-body,
#auditPlanModal .modal-body,
.audit-modal .modal-body,
.auditor-modal .modal-body {
    padding: 10px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ALLE Container in Audit-Modals auf volle Breite */
#auditResultsModal .container,
#auditResultsModal .modal-container,
#auditResultsModal .form-container,
#auditResultsModal .content-container,
#basicDataModal .container,
#basicDataModal .modal-container,
#basicDataModal .form-container,
#basicDataModal .content-container,
#auditDetailsModal .container,
#auditDetailsModal .modal-container,
#auditDetailsModal .form-container,
#auditDetailsModal .content-container,
#auditorModal .container,
#auditorModal .modal-container,
#auditorModal .form-container,
#auditorModal .content-container,
#auditPlanModal .container,
#auditPlanModal .modal-container,
#auditPlanModal .form-container,
#auditPlanModal .content-container,
.audit-modal .container,
.audit-modal .modal-container,
.audit-modal .form-container,
.audit-modal .content-container,
.auditor-modal .container,
.auditor-modal .modal-container,
.auditor-modal .form-container,
.auditor-modal .content-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Modal Headers auch auf volle Breite */
#auditResultsModal .modal-header,
#basicDataModal .modal-header,
#auditDetailsModal .modal-header,
#auditorModal .modal-header,
#auditPlanModal .modal-header,
.audit-modal .modal-header,
.auditor-modal .modal-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* Modal Footers auch auf volle Breite */
#auditResultsModal .modal-footer,
#basicDataModal .modal-footer,
#auditDetailsModal .modal-footer,
#auditorModal .modal-footer,
#auditPlanModal .modal-footer,
.audit-modal .modal-footer,
.auditor-modal .modal-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* Multi-Input System für Auditoren und Gesprächspartner */
.multi-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.multi-input-item {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.multi-input-item input {
    flex: 1;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.multi-input-item input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.remove-input-btn {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.remove-input-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.add-input-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    align-self: flex-start;
}

.add-input-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.add-input-btn i {
    font-size: 12px;
}


.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 1rem 1rem 0 0;
}

.modal-header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header h2 i {
    font-size: 1.1rem;
    color: #667eea;
    padding: 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modal-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h3 i {
    font-size: 1rem;
    color: #667eea;
    padding: 6px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.close {
    color: #64748b;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover {
    color: #ef4444;
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 1rem 1rem;
}

/* Document Details */
.document-details {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row strong {
    color: #374151;
    min-width: 150px;
}

.detail-row span {
    color: #1f2937;
    font-weight: 500;
}

/* Document Preview */
.document-preview {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    min-height: 200px;
}

#documentPreviewContent {
    text-align: center;
    color: #64748b;
}

#documentPreviewContent iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 0.5rem;
}

#documentPreviewContent img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Document History */
.document-history {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}

.document-history h3 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.125rem;
}

.revision-item {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.revision-item:last-child {
    margin-bottom: 0;
}

.revision-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.revision-version {
    font-weight: 600;
    color: #1e293b;
}

.revision-date {
    font-size: 0.875rem;
    color: #64748b;
}

.revision-details {
    font-size: 0.875rem;
    color: #374151;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Button Styles */
.btn-primary {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.1rem;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: #6b7280;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.1rem;
}

.btn-secondary:hover {
    background: #4b5563;
}

/* Enhanced Document Actions */
.document-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.preview-btn {
    padding: 0.5rem 0.75rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.preview-btn:hover {
    background: #059669;
}

.revision-badge {
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 500;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-content {
        width: 98%;
        margin: 1% auto;
        max-height: 98vh;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .detail-row strong {
        min-width: auto;
    }
    
    .document-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .document-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* User Management Styles */
.user-management {
    max-width: 1000px;
}

.user-actions {
    margin-bottom: 2rem;
}

.users-list {
    display: grid;
    gap: 1rem;
}

.no-users-message {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: #92400e;
    font-weight: 500;
}

.user-item {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

.user-item.root-admin {
    border-left: 4px solid #ef4444;
    background: linear-gradient(90deg, #fef2f2 0%, #ffffff 100%);
}

.user-item.admin {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(90deg, #fffbeb 0%, #ffffff 100%);
}

.user-avatar {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.4rem;
}

.user-role {
    color: #64748b;
    font-size: 1.1rem;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 1rem;
    color: #64748b;
}

.user-item-actions {
    display: flex;
    gap: 0.5rem;
}

/* Spezifische Regeln für Nutzerverwaltung */
.user-item .user-name {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.user-item .user-role {
    font-size: 1.2rem !important;
}

.user-item .user-details {
    font-size: 1.1rem !important;
}

.user-item .user-avatar {
    width: 4rem !important;
    height: 4rem !important;
    font-size: 1.8rem !important;
}

/* Nutzerverwaltung Buttons */
#nutzerverwaltung-section .btn-primary,
#nutzerverwaltung-section .btn-secondary,
#nutzerverwaltung-section .btn-warning {
    font-size: 1.2rem !important;
    padding: 1.2rem 2.5rem !important;
}

/* Nutzer-Element Buttons */
.user-item-actions .edit-user-btn,
.user-item-actions .delete-user-btn {
    font-size: 1rem !important;
    padding: 0.8rem 1.5rem !important;
}

/* Nutzerverwaltung Überschrift */
#nutzerverwaltung-section h2 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
}

/* ============================================================================
   QHSE MELDEMODUL STYLES - DETAILED FORMS
   ============================================================================ */

/* Tab System for Incident Forms */
.incident-form-tabs {
    display: flex;
    background: #f8fafc;
    border-radius: 12px 12px 0 0;
    padding: 1rem;
    gap: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    overflow-x: auto;
}

.incident-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.75rem;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: fit-content;
}

.incident-tab-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.incident-tab-btn.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.incident-tab-btn i {
    font-size: 1rem;
}

/* Tab Content */
.incident-form-content {
    padding: 2rem;
    background: white;
}

.incident-tab-content {
    display: none;
}

.incident-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Enhanced Form Sections */
.form-section {
    margin-bottom: 2.5rem;
}

.form-section h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

.form-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.5rem 0 1rem 0;
    padding-left: 0.5rem;
    border-left: 4px solid #3b82f6;
}

/* Form Rows and Groups */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}


/* QHSE Dokumente mit Datum Layout - ALLE Dokumente */
.multi-input-item.document-with-date,
.document-with-date {
    display: grid !important;
    grid-template-columns: 8fr 1fr 40px 10fr auto !important;
    gap: 20px !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    width: 100% !important;
    min-width: 1400px !important;
}

/* QHSE Checkbox - MEGA sichtbar */
.qhse-checkbox {
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ff0000 !important;
    border: 6px solid #000000 !important;
    border-radius: 10px !important;
    position: relative !important;
    justify-self: center !important;
    align-self: center !important;
    transform: scale(1.5) !important;
    z-index: 999 !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
}

.qhse-checkbox:checked {
    background: #00ff00 !important;
    border-color: #000000 !important;
}

/* QHSE Notizen Feld - Extra breit für ALLE Dokumente */
.document-with-date .qhse-notes,
.qhse-notes {
    width: 100% !important;
    min-width: 400px !important;
    padding: 12px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    background: white !important;
    transition: all 0.3s ease !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-self: center !important;
}

.document-with-date .qhse-notes:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

/* Löschen-Button in document-with-date - ALLE Dokumente */
.multi-input-item.document-with-date .remove-input-btn,
.document-with-date .remove-input-btn,
.qhse-docs-list .remove-input-btn,
div[class*="document-with-date"] .remove-input-btn {
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
    z-index: 10 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.multi-input-item.document-with-date .remove-input-btn:hover,
.document-with-date .remove-input-btn:hover,
.qhse-docs-list .remove-input-btn:hover,
div[class*="document-with-date"] .remove-input-btn:hover {
    background: #dc2626 !important;
    transform: scale(1.1) !important;
}

/* Dokument-Feld - Spalte 1 */
.document-with-date > input[type="text"]:first-of-type,
.document-with-date input[name="qhseDocuments[]"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    background: white !important;
    transition: all 0.3s ease !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
}

/* Datum-Feld - Spalte 2 */
.document-with-date > input[type="date"],
.document-with-date input[name="qhseDocumentDates[]"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    background: white !important;
    transition: all 0.3s ease !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
}

.document-with-date input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

/* Zusätzliche Eingabefelder - Links positioniert */
.additional-fields-section {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 600%;
    float: left;
    clear: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.additional-fields-section label {
    font-weight: 600;
    color: #374151;
    font-size: 16px;
    margin-bottom: 15px;
    display: block;
}

.additional-fields-section .multi-input-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.additional-fields-section textarea {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: white;
    box-sizing: border-box;
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.additional-fields-section textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}


.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #374151;
    font-size: 1.125rem;
}

.form-group label i {
    color: #3b82f6;
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.125rem;
    transition: all 0.2s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input:required,
.form-group select:required,
.form-group textarea:required {
    border-left: 4px solid #ef4444;
}

.form-group input:required:valid,
.form-group select:required:valid,
.form-group textarea:required:valid {
    border-left: 4px solid #10b981;
}

.form-help {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Enhanced Checkbox and Radio Groups */
.checkbox-group,
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.checkbox-label:hover,
.radio-label:hover {
    background: #f8fafc;
}

.checkbox-custom,
.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

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

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
    display: none;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: #3b82f6;
    border-color: #3b82f6;
}

.radio-label input[type="radio"]:checked + .radio-custom {
    background: #3b82f6;
    border-color: #3b82f6;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Special Sections */
.person-section,
.consequences-section,
.measures-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
}

.reporter-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
}

.reporter-section h3 {
    color: #0c4a6e;
    border-bottom-color: #0ea5e9;
}

/* File Upload Enhanced */
.file-upload-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 2rem;
    border: 2px dashed #cbd5e1;
    margin-bottom: 2rem;
}

.file-drop-zone {
    border: 2px dashed #94a3b8;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: scale(1.02);
}

.drop-zone-content h4 {
    color: #374151;
    margin: 1rem 0 0.5rem 0;
    font-size: 1.1rem;
}

.drop-zone-content p {
    color: #6b7280;
    margin-bottom: 1rem;
}

.drop-zone-content small {
    color: #9ca3af;
    font-size: 0.8rem;
}

.file-list {
    margin-top: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.file-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.file-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.file-name {
    font-weight: 500;
    color: #374151;
}

.file-size {
    font-size: 0.8rem;
    color: #6b7280;
}

.remove-file-btn {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-file-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.file-type-info {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #fefce8;
    border-radius: 8px;
    border: 1px solid #fde047;
}

.file-type-info h4 {
    color: #a16207;
    margin-bottom: 1rem;
    border: none;
    padding: 0;
}

.file-type-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.file-type-info li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #92400e;
}

.file-type-info li i {
    color: #d97706;
    width: 1.2rem;
    text-align: center;
}

/* Form Footer and Buttons */
.incident-form-footer {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    padding: 2rem;
    border-radius: 0 0 12px 12px;
    margin-top: 2rem;
}

.form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.btn-cancel {
    background: #6b7280;
    color: white;
    border: none;
    padding: 1.5rem 2.5rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-cancel:hover {
    background: #374151;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-draft {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 1.5rem 2.5rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-draft:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-submit {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 1.5rem 3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-submit:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Progress Bar */
.form-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    color: #6b7280;
    font-weight: 500;
    min-width: fit-content;
}

/* Responsive Design for Enhanced Forms */
@media (max-width: 768px) {
    .incident-form-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .incident-tab-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .incident-form-content {
        padding: 1rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .form-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn-cancel,
    .btn-draft,
    .btn-submit {
        width: 100%;
        justify-content: center;
    }
    
    .person-section,
    .consequences-section,
    .measures-section {
        padding: 1rem;
    }
    
    .reporter-section {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .incident-tab-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
        min-width: 100px;
    }
    
    .incident-tab-btn span {
        display: none;
    }
    
    .incident-tab-btn i {
        font-size: 1.2rem;
    }
    
    .checkbox-group,
    .radio-group {
        gap: 0.5rem;
    }
    
    .file-drop-zone {
        padding: 2rem 1rem;
    }
}

/* Sidebar Meldemodul */
.qhse-reporting-module {
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(51, 65, 85, 0.2);
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.reporting-header h3 {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reporting-header i {
    color: #f59e0b;
}

.reporting-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.report-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

/* Incident Reporting Menu Items in Sidebar */
.menu-item.incident-report {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: white !important;
    border-left: 4px solid #991b1b !important;
    margin-bottom: 2px;
    transition: all 0.3s ease;
    position: relative;
}

.menu-item.incident-report::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #7f1d1d;
    transition: width 0.3s ease;
}

.menu-item.incident-report:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.menu-item.incident-report:hover::before {
    width: 6px;
}

.menu-item.incident-report.active {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
    border-left-color: #7f1d1d !important;
}

.menu-item.incident-report i {
    color: #fecaca !important;
    font-size: 1.1rem;
}

.menu-item.incident-report span {
    font-weight: 500 !important;
    color: white !important;
}

/* Near Miss styling (orange) */
.menu-item.incident-report[data-type="near_miss"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-left-color: #b45309 !important;
}

.menu-item.incident-report[data-type="near_miss"]::before {
    background: #92400e;
}

.menu-item.incident-report[data-type="near_miss"]:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.menu-item.incident-report[data-type="near_miss"].active {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
    border-left-color: #92400e !important;
}

.menu-item.incident-report[data-type="near_miss"] i {
    color: #fed7aa !important;
}

.report-accident {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.report-accident:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
}

.report-near-miss {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.report-near-miss:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
}

.recent-reports {
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 1rem;
}

.recent-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.recent-list {
    max-height: 200px;
    overflow-y: auto;
}

.recent-item {
    padding: 0.5rem;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.recent-item:hover {
    background: rgba(30, 41, 59, 0.5);
}

.recent-item-type {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.recent-item-type.unfall {
    color: #fca5a5;
}

.recent-item-type.beinaheunfall {
    color: #fbbf24;
}

/* Modal Styles */
.incident-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    overflow-y: auto;
    padding: 2rem;
}

.incident-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.incident-modal-content {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 1800px;
    width: 95%;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    margin: auto;
}

.incident-modal-header {
    display: flex;
    align-items: center;
    justify-content: between;
    padding: 3rem 3rem 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.incident-modal-header h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #1f2937;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
}

.incident-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #6b7280;
    cursor: pointer;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.incident-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Form Styles */
.incident-form {
    padding: 3rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.form-section {
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
}

.form-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    color: #374151;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group label.required::after {
    content: " *";
    color: #ef4444;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-help {
    display: block;
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Upload Area */
.upload-area {
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
}

.upload-drop-zone {
    cursor: pointer;
}

.upload-drop-zone.dragover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.upload-drop-zone i {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.upload-drop-zone p {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.upload-link {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
}

.upload-link:hover {
    color: #1d4ed8;
}

/* File Preview */
.file-preview {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.file-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    position: relative;
}

.file-item img {
    max-width: 100%;
    max-height: 80px;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.file-icon {
    font-size: 2rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.file-name {
    font-size: 0.75rem;
    color: #374151;
    word-break: break-all;
    margin-bottom: 0.25rem;
}

.file-size {
    font-size: 0.625rem;
    color: #9ca3af;
}

.file-remove {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Loading Overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.loading-spinner i {
    font-size: 2rem;
    color: #3b82f6;
    margin-bottom: 1rem;
}

.loading-spinner p {
    color: #6b7280;
    margin: 0;
}

/* Messages */
.incident-message {
    display: none;
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 10002;
    max-width: 400px;
}

.incident-message.active {
    display: block;
    animation: slideInRight 0.3s ease-out;
}

.message-content {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #10b981;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.message-content.error {
    border-left-color: #ef4444;
}

.message-content.warning {
    border-left-color: #f59e0b;
}

.message-icon {
    font-size: 1.25rem;
    color: #10b981;
}

.message-content.error .message-icon {
    color: #ef4444;
}

.message-content.warning .message-icon {
    color: #f59e0b;
}

.message-text {
    flex: 1;
    color: #374151;
    font-weight: 500;
}

.message-close {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.message-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Responsive Design */
@media (max-width: 768px) {
    .incident-modal {
        padding: 1rem;
    }
    
    .incident-modal-content {
        max-height: 95vh;
        max-width: 95%;
        width: 95%;
    }
    
    .incident-modal-header,
    .incident-form {
        padding: 2rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .qhse-reporting-module {
        margin: 1rem 0;
        padding: 0.75rem;
    }
    
    .reporting-buttons {
        gap: 0.5rem;
    }
    
    .report-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.incident-modal.active {
    animation: fadeIn 0.2s ease-out;
}

/* Accessibility */
.incident-modal:focus-within {
    outline: none;
}

.report-btn:focus,
.incident-modal-close:focus,
.upload-link:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.edit-user-btn {
    padding: 0.5rem 0.75rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.edit-user-btn:hover {
    background: #2563eb;
}

.delete-user-btn {
    padding: 0.5rem 0.75rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.delete-user-btn:hover {
    background: #dc2626;
}

.delete-user-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.role-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
}

.role-badge.root-admin {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.role-badge.admin {
    background: #fffbeb;
    color: #f59e0b;
    border: 1px solid #fed7aa;
}

.role-badge.geschaeftsfuehrung {
    background: #ede9fe;
    color: #7c3aed;
    border: 1px solid #c4b5fd;
}

.role-badge.qhse {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.role-badge.fachkraft {
    background: #dbeafe;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.role-badge.putzkraft {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* Revision Download Buttons */
.revision-item {
    position: relative;
}

.revision-download-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.625rem;
    transition: background-color 0.2s;
}

.revision-download-btn:hover {
    background: #2563eb;
}

/* Responsive User Management */
@media (max-width: 768px) {
    .user-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .user-item-actions {
        justify-content: center;
    }
    
    .user-details {
        align-items: center;
    }
}

/* Form Tabs */
.form-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.tab-btn {
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s;
}

.tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.tab-btn:hover {
    color: #3b82f6;
    background: #f8fafc;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    font-family: inherit;
}

.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.checkbox-group label:hover {
    background: #f8fafc;
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
}

/* Area and Department Management */
.area-management, .department-management {
    max-width: 1000px;
}

.area-actions, .department-actions {
    margin-bottom: 2rem;
}

.areas-list, .departments-list {
    display: grid;
    gap: 1rem;
}

.area-item, .department-item {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

.area-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.department-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.area-info, .department-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.area-name, .department-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.125rem;
}

.area-roles, .department-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #64748b;
}

.role-chip, .department-chip {
    background: #e2e8f0;
    color: #475569;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 500;
}

.area-item-actions, .department-item-actions {
    display: flex;
    gap: 0.5rem;
}

.edit-area-btn, .edit-department-btn {
    padding: 0.5rem 0.75rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.edit-area-btn:hover, .edit-department-btn:hover {
    background: #2563eb;
}

.delete-area-btn, .delete-department-btn {
    padding: 0.5rem 0.75rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.delete-area-btn:hover, .delete-department-btn:hover {
    background: #dc2626;
}

/* Dynamic menu items */
.menu-item.dynamic-area {
    border-left: 3px solid #3b82f6;
}

/* Enhanced User Display */
.user-item .user-details {
    font-size: 0.75rem;
    gap: 0.25rem;
}

.hierarchy-info {
    background: #f1f5f9;
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-top: 0.5rem;
}

.supervisor-info {
    font-weight: 500;
    color: #1e293b;
}

.position-info {
    color: #64748b;
    font-style: italic;
}

/* Responsive Management Sections */
@media (max-width: 768px) {
    .area-item, .department-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .area-item-actions, .department-item-actions {
        justify-content: center;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .form-tabs {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1;
        min-width: 120px;
    }
}

/* Settings Management Styles */
.settings-management {
    max-width: 800px;
}

.settings-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

.settings-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.settings-card p {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.settings-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.settings-actions button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hide edit button for non-root-admin users */
body:not([data-role="root-admin"]) .edit-company-btn {
    display: none;
}

/* Time Tracking Styles */
.time-tracking-form {
    margin-bottom: 2rem;
}

.form-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.form-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: flex-start;
}

.readonly-field {
    background: #f8fafc !important;
    color: #64748b !important;
    cursor: not-allowed;
}

/* Monthly Overview */
.monthly-overview {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 1rem;
}

.overview-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.month-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.month-nav-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}

.month-nav-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

#currentMonth {
    font-weight: 500;
    color: #1e293b;
    min-width: 150px;
    text-align: center;
}

/* Monthly Stats */
.monthly-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Time Entries List */
.time-entries-list h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.time-entry-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    align-items: center;
}

.time-entry-item:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
    transform: translateX(4px);
}

.entry-date {
    text-align: center;
    min-width: 80px;
}

.day-name {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.date {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.875rem;
}

.entry-times {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.time-range {
    font-weight: 500;
    color: #1e293b;
}

.work-time {
    font-size: 0.875rem;
    color: #3b82f6;
    font-weight: 500;
}

.entry-description {
    font-size: 0.875rem;
    color: #64748b;
    min-width: 200px;
}

.entry-actions {
    color: #64748b;
    font-size: 0.875rem;
}

.no-entries {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 2rem;
}

/* Evaluation Controls */
.evaluation-controls {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

.control-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.action-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Evaluation Results */
.evaluation-results {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.report-header {
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 1rem;
}

.report-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.report-summary {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-item .label {
    font-weight: 500;
    color: #64748b;
}

.summary-item .value {
    font-weight: 700;
    color: #1e293b;
    background: #f1f5f9;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
}

/* Evaluation Table */
.evaluation-table {
    overflow-x: auto;
}

.evaluation-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.evaluation-table th {
    background: #f8fafc;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.evaluation-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
}

.evaluation-table tbody tr:hover {
    background: #f8fafc;
}

.overtime-positive {
    color: #059669;
    font-weight: 500;
}

.overtime-negative {
    color: #dc2626;
    font-weight: 500;
}

.no-results {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 3rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 2px dashed #e2e8f0;
}

/* Danger Button */
.btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Time Entry Modal Enhancements */
#timeEntryModal .modal-content {
    max-width: 720px;
}

/* Responsive Design for Time Tracking */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .overview-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .month-selector {
        justify-content: center;
    }
    
    .monthly-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .time-entry-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }
    
    .entry-description {
        min-width: auto;
    }
    
    .control-group {
        grid-template-columns: 1fr;
    }
    
    .action-group {
        flex-direction: column;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .evaluation-table {
        font-size: 0.875rem;
    }
    
    .evaluation-table th,
    .evaluation-table td {
        padding: 0.5rem;
    }
    
    .report-summary {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Maintenance Management Styles */
.machines-overview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Large Modal for Machine Form */
.large-modal {
    max-width: 900px;
    width: 90%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.form-column h3 {
    color: #1e293b;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.form-full-width {
    grid-column: 1 / -1;
}

.form-full-width h3 {
    color: #1e293b;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
}

/* Enhanced Machine Cards */
.machine-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.machine-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.machine-title h4 {
    color: #1e293b;
    margin: 0;
    font-size: 1.1rem;
}

.machine-type {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}

.detail-section h5 {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.detail-section p {
    margin-bottom: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}

.machine-notes {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #3b82f6;
    margin-top: 1rem;
}

.machine-notes h5 {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.machine-notes p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.maintenance-due {
    color: #dc2626 !important;
    font-weight: 600;
}

.btn-info {
    background: #0ea5e9;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-info:hover {
    background: #0284c7;
}

/* Machine Details Modal */
.machine-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.details-section {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.details-section h3 {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

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

.detail-item strong {
    color: #374151;
    font-weight: 500;
    min-width: 120px;
}

.full-width {
    grid-column: 1 / -1;
}

.notes-content {
    background: white;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7280;
}

.issues-summary p {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.machine-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.machine-total .stat-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.machine-running .stat-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.machine-maintenance .stat-icon {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.machine-issues .stat-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-content h3 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.machines-list h3 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.machine-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.machine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.machine-header h4 {
    color: #1e293b;
    margin-bottom: 0;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-success {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.status-warning {
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.status-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.machine-details p {
    margin-bottom: 0.5rem;
    color: #64748b;
}

.machine-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-warning {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.btn-warning:hover {
    background: #d97706;
}

.btn-success {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.btn-success:hover {
    background: #059669;
}

/* Maintenance Planning Styles */
.maintenance-dashboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.maintenance-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.overview-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.overview-card.urgent {
    border-left: 4px solid #ef4444;
}

.overview-card.warning {
    border-left: 4px solid #f59e0b;
}

.overview-card.info {
    border-left: 4px solid #3b82f6;
}

.overview-card h3 {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.overview-card .count {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.maintenance-calendar {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.month-nav-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.month-nav-btn:hover {
    background: #f8fafc;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e2e8f0;
    border-radius: 0.375rem;
    overflow: hidden;
}

.calendar-weekheader {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.5rem;
}

.weekday {
    text-align: center;
    font-weight: 600;
    color: #64748b;
    padding: 0.5rem;
    font-size: 0.875rem;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e2e8f0;
    border-radius: 0.375rem;
    overflow: hidden;
}

.calendar-day {
    background: white;
    padding: 0.75rem;
    min-height: 3rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calendar-day:hover {
    background: #f8fafc;
}

.calendar-day.today {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    font-weight: 600;
}

.calendar-day.other-month {
    color: #cbd5e1;
}

/* Issue Reporting Styles */
.issues-overview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Enhanced Issue Cards */
.issue-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.issue-title-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.issue-title-section h4 {
    color: #1e293b;
    margin: 0;
    font-size: 1.1rem;
}

.issue-duration {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
}

.issue-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    margin: 1rem 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.detail-label {
    color: #6b7280;
    font-weight: 500;
    min-width: 100px;
}

.detail-value {
    color: #374151;
    text-align: right;
    flex: 1;
}

.issue-photo {
    width: 120px;
    height: 120px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}

.issue-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
}

.issue-photo img:hover {
    transform: scale(1.05);
}

.issue-description {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #3b82f6;
    margin: 1rem 0;
}

.issue-description h5 {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.issue-description p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.issue-photo-large {
    max-width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}

.issue-photo-large img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
}

.issue-photo-large img:hover {
    transform: scale(1.02);
}

.description-content {
    background: white;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7280;
}

.image-modal {
    max-width: 80%;
    width: auto;
}

.image-container {
    text-align: center;
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
}

.issue-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.issue-open .stat-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.issue-progress .stat-icon {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.issue-resolved .stat-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.issues-list h3 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.issue-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.issue-filters select {
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background: white;
    color: #374151;
}

.issue-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.issue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.issue-header h4 {
    color: #1e293b;
    margin-bottom: 0;
}

.issue-badges {
    display: flex;
    gap: 0.5rem;
}

.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-low {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.priority-medium {
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.priority-high {
    background: rgba(251, 146, 60, 0.1);
    color: #ea580c;
}

.priority-critical {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.issue-details p {
    margin-bottom: 0.5rem;
    color: #64748b;
}

.issue-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Analysis and KPI Styles */
.analysis-controls {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.control-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.analysis-results {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.kpi-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.kpi-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.kpi-card h4 {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.kpi-description {
    font-size: 0.75rem;
    color: #9ca3af;
}

.analysis-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.chart-container {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-container h4 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.chart-placeholder {
    height: 200px;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-style: italic;
}

/* Audit Content Styles */
.audit-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.audit-free-text h3,
.audit-documents h3,
.audit-images h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.audit-text-display {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.audit-text-content {
    line-height: 1.6;
    color: #374151;
}

.documents-grid,
.images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.document-item,
.image-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.document-item:hover,
.image-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

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

.document-info i {
    font-size: 2rem;
    color: #3b82f6;
}

.document-details h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.document-details p {
    font-size: 0.875rem;
    color: #64748b;
}

.document-actions,
.image-actions {
    display: flex;
    gap: 0.5rem;
}

.image-preview {
    margin-bottom: 1rem;
}

.image-preview img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.image-preview img:hover {
    transform: scale(1.02);
}

.image-info h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.image-info p {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9fafb;
}

.file-upload-area:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.file-upload-area.drag-over {
    border-color: #3b82f6;
    background: #dbeafe;
}

.file-upload-area input[type="file"] {
    display: none;
}

.upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-text i {
    font-size: 2rem;
    color: #3b82f6;
}

.upload-text p {
    color: #374151;
    font-weight: 500;
    margin: 0;
}

.upload-text small {
    color: #6b7280;
}

.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.image-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.image-modal-content img {
    max-width: 100%;
    max-height: 80vh;
    display: block;
}

.image-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

/* TÜV Professional Auditor Search Styles */
.professional-auditor-search {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.search-header {
    margin-bottom: 30px;
    text-align: center;
}

.search-header h3 {
    color: var(--text-primary);
    font-size: 1.8em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search-subtitle {
    color: var(--text-secondary);
    font-size: 1.1em;
    margin: 0;
    opacity: 0.8;
}

.advanced-auditor-search {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search-section {
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    background: var(--secondary-bg);
}

.search-section h4 {
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 0.9em;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    color: var(--text-primary);
    font-size: 1em;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: inherit;
}

.form-group select:focus,
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.05em;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
}

.checkbox-item label {
    font-weight: normal !important;
    font-size: 0.9em;
    margin: 0 !important;
    cursor: pointer;
}

.search-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.search-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--accent-color), #2563eb);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.reset-btn {
    padding: 12px 25px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-btn:hover {
    background: var(--hover-bg);
}

/* Search Results Styles */
.search-results {
    margin-top: 30px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: var(--secondary-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.results-count {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
}

.results-sort select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--card-bg);
    color: var(--text-primary);
}

.auditor-results {
    display: grid;
    gap: 20px;
}

.auditor-result-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.auditor-result-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.auditor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.auditor-basic-info h5 {
    color: var(--text-primary);
    font-size: 1.3em;
    margin-bottom: 5px;
}

.auditor-basic-info p {
    color: var(--text-secondary);
    margin: 2px 0;
    font-size: 0.95em;
}

.qualification-score {
    text-align: center;
    min-width: 80px;
}

.score-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    margin: 0 auto 8px;
}

.score-excellent { background: linear-gradient(135deg, #10b981, #059669); }
.score-good { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.score-adequate { background: linear-gradient(135deg, #f59e0b, #d97706); }
.score-marginal { background: linear-gradient(135deg, #ef4444, #dc2626); }

.score-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-primary);
}

.auditor-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.detail-section h6 {
    color: var(--text-primary);
    font-size: 1em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.detail-list li {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 5px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.detail-list li:last-child {
    border-bottom: none;
}

.contact-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-btn {
    padding: 8px 16px;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.contact-btn:hover {
    background: var(--accent-color);
    color: white;
}

.contact-btn.primary {
    background: var(--accent-color);
    color: white;
}

.contact-btn.primary:hover {
    background: #2563eb;
}

/* No Results Styles */
.no-results {
    text-align: center;
    padding: 40px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-top: 20px;
}

.no-results i {
    font-size: 3em;
    color: var(--text-secondary);
    margin-bottom: 15px;
    opacity: 0.5;
}

.no-results h4 {
    color: var(--text-primary);
    margin-bottom: 10px;
}

.no-results p {
    color: var(--text-secondary);
    margin: 0;
}

/* Loading States */
.search-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.search-loading i {
    font-size: 2em;
    margin-bottom: 15px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .search-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .auditor-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .auditor-details {
        grid-template-columns: 1fr;
    }
    
    .contact-actions {
        justify-content: center;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .search-section {
    background: var(--primary-bg);
}

[data-theme="dark"] .auditor-result-card {
    background: var(--primary-bg);
    border-color: #374151;
}

[data-theme="dark"] .results-header {
    background: var(--primary-bg);
}

[data-theme="dark"] .no-results {
    background: var(--primary-bg);
}

/* Audit Plan Generator Styles */
.audit-plan-generator {
    max-width: 1400px;
    margin: 0 auto;
    padding: 25px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.audit-plan-generator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06d6a0, #f59e0b);
    border-radius: 20px 20px 0 0;
}

.plan-header {
    background: linear-gradient(135deg, var(--card-bg) 0%, #ffffff 100%);
    border: 3px solid var(--accent-color);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(59, 130, 246, 0.2);
    position: relative;
    overflow: hidden;
}

.plan-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06d6a0);
}

.plan-header h3 {
    color: var(--text-primary);
    font-size: 2.2em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.plan-header h3 i {
    background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.2em;
}

.plan-subtitle {
    color: var(--text-secondary);
    font-size: 1.1em;
    margin: 0;
    opacity: 0.8;
}

.plan-configuration {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.config-section {
    margin-bottom: 40px;
    border: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(135deg, var(--accent-color), #8b5cf6, #06d6a0) border-box;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.config-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), #8b5cf6, #06d6a0);
}

.config-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.config-section:last-child {
    margin-bottom: 0;
}

.config-section h4 {
    color: var(--text-primary);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4em;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    background: linear-gradient(90deg, var(--accent-color), #8b5cf6) 0 100% no-repeat;
    background-size: 100% 3px;
    padding-bottom: 12px;
    position: relative;
    z-index: 1;
}

.config-section h4 i {
    font-size: 1.2em;
    color: var(--accent-color);
    margin-right: 8px;
    transform: none !important;
    transition: none !important;
}

.config-section h4 i:hover {
    transform: none !important;
}

.audit-blocks-section {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.blocks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
}

.blocks-header h4 {
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
}

.audit-blocks {
    min-height: 100px;
    margin-bottom: 20px;
}

.audit-block {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: move;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.audit-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.audit-block:hover::before {
    opacity: 1;
}

.audit-block:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
}

.audit-block.dragging {
    opacity: 0.8;
    transform: rotate(2deg) scale(1.05);
    z-index: 1000;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.25);
    border: 2px solid #667eea;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

.audit-block.drag-over {
    border: 2px dashed var(--accent-color);
    background: var(--hover-bg);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 122, 204, 0.2);
}

/* Move Up/Down Animationen */
@keyframes blockMoveUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes blockMoveDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    100% {
        transform: translateY(0);
    }
}

/* Verbesserte Block-Controls */
.block-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}

.block-btn.move-up,
.block-btn.move-down {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.block-btn.move-up:hover,
.block-btn.move-down:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.block-btn.move-up:active,
.block-btn.move-down:active {
    transform: translateY(0);
}

.audit-block:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Drag Handle Styling */
.drag-handle {
    color: #6b7280;
    font-size: 18px;
    margin-right: 8px;
    cursor: move !important;
    transition: all 0.3s ease;
}

.drag-handle:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

.block-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #374151;
}

/* Drag Instructions */
.audit-block:first-child .block-header::after {
    content: "💡 Tipp: Ziehen Sie Blöcke mit dem ⋮⋮ Symbol oder nutzen Sie die ↑↓ Buttons";
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    z-index: 10;
}

.audit-block:not(:first-child) .block-header::after {
    display: none;
}

/* Drop-Indikator für präzises Platzieren */
.drop-indicator {
    height: 4px;
    margin: 8px 0;
    position: relative;
    z-index: 1000;
}

.drop-line {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
    animation: dropIndicatorPulse 1s ease-in-out infinite alternate;
}

@keyframes dropIndicatorPulse {
    from {
        opacity: 0.6;
        transform: scaleY(1);
    }
    to {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

/* Bulk-Operations Styling */
.bulk-operations {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 15px;
    animation: bulkOpsSlideIn 0.3s ease-out;
}

@keyframes bulkOpsSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selection-count {
    font-weight: 600;
    color: var(--accent-color);
}

.bulk-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.bulk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.bulk-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.bulk-btn.danger:hover {
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* Block Checkbox Styling */
.block-checkbox-label {
    display: flex;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
}

.block-checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark-small {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: white;
}

.block-checkbox-label input[type="checkbox"]:checked + .checkmark-small {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.block-checkbox-label input[type="checkbox"]:checked + .checkmark-small::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkmark-small:hover {
    border-color: var(--accent-color);
    transform: scale(1.1);
}

/* Keyboard Navigation Hints */
.keyboard-hints {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-size: 12px;
    max-width: 250px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.keyboard-hints.show {
    opacity: 1;
}

.keyboard-hints h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
}

.keyboard-hints ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.keyboard-hints li {
    margin-bottom: 5px;
}

.keyboard-hints kbd {
    background: #333;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 11px;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.block-title {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.drag-handle {
    color: var(--text-secondary);
    cursor: move;
    font-size: 1.2em;
    transition: color 0.2s;
}

.drag-handle:hover {
    color: var(--accent-color);
}

/* Audit Times Section */
.audit-times-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
}

.times-header h4 {
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.times-description {
    color: var(--text-secondary);
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--hover-bg);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.audit-times-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.location-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location-info label {
    font-weight: 600;
    color: var(--text-primary);
}

.location-info input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    min-width: 200px;
}

.audit-times-table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.audit-times-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--secondary-bg);
    font-size: 0.9em;
}

.audit-times-table th {
    background: var(--primary-bg);
    color: var(--text-secondary);
    padding: 12px 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.85em;
}

.audit-times-table td {
    padding: 10px 8px;
    border: 1px solid var(--border-color);
    text-align: center;
    background: var(--card-bg);
}

.auditor-name-cell {
    position: relative;
    width: 150px;
    text-align: left !important;
}

.auditor-name-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: 0.9em;
}

.remove-auditor-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-auditor-btn:hover {
    background: #b91c1c;
}

.time-input {
    width: 60px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    text-align: center;
    font-size: 0.85em;
}

.time-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--hover-bg);
}

.total-cell {
    font-weight: 600;
    color: var(--text-primary);
    background: var(--hover-bg) !important;
}

.totals-row td {
    background: var(--primary-bg) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    border-top: 2px solid var(--accent-color);
}

.remote-percentage-row td {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    font-style: italic;
}

/* Generated Audit Times Table in Plan */
.audit-times-overview {
    margin: 20px 0;
}

.audit-location {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1em;
}

.audit-description {
    color: var(--text-secondary);
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--hover-bg);
    border-radius: 5px;
    border-left: 3px solid var(--accent-color);
}

.audit-times-table-wrapper {
    overflow-x: auto;
    margin-top: 15px;
}

.generated-audit-times-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.generated-audit-times-table th {
    background: var(--primary-bg);
    color: var(--text-secondary);
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.8em;
}

.generated-audit-times-table td {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    text-align: center;
    background: var(--secondary-bg);
}

.generated-audit-times-table .auditor-name {
    text-align: left;
    font-weight: 500;
    width: 120px;
}

.generated-audit-times-table .total-time {
    font-weight: 600;
    background: var(--hover-bg);
}

.totals-times-row td {
    background: var(--primary-bg) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    border-top: 2px solid var(--accent-color);
}

.remote-percent-times-row td {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    font-style: italic;
}

/* Audit Plan Footer */
.audit-plan-footer {
    margin-top: 30px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    page-break-inside: avoid;
}

.footer-notes {
    margin-bottom: 25px;
}

.note-section {
    margin-bottom: 15px;
    padding: 10px;
    background: var(--hover-bg);
    border-radius: 5px;
    border-left: 3px solid var(--accent-color);
}

.note-section p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9em;
    line-height: 1.4;
}

.remote-indicator {
    background: #e3f2fd;
    border-left-color: #2196f3 !important;
}

[data-theme="dark"] .remote-indicator {
    background: #1a237e;
    color: #e3f2fd;
}

.distribution-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 20px;
}

.distribution-column h6 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.distribution-note {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 15px;
    font-size: 0.85em;
}

.distribution-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.distribution-line {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--text-secondary);
    height: 20px;
    font-family: monospace;
}

.distribution-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-row {
    display: grid;
    grid-template-columns: 20px 1fr 20px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.checkbox {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--accent-color);
}

.checkbox-label {
    color: var(--text-primary);
}

/* Audit Block DateTime Interface */
.datetime-group {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.datetime-controls {
    margin-top: 10px;
}

.datetime-options {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.datetime-options .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--text-primary);
}

.date-time-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.date-input-group,
.time-input-group {
    display: flex;
    flex-direction: column;
}

.date-input-group label,
.time-input-group label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.date-input-group input,
.time-input-group input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: 0.9em;
}

.date-input-group input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Audit Plan Header */
.plan-header {
    margin-bottom: 30px;
}

.header-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

.header-left h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.zn-selection {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    position: relative;
    overflow: hidden;
}

.zn-selection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #0891b2);
}

.zn-selection label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.1em;
    position: relative;
    z-index: 1;
}

.zn-selection label::before {
    content: '🏷️';
    font-size: 1.2em;
}

.zn-input-section {
    margin-top: 10px;
}

.zn-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 15px;
}

.zn-input-group input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: 0.9em;
}

.zn-numbers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.zn-number-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 0.9em;
}

.zn-number-text {
    color: var(--text-primary);
    font-weight: 500;
}

.btn-remove-zn {
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.btn-remove-zn:hover {
    background: #b91c1c;
}

.zn-empty {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 15px;
}

.btn-add-zn {
    background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-add-zn:hover {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Logo Upload Section */
.logo-upload-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    position: relative;
    overflow: hidden;
}

.logo-upload-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #eab308, #ca8a04);
}

.logo-upload-section label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.1em;
    position: relative;
    z-index: 1;
}

.logo-upload-section label::before {
    content: '🖼️';
    font-size: 1.2em;
}

.logo-upload-area {
    border: 3px dashed #d97706;
    border-radius: 12px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 130px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
}

.logo-upload-area:hover {
    border-color: #ca8a04;
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
}

.logo-upload-area i {
    font-size: 2em;
    color: var(--text-secondary);
}

.logo-upload-area p {
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.logo-upload-area small {
    color: var(--text-secondary);
    font-size: 0.8em;
}

.logo-preview {
    position: relative;
    max-width: 200px;
    margin: 0 auto;
}

.logo-preview img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.btn-remove-logo {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-logo:hover {
    background: #b91c1c;
}

/* Plan Header Display in Generated Plan */
.plan-header-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 20px;
}

.logo-display {
    flex: 0 0 auto;
}

.plan-logo {
    max-height: 60px;
    max-width: 120px;
    object-fit: contain;
    border-radius: 4px;
}

.plan-title-display {
    flex: 1;
    text-align: center;
}

.plan-title-display h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.8em;
    font-weight: 600;
}

.zn-info {
    margin: 5px 0 0 0;
    color: var(--text-secondary);
    font-size: 1em;
    font-weight: 500;
}

/* Revision Tracking Styles */
.revision-tracking-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
}

.revision-header {
    margin-bottom: 20px;
}

.revision-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid var(--accent-color);
    border-radius: 4px;
}

.revision-table-container {
    margin-bottom: 20px;
}

.revision-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.revision-table th {
    background: var(--primary-bg);
    color: var(--text-secondary);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid var(--border-color);
}

.revision-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: middle;
}

.revision-table tr:hover {
    background: var(--hover-bg);
}

.revision-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.revision-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.revision-input::placeholder {
    color: #9ca3af;
}

.revision-controls {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.revision-details {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.revision-details .form-group {
    margin-bottom: 15px;
}

.revision-details label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.revision-details input,
.revision-details textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
    font-family: inherit;
}

.revision-details input:focus,
.revision-details textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.revision-details textarea {
    resize: vertical;
    min-height: 80px;
}

/* Button styles for revision controls */
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
}

/* Revision Display in Generated Plan */
.revision-display {
    margin: 15px 0;
}

.revision-display-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    font-size: 12px;
}

.revision-display-table th {
    background: var(--primary-bg);
    color: var(--text-secondary);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    border-bottom: 1px solid var(--border-color);
}

.revision-display-table td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: top;
    font-size: 11px;
}

.revision-display-table tr:last-child td {
    border-bottom: none;
}

.revision-display-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

/* Responsive adjustments for revision table */
@media (max-width: 768px) {
    .revision-table {
        font-size: 12px;
    }
    
    .revision-table th,
    .revision-table td {
        padding: 8px 6px;
    }
    
    .revision-input {
        font-size: 12px;
        padding: 6px 8px;
    }
    
    .revision-display-table {
        font-size: 10px;
    }
    
    .revision-display-table th,
    .revision-display-table td {
        padding: 4px 6px;
        font-size: 10px;
    }
}

/* Chapters Input Container Styles */
.chapters-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.chapters-input-container select[name="chaptersSelect"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    min-height: 120px;
    overflow-y: auto;
}

.chapters-input-container select[name="chaptersSelect"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.chapters-input-container select[name="chaptersSelect"] optgroup {
    font-weight: bold;
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.05);
    padding: 4px 8px;
    font-size: 12px;
}

.chapters-input-container select[name="chaptersSelect"] option {
    padding: 6px 8px;
    font-size: 12px;
    background: var(--card-bg);
    color: var(--text-primary);
    border: none;
}

.chapters-input-container select[name="chaptersSelect"] option:hover {
    background: var(--hover-bg);
}

.chapters-input-container select[name="chaptersSelect"] option:checked {
    background: var(--accent-color);
    color: white;
    font-weight: 500;
}

.chapters-input-container input[name="chapters"] {
    width: 100%;
    padding: 8px 35px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: all 0.2s ease;
    min-height: 60px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

.chapters-input-container input[name="chapters"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.chapters-input-container input[name="chapters"][readonly] {
    background: #f0f9ff;
    color: #1e40af;
    cursor: default;
}

.chapters-clear-btn {
    position: absolute;
    bottom: 20px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s ease;
    z-index: 10;
}

.chapters-clear-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.chapters-clear-btn:active {
    transform: scale(0.95);
}

/* Responsive adjustments for chapters */
@media (max-width: 768px) {
    .chapters-input-container select[name="chaptersSelect"] {
        font-size: 12px;
        min-height: 100px;
    }
    
    .chapters-input-container select[name="chaptersSelect"] option {
        font-size: 11px;
        padding: 4px 6px;
    }
    
    .chapters-input-container input[name="chapters"] {
        font-size: 13px;
        padding: 6px 30px 6px 10px;
    }
    
    .chapters-clear-btn {
        width: 20px;
        height: 20px;
        bottom: 18px;
        right: 6px;
        font-size: 9px;
    }
}

/* Audit Notes & Distribution Styles */
.audit-notes-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
}

.audit-notes-container .form-group {
    margin-bottom: 20px;
}

.audit-notes-container .form-group:last-child {
    margin-bottom: 0;
}

.audit-notes-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.audit-notes-container input[type="text"],
.audit-notes-container textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    resize: vertical;
}

.audit-notes-container input[type="text"]:focus,
.audit-notes-container textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.distribution-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 8px;
    padding: 15px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
}

.distribution-checkboxes .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.distribution-checkboxes .checkbox-label:hover {
    background: rgba(59, 130, 246, 0.1);
}

.distribution-checkboxes .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--accent-color);
    border-radius: 3px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.distribution-checkboxes input[type="checkbox"] {
    display: none;
}

.distribution-checkboxes input[type="checkbox"]:checked + .checkmark {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.distribution-checkboxes input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Responsive adjustments for audit notes */
@media (max-width: 768px) {
    .audit-notes-container {
        padding: 15px;
    }
    
    .distribution-checkboxes {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .distribution-checkboxes .checkbox-label {
        font-size: 13px;
        padding: 6px;
    }
}

/* Page Header Styles for Generated Plan */
.page-header {
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    padding: 10px 15px;
    margin: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-content-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.header-left-content {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.audit-title {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1.2;
}

.zn-numbers {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
    display: inline-block;
}

.header-logo-container {
    flex: 0 0 auto;
    max-width: 150px;
}

.header-logo {
    max-height: 80px;
    max-width: 150px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Print styles for page headers */
@media print {
    .page-header {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: auto;
        min-height: 50px;
        background: white !important;
        border: none !important;
        border-bottom: 1px solid #333 !important;
        border-radius: 0 !important;
        margin: 0 0 15px 0 !important;
        padding: 8px 15px !important;
        box-shadow: none !important;
        z-index: auto;
        page-break-inside: avoid;
        page-break-after: avoid;
        text-align: center;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-content-display {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .header-left-content {
        flex: 1 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-logo {
        flex: 0 0 auto !important;
        text-align: center !important;
        max-height: 40px !important;
    }
    
    .audit-title {
        font-size: 20px !important;
        color: #333 !important;
        margin: 0 0 3px 0 !important;
        line-height: 1.1 !important;
    }
    
    .zn-numbers {
        font-size: 12px !important;
        color: #666 !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .header-logo {
        max-height: 50px !important;
        max-width: 120px !important;
        box-shadow: none !important;
    }
    
    /* Adjust content to account for fixed header */
    .plan-info {
        margin-top: 100px !important;
    }
    
    body {
        padding-top: 100px !important;
    }
}

/* Responsive adjustments for page header */
@media (max-width: 768px) {
    .header-content-display {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .audit-title {
        font-size: 24px;
    }
    
    .zn-numbers {
        font-size: 14px;
    }
    
    .header-logo {
        max-height: 60px;
        max-width: 120px;
    }
}

/* Responsive header */
@media (max-width: 768px) {
    .header-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .zn-checkboxes {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 8px;
    }
    
    .plan-header-display {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* Approval notice styling */
.approval-notice {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 10px;
    font-size: 0.9em;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.approval-notice i {
    color: #f59e0b;
    font-size: 1em;
    margin-top: 2px;
    flex-shrink: 0;
}

.approval-notice-display {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 15px;
    font-size: 0.9em;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.approval-notice-display i {
    color: #f59e0b;
    font-size: 1em;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Multi-Select Dropdown Styling */
.multi-select-container {
    position: relative;
    width: 100%;
    z-index: 1000;
}

.multi-select-display {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 8px 12px;
    background: white;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    transition: border-color 0.2s;
    font-size: 14px;
}

.multi-select-display:hover {
    border-color: #3b82f6;
}

.multi-select-display i {
    color: var(--text-secondary);
    font-size: 0.9em;
    transition: transform 0.2s;
}

.multi-select-display.open i {
    transform: rotate(180deg);
}

.multi-select-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 5px;
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    margin-bottom: 2px;
}

.multi-select-dropdown.show {
    display: block !important;
    visibility: visible !important;
}


.multi-select-option {
    display: flex;
    align-items: flex-start;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    background: white;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s;
    min-height: 50px;
}

.multi-select-option:last-child {
    border-bottom: none;
}

.multi-select-option:hover {
    background-color: #f8f9fa;
}

.multi-select-option input[type="checkbox"] {
    margin: 0 10px 0 0;
    flex-shrink: 0;
}

.multi-select-option span:not(.checkmark) {
    flex: 1;
    word-break: break-word;
    line-height: 1.4;
    padding-top: 3px;
}

.multi-select-option:last-child {
    border-bottom: none;
}

.multi-select-option:hover {
    background: var(--hover-bg);
}

.multi-select-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.multi-select-option .checkmark {
    display: none;
}

/* Audit objective styling */
.audit-objective {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 12px 15px;
    margin-top: 8px;
    line-height: 1.6;
    color: var(--text-primary);
    font-size: 0.95em;
}

/* External auditor/staff styling */
.external-auditors-list,
.external-staff-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.external-auditor-item,
.external-staff-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--hover-bg);
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

.external-auditor-item .checkbox-label,
.external-staff-item .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--text-primary);
    min-width: 120px;
    margin: 0;
}

.external-auditor-input,
.external-staff-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: 0.9em;
}

.external-auditor-input:focus,
.external-staff-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* External team display in output */
.external-team-display {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px 12px;
    margin-top: 5px;
    line-height: 1.5;
    color: var(--text-primary);
    font-size: 0.95em;
}

/* Criteria display in output */
.criteria-display {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px 12px;
    margin-top: 5px;
    line-height: 1.5;
    color: var(--text-primary);
    font-size: 0.95em;
}

/* Inline input styling */
.inline-input {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: 0.9em;
    margin-left: 5px;
    min-width: 150px;
}

.inline-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Responsive datetime interface */
@media (max-width: 768px) {
    .date-time-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .datetime-options {
        flex-direction: column;
        gap: 10px;
    }
}

/* Updated Audit Plan Table Styling */
.datetime-cell {
    text-align: center;
    font-weight: 500;
    min-width: 140px;
    line-height: 1.3;
}

.org-processes-cell {
    text-align: left;
    line-height: 1.4;
    min-width: 200px;
}

.auditors-cell {
    text-align: center;
    font-weight: 500;
    min-width: 120px;
}

.contact-cell {
    text-align: left;
    min-width: 150px;
}

.norm-chapters-cell {
    text-align: left;
    line-height: 1.4;
    min-width: 150px;
    font-size: 0.9em;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .distribution-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .checkbox-row {
        grid-template-columns: 20px 1fr;
        gap: 8px;
    }
    
    .checkbox-row:nth-child(odd) {
        margin-bottom: 5px;
    }
    
    /* Mobile audit table adjustments */
    .datetime-cell,
    .org-processes-cell,
    .auditors-cell,
    .contact-cell,
    .norm-chapters-cell {
        min-width: auto;
        font-size: 0.85em;
        padding: 8px 4px;
    }
}

.block-controls {
    display: flex;
    gap: 5px;
}

.block-btn {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
}

.block-btn.remove {
    background: #dc2626;
    color: white;
}

.block-btn.remove:hover {
    background: #b91c1c;
}

.block-btn.duplicate {
    background: var(--accent-color);
    color: white;
}

.block-btn.duplicate:hover {
    background: #2563eb;
}

.block-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.block-form-group {
    display: flex;
    flex-direction: column;
}

.block-form-group.full-width {
    grid-column: 1 / -1;
}

.block-form-group label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 0.9em;
}

.block-form-group input,
.block-form-group select,
.block-form-group textarea {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9em;
    transition: border-color 0.2s;
}

.block-form-group input:focus,
.block-form-group select:focus,
.block-form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.block-form-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* Enhanced form styling for professional audit configuration */
.approval-note {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 15px;
    margin-top: 15px;
}

.approval-note p {
    margin: 0;
    color: #856404;
    font-weight: 500;
    line-height: 1.4;
}

.field-help {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 5px;
    display: block;
}

.config-section textarea {
    min-height: 60px;
    line-height: 1.4;
}

.config-section .checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.config-section .checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    transition: all 0.2s;
    cursor: pointer;
}

.config-section .checkbox-label:hover {
    background: var(--hover-bg);
    border-color: var(--accent-color);
}

.config-section .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

.config-section .checkbox-label span.checkmark {
    margin: 0;
}

.config-section .checkbox-label {
    font-weight: normal;
    margin: 0;
    flex: 1;
}

.blocks-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.generated-plan-section {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.plan-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    border: 2px solid #e2e8f0;
}

.plan-actions .btn {
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.plan-actions .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.plan-actions .btn:hover::before {
    transform: translateX(100%);
}

.plan-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.plan-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.plan-actions .btn-primary {
    background: linear-gradient(135deg, var(--accent-color), #2563eb);
    color: white;
}

.plan-actions .btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

.plan-actions .btn-secondary {
    background: var(--secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.plan-actions .btn-secondary:hover {
    background: var(--hover-bg);
    transform: translateY(-1px);
}

.audit-plan-table {
    margin-top: 20px;
    overflow-x: auto;
}

.audit-plan-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.audit-plan-table th {
    background: var(--accent-color);
    color: white;
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
}

.audit-plan-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.9em;
    vertical-align: top;
}

.audit-plan-table tr:last-child td {
    border-bottom: none;
}

.audit-plan-table tr:nth-child(even) {
    background: var(--secondary-bg);
}

.audit-plan-table tr:hover {
    background: var(--hover-bg);
}

.time-cell {
    font-weight: 600;
    color: var(--accent-color);
    white-space: nowrap;
}

.duration-cell {
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.department-cell {
    font-weight: 500;
}

.auditors-cell {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--accent-color);
}

.contact-cell {
    font-size: 0.9em;
}

.topics-cell {
    max-width: 200px;
    line-height: 1.4;
}

.standards-cell {
    font-family: monospace;
    font-size: 0.85em;
    color: var(--accent-color);
}

.chapters-cell {
    font-family: monospace;
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* Plan Type Indicators */
.plan-type-indicator {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-type-opening {
    background: #dcfce7;
    color: #166534;
}

.plan-type-audit {
    background: #dbeafe;
    color: #1e40af;
}

.plan-type-break {
    background: #fef3c7;
    color: #92400e;
}

.plan-type-auditor-time {
    background: #f3e8ff;
    color: #7c3aed;
}

.plan-type-closing {
    background: #fee2e2;
    color: #dc2626;
}

.plan-type-travel {
    background: #e0f2fe;
    color: #0277bd;
}

.plan-type-info {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* Empty State */
.audit-blocks-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--secondary-bg);
}

.audit-blocks-empty i {
    font-size: 2em;
    margin-bottom: 15px;
    opacity: 0.5;
}

.audit-blocks-empty h4 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.audit-blocks-empty p {
    margin: 0;
    font-size: 0.9em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .blocks-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .block-form {
        grid-template-columns: 1fr;
    }
    
    .blocks-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .plan-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .audit-plan-table {
        font-size: 0.8em;
    }
    
    .audit-plan-table th,
    .audit-plan-table td {
        padding: 8px 6px;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .config-section {
    background: var(--primary-bg);
}

[data-theme="dark"] .audit-block {
    background: var(--primary-bg);
    border-color: #374151;
}

[data-theme="dark"] .audit-blocks-empty {
    background: var(--primary-bg);
    border-color: #374151;
}

[data-theme="dark"] .audit-plan-table tr:nth-child(even) {
    background: var(--primary-bg);
}

[data-theme="dark"] .plan-type-opening {
    background: #166534;
    color: #dcfce7;
}

[data-theme="dark"] .plan-type-audit {
    background: #1e40af;
    color: #dbeafe;
}

[data-theme="dark"] .plan-type-break {
    background: #92400e;
    color: #fef3c7;
}

[data-theme="dark"] .plan-type-auditor-time {
    background: #7c3aed;
    color: #f3e8ff;
}

[data-theme="dark"] .plan-type-closing {
    background: #dc2626;
    color: #fee2e2;
}

[data-theme="dark"] .plan-type-travel {
    background: #0277bd;
    color: #e0f2fe;
}

[data-theme="dark"] .plan-type-info {
    background: #7b1fa2;
    color: #f3e5f5;
}

/* Plan Info Section for TÜV-Compliant Audit Plans */
.plan-info {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.plan-info h4 {
    color: var(--text-primary);
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
}

.plan-info h5 {
    color: var(--accent-color);
    font-size: 1.1em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-info h5 i {
    width: 20px;
    text-align: center;
}

.plan-info .config-section {
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    background: var(--secondary-bg);
}

.plan-info .config-section:last-child {
    margin-bottom: 0;
}

.plan-info .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.plan-info .info-grid p {
    margin: 0;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9em;
    line-height: 1.4;
}

.plan-info .info-grid p strong {
    color: var(--accent-color);
    font-weight: 600;
    display: inline-block;
    min-width: 140px;
}

.plan-info .approval-note {
    background: linear-gradient(135deg, #fff3cd, #fef3c7);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.plan-info .approval-note p {
    margin: 0;
    color: #92400e;
    font-weight: 500;
    line-height: 1.5;
}

.plan-info .approval-note i {
    color: #d97706;
    margin-right: 8px;
}

/* Dark theme adjustments for plan-info */
[data-theme="dark"] .plan-info {
    background: var(--primary-bg);
    border-color: #374151;
}

[data-theme="dark"] .plan-info .config-section {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .plan-info .info-grid p {
    background: var(--primary-bg);
    border-color: #374151;
    color: var(--text-secondary);
}

[data-theme="dark"] .plan-info .approval-note {
    background: linear-gradient(135deg, #451a03, #7c2d12);
    border-color: #ea580c;
}

[data-theme="dark"] .plan-info .approval-note p {
    color: #fed7aa;
}

/* Info Notice for optional sections */
.info-notice {
    background: #e0f2fe;
    border: 1px solid #0284c7;
    border-radius: 6px;
    padding: 12px 15px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    color: #0c4a6e;
}

.info-notice i {
    color: #0284c7;
    font-size: 1.1em;
    flex-shrink: 0;
}

.info-notice span {
    line-height: 1.4;
}

/* Dark theme for info notice */
[data-theme="dark"] .info-notice {
    background: #1e3a8a;
    border-color: #3b82f6;
    color: #dbeafe;
}

[data-theme="dark"] .info-notice i {
    color: #60a5fa;
}

/* Department input container for audit blocks */
.department-input-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.department-input-container select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9em;
    cursor: pointer;
}

.department-input-container select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.department-input-container input[name="department"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9em;
    box-sizing: border-box;
}

.department-input-container input[name="department"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Dark theme adjustments */
[data-theme="dark"] .department-input-container select,
[data-theme="dark"] .department-input-container input[name="department"] {
    background: var(--primary-bg);
    border-color: #374151;
    color: var(--text-secondary);
}

[data-theme="dark"] .department-input-container select:focus,
[data-theme="dark"] .department-input-container input[name="department"]:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.1);
}

/* Topics input container for audit blocks */
.topics-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.topics-input-container select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9em;
    cursor: pointer;
}

/* Specific styling for multi-select dropdowns */
.topics-input-container select[multiple] {
    height: auto;
    min-height: 120px;
    padding: 4px;
    overflow-y: auto;
}

.topics-input-container select[multiple] option {
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.topics-input-container select[multiple] option:hover {
    background-color: var(--hover-bg);
}

.topics-input-container select[multiple] option:checked {
    background-color: var(--accent-color);
    color: white;
    font-weight: 500;
}

.topics-input-container select[multiple] option:checked:hover {
    background-color: var(--accent-color);
    opacity: 0.9;
}

.topics-input-container select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.topics-input-container textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9em;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

.topics-input-container textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Dark theme adjustments for topics container */
[data-theme="dark"] .topics-input-container select,
[data-theme="dark"] .topics-input-container textarea {
    background: var(--primary-bg);
    border-color: #374151;
    color: var(--text-secondary);
}

[data-theme="dark"] .topics-input-container select:focus,
[data-theme="dark"] .topics-input-container textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.1);
}
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.image-modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.image-modal-info {
    padding: 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.image-modal-info h3 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.125rem;
}

.image-modal-info p {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
}

.no-content {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    padding: 3rem 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

/* Audit Certifications Management Styles */
.form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.certification-item,
.audit-item[data-id] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.certification-info,
.audit-info {
    flex: 1;
}

.certification-actions,
.audit-actions {
    display: flex;
    gap: 0.5rem;
}

.audit-summary {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.audit-summary h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audit-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.audit-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.audit-type {
    font-weight: 500;
    color: #1e293b;
}

.audit-date {
    font-size: 0.875rem;
    color: #64748b;
}

.audit-result {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.audit-geplant {
    background: #dbeafe;
    color: #1e40af;
}

.audit-durchgeführt {
    background: #fef3c7;
    color: #92400e;
}

.audit-abgeschlossen {
    background: #d1fae5;
    color: #065f46;
}

.audit-bestanden {
    background: #d1fae5;
    color: #065f46;
}

.audit-nachbesserung {
    background: #fecaca;
    color: #991b1b;
}

.cert-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cert-item {
    padding: 0.75rem 1rem;
    background: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 0.5rem;
    color: #0c4a6e;
    font-weight: 500;
}

.audit-has-results {
    color: #10b981;
    font-size: 1rem;
    margin-left: 0.5rem;
}

.audit-item {
    cursor: pointer;
    position: relative;
}

/* Responsive adjustments for audit certifications */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    
    .form-row > * {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }
    
    .certification-item,
    .audit-item[data-id] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .certification-actions,
    .audit-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .audit-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

.no-data {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    padding: 2rem;
}

/* Responsive Design for Maintenance */
@media (max-width: 768px) {
    .machine-stats,
    .issue-stats,
    .maintenance-overview,
    .kpi-dashboard {
        grid-template-columns: 1fr;
    }
    
    .control-group {
        flex-direction: column;
    }
    
    .issue-filters {
        flex-direction: column;
    }
    
    .machine-actions,
    .issue-actions {
        flex-direction: column;
    }
    
    .issue-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .analysis-charts {
        grid-template-columns: 1fr;
    }
}

/* User Profile Styles */
.profile-modal .modal-content {
    max-width: 90vw !important;
    width: 90vw !important;
    height: 90vh !important;
    margin: 5vh auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    border-radius: 8px !important;
    padding: 20px !important;
    width: 98%;
    max-height: 95vh;
    overflow-y: auto;
}

.profile-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-header {
    display: flex;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #dee2e6;
}

.tab-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}

.tab-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.tab-btn.active {
    background: #fff;
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    font-weight: 500;
}

.tab-content {
    flex: 1;
    padding: 24px;
    background: #fff;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Profile Info Display */
.profile-info-display {
    max-width: 600px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    overflow: hidden;
}

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

.profile-basic h3 {
    margin: 0 0 8px 0;
    color: #1f2937;
    font-size: 24px;
    font-weight: 600;
}

.role-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #3b82f6;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 8px 0;
}

.department {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

.profile-details {
    display: grid;
    gap: 16px;
}

.detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row strong {
    min-width: 140px;
    color: #374151;
    font-weight: 500;
}

/* Form Grid */
.form-grid {
    display: grid;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    margin-bottom: 6px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input:disabled {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

/* Roles Tab */
.roles-overview {
    display: grid;
    gap: 24px;
}

.current-role,
.permissions-overview,
.special-permissions {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.current-role h4,
.permissions-overview h4,
.special-permissions h4 {
    margin: 0 0 16px 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-card {
    background: white;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.role-card h5 {
    margin: 0 0 8px 0;
    color: #1f2937;
    font-size: 18px;
}

.role-card p {
    margin: 4px 0;
    color: #6b7280;
    font-size: 14px;
}

.role-card code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
}

.permission-item.granted {
    border-color: #10b981;
    background: #ecfdf5;
}

.permission-item.denied {
    border-color: #ef4444;
    background: #fef2f2;
}

.text-success {
    color: #10b981;
}

.text-danger {
    color: #ef4444;
}

/* Qualifications */
.qualifications-section {
    display: grid;
    gap: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h4 {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
}

.btn-primary {
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: #6b7280;
    color: white;
    border: 1px solid #6b7280;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background: #4b5563;
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: 1px solid #ef4444;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-danger:hover {
    background: #dc2626;
}

.qualifications-list {
    display: grid;
    gap: 16px;
}

.qualification-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.2s;
}

.qualification-item:hover {
    border-color: #d1d5db;
}

.qualification-item.expired {
    border-color: #ef4444;
    background: #fef2f2;
}

.qual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.qual-header h5 {
    margin: 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
}

.qual-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qual-details p {
    margin: 4px 0;
    color: #6b7280;
    font-size: 14px;
}

.qualification-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-top: 20px;
}

.qualification-form h5 {
    margin: 0 0 16px 0;
    color: #1f2937;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* Responsibilities */
.responsibilities-section {
    display: grid;
    gap: 24px;
}

.responsibility-categories {
    display: grid;
    gap: 20px;
}

.resp-category {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.resp-category h5 {
    margin: 0 0 16px 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.responsibility-list {
    display: grid;
    gap: 8px;
}

.responsibility-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.responsibility-item i {
    color: #6b7280;
    width: 16px;
}

.item-name {
    flex: 1;
    font-weight: 500;
    color: #1f2937;
}

.item-status,
.item-info {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #6b7280;
}

/* Activity Timeline */
.activity-section {
    display: grid;
    gap: 20px;
}

.activity-filters select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}

.activity-timeline {
    display: grid;
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.activity-title {
    font-weight: 500;
    color: #1f2937;
}

.activity-date {
    font-size: 12px;
    color: #6b7280;
}

.activity-description {
    margin: 0 0 8px 0;
    color: #6b7280;
    font-size: 14px;
}

.activity-details {
    font-size: 12px;
    color: #9ca3af;
    background: #f9fafb;
    padding: 8px;
    border-radius: 4px;
}

/* Visibility Settings */
.visibility-section {
    display: grid;
    gap: 24px;
}

.visibility-preview,
.visibility-controls {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.visibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.visibility-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
}

.visibility-item.visible {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
}

.visibility-item.hidden {
    border-color: #6b7280;
    background: #f9fafb;
    color: #6b7280;
}

.visibility-options {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.visibility-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    color: #1f2937;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}

.field-description {
    font-size: 12px;
    color: #6b7280;
    margin-left: 24px;
}

.privacy-note {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
}

.privacy-note i {
    flex-shrink: 0;
    margin-top: 2px;
}

.privacy-note p {
    margin: 0;
    font-size: 14px;
}

.no-data {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 20px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px dashed #d1d5db;
}

/* Responsive Design */
@media (max-width: 768px) {
    .profile-modal .modal-content {
        width: 98%;
        max-height: 98vh;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .tab-header {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        font-size: 12px;
        padding: 10px 12px;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .permissions-grid {
        grid-template-columns: 1fr;
    }
    
    .visibility-grid {
        grid-template-columns: 1fr;
    }
}

/* Expandable KPI Cards */
.expandable-kpi {
    position: relative;
    transition: all 0.3s ease;
}

.expandable-kpi.expanded {
    grid-column: span 2;
}

.expand-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.expand-btn:hover {
    background: rgba(100, 116, 139, 0.1);
    color: #374151;
}

.expand-btn.rotated {
    transform: rotate(180deg);
}

.expandable-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: left;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.section-header h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.info-display, .feedback-display {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.75rem;
    min-height: 60px;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

.info-display p, .feedback-display p {
    margin: 0;
    color: #9ca3af;
    font-style: italic;
}

.info-editor, .feedback-editor {
    margin-top: 0.5rem;
}

.info-editor textarea, .feedback-editor textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    background: white;
}

.info-editor textarea:focus, .feedback-editor textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

/* Customer Feedback Section */
.customer-feedback-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.feedback-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.feedback-content {
    width: 100%;
}

.feedback-display {
    min-height: 100px;
}

.feedback-editor textarea {
    min-height: 120px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .expandable-kpi.expanded {
        grid-column: span 1;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .feedback-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .editor-actions {
        justify-content: stretch;
    }
    
    .editor-actions button {
        flex: 1;
    }
}

/* QHSE Notes Sections */
.qhse-notes-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.qhse-notes-section:hover {
    border-color: #3b82f6;
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.1);
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

.notes-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.notes-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notes-header h3::before {
    content: "📝";
    font-size: 1.25rem;
}

.notes-content {
    width: 100%;
}

.notes-display {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 1rem;
    min-height: 80px;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.notes-display p {
    margin: 0;
    color: #9ca3af;
    font-style: italic;
}

.notes-editor {
    margin-top: 0.5rem;
}

.notes-editor textarea {
    width: 100%;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    background: white;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 120px;
}

.notes-editor textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.notes-editor textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Documents Section Styling */
.documents-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.documents-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.documents-section h3::before {
    content: "📄";
    font-size: 1.25rem;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.document-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.document-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.document-item h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem 0;
}

.document-item p {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

.document-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Role-based visibility */
[data-roles]:not([data-roles*="qhse"]):not([data-roles*="admin"]):not([data-roles*="root-admin"]) {
    display: none;
}

/* Responsive Design für QHSE Notes */
@media (max-width: 768px) {
    .qhse-notes-section {
        margin-top: 1.5rem;
        padding: 1rem;
    }
    
    .notes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .notes-header h3 {
        font-size: 1rem;
    }
    
    .documents-grid {
        grid-template-columns: 1fr;
    }
    
    .document-item {
        padding: 0.75rem;
    }
}

/* Notes Sharing and Permissions */
.btn-info {
    background: #0ea5e9;
    color: white;
}

.btn-info:hover {
    background: #0284c7;
}

.sharing-info {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #e0f2fe;
    border: 1px solid #0ea5e9;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

.sharing-info h4 {
    font-size: 0.875rem;
    color: #0c4a6e;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sharing-info h4::before {
    content: "👥";
}

.shared-users-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.shared-user-tag {
    background: #0ea5e9;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.remove-share-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-share-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Share Modal */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.share-modal-content {
    background: white;
    border-radius: 0.75rem;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.share-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.close-modal-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.user-selection {
    margin-bottom: 1.5rem;
}

.user-selection h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.75rem 0;
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.user-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.user-checkbox:hover {
    background: #f3f4f6;
}

.user-checkbox input[type="checkbox"] {
    margin: 0;
}

.user-checkbox label {
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
    margin: 0;
}

.share-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.read-only-view {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.read-only-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
}

.read-only-header::before {
    content: "👁️";
    font-size: 1rem;
}

.read-only-content {
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Safety Corner Styles */
.safety-announcements {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #dc2626;
}

.announcements-header {
    display: flex;
    justify-content: between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.announcements-header h3 {
    color: #dc2626;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.announcement-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.announcements-content {
    margin-top: 1rem;
}

.announcement-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    padding: 1rem;
    background: #fef2f2;
    border-radius: 0.5rem;
    border: 1px solid #fecaca;
}

.no-announcements {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 1.5rem;
}

.safety-documents {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.documents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.documents-header h3 {
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.documents-actions {
    display: flex;
    gap: 0.75rem;
}

.safety-pdf-list {
    display: grid;
    gap: 1rem;
}

.safety-pdf-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.safety-pdf-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pdf-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: #dc2626;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.pdf-info {
    flex: 1;
    min-width: 0;
}

.pdf-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    word-break: break-word;
}

.pdf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.pdf-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pdf-meta i {
    width: 12px;
    color: #9ca3af;
}

.pdf-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.no-documents {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 2rem;
}

/* PDF Viewer Modal */
#pdfViewerModal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}

#pdfViewerModal.active {
    display: flex !important;
}

.large-modal .modal-content {
    width: 98vw;
    max-width: 1440px;
    height: 95vh;
    max-height: none;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pdf-viewer-body {
    display: flex;
    flex-direction: column;
    height: calc(95vh - 120px);
    padding: 0;
    flex: 1;
}

.pdf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    gap: 1rem;
}

.pdf-toolbar .pdf-info {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.pdf-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pdf-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
}

/* Screen reader only class for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* User Selection Grid for Settings */
.user-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
}

.user-checkbox-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border-radius: 0.25rem;
    border: 1px solid #e2e8f0;
}

.user-checkbox-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    margin: 0;
    width: 100%;
}

.user-checkbox-item input[type="checkbox"] {
    margin: 0;
}

.user-label {
    color: #374151;
}

.selection-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Multiple Announcements Styles */
.existing-announcements {
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.existing-announcements h4 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1rem;
}

.announcement-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.announcement-item:last-child {
    margin-bottom: 0;
}

.announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.announcement-meta {
    font-size: 0.875rem;
    color: #6b7280;
}

.announcement-text-preview {
    color: #374151;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    max-height: 3em;
    overflow: hidden;
    position: relative;
}

.announcement-text-preview.expanded {
    max-height: none;
}

.announcement-text-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3rem;
    height: 1.5em;
    background: linear-gradient(to right, transparent, white);
}

.announcement-text-preview.expanded::after {
    display: none;
}

.announcement-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.expand-btn {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
}

.expand-btn:hover {
    text-decoration: underline;
}

.announcement-visibility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.user-count-badge {
    background: #dbeafe;
    color: #1e40af;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.new-announcement-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 0.5rem;
}

.new-announcement-section h4 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1rem;
}

.announcement-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.no-announcements {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 1.5rem;
}

/* Role-based visibility for documents actions */
.documents-actions[data-roles] {
    display: none;
}

body[data-role="admin"] .documents-actions[data-roles*="admin"],
body[data-role="root-admin"] .documents-actions[data-roles*="admin"],
body[data-role="root-admin"] .documents-actions[data-roles*="root-admin"] {
    display: flex !important;
}

/* Safety PDF list should always be visible */
.safety-pdf-list {
    display: block !important;
}

/* Responsive design for safety corner */
@media (max-width: 768px) {
    .safety-pdf-item {
        flex-direction: column;
        text-align: center;
    }
    
    .pdf-meta {
        justify-content: center;
    }
    
    .user-selection-grid {
        grid-template-columns: 1fr;
        max-height: 150px;
    }
}

/* User Profile Modal Styles */
#userProfileViewModal .modal-content {
    max-width: 1080px;
    width: 98%;
}

.user-profile-tabs {
    width: 100%;
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
    background: #f8fafc;
    border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
}

.tab-btn {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.tab-btn.active {
    background: #3b82f6;
    color: white;
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
}

.tab-content {
    display: none;
    min-height: 300px;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.info-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-item label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.info-item span {
    font-size: 0.875rem;
    color: #334155;
    font-weight: 500;
    min-height: 1.2rem;
    word-break: break-word;
}

.info-item a {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.info-item a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-badge.role-root-admin {
    background: linear-gradient(45deg, #dc2626, #ef4444);
    color: white;
}

.role-badge.role-admin {
    background: linear-gradient(45deg, #7c2d12, #ea580c);
    color: white;
}

.role-badge.role-geschaeftsfuehrung {
    background: linear-gradient(45deg, #7c3aed, #8b5cf6);
    color: white;
}

.role-badge.role-betriebsleiter {
    background: linear-gradient(45deg, #059669, #10b981);
    color: white;
}

.role-badge.role-abteilungsleiter {
    background: linear-gradient(45deg, #0d9488, #14b8a6);
    color: white;
}

.role-badge.role-qhse {
    background: linear-gradient(45deg, #2563eb, #3b82f6);
    color: white;
}

.role-badge.role-mitarbeiter {
    background: linear-gradient(45deg, #64748b, #94a3b8);
    color: white;
}

.role-badge.role-techniker {
    background: linear-gradient(45deg, #b45309, #d97706);
    color: white;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: linear-gradient(45deg, #059669, #10b981);
    color: white;
}

.status-badge.inactive {
    background: linear-gradient(45deg, #dc2626, #ef4444);
    color: white;
}

/* Responsive adjustments for user profile modal */
@media (max-width: 768px) {
    #userProfileViewModal .modal-content {
        width: 98%;
        max-width: none;
        margin: 1% auto;
        max-height: 98vh;
    }
    
    .tab-buttons {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1 1 50%;
        min-width: 120px;
        font-size: 0.75rem;
        padding: 0.75rem 1rem;
    }
    
    .profile-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .info-item {
        padding: 0.75rem;
    }
}

/* Risk Assessment Detailed Calculation Styles */
.detailed-risk-assessment {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detailed-risk-assessment h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detailed-risk-assessment h4::before {
    content: "📊";
    font-size: 1.2em;
}

.risk-calculation-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calculation-section {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid #3b82f6;
}

.calculation-section h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.assessment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.assessment-option {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.assessment-option:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.assessment-option input[type="radio"] {
    display: none;
}

.assessment-option input[type="radio"]:checked + .option-content {
    background: #eff6ff;
    border-color: #3b82f6;
}

.assessment-option:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.option-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3b82f6;
    background: #dbeafe;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    align-self: flex-start;
}

.option-text {
    font-weight: 600;
    color: var(--text-primary);
}

.option-desc {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.4;
}

.risk-calculation-result {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 1rem;
}

.risk-calculation-result h5 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.calculation-formula {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}

.calculation-formula p {
    margin-bottom: 1rem;
    font-weight: 600;
}

.formula-calculation {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    letter-spacing: 0.05em;
}

.risk-level-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.risk-level-indicator, .risk-action-required {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    backdrop-filter: blur(10px);
}

.risk-level-label, .action-label {
    display: block;
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.risk-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.risk-badge.niedrig {
    background: #dcfce7;
    color: #166534;
}

.risk-badge.mittel {
    background: #fef3c7;
    color: #92400e;
}

.risk-badge.hoch {
    background: #fee2e2;
    color: #991b1b;
}

.risk-badge.kritisch {
    background: #fecaca;
    color: #7f1d1d;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.risk-result {
    font-size: 2rem;
    font-weight: 800;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.legal-documentation {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.legal-documentation h6 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legal-requirements {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.requirement-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.requirement-item input[type="checkbox"] {
    margin-top: 0.125rem;
    transform: scale(1.2);
}

.requirement-item label {
    color: white;
    line-height: 1.4;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Risk Level Colors for Assessment Options */
.assessment-option:has(input[name="riskSeverity"][value="4"]:checked) {
    border-color: #dc2626;
    background: #fee2e2;
}

.assessment-option:has(input[name="riskSeverity"][value="3"]:checked) {
    border-color: #f59e0b;
    background: #fef3c7;
}

.assessment-option:has(input[name="riskProbability"][value="4"]:checked),
.assessment-option:has(input[name="riskAvoidability"][value="4"]:checked) {
    border-color: #dc2626;
    background: #fee2e2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .assessment-grid {
        grid-template-columns: 1fr;
    }
    
    .risk-level-display {
        grid-template-columns: 1fr;
    }
    
    .formula-calculation {
        font-size: 1.1rem;
    }
    
    .detailed-risk-assessment {
        padding: 1rem;
        margin: 1rem 0;
    }
}

/* Hazardous Substances Module Styles */
.substance-management {
    padding: 2rem;
}

.substance-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-card:nth-child(1) .stat-icon { background: linear-gradient(45deg, #3b82f6, #1d4ed8); }
.stat-card:nth-child(2) .stat-icon { background: linear-gradient(45deg, #dc2626, #b91c1c); }
.stat-card:nth-child(3) .stat-icon { background: linear-gradient(45deg, #f59e0b, #d97706); }
.stat-card:nth-child(4) .stat-icon { background: linear-gradient(45deg, #059669, #047857); }

.stat-info {
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.substance-controls {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.search-filter-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-group input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.search-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.filter-group select {
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: white;
}

.substance-table-container {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    background: #f8fafc;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.data-table th:hover {
    background: #f1f5f9;
}

.data-table th i {
    margin-left: 0.5rem;
    color: #9ca3af;
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    vertical-align: top;
}

.data-table tr:hover {
    background: #f9fafb;
}

.hazard-symbols {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.hazard-symbol {
    font-size: 1.2rem;
    margin-right: 0.25rem;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0.375rem;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #e5e7eb;
    color: #374151;
}

.btn-icon.danger:hover {
    background: #fca5a5;
    color: #dc2626;
}

.no-data-message {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.no-data-message i {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.no-data-message h3 {
    color: #374151;
    margin-bottom: 0.5rem;
}

.no-data-message p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Substance Modal Styles */
#substanceModal .modal-content,
#substanceDetailsModal .modal-content {
    max-width: 1440px;
    width: 98%;
    max-height: 95vh;
}

.form-tabs {
    display: flex;
    background: #f8fafc;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.form-tabs .tab-btn {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.form-tabs .tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.form-tabs .tab-btn.active {
    background: #3b82f6;
    color: white;
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-item:hover {
    background: #f1f5f9;
    border-color: #d1d5db;
}

.checkbox-item input[type="checkbox"] {
    margin: 0;
}

.ghs-symbols .checkbox-item {
    align-items: center;
    justify-content: flex-start;
}

.ghs-symbol {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

/* File Upload Styles */
.document-upload-section {
    space-y: 2rem;
}

.document-upload-section h4 {
    margin: 2rem 0 1rem 0;
    color: #374151;
    font-weight: 600;
}

.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    background: #f9fafb;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload-area:hover,
.file-upload-area.drag-over {
    border-color: #3b82f6;
    background: #eff6ff;
}

.file-upload-area i {
    font-size: 2.5rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.file-upload-area p {
    color: #6b7280;
    margin-bottom: 1rem;
}

.uploaded-documents {
    margin-top: 2rem;
}

.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.file-icon {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.file-info {
    flex: 1;
}

.file-info strong {
    display: block;
    color: #374151;
    margin-bottom: 0.25rem;
}

.file-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6b7280;
}

/* Comments Section */
.comments-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.add-comment {
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
}

.add-comment h4 {
    margin: 0 0 1rem 0;
    color: #374151;
}

.add-comment textarea {
    width: 100%;
    margin-bottom: 1rem;
    resize: vertical;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-item {
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-header strong {
    color: #374151;
}

.comment-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.comment-text {
    color: #4b5563;
    line-height: 1.5;
}

/* Substance Details Modal */
.substance-details {
    width: 100%;
}

.detail-tabs {
    width: 100%;
}

.detail-tabs .tab-buttons {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
    background: #f8fafc;
    border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
}

.detail-tabs .tab-btn {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
}

.detail-tabs .tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.detail-tabs .tab-btn.active {
    background: #3b82f6;
    color: white;
    font-weight: 600;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-item label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.detail-item span {
    font-size: 0.875rem;
    color: #334155;
    font-weight: 500;
    word-break: break-word;
}

.ghs-symbols-display {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ghs-symbols-display .ghs-symbol {
    font-size: 1.5rem;
}

.signal-word {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.signal-word.gefahr {
    background: #dc2626;
    color: white;
}

.signal-word.achtung {
    background: #f59e0b;
    color: white;
}

.ppe-item {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.doc-icon {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.doc-info {
    flex: 1;
}

.doc-info strong {
    display: block;
    color: #374151;
    margin-bottom: 0.25rem;
}

.doc-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.doc-actions {
    display: flex;
    gap: 0.5rem;
}

/* Responsive adjustments for substances module */
@media (max-width: 768px) {
    .substance-management {
        padding: 1rem;
    }
    
    .substance-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .search-filter-section {
        gap: 1rem;
    }
    
    .filter-group {
        grid-template-columns: 1fr;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
    }
    
    .form-tabs {
        flex-wrap: wrap;
    }
    
    .form-tabs .tab-btn {
        flex: 1 1 50%;
        min-width: 120px;
        font-size: 0.75rem;
    }
    
    .detail-tabs .tab-buttons {
        flex-wrap: wrap;
    }
    
    .detail-tabs .tab-btn {
        flex: 1 1 50%;
        min-width: 120px;
        font-size: 0.75rem;
    }
    
    #substanceModal .modal-content,
    #substanceDetailsModal .modal-content {
        width: 98%;
        max-width: none;
        margin: 1% auto;
        max-height: 98vh;
    }
}

/* User Permissions Tab Styles */
.permission-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
    font-size: 0.875rem;
    color: #0369a1;
}

.permissions-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.permission-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    background: white;
    transition: all 0.2s ease;
}

.permission-item:hover:not(.disabled) {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.permission-item.disabled {
    opacity: 0.5;
    background: #f9fafb;
}

.permission-label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    margin: 0;
}

.permission-label input[type="checkbox"] {
    margin-top: 0.25rem;
    margin-right: 0;
    transform: scale(1.2);
}

.permission-details {
    flex: 1;
}

.permission-details strong {
    display: block;
    color: #374151;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.permission-description {
    display: block;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}

.permission-item.disabled .permission-label {
    cursor: not-allowed;
}

.permission-item.disabled .permission-details strong {
    color: #9ca3af;
}

.permission-item.disabled .permission-description {
    color: #d1d5db;
}

/* Responsive permissions layout */
@media (max-width: 768px) {
    .permission-item {
        padding: 1rem;
    }
    
    .permission-label {
        gap: 0.75rem;
    }
    
    .permission-details strong {
        font-size: 0.875rem;
    }
    
    .permission-description {
        font-size: 0.75rem;
    }
}

/* Module Management Styles */
.module-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}

.module-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.module-item:hover:not(.disabled) {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.module-item.disabled {
    opacity: 0.6;
    background: #f9fafb;
}

.module-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.module-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.module-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #3b82f6, #1d4ed8);
    color: white;
    border-radius: 0.75rem;
    font-size: 1.25rem;
}

.module-item.disabled .module-icon {
    background: #9ca3af;
}

.module-details h4 {
    margin: 0;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
}

.module-details p {
    margin: 0.25rem 0 0 0;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.module-item.disabled .module-details h4 {
    color: #9ca3af;
}

.module-item.disabled .module-details p {
    color: #d1d5db;
}

.module-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.module-status {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #dcfce7;
    color: #166534;
}

.module-status.disabled {
    background: #f3f4f6;
    color: #6b7280;
}

.module-users {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.module-toggle {
    flex-shrink: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    cursor: pointer;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .toggle-slider {
    background-color: #3b82f6;
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

input:disabled + .toggle-slider {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

input:disabled + .toggle-slider:before {
    background-color: #e5e7eb;
}

.settings-info {
    margin: 2rem 0;
}

.info-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
}

.info-box i {
    color: #3b82f6;
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.info-content {
    flex: 1;
}

.info-content strong {
    display: block;
    color: #1e40af;
    margin-bottom: 0.25rem;
}

.info-content p {
    margin: 0;
    color: #1e40af;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Responsive module management */
@media (max-width: 768px) {
    .module-item {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .module-info {
        width: 100%;
    }
    
    .module-header {
        gap: 0.75rem;
    }
    
    .module-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .module-details h4 {
        font-size: 1rem;
    }
    
    .module-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .toggle-switch {
        align-self: flex-end;
    }
}

/* User Module Permissions Styles */
.user-permissions-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.permission-filter {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.permission-filter .form-group {
    flex: 1;
    min-width: 200px;
}

.bulk-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bulk-actions .btn-secondary,
.bulk-actions .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.bulk-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.bulk-info i {
    color: #3b82f6;
}

.user-permissions-list {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
    max-height: 400px;
    overflow-y: auto;
}

.user-permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s;
}

.user-permission-item:last-child {
    border-bottom: none;
}

.user-permission-item:hover {
    background: #f8fafc;
}

.user-permission-item.selected {
    background: #eff6ff;
    border-color: #dbeafe;
}

.user-permission-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.user-permission-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-permission-details {
    flex: 1;
}

.user-permission-name {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.user-permission-role {
    font-size: 0.875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.user-permission-role i {
    font-size: 0.75rem;
}

.user-permission-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1rem;
}

.permission-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.permission-status-badge.granted {
    background: #dcfce7;
    color: #166534;
}

.permission-status-badge.denied {
    background: #fef2f2;
    color: #991b1b;
}

.permission-status-badge.role-based {
    background: #f0f9ff;
    color: #0c4a6e;
}

.user-permission-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.permission-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.no-users-message {
    text-align: center;
    padding: 2rem;
    color: #64748b;
    font-style: italic;
}

.no-users-message i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
}

/* Responsive Design for User Permissions */
@media (max-width: 768px) {
    .permission-filter {
        flex-direction: column;
    }
    
    .permission-filter .form-group {
        min-width: unset;
    }
    
    .bulk-actions {
        flex-direction: column;
    }
    
    .user-permission-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .user-permission-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .user-permission-status {
        margin-right: 0;
        justify-content: space-between;
    }
}

/* File Actions Styles */
.file-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.file-actions .btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.file-actions .btn-icon:hover {
    background: #f3f4f6;
    color: #374151;
    border-color: #9ca3af;
}

.file-actions .btn-icon.danger {
    color: #dc2626;
    border-color: #fca5a5;
}

.file-actions .btn-icon.danger:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #f87171;
}

.doc-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.doc-actions .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.doc-actions .btn-icon:hover {
    background: #f9fafb;
    color: #374151;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doc-actions .btn-icon[title*="anzeigen"] {
    color: #2563eb;
    border-color: #dbeafe;
}

.doc-actions .btn-icon[title*="anzeigen"]:hover {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.doc-actions .btn-icon[title*="Herunterladen"] {
    color: #059669;
    border-color: #d1fae5;
}

.doc-actions .btn-icon[title*="Herunterladen"]:hover {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

/* PDF Viewer Modal Styles */
.large-modal {
    max-width: 95vw;
    max-height: 95vh;
    width: 1400px;
}

/* Specific styling for PDF viewer modal */
#pdfViewerModal .modal-content {
    width: 98vw;
    max-width: 1680px;
    height: 98vh;
    max-height: none;
    display: flex;
    flex-direction: column;
}

#pdfViewerModal .modal-header {
    flex-shrink: 0;
}

#pdfViewerModal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pdf-viewer-body {
    padding: 0;
}

.pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.pdf-toolbar .btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.pdf-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.875rem;
    color: #6b7280;
}

.pdf-content {
    background: #f3f4f6;
    padding: 1rem;
}

.pdf-content iframe {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ====================================================================
   ENHANCED PROFILE EDITOR STYLES
   ==================================================================== */

/* Tab Content Headers */
.tab-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.tab-content-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-edit-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.tab-edit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Profile Info Display */
.profile-info-display {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-group {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}

.info-group:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.info-value {
    color: #1e293b;
    font-weight: 500;
    min-height: 1.25rem;
}

.info-value:empty::before {
    content: 'Nicht angegeben';
    color: #94a3b8;
    font-style: italic;
}

/* Sub-Modal Styles */
.sub-modal {
    z-index: 2000;
}

.sub-modal .modal-content {
    max-width: 90vw !important;
    width: 90vw !important;
    height: 90vh !important;
    margin: 5vh auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    border-radius: 8px !important;
    padding: 20px !important;
    max-height: 95vh;
    overflow-y: auto;
}

/* Editor Form Styles */
.editor-form {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.form-grid .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.2s;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Qualifications Display */
.qualifications-display {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.qualifications-list {
    display: grid;
    gap: 1rem;
}

.qualification-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s;
    position: relative;
}

.qualification-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.qualification-item.expired {
    border-color: #f87171;
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.qualification-item.expiring-soon {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.qual-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.qual-header h5 {
    margin: 0;
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
}

.qual-status {
    display: flex;
    gap: 0.5rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.valid {
    background: #dcfce7;
    color: #166534;
}

.status-badge.expiring {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.expired {
    background: #fee2e2;
    color: #991b1b;
}

.qual-details .qual-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.qual-details p {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
}

.qual-details strong {
    color: #374151;
}

/* Qualifications Editor */
.qualifications-editor {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.editor-header h4 {
    margin: 0;
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
}

.qualification-edit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.qualification-edit-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.qual-content h5 {
    margin: 0 0 0.25rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
}

.qual-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: #64748b;
}

.qual-meta span {
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.qual-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
}

.btn-small i {
    font-size: 0.875rem;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    justify-content: flex-end;
}

/* No Data State */
.no-data {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 2rem;
    background: white;
    border: 2px dashed #e2e8f0;
    border-radius: 0.75rem;
    margin: 1rem 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tab-content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .tab-edit-btn {
        align-self: stretch;
        justify-content: center;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid .form-row {
        grid-template-columns: 1fr;
    }
    
    .qualification-edit-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .qual-actions {
        align-self: stretch;
        justify-content: center;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .qual-details .qual-info {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   ADDITIONAL PROFILE EDITOR STYLES
   ==================================================================== */

/* Roles Editor */
.roles-editor {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.current-role-section {
    margin-bottom: 2rem;
}

.role-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}

.role-info h5 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.25rem;
}

.role-info p {
    margin: 0.25rem 0;
    color: #64748b;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.permission-item.granted {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.permission-item.denied {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.permission-item i {
    font-size: 1rem;
}

.permission-item.granted i {
    color: #10b981;
}

.permission-item.denied i {
    color: #ef4444;
}

.special-permissions-list {
    display: grid;
    gap: 1rem;
}

.special-permission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.permission-info h5 {
    margin: 0 0 0.25rem 0;
    color: #1e293b;
}

.permission-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.permission-status.granted {
    color: #10b981;
}

.permission-status.denied {
    color: #ef4444;
}

/* Responsibilities Editor */
.responsibilities-editor {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.resp-summary {
    margin-bottom: 2rem;
}

.resp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.resp-stat {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.resp-categories {
    display: grid;
    gap: 1.5rem;
}

.resp-category-editor {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.resp-category-editor h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.responsibility-section {
    margin-top: 1rem;
}

.responsibility-list {
    display: grid;
    gap: 0.75rem;
}

.responsibility-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.responsibility-item-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.item-name {
    font-weight: 600;
    color: #1e293b;
}

.item-status, .item-hazard, .item-role {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: #e2e8f0;
    color: #64748b;
}

.more-items {
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
    margin: 0.5rem 0 0 0;
}

/* Activity Editor */
.activity-editor {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.activity-summary {
    margin-bottom: 2rem;
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.stat-card h5 {
    margin: 0 0 0.25rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #3b82f6;
}

.stat-card p {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
}

.activity-controls {
    margin-bottom: 2rem;
}

.control-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.control-row select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    font-size: 0.875rem;
}

.activity-settings {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    margin-top: 1.5rem;
}

.setting-group {
    margin: 1rem 0;
}

.setting-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.setting-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Visibility Editor */
.visibility-editor {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.visibility-preview {
    margin-bottom: 2rem;
}

.preview-profile {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    margin-top: 1rem;
}

.preview-header {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.preview-header h5 {
    margin: 0 0 0.25rem 0;
    color: #1e293b;
    font-size: 1.125rem;
}

.preview-role {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
}

.preview-fields {
    display: grid;
    gap: 0.5rem;
}

.preview-field {
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.visibility-options {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.visibility-option {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    transition: background 0.3s;
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

input[type="checkbox"]:checked + .toggle-switch {
    background: #3b82f6;
}

input[type="checkbox"]:checked + .toggle-switch::before {
    transform: translateX(20px);
}

input[type="checkbox"] {
    display: none;
}

.option-info h5 {
    margin: 0 0 0.25rem 0;
    color: #1e293b;
    font-size: 1rem;
}

.field-description {
    margin: 0;
    color: #64748b;
    font-size: 0.75rem;
}

.gdpr-notice {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.gdpr-notice i {
    color: #f59e0b;
    margin-top: 0.125rem;
}

.gdpr-notice p {
    margin: 0;
    color: #92400e;
    font-size: 0.875rem;
}

/* Responsive adjustments for editors */
@media (max-width: 768px) {
    .resp-stats,
    .activity-stats {
        grid-template-columns: 1fr;
    }
    
    .control-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .setting-actions {
        flex-direction: column;
    }
    
    .permissions-grid {
        grid-template-columns: 1fr;
    }
    
    .role-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .special-permission-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .responsibility-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Profile Overview Styles */
.profile-overview-controls {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.profile-overview-controls .control-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.profile-overview-controls .profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.profile-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

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

.profile-card.root-admin {
    border-left: 4px solid #dc3545;
}

.profile-card.admin {
    border-left: 4px solid #fd7e14;
}

.profile-card.geschaeftsfuehrung {
    border-left: 4px solid #6f42c1;
}

.profile-card.qhse {
    border-left: 4px solid #198754;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.profile-avatar.small {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.profile-avatar.large {
    width: 60px;
    height: 60px;
    font-size: 20px;
}

.profile-basic-info h3 {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    color: #333;
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-card-body {
    margin-bottom: 15px;
}

.profile-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    color: #666;
}

.profile-detail i {
    width: 16px;
    color: #007bff;
}

.profile-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-small.btn-primary {
    background: #007bff;
    color: white;
}

.btn-small.btn-primary:hover {
    background: #0056b3;
}

.btn-small.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-small.btn-secondary:hover {
    background: #545762;
}

/* Table View Styles */
.profile-table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
}

.profile-table th {
    background: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.profile-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
}

.profile-row:hover {
    background: #f8f9fa;
}

.profile-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-actions {
    display: flex;
    gap: 5px;
}

.btn-icon {
    padding: 6px;
    border: none;
    background: none;
    color: #6c757d;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #e9ecef;
    color: #007bff;
}

/* Detailed Profiles View */
.detailed-profiles-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.detailed-profile-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detailed-profile-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-header-info {
    flex: 1;
}

.profile-header-info h2 {
    margin: 0 0 10px 0;
    color: #333;
}

.profile-actions-header {
    display: flex;
    gap: 10px;
}

.detailed-profile-body {
    padding: 20px;
}

.profile-section {
    margin-bottom: 25px;
}

.profile-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 1.1rem;
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.info-item label {
    font-weight: 500;
    color: #666;
}

.qualification-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.qualification-stat {
    text-align: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    min-width: 80px;
}

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-number.active {
    color: #28a745;
}

.stat-number.expired {
    color: #dc3545;
}

.stat-label {
    font-size: 0.85rem;
    color: #666;
}

.qualification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qualification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    gap: 10px;
}

.qualification-item.active {
    background: #d4edda;
    border-left: 4px solid #28a745;
}

.qualification-item.expired {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
}

.qualification-name {
    flex: 1;
    font-weight: 500;
}

.qualification-expiry {
    font-size: 0.9rem;
    color: #666;
}

.more-qualifications {
    padding: 8px;
    text-align: center;
    color: #666;
    font-style: italic;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.permission-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
}

.permission-label {
    font-weight: 500;
    color: #666;
}

.permission-value {
    color: #333;
}

/* Status Badges */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge.inactive {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* User Report Styles */
.report-controls {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.report-controls .control-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.report-controls .report-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.report-preview {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.report-summary {
    margin-bottom: 30px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 15px 0;
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.report-section {
    margin: 30px 0;
}

.report-section h4 {
    color: #495057;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: white;
}

.report-table th,
.report-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.report-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.report-table tr:nth-child(even) {
    background: #f8f9fa;
}

.department-breakdown,
.role-distribution {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 0 8px 8px 0;
}

.department-breakdown h5,
.role-distribution h5 {
    margin: 0 0 10px 0;
    color: #333;
}

.dept-stats,
.qual-stats {
    margin: 10px 0;
}

.dept-stats span,
.qual-stats span {
    display: inline-block;
    margin-right: 20px;
    padding: 4px 8px;
    background: white;
    border-radius: 4px;
    font-weight: 500;
}

.role-breakdown {
    margin-top: 10px;
}

.role-stat {
    display: inline-block;
    margin: 2px 5px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9rem;
}

.user-list {
    margin: 10px 0;
    padding-left: 20px;
}

.user-list li {
    margin: 5px 0;
    color: #666;
}

.qualification-overview {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Profile Overview Responsive Design */
@media (max-width: 768px) {
    .profile-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-overview-controls .control-group {
        grid-template-columns: 1fr;
    }
    
    .profile-overview-controls .profile-actions {
        justify-content: center;
    }
    
    .detailed-profile-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .profile-info-grid {
        grid-template-columns: 1fr;
    }
    
    .qualification-summary {
        flex-direction: column;
        gap: 10px;
    }
    
    .permissions-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

/* ========================================
   TRAINING MANAGEMENT STYLES
   ======================================== */

/* Training Dashboard */
.training-dashboard {
    margin-bottom: 30px;
}

.training-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #007bff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.stat-card:nth-child(2) {
    border-left-color: #28a745;
}

.stat-card:nth-child(3) {
    border-left-color: #ffc107;
}

.stat-card:nth-child(4) {
    border-left-color: #dc3545;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #007bff;
}

.stat-card:nth-child(2) .stat-icon {
    color: #28a745;
}

.stat-card:nth-child(3) .stat-icon {
    color: #ffc107;
}

.stat-card:nth-child(4) .stat-icon {
    color: #dc3545;
}

.stat-content h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.stat-content p {
    margin: 5px 0 0 0;
    color: #666;
    font-size: 0.9rem;
}

/* Quick Actions */
.training-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.quick-action-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s ease;
}

.quick-action-card:hover {
    transform: translateY(-2px);
}

.quick-action-card h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.quick-action-card p {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 0.9rem;
}

/* Training Tabs */
.training-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #dee2e6;
    overflow-x: auto;
}

.training-tab-btn {
    flex: 1;
    min-width: 150px;
    padding: 15px 20px;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
}

.training-tab-btn:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.training-tab-btn.active {
    background: white;
    color: #007bff;
    border-bottom-color: #007bff;
}

.training-tab-content {
    background: white;
    border-radius: 0 0 8px 8px;
    min-height: 400px;
}

.training-tab-panel {
    display: none;
    padding: 30px;
}

.training-tab-panel.active {
    display: block;
}

/* Training Filters */
.training-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.filter-group select,
.filter-group input {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 0.9rem;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Training Cards */
.training-list {
    display: grid;
    gap: 20px;
}

.training-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

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

.training-card-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 15px;
}

.training-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.training-info h4 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1.1rem;
}

.training-description {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.training-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.training-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #6c757d;
}

.training-meta i {
    color: #007bff;
}

.training-status {
    display: flex;
    align-items: flex-start;
}

.training-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Training Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-badge.completed {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge.in-progress {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.status-badge.assigned {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-badge.overdue {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-badge.not-assigned {
    background: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* My Trainings Specific Styles */
.my-trainings-header {
    margin-bottom: 25px;
}

.my-trainings-header h3 {
    margin: 0 0 15px 0;
    color: #333;
}

.training-progress {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

.progress-info {
    margin-bottom: 10px;
    font-weight: 500;
    color: #495057;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.my-training-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s ease;
}

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

.my-training-card.overdue {
    border-left: 4px solid #dc3545;
    background: #fff5f5;
}

.my-training-card.completed {
    border-left: 4px solid #28a745;
}

.my-training-card.in-progress {
    border-left: 4px solid #007bff;
}

.training-progress-indicator {
    display: flex;
    align-items: center;
}

.progress-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    background: #6c757d;
}

.progress-circle.completed {
    background: #28a745;
}

.progress-circle.in-progress {
    background: #007bff;
}

.progress-circle.assigned {
    background: #ffc107;
    color: #333;
}

.my-training-info h4 {
    margin: 0 0 8px 0;
    color: #333;
}

.my-training-info p {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 0.9rem;
}

.training-details {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.training-details span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #6c757d;
}

.training-details .training-status {
    font-weight: 500;
}

.training-details .training-status.completed {
    color: #28a745;
}

.training-details .training-status.in-progress {
    color: #007bff;
}

.training-details .training-status.overdue {
    color: #dc3545;
}

.my-training-actions {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

/* All Trainings Admin View */
.all-trainings-header,
.assignments-header,
.certificates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
}

.all-trainings-header h3,
.assignments-header h3,
.certificates-header h3 {
    margin: 0;
    color: #333;
}

.training-controls {
    display: flex;
    gap: 10px;
}

/* Assignment Filters */
.assignments-grid {
    margin-bottom: 25px;
}

.assignment-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.assignment-filters select,
.assignment-filters input {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 0.9rem;
}

/* Certificate Filters */
.certificates-grid {
    margin-bottom: 25px;
}

.certificate-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.certificate-filters select,
.certificate-filters input {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 0.9rem;
}

/* No Data Messages */
.no-data-message {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.no-data-message i {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 15px;
}

.no-data-message h3 {
    margin: 0 0 10px 0;
    color: #495057;
}

.no-data-message p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design for Training Management */
@media (max-width: 768px) {
    .training-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .training-quick-actions {
        grid-template-columns: 1fr;
    }
    
    .training-tabs {
        flex-direction: column;
    }
    
    .training-tab-btn {
        min-width: auto;
        flex: none;
    }
    
    .training-filters {
        grid-template-columns: 1fr;
    }
    
    .training-card-header {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .training-card-actions {
        justify-content: center;
    }
    
    .my-training-card {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }
    
    .my-training-actions {
        flex-direction: row;
        justify-content: center;
    }
    
    .all-trainings-header,
    .assignments-header,
    .certificates-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .training-controls {
        justify-content: center;
    }
    
    .assignment-filters,
    .certificate-filters {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ADDITIONAL TRAINING MODAL STYLES
   ======================================== */

/* Large Modal */
.large-modal {
    max-width: 90%;
    width: 900px;
}

/* Training Detail Modal */
.training-detail-modal .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.training-detail-modal .detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.training-detail-modal .detail-item label {
    font-weight: 600;
    color: #64748b;
    font-size: 0.875rem;
}

.training-detail-modal .role-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.training-detail-modal .role-tag {
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Training Form Styles */
.form-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: #f8fafc;
}

.form-section h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-item:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
}

.checkbox-item input[type="checkbox"] {
    margin: 0;
}

/* Assignment Modal Styles */
.user-selection {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
}

.selection-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
}

.user-item:hover {
    background: #f8fafc;
}

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

.user-item label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-info strong {
    color: #1e293b;
    font-weight: 600;
}

.user-info small {
    color: #64748b;
    font-size: 0.875rem;
}

/* Bulk Assignment Modal */
.bulk-assignment-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.training-selection,
.bulk-user-selection {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    max-height: 300px;
    overflow-y: auto;
}

.selection-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.375rem;
}

.selection-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.selection-content.hidden {
    display: none;
}

/* Wizard Styles */
.assignment-wizard {
    min-height: 400px;
}

.wizard-step {
    display: none;
}

.wizard-step.active {
    display: block;
}

.training-list-selection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

.training-option {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    transition: all 0.2s ease;
}

.training-option:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.training-option label {
    display: block;
    cursor: pointer;
}

.training-option strong {
    color: #1e293b;
    font-size: 1.125rem;
    display: block;
    margin-bottom: 0.5rem;
}

.training-option p {
    color: #64748b;
    margin-bottom: 0.5rem;
}

.training-option small {
    color: #94a3b8;
    font-size: 0.875rem;
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Reports Modal */
.reports-dashboard {
    min-height: 500px;
}

.report-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

.report-tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: none;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.report-tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.report-tab-btn:hover {
    color: #1e293b;
    background: #f8fafc;
}

.report-panel {
    display: none;
}

.report-panel.active {
    display: block;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-item {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.stat-item h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.stat-item p {
    color: #64748b;
    font-weight: 500;
}

.category-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.category-item {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.category-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.category-bar {
    height: 0.5rem;
    background: #f1f5f9;
    border-radius: 0.25rem;
    overflow: hidden;
}

.category-fill {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.compliance-table {
    overflow-x: auto;
}

.compliance-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.compliance-table th,
.compliance-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.compliance-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #1e293b;
}

.compliance-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.compliance-badge.good {
    background: #dcfce7;
    color: #166534;
}

.compliance-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.compliance-badge.critical {
    background: #fee2e2;
    color: #dc2626;
}

/* Calendar Styles */
.calendar-container {
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.calendar-controls h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-header {
    display: contents;
}

.day-header {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.calendar-day {
    min-height: 100px;
    padding: 0.5rem;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    background: white;
}

.calendar-day.empty {
    background: #f8fafc;
}

.day-number {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.event {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.event.deadline {
    background: #dbeafe;
    color: #1d4ed8;
}

.event.completed {
    background: #dcfce7;
    color: #166534;
}

.event.overdue {
    background: #fee2e2;
    color: #dc2626;
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
}

.legend-color {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
}

.legend-color.deadline {
    background: #dbeafe;
}

.legend-color.completed {
    background: #dcfce7;
}

.legend-color.overdue {
    background: #fee2e2;
}

/* Progress Modal */
.progress-overview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.progress-chart {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.progress-chart h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.assignment-details {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.assignment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assignment-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
}

.assignment-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar-small {
    width: 100px;
    height: 0.5rem;
    background: #f1f5f9;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-fill-small {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.progress-percent {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

/* Responsive Design for Training Modals */
@media (max-width: 768px) {
    .large-modal {
        max-width: 98%;
        width: 100%;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .selection-filters {
        grid-template-columns: 1fr;
    }
    
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .calendar-grid {
        font-size: 0.875rem;
    }
    
    .calendar-day {
        min-height: 80px;
        padding: 0.25rem;
    }
    
    .wizard-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .report-tabs {
        flex-wrap: wrap;
    }
    
    .report-tab-btn {
        flex: 1;
        min-width: 120px;
    }
}

/* ========================================
   DETAILED TRAINING CARDS
   ======================================== */

.detailed-training-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.detailed-training-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.training-card-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.training-main-info h4 {
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.training-main-info p {
    color: #64748b;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.training-meta-extended {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: #64748b;
}

.training-meta-extended span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.training-actions-extended {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.training-progress-bar {
    height: 0.5rem;
    background: #f1f5f9;
    margin: 0 1.5rem 1rem;
    border-radius: 0.25rem;
    overflow: hidden;
}

/* Assignment Cards */
.assignment-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.assignment-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.assignment-card.assigned {
    border-left: 4px solid #3b82f6;
}

.assignment-card.in_progress {
    border-left: 4px solid #f59e0b;
}

.assignment-card.completed {
    border-left: 4px solid #10b981;
}

.assignment-card.overdue {
    border-left: 4px solid #ef4444;
}

.assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.assignment-info h4 {
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.assignment-info p {
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.875rem;
}

.assignment-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.assignment-priority {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.assignment-priority.normal {
    background: #f1f5f9;
    color: #64748b;
}

.assignment-priority.high {
    background: #fef3c7;
    color: #92400e;
}

.assignment-priority.urgent {
    background: #fee2e2;
    color: #dc2626;
}

.assignment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #64748b;
}

.assignment-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.assignment-progress-bar {
    height: 0.75rem;
    background: #f1f5f9;
    border-radius: 0.375rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.assignment-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Certificate View Modal */
.certificate-viewer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.certificate-info-panel {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.certificate-info-panel h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.info-grid {
    display: grid;
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-item label {
    font-weight: 600;
    color: #64748b;
    font-size: 0.875rem;
}

.info-item span {
    color: #1e293b;
}

.certificate-preview {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.no-preview {
    text-align: center;
    color: #64748b;
    font-style: italic;
}

.file-preview {
    text-align: center;
    color: #64748b;
}

.file-preview i {
    margin-bottom: 1rem;
    color: #94a3b8;
}

.certificate-view-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Assignment Progress Modal */
.progress-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.progress-info,
.progress-status,
.progress-update {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.progress-info h3,
.progress-status h3,
.progress-update h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.progress-info p,
.progress-status p {
    margin-bottom: 0.5rem;
    color: #64748b;
}

.btn-success {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-success:hover {
    background: #059669;
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Responsive Design for Additional Components */
@media (max-width: 768px) {
    .certificate-viewer {
        grid-template-columns: 1fr;
    }
    
    .training-card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .training-actions-extended {
        width: 100%;
        justify-content: space-between;
    }
    
    .assignment-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .assignment-actions {
        justify-content: space-between;
    }
    
    .progress-details {
        grid-template-columns: 1fr;
    }
    
    .certificate-view-actions {
        flex-direction: column;
    }
}

/* ====================================
   SUPPLIER MANAGEMENT STYLES
   ==================================== */

/* Supplier Dashboard */
.supplier-dashboard {
    margin-bottom: 2rem;
}

.supplier-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.supplier-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Supplier Content */
.supplier-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Supplier Tabs */
.supplier-tabs {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.supplier-tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supplier-tab-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.supplier-tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: white;
}

.supplier-tab-btn i {
    font-size: 0.875rem;
}

/* Supplier Tab Content */
.supplier-tab-content {
    min-height: 500px;
}

.supplier-tab-panel {
    display: none;
    padding: 2rem;
}

.supplier-tab-panel.active {
    display: block;
}

/* Supplier Overview */
.supplier-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.overview-section {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.overview-section h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.evaluation-summary,
.certificate-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.evaluation-item,
.certificate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.evaluation-item:last-child,
.certificate-item:last-child {
    border-bottom: none;
}

.evaluation-label,
.certificate-label {
    font-weight: 500;
    color: #374151;
}

.evaluation-value {
    font-weight: 600;
    color: #3b82f6;
}

.certificate-value {
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.certificate-value.warning {
    background: #fef3c7;
    color: #92400e;
}

.certificate-value.error {
    background: #fee2e2;
    color: #991b1b;
}

/* Recent Activities */
.recent-activities {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}

.recent-activities h3 {
    margin-bottom: 1rem;
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.activity-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.activity-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.activity-content p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #64748b;
}

.activity-date {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Supplier Filters */
.suppliers-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 2rem;
}

.suppliers-header h3 {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.supplier-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 150px;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.filter-group select,
.filter-group input {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: white;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Supplier Cards */
.suppliers-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.supplier-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    position: relative;
}

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

.supplier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.supplier-info h3 {
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.supplier-number {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0 0 0.25rem 0;
    font-weight: 500;
}

.supplier-type {
    color: #3b82f6;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

.supplier-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.success {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.info {
    background: #dbeafe;
    color: #1d4ed8;
}

.supplier-rating {
    padding: 0.5rem;
    border-radius: 8px;
    text-align: center;
    min-width: 60px;
}

.supplier-rating.excellent {
    background: #d1fae5;
    color: #065f46;
}

.supplier-rating.good {
    background: #d9f99d;
    color: #365314;
}

.supplier-rating.warning {
    background: #fef3c7;
    color: #92400e;
}

.supplier-rating.critical {
    background: #fee2e2;
    color: #991b1b;
}

.rating-value {
    font-weight: 700;
    font-size: 0.875rem;
}

/* Supplier Details */
.supplier-details {
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
}

.detail-value {
    color: #1e293b;
    font-size: 0.875rem;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* Supplier Actions */
.supplier-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

/* Evaluation Headers */
.evaluations-header,
.documents-header,
.audits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.evaluations-header h3,
.documents-header h3,
.audits-header h3 {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.evaluation-controls,
.document-controls,
.audit-controls {
    display: flex;
    gap: 0.75rem;
}

/* Document Grid */
.documents-grid {
    margin-bottom: 2rem;
}

.document-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.document-filters select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: white;
    min-width: 150px;
}

/* Placeholder Content */
.placeholder-content {
    text-align: center;
    padding: 4rem 2rem;
    color: #64748b;
}

.placeholder-content i {
    color: #94a3b8;
    margin-bottom: 1rem;
}

.placeholder-content h3 {
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.placeholder-content p {
    color: #64748b;
    font-size: 0.875rem;
}

/* Supplier Modal Specific Styles */
.supplier-modal .modal-content {
    max-width: 90vw !important;
    width: 90vw !important;
    height: 90vh !important;
    margin: 5vh auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.form-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 2rem;
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
}

.tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

.tab-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-group label {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group small {
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Responsive Design for Supplier Management */
@media (max-width: 768px) {
    .supplier-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .supplier-quick-actions {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .suppliers-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .supplier-filters {
        width: 100%;
        justify-content: space-between;
    }
    
    .filter-group {
        min-width: 120px;
        flex: 1;
    }
    
    .suppliers-list {
        grid-template-columns: 1fr;
    }
    
    .supplier-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .supplier-status {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    .supplier-actions {
        justify-content: space-between;
    }
    
    .supplier-actions .btn-sm {
        flex: 1;
        text-align: center;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
    
    .supplier-tabs {
        flex-wrap: wrap;
    }
    
    .supplier-tab-btn {
        flex: 1;
        min-width: 120px;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .supplier-tab-panel {
        padding: 1rem;
    }
    
    .supplier-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .evaluations-header,
    .documents-header,
    .audits-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .evaluation-controls,
    .document-controls,
    .audit-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .document-filters {
        flex-direction: column;
    }
    
    .document-filters select {
        width: 100%;
    }
    
    .form-tabs {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1;
        min-width: 100px;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .supplier-card {
        padding: 1rem;
    }
    
    .supplier-actions {
        flex-direction: column;
    }
    
    .supplier-actions .btn-sm {
        width: 100%;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .detail-value {
        max-width: 100%;
        text-align: left;
    }
}

/* Supplier Tab Panel Styles */
.supplier-tab-panel {
    display: none;
    padding: 2rem;
    background: white;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.supplier-tab-panel.active {
    display: block;
}

.supplier-tab-btn {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supplier-tab-btn:hover {
    color: #334155;
    background: #f8fafc;
}

.supplier-tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: white;
}

.supplier-tabs {
    display: flex;
    background: #f1f5f9;
    border-radius: 0.5rem 0.5rem 0 0;
    overflow-x: auto;
}

/* Supplier Modal Styles */
.large-modal {
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.supplier-form-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.supplier-form-tab {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supplier-form-tab:hover {
    background: #f1f5f9;
    color: #334155;
}

.supplier-form-tab.active {
    background: #3b82f6;
    color: white;
}

.supplier-form-content {
    display: none;
}

.supplier-form-content.active {
    display: block;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.evaluation-criteria {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.criterion {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.criterion label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #334155;
}

.score-input {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.score-input input[type="range"] {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    outline: none;
    border-radius: 4px;
    appearance: none;
}

.score-input input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    cursor: pointer;
    border-radius: 50%;
}

.score-input input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

.score-input span {
    min-width: 50px;
    text-align: center;
    font-weight: 600;
    color: #3b82f6;
}

.overall-score {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.overall-score h4 {
    margin: 0;
    font-size: 1.25rem;
}

.certificates-section .section-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 1rem;
}

.certificates-list {
    display: grid;
    gap: 1rem;
}

/* Reports Modal Styles */
.reports-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.reports-tab {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reports-tab:hover {
    background: #f1f5f9;
    color: #334155;
}

.reports-tab.active {
    background: #3b82f6;
    color: white;
}

.reports-tab-content {
    display: none;
}

.reports-tab-content.active {
    display: block;
}

.report-summary {
    margin-bottom: 2rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.summary-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.summary-card h4 {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: #334155;
}

.summary-value.success {
    color: #059669;
}

.summary-value.warning {
    color: #d97706;
}

.summary-value.danger {
    color: #dc2626;
}

.report-charts {
    display: grid;
    gap: 2rem;
}

.chart-section h4 {
    margin-bottom: 1rem;
    color: #334155;
}

.chart-bars {
    display: grid;
    gap: 0.75rem;
}

.chart-bar {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 1rem;
}

.bar-label {
    font-weight: 500;
    color: #334155;
}

.bar-container {
    position: relative;
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 0.25rem;
    height: 32px;
    overflow: hidden;
}

.bar {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
    border-radius: 0.25rem;
}

.bar.status-freigegeben {
    background: #059669;
}

.bar.status-kritisch {
    background: #d97706;
}

.bar.status-gesperrt {
    background: #dc2626;
}

.bar.status-neu {
    background: #6366f1;
}

.bar-value {
    position: absolute;
    right: 0.5rem;
    font-weight: 600;
    color: #334155;
    font-size: 0.875rem;
}

.performance-tables {
    display: grid;
    gap: 2rem;
}

.performance-table h4 {
    margin-bottom: 1rem;
    color: #334155;
}

.performance-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.performance-table th,
.performance-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.performance-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
}

.score-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.score-badge.success {
    background: #d1fae5;
    color: #065f46;
}

.score-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.score-badge.danger {
    background: #fee2e2;
    color: #991b1b;
}

.compliance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.compliance-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.compliance-card h4 {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.compliance-value {
    font-size: 2rem;
    font-weight: 700;
}

.compliance-value.success {
    color: #059669;
}

.compliance-value.warning {
    color: #d97706;
}

.compliance-value.danger {
    color: #dc2626;
}

.expiring-certificates {
    margin-top: 2rem;
}

.expiring-certificates h4 {
    margin-bottom: 1rem;
    color: #334155;
}

.expiring-certificates table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.expiring-certificates th,
.expiring-certificates td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.expiring-certificates th {
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
}

.days-left {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.days-left.warning {
    background: #fef3c7;
    color: #92400e;
}

.days-left.danger {
    background: #fee2e2;
    color: #991b1b;
}

.no-issues {
    text-align: center;
    padding: 2rem;
    color: #059669;
    font-weight: 500;
}

/* Evaluation Tab Styles */
.evaluations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.evaluations-list {
    display: grid;
    gap: 1rem;
}

.evaluation-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.2s;
}

.evaluation-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.evaluation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.evaluation-header h4 {
    margin: 0;
    color: #334155;
}

.evaluation-score {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.evaluation-score.success {
    background: #d1fae5;
    color: #065f46;
}

.evaluation-score.warning {
    background: #fef3c7;
    color: #92400e;
}

.evaluation-score.danger {
    background: #fee2e2;
    color: #991b1b;
}

.evaluation-criteria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.criterion-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.evaluation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    color: #64748b;
    font-size: 0.875rem;
}

.evaluation-actions {
    display: flex;
    gap: 0.5rem;
}

/* Documents Tab Styles */
.documents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.documents-filters {
    display: flex;
    gap: 1rem;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.document-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}

.document-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-icon {
    width: 48px;
    height: 48px;
    background: #3b82f6;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.document-info {
    flex: 1;
}

.document-info h4 {
    margin: 0 0 0.25rem 0;
    color: #334155;
    font-size: 1rem;
}

.document-supplier {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
}

.document-expiry {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.document-expiry.valid {
    background: #d1fae5;
    color: #065f46;
}

.document-expiry.expiring {
    background: #fef3c7;
    color: #92400e;
}

.document-expiry.expired {
    background: #fee2e2;
    color: #991b1b;
}

.document-actions {
    display: flex;
    gap: 0.5rem;
}

/* Audits Tab Styles */
.audits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.audits-actions {
    display: flex;
    gap: 1rem;
}

.audits-calendar h4 {
    margin-bottom: 1rem;
    color: #334155;
}

.audits-timeline {
    display: grid;
    gap: 1rem;
}

.audit-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}

.audit-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.audit-item.priority-high {
    border-left: 4px solid #dc2626;
}

.audit-item.priority-medium {
    border-left: 4px solid #d97706;
}

.audit-item.priority-low {
    border-left: 4px solid #059669;
}

.audit-date {
    text-align: center;
    min-width: 60px;
}

.audit-day {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #334155;
}

.audit-month {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
}

.audit-details {
    flex: 1;
}

.audit-details h4 {
    margin: 0 0 0.25rem 0;
    color: #334155;
}

.audit-type {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
}

.audit-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.audit-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.audit-status.status-planned {
    background: #e0e7ff;
    color: #3730a3;
}

.audit-status.status-scheduled {
    background: #fef3c7;
    color: #92400e;
}

.audit-status.status-urgent {
    background: #fee2e2;
    color: #991b1b;
}

.audit-score {
    font-size: 0.75rem;
    font-weight: 600;
}

.audit-actions {
    display: flex;
    gap: 0.5rem;
}

/* Certificate Management Styles */
.certificate-field {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: #f8fafc;
}

.certificate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.certificate-header h4 {
    margin: 0;
    color: #334155;
}

.certificate-preview {
    margin-top: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
}

.preview-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.preview-icon {
    font-size: 2rem;
    color: #dc2626;
}

.preview-icon.fa-file-image {
    color: #059669;
}

.preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-name {
    font-weight: 500;
    color: #334155;
}

.preview-size {
    font-size: 0.875rem;
    color: #64748b;
}

.preview-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-danger {
    background: #dc2626;
    color: white;
    border: 1px solid #dc2626;
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

/* File input styling */
input[type="file"] {
    margin-bottom: 0.5rem;
}

input[type="file"]::file-selector-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-right: 1rem;
}

input[type="file"]::file-selector-button:hover {
    background: #2563eb;
}

.no-file-text {
    color: #64748b;
    font-style: italic;
    font-size: 0.875rem;
}

/* Print Styles for Supplier Management */
@media print {
    .supplier-tabs,
    .supplier-actions,
    .evaluation-controls,
    .document-controls,
    .audit-controls {
        display: none;
    }
    
    .supplier-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .supplier-tab-panel {
        display: block !important;
        padding: 0;
    }
}

/* ====================================
   VACATION PLANNING & ABSENCE MANAGEMENT STYLES
   ==================================== */

/* Vacation Dashboard */
.vacation-dashboard {
    margin-bottom: 2rem;
}

.vacation-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.vacation-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.quick-action-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.quick-action-card h4 {
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.quick-action-card p {
    color: #64748b;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Vacation Tabs */
.vacation-tabs {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 2rem;
    overflow-x: auto;
}

.vacation-tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    color: #64748b;
    font-weight: 500;
}

.vacation-tab-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.vacation-tab-btn.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vacation-tab-btn i {
    margin-right: 0.5rem;
}

/* Tab Panels */
.vacation-tab-panel {
    display: none;
}

.vacation-tab-panel.active {
    display: block;
}

/* Calendar Styles */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calendar-navigation h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.25rem;
    min-width: 150px;
    text-align: center;
}

.calendar-views {
    display: flex;
    gap: 0.5rem;
}

.view-btn {
    background: #f1f5f9;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
    font-weight: 500;
}

.view-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.view-btn.active {
    background: #3b82f6;
    color: white;
}

.calendar-filters {
    display: flex;
    gap: 0.5rem;
}

.calendar-filters select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
}

/* Calendar Legend */
.calendar-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-color.urlaub {
    background: #3b82f6;
}

.legend-color.sonderurlaub {
    background: #8b5cf6;
}

.legend-color.schulung {
    background: #10b981;
}

.legend-color.krankheit {
    background: #ef4444;
}

.legend-color.gleitzeit {
    background: #f59e0b;
}

/* Calendar Grid */
.calendar-grid {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.calendar-weekday {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: #64748b;
    font-size: 0.875rem;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    min-height: 120px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem;
    position: relative;
    background: white;
    transition: background-color 0.2s;
}

.calendar-day:hover {
    background: #f8fafc;
}

.calendar-day.other-month {
    background: #f8fafc;
    color: #9ca3af;
}

.calendar-day.today {
    background: #dbeafe;
}

.calendar-day-number {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.calendar-day.other-month .calendar-day-number {
    color: #9ca3af;
}

.calendar-day.today .calendar-day-number {
    color: #3b82f6;
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-event {
    background: #3b82f6;
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.2s;
}

.calendar-event:hover {
    opacity: 0.8;
}

.calendar-event.urlaub {
    background: #3b82f6;
}

.calendar-event.sonderurlaub {
    background: #8b5cf6;
}

.calendar-event.schulung {
    background: #10b981;
}

.calendar-event.krankheit {
    background: #ef4444;
}

.calendar-event.gleitzeit {
    background: #f59e0b;
}

/* Vacation Balance */
.vacation-balance {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vacation-balance h4 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.balance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
}

.balance-label {
    color: #64748b;
    font-weight: 500;
}

.balance-value {
    font-weight: 600;
    color: #1e293b;
}

.balance-value.available {
    color: #10b981;
}

/* Requests List */
.requests-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.requests-filters {
    display: flex;
    gap: 0.5rem;
}

.requests-filters select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
}

.requests-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.request-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.request-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.request-info h4 {
    margin: 0 0 0.25rem 0;
    color: #1e293b;
}

.request-period {
    color: #64748b;
    font-size: 0.875rem;
}

.request-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.approved {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.rejected {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.cancelled {
    background: #f3f4f6;
    color: #6b7280;
}

.request-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.detail-value {
    color: #1e293b;
    font-weight: 500;
}

.request-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Approval Styles */
.approval-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.approval-filters {
    display: flex;
    gap: 0.5rem;
}

.pending-approvals {
    margin-bottom: 2rem;
}

.approvals-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.approval-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #f59e0b;
}

.approval-card.urgent {
    border-left-color: #ef4444;
}

.approval-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.approval-actions {
    display: flex;
    gap: 0.5rem;
}

/* Team Overview */
.team-overview {
    margin-top: 2rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.team-member-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.team-member-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.team-member-name {
    font-weight: 600;
    color: #1e293b;
}

.team-member-role {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-member-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
}

.team-member-status.available {
    background: #d1fae5;
    color: #065f46;
}

.team-member-status.absent {
    background: #fee2e2;
    color: #991b1b;
}

.team-member-absence {
    font-size: 0.875rem;
    color: #64748b;
}

/* Conflict Warnings */
.conflict-warnings {
    margin-bottom: 1.5rem;
}

.conflict-warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.conflict-warning.critical {
    background: #fee2e2;
    border-color: #ef4444;
}

.conflict-warning h5 {
    margin: 0 0 0.5rem 0;
    color: #92400e;
}

.conflict-warning.critical h5 {
    color: #991b1b;
}

.conflict-details {
    font-size: 0.875rem;
    color: #78350f;
}

.conflict-warning.critical .conflict-details {
    color: #7f1d1d;
}

/* Administration Styles */
.admin-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.admin-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-section h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
}

.admin-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.entitlements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.entitlement-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
}

.entitlement-employee {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.entitlement-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #64748b;
}

.holidays-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.holiday-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.holiday-name {
    font-weight: 500;
    color: #1e293b;
}

.holiday-date {
    color: #64748b;
    font-size: 0.875rem;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.report-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.report-card:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.report-icon {
    font-size: 2rem;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}

.report-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.report-description {
    font-size: 0.75rem;
    color: #64748b;
}

/* Modal Enhancements for Vacation */
.vacation-summary {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    border: 1px solid #e2e8f0;
}

.vacation-summary h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-label {
    font-size: 0.875rem;
    color: #64748b;
}

.summary-value {
    font-weight: 600;
    color: #1e293b;
}

.conflict-check {
    margin-top: 1rem;
}

.conflict-alert {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.conflict-alert.error {
    background: #fee2e2;
    border-color: #ef4444;
}

.conflict-alert h6 {
    margin: 0 0 0.25rem 0;
    color: #92400e;
}

.conflict-alert.error h6 {
    color: #991b1b;
}

.approval-details {
    margin-bottom: 1.5rem;
}

.request-info {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.info-value {
    color: #1e293b;
    font-weight: 500;
}

.team-impact {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
}

.vacation-details {
    background: white;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.request-id {
    font-family: monospace;
    font-size: 0.875rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.detail-section h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.workflow-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
}

.workflow-step.completed {
    background: #d1fae5;
}

.workflow-step.current {
    background: #dbeafe;
}

.workflow-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    background: #9ca3af;
}

.workflow-step.completed .workflow-icon {
    background: #10b981;
}

.workflow-step.current .workflow-icon {
    background: #3b82f6;
}

.workflow-content {
    flex: 1;
}

.workflow-title {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.875rem;
}

.workflow-date {
    font-size: 0.75rem;
    color: #64748b;
}

.details-comments {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
}

.comments-section {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vacation-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .vacation-quick-actions {
        grid-template-columns: 1fr;
    }
    
    .calendar-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .calendar-navigation {
        justify-content: center;
    }
    
    .calendar-views,
    .calendar-filters {
        justify-content: center;
    }
    
    .vacation-tabs {
        flex-direction: column;
    }
    
    .vacation-tab-btn {
        text-align: center;
    }
    
    .balance-grid {
        grid-template-columns: 1fr;
    }
    
    .request-header {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .request-details {
        grid-template-columns: 1fr;
    }
    
    .details-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .entitlements-grid,
    .reports-grid {
        grid-template-columns: 1fr;
    }
}

/* Print Styles for Vacation Management */
@media print {
    .vacation-tabs,
    .section-actions,
    .calendar-header,
    .request-actions,
    .approval-actions,
    .admin-controls {
        display: none;
    }
    
    .vacation-tab-panel {
        display: block !important;
    }
    
    .request-card,
    .approval-card,
    .team-member-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .calendar-grid {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Color Theme Selection Styles */
.color-theme-preview {
    margin: 1rem 0;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--card-bg);
}

.theme-option:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-option.selected {
    border-color: var(--accent-color);
    background: var(--hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-colors {
    display: flex;
    gap: 4px;
    margin-bottom: 0.5rem;
}

.color-primary,
.color-secondary,
.color-accent {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-option span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

/* Theme Selection Active State */
.theme-option.active {
    border-color: var(--accent-color);
    background: var(--hover-bg);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.theme-option.active span {
    color: var(--accent-color);
    font-weight: 600;
}

/* Color Mode Selector */
.color-mode-selector {
    margin: 1rem 0;
}

.mode-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.mode-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
}

.mode-tab:hover {
    background: rgba(var(--accent-color), 0.1);
    color: var(--accent-color);
}

.mode-tab.active {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-mode-content {
    margin: 1rem 0;
}

/* Section Color Settings */
.section-color-settings {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}

.section-color-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.section-color-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.section-info i {
    width: 20px;
    text-align: center;
    color: var(--accent-color);
    font-size: 16px;
}

.section-info span {
    font-weight: 500;
    color: var(--text-primary);
}

.section-color-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: var(--text-primary);
    font-size: 14px;
    min-width: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.section-color-select:hover {
    border-color: var(--accent-color);
}

.section-color-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Individual Section Color Overrides */
.menu-item[data-section="dashboard"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="dashboard"].color-green { --section-accent: #10b981; }
.menu-item[data-section="dashboard"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="dashboard"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="dashboard"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="dashboard"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="dashboard"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="mein-profil"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="mein-profil"].color-green { --section-accent: #10b981; }
.menu-item[data-section="mein-profil"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="mein-profil"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="mein-profil"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="mein-profil"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="mein-profil"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="arbeitsschutz"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="arbeitsschutz"].color-green { --section-accent: #10b981; }
.menu-item[data-section="arbeitsschutz"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="arbeitsschutz"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="arbeitsschutz"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="arbeitsschutz"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="arbeitsschutz"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="qualitaet"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="qualitaet"].color-green { --section-accent: #10b981; }
.menu-item[data-section="qualitaet"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="qualitaet"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="qualitaet"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="qualitaet"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="qualitaet"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="umwelt"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="umwelt"].color-green { --section-accent: #10b981; }
.menu-item[data-section="umwelt"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="umwelt"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="umwelt"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="umwelt"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="umwelt"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="datenschutz"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="datenschutz"].color-green { --section-accent: #10b981; }
.menu-item[data-section="datenschutz"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="datenschutz"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="datenschutz"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="datenschutz"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="datenschutz"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="gesundheit"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="gesundheit"].color-green { --section-accent: #10b981; }
.menu-item[data-section="gesundheit"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="gesundheit"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="gesundheit"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="gesundheit"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="gesundheit"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="maschinen"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="maschinen"].color-green { --section-accent: #10b981; }
.menu-item[data-section="maschinen"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="maschinen"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="maschinen"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="maschinen"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="maschinen"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="gefahrstoffe"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="gefahrstoffe"].color-green { --section-accent: #10b981; }
.menu-item[data-section="gefahrstoffe"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="gefahrstoffe"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="gefahrstoffe"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="gefahrstoffe"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="gefahrstoffe"].color-pink { --section-accent: #ec4899; }

.menu-item[data-section="schulungen"].color-blue { --section-accent: #3b82f6; }
.menu-item[data-section="schulungen"].color-green { --section-accent: #10b981; }
.menu-item[data-section="schulungen"].color-purple { --section-accent: #8b5cf6; }
.menu-item[data-section="schulungen"].color-orange { --section-accent: #f97316; }
.menu-item[data-section="schulungen"].color-red { --section-accent: #dc2626; }
.menu-item[data-section="schulungen"].color-cyan { --section-accent: #06b6d4; }
.menu-item[data-section="schulungen"].color-pink { --section-accent: #ec4899; }

/* Apply section-specific colors */
.menu-item.color-blue:hover,
.menu-item.color-blue.active {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: #3b82f6;
}

.menu-item.color-blue i {
    color: #3b82f6;
}

.menu-item.color-green:hover,
.menu-item.color-green.active {
    background: rgba(16, 185, 129, 0.1);
    border-left-color: #10b981;
}

.menu-item.color-green i {
    color: #10b981;
}

.menu-item.color-purple:hover,
.menu-item.color-purple.active {
    background: rgba(139, 92, 246, 0.1);
    border-left-color: #8b5cf6;
}

.menu-item.color-purple i {
    color: #8b5cf6;
}

.menu-item.color-orange:hover,
.menu-item.color-orange.active {
    background: rgba(249, 115, 22, 0.1);
    border-left-color: #f97316;
}

.menu-item.color-orange i {
    color: #f97316;
}

.menu-item.color-red:hover,
.menu-item.color-red.active {
    background: rgba(220, 38, 38, 0.1);
    border-left-color: #dc2626;
}

.menu-item.color-red i {
    color: #dc2626;
}

.menu-item.color-cyan:hover,
.menu-item.color-cyan.active {
    background: rgba(6, 182, 212, 0.1);
    border-left-color: #06b6d4;
}

.menu-item.color-cyan i {
    color: #06b6d4;
}

.menu-item.color-pink:hover,
.menu-item.color-pink.active {
    background: rgba(236, 72, 153, 0.1);
    border-left-color: #ec4899;
}

.menu-item.color-pink i {
    color: #ec4899;
}

/* GHS Pictogram Selection Styles */
.ghs-pictogram-selection {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8f9fa;
}

.pictogram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.pictogram-item {
    display: block;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.pictogram-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pictogram-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-align: center;
}

.pictogram-item input[type="checkbox"] {
    display: none;
}

.pictogram-item input[type="checkbox"]:checked + .pictogram-container {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ghs-pictogram {
    width: 80px;
    height: 80px;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
}

.pictogram-item:hover .ghs-pictogram {
    transform: scale(1.05);
}

.pictogram-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
}

.pictogram-item input[type="checkbox"]:checked + .pictogram-container .pictogram-label {
    color: #3b82f6;
    font-weight: 600;
}

/* Enhanced form grid for hazardous substances */
.tab-content .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    align-items: start;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

/* Improved form styling for detailed substance information */
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input[type="date"] {
    cursor: pointer;
}

/* Physical and chemical properties styling */
.form-group input[placeholder*="°C"],
.form-group input[placeholder*="g/mol"],
.form-group input[placeholder*="g/cm³"],
.form-group input[placeholder*="kPa"] {
    font-family: 'Courier New', monospace;
    background: #f8f9fa;
}

/* Responsive design for substance form */
@media (max-width: 768px) {
    .pictogram-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.75rem;
    }
    
    .ghs-pictogram {
        width: 60px;
        height: 60px;
    }
    
    .pictogram-container {
        padding: 0.75rem;
    }
    
    .pictogram-label {
        font-size: 0.75rem;
    }
    
    .tab-content .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Enhanced styling for detailed hazardous substance forms */
.form-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 2rem;
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 8px;
    overflow-x: auto;
}

.tab-btn {
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.tab-btn.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* Section headers within tabs */
.tab-content h4 {
    margin: 1.5rem 0 1rem 0;
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.tab-content h4:first-child {
    margin-top: 0;
}

/* Checkbox groups for exposure routes */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.checkbox-item:hover {
    background: #f8f9fa;
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-item span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Specialized form styling for scientific data */
.form-group input[placeholder*="mg/kg"],
.form-group input[placeholder*="mg/L"],
.form-group input[placeholder*="ppm"],
.form-group input[placeholder*="mg/m³"],
.form-group input[placeholder*="BCF"],
.form-group input[placeholder*="log"],
.form-group input[placeholder*="LC50"],
.form-group input[placeholder*="LD50"],
.form-group input[placeholder*="NOEC"],
.form-group input[placeholder*="GWP"] {
    font-family: 'Courier New', monospace;
    background: #f0f8ff;
    font-weight: 500;
}

/* Toxicology and exposure limits styling */
.form-group select[id*="toxicity"],
.form-group select[id*="Toxicity"],
.form-group select[id*="sensitization"],
.form-group select[id*="carcinogenicity"],
.form-group select[id*="mutagenicity"] {
    background: #fff5f5;
    border-left: 4px solid #dc2626;
}

.form-group select[id*="exposure"],
.form-group select[id*="biomonitoring"],
.form-group select[id*="surveillance"] {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
}

/* Environment-related field styling */
.form-group select[id*="aquatic"],
.form-group select[id*="biodegradation"],
.form-group select[id*="persistency"],
.form-group select[id*="bioaccumulation"],
.form-group input[id*="aquatic"] {
    background: #ecfdf5;
    border-left: 4px solid #059669;
}

/* Emergency field styling */
.form-group textarea[id*="firstAid"],
.form-group textarea[id*="extinguishing"],
.form-group textarea[id*="spill"],
.form-group input[id*="emergency"],
.form-group input[id*="Emergency"] {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}

/* Modal size adjustment for detailed forms */
.modal-content {
    max-width: 98vw;
    width: 1600px;
    max-height: 95vh;
    overflow-y: auto;
}

.modal-body {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    padding: 2rem;
}

/* Improved tab navigation for mobile */
@media (max-width: 768px) {
    .form-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .tab-btn {
        min-width: 100px;
        font-size: 0.8rem;
        padding: 0.6rem 0.8rem;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95vw;
        max-width: none;
    }
    
    .modal-body {
        padding: 1rem;
    }
}

/* Scrollbar styling for modal */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Risk Assessment Module Styling */
.gbu-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gbu-stats-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gbu-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.gbu-stats-card h4 {
    color: var(--accent-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gbu-stats-card .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.gbu-stats-card .stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.gbu-chart-container {
    height: 200px;
    background: linear-gradient(45deg, #f8fafc, #e2e8f0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-style: italic;
}

.gbu-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.gbu-action-btn {
    flex: 1;
    min-width: 150px;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gbu-action-btn.primary {
    background: var(--accent-color);
    color: white;
}

.gbu-action-btn.primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.gbu-action-btn.secondary {
    background: #f8fafc;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.gbu-action-btn.secondary:hover {
    background: var(--hover-bg);
}

.gbu-table-container {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.gbu-table-header {
    background: var(--primary-bg);
    color: var(--text-secondary);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.gbu-table-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.gbu-table-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.gbu-search-input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.gbu-filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.gbu-table {
    width: 100%;
    border-collapse: collapse;
}

.gbu-table th,
.gbu-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.gbu-table th {
    background: #f8fafc;
    font-weight: 600;
    color: var(--text-primary);
}

.gbu-table tr:hover {
    background: var(--hover-bg);
}

.gbu-table .actions {
    display: flex;
    gap: 0.5rem;
}

.gbu-table .btn-icon {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.gbu-table .btn-edit {
    background: #3b82f6;
    color: white;
}

.gbu-table .btn-edit:hover {
    background: #2563eb;
}

.gbu-table .btn-delete {
    background: #dc2626;
    color: white;
}

.gbu-table .btn-delete:hover {
    background: #b91c1c;
}

.gbu-table .btn-view {
    background: #059669;
    color: white;
}

.gbu-table .btn-view:hover {
    background: #047857;
}

/* Risk Assessment Modal Styling */
.gbu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gbu-modal.hidden {
    display: none;
}

.gbu-modal-content {
    background: var(--card-bg);
    border-radius: 12px;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.gbu-modal-header {
    background: var(--primary-bg);
    color: var(--text-secondary);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gbu-modal-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.gbu-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.gbu-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gbu-modal-body {
    padding: 2rem;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

/* Risk Assessment Tabs */
.gbu-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gbu-tab {
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.gbu-tab:hover {
    color: var(--accent-color);
    background: var(--hover-bg);
}

.gbu-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    background: var(--hover-bg);
}

.gbu-tab-content {
    display: none;
}

.gbu-tab-content.active {
    display: block;
}

/* Form styling within tabs */
.gbu-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gbu-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gbu-form-group label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.gbu-form-group input,
.gbu-form-group select,
.gbu-form-group textarea {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gbu-form-group input:focus,
.gbu-form-group select:focus,
.gbu-form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.gbu-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Hazard category cards */
.gbu-hazard-categories,
.hazard-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gbu-hazard-card,
.hazard-category {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gbu-hazard-card:hover,
.hazard-category:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.gbu-hazard-card.selected {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.05);
}

.gbu-hazard-card h4,
.hazard-category h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gbu-hazard-card p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Hazard items with checkboxes */
.hazard-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hazard-items label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-size: 0.95rem;
    line-height: 1.4;
}

.hazard-items label:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.hazard-items input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.hazard-items label span {
    color: var(--text-primary);
    font-weight: 500;
}

.hazard-items label:has(input:checked),
.hazard-items label.checked {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--accent-color);
}

.hazard-items label:has(input:checked) span,
.hazard-items label.checked span {
    color: var(--accent-color);
    font-weight: 600;
}

/* TÜV-konforme Nohl-Matrix Styles */
.nohl-matrix-explanation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.matrix-section h4 {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.probability-scale,
.severity-scale {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scale-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--accent-color);
}

.scale-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent-color);
    min-width: 30px;
}

.scale-desc {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Nohl-Matrix Tabelle */
.nohl-matrix-table {
    margin: 2rem 0;
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.nohl-matrix-table h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.risk-matrix {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.risk-matrix th,
.risk-matrix td {
    border: 2px solid var(--border-color);
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
}

.risk-matrix th {
    background: var(--accent-color);
    color: white;
    font-weight: 600;
}

.risk-matrix td:first-child {
    background: rgba(59, 130, 246, 0.1);
    font-weight: 600;
    text-align: left;
}

.risk-value {
    font-weight: 700;
    font-size: 1rem;
    padding: 1.2rem;
}

.risk-niedrig {
    background-color: #22c55e !important;
    color: white;
}

.risk-mittel {
    background-color: #f59e0b !important;
    color: white;
}

.risk-hoch {
    background-color: #ef4444 !important;
    color: white;
}

.risk-kritisch {
    background-color: #dc2626 !important;
    color: white;
    font-weight: 900;
}

/* Akzeptanzkriterien */
.acceptance-criteria {
    margin: 2rem 0;
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.acceptance-criteria h4 {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.criteria-item {
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid;
    transition: transform 0.2s ease;
}

.criteria-item:hover {
    transform: translateY(-2px);
}

.criteria-item.risk-niedrig {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.criteria-item.risk-mittel {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.criteria-item.risk-hoch {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.criteria-item.risk-kritisch {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

.criteria-item h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.criteria-item p {
    margin: 0;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Workplace sections styling */
.workplace-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.workplace-section h4 {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.workplace-section h5 {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 1rem 0 0.75rem 0;
    font-weight: 600;
}

.gefährdete-gruppen,
.betriebszustaende {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.umgebung-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}

.umgebung-category {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
}

.umgebung-category h5 {
    color: var(--accent-color);
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
    font-weight: 600;
    text-align: center;
}

/* Legal basis styling */
.legal-basis {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.legal-basis h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.legal-note {
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
}

.legal-categories {
    display: grid;
    gap: 1.5rem;
}

.legal-category {
    background: rgba(59, 130, 246, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1.25rem;
}

.legal-category h5 {
    color: var(--accent-color);
    font-size: 1rem;
    margin: 0 0 1rem 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

/* Checkbox grid styling */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-grid label:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.checkbox-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.checkbox-grid label:has(input:checked),
.checkbox-grid label.checked {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--accent-color);
    font-weight: 500;
}

/* TOP-Prinzip Styling */
.top-principle-explanation {
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.principle-intro {
    text-align: center;
    margin-bottom: 1.5rem;
}

.principle-intro p {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

.principle-hierarchy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.principle-level {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    padding: 1rem;
    min-width: 200px;
    border: 2px solid var(--accent-color);
}

.level-number {
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.level-content h4 {
    margin: 0 0 0.5rem 0;
    color: var(--accent-color);
    font-size: 1rem;
}

.level-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.principle-arrow {
    font-size: 1.5rem;
    color: var(--accent-color);
    font-weight: bold;
}

/* Template grid styling */
.measures-templates {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.measures-templates h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.template-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.template-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
}

/* Measure categories styling */
.measure-category {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.measure-category.technical {
    border-left: 4px solid #22c55e;
}

.measure-category.organizational {
    border-left: 4px solid #f59e0b;
}

.measure-category.personal {
    border-left: 4px solid #ef4444;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.category-header h4 {
    color: var(--accent-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.priority-high {
    background: #22c55e;
}

.priority-medium {
    background: #f59e0b;
}

.priority-low {
    background: #ef4444;
}

/* Subcategories styling */
.measure-subcategories {
    display: grid;
    gap: 1.5rem;
}

.subcategory {
    background: rgba(59, 130, 246, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
}

.subcategory h5 {
    color: var(--accent-color);
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subcategory-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.example-tag {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* PSA Warning */
.psa-warning {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.psa-warning i {
    color: #ef4444;
    font-size: 1.2rem;
}

.psa-warning p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Measures evaluation */
.measures-evaluation {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.measures-evaluation h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.evaluation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.evaluation-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evaluation-item label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.evaluation-item select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    color: var(--text-primary);
}

/* Add measure buttons */
.add-measure-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px dashed var(--accent-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--accent-color);
    font-size: 0.9rem;
    width: 100%;
}

.add-measure-btn:hover {
    background: var(--accent-color);
    color: white;
    border-style: solid;
}

/* Protective measures styling */
.protective-measure {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin: 1rem 0;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.measure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.measure-header h6 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1rem;
    font-weight: 600;
}

.measure-content {
    display: grid;
    gap: 1rem;
}

.measure-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-icon {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-icon.btn-danger:hover {
    background: #dc2626;
    transform: scale(1.05);
}

/* Status badges for approval workflow */
.status-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
}

.status-entwurf {
    background: #6b7280;
}

.status-review {
    background: #f59e0b;
}

.status-approved {
    background: #22c55e;
}

.status-rejected {
    background: #ef4444;
}

/* Workflow steps */
.workflow-steps {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f3f4f6;
    border-radius: 8px;
    min-width: 150px;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.workflow-step.completed {
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid #22c55e;
    opacity: 1;
}

.step-number {
    background: #6b7280;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.workflow-step.completed .step-number {
    background: #22c55e;
}

.step-content h6 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.step-content p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Qualification sections */
.qualification-section,
.compliance-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.qualification-roles {
    display: grid;
    gap: 2rem;
}

.qualification-role {
    background: rgba(59, 130, 246, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1.5rem;
}

.qualification-role h5 {
    color: var(--accent-color);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.digital-signature {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.digital-signature h6 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.signature-area {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.signature-area input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Compliance checklist */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
}

.audit-readiness {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--accent-color);
}

.readiness-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.readiness-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
    border-left: 3px solid #22c55e;
}

.readiness-item i {
    color: #22c55e;
    font-size: 1.1rem;
}

.readiness-item span {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Risk assessment matrix (existing) */
.gbu-risk-matrix {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-color);
}

.gbu-matrix-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.gbu-matrix-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.gbu-matrix-table th,
.gbu-matrix-table td {
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    text-align: center;
    font-weight: 500;
}

.gbu-matrix-table th {
    background: var(--primary-bg);
    color: var(--text-secondary);
}

.gbu-matrix-table .risk-low {
    background: #22c55e;
    color: white;
}

.gbu-matrix-table .risk-medium {
    background: #f59e0b;
    color: white;
}

.gbu-matrix-table .risk-high {
    background: #dc2626;
    color: white;
}

.gbu-matrix-table .risk-very-high {
    background: #7c2d12;
    color: white;
}

/* Risk badges */
.gbu-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.gbu-risk-badge.low {
    background: #dcfce7;
    color: #166534;
}

.gbu-risk-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.gbu-risk-badge.high {
    background: #fecaca;
    color: #991b1b;
}

.gbu-risk-badge.very-high {
    background: #7c2d12;
    color: white;
}

/* Protective measures section */
.gbu-measures-section {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.gbu-measures-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gbu-measures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gbu-measure-category {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1rem;
    border-left: 4px solid var(--accent-color);
}

.gbu-measure-category h5 {
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.gbu-measure-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gbu-measure-category li {
    padding: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.gbu-measure-category li::before {
    content: "✓";
    color: #22c55e;
    font-weight: bold;
    flex-shrink: 0;
}

/* Modal footer with action buttons */
.gbu-modal-footer {
    background: #f8fafc;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.gbu-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.gbu-btn.primary {
    background: var(--accent-color);
    color: white;
}

.gbu-btn.primary:hover {
    background: #2563eb;
}

.gbu-btn.secondary {
    background: #6b7280;
    color: white;
}

.gbu-btn.secondary:hover {
    background: #374151;
}

.gbu-btn.danger {
    background: #dc2626;
    color: white;
}

.gbu-btn.danger:hover {
    background: #b91c1c;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .gbu-dashboard {
        grid-template-columns: 1fr;
    }
    
    .gbu-actions {
        flex-direction: column;
    }
    
    .gbu-action-btn {
        min-width: auto;
    }
    
    .gbu-modal-content {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    
    .gbu-modal-body {
        padding: 1rem;
    }
    
    .gbu-tabs {
        border-bottom: none;
        background: #f8fafc;
        border-radius: 6px;
        padding: 0.25rem;
    }
    
    .gbu-tab {
        border-radius: 4px;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
    
    .gbu-tab.active {
        background: var(--card-bg);
        border-bottom-color: transparent;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .gbu-form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .gbu-hazard-categories {
        grid-template-columns: 1fr;
    }
    
    .gbu-measures-grid {
        grid-template-columns: 1fr;
    }
    
    .gbu-table-container {
        overflow-x: auto;
    }
    
    .gbu-table {
        min-width: 600px;
    }
    
    .gbu-modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .gbu-btn {
        width: 100%;
    }
}

/* Measure Suggestions Styling */
.measure-suggestions {
    background: #f0f8ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.measure-suggestions h4 {
    color: #1e40af;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suggestion-category {
    margin-bottom: 1.5rem;
}

.suggestion-category h5 {
    color: #059669;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

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

.suggestion-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #059669;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.suggestion-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    background: #059669;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-small:hover {
    background: #047857;
}

/* Enhanced protective measure styling */
.protective-measure {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.protective-measure:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.measure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.measure-header h5 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.measure-content {
    display: grid;
    gap: 1rem;
}

/* Risk assessment container styling */
.no-hazards-selected {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px;
    border: 2px dashed #d1d5db;
}

.no-hazards-selected i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #9ca3af;
}

.selected-hazards-assessment {
    space: 1.5rem 0;
}

.hazard-risk-assessment {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.hazard-risk-assessment h5 {
    color: #dc2626;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.risk-assessment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.assessment-item label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.probability-select,
.severity-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
}

.risk-result {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

@media (max-width: 768px) {
    .risk-assessment-grid {
        grid-template-columns: 1fr;
    }
    
    .suggestion-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .btn-small {
        align-self: flex-end;
    }
}

/* Training Report Export Buttons */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.report-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
}

.export-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-export:active {
    transform: translateY(0);
}

.btn-csv {
    background-color: #10b981;
    color: white;
    border-color: #059669;
}

.btn-csv:hover {
    background-color: #059669;
    border-color: #047857;
}

.btn-excel {
    background-color: #217346;
    color: white;
    border-color: #1a5a37;
}

.btn-excel:hover {
    background-color: #1a5a37;
    border-color: #14532d;
}

.btn-pdf {
    background-color: #dc2626;
    color: white;
    border-color: #b91c1c;
}

.btn-pdf:hover {
    background-color: #b91c1c;
    border-color: #991b1b;
}

.btn-export i {
    font-size: 0.875rem;
}

/* Responsive Export Buttons */
@media (max-width: 768px) {
    .report-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .export-buttons {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .btn-export {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

/* GHS-Piktogramme (Originale Gefahrstoff-Symbole) */
.ghs-pictogram {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #dc2626;
    border-radius: 4px;
    margin: 2px;
    position: relative;
    vertical-align: middle;
}

.ghs-pictogram.large {
    width: 48px;
    height: 48px;
}

.ghs-pictogram.small {
    width: 24px;
    height: 24px;
}

/* GHS01 - Explodierende Bombe */
.ghs-pictogram.ghs01 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cGF0aCBkPSJNIDM1IDM1IEwgNjUgMzUgTCA1MCA2NSBaIiBmaWxsPSIjMDAwIi8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI0NSIgcj0iNSIgZmlsbD0iIzAwMCIvPgogIDx0ZXh0IHg9IjUwIiB5PSI4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEwcHgiIGZpbGw9IiMwMDAiPkVYUExPU0lWRTwvdGV4dD4KPC9zdmc+');
}

/* GHS02 - Flamme */
.ghs-pictogram.ghs02 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cGF0aCBkPSJNIDMwIDcwIEMgMzAgNjAgNDAgNTAgNTAgNTUgQyA2MCA1MCA3MCA2MCA3MCA3MCBDIDcwIDgwIDYwIDg1IDUwIDgwIEMgNDAgODUgMzAgODAgMzAgNzAiIGZpbGw9IiNmZjQ1MDAiLz4KICA8cGF0aCBkPSJNIDQwIDY1IEMgNDAgNTUgNDUgNDUgNTAgNTAgQyA1NSA0NSA2MCA1NSA2MCA2NSBDIDYwIDcwIDU1IDc1IDUwIDcwIEMgNDUgNzUgNDAgNzAgNDAgNjUiIGZpbGw9IiNmZmE1MDAiLz4KICA8dGV4dCB4PSI1MCIgeT0iODUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMHB4IiBmaWxsPSIjMDAwIj5GTEFNTUFCTEU8L3RleHQ+Cjwvc3ZnPg==');
}

/* GHS03 - Flamme über Kreis */
.ghs-pictogram.ghs03 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjU1IiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cGF0aCBkPSJNIDQ1IDM1IEMgNDUgMjUgNDggMjAgNTAgMjUgQyA1MiAyMCA1NSAyNSA1NSAzNSBDIDU1IDQwIDUyIDQ1IDUwIDQwIEMgNDggNDUgNDUgNDAgNDUgMzUiIGZpbGw9IiNmZjQ1MDAiLz4KICA8dGV4dCB4PSI1MCIgeT0iODUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMHB4IiBmaWxsPSIjMDAwIj5PWELVVEFSU0lWRTwvdGV4dD4KPC9zdmc+');
}

/* GHS04 - Gasflasche */
.ghs-pictogram.ghs04 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cmVjdCB4PSI0MCIgeT0iMjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cmVjdCB4PSI0NSIgeT0iMTUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8dGV4dCB4PSI1MCIgeT0iODUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMHB4IiBmaWxsPSIjMDAwIj5HQVMgVU5ERVIgUFJFU1NVUEU8L3RleHQ+Cjwvc3ZnPg==');
}

/* GHS05 - Ätzwirkung */
.ghs-pictogram.ghs05 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cmVjdCB4PSIzMCIgeT0iMjAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyNSIgZmlsbD0iIzAwMCIvPgogIDxyZWN0IHg9IjU1IiB5PSIyMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjI1IiBmaWxsPSIjMDAwIi8+CiAgPHBhdGggZD0iTSAyNSA1NSBMIDM1IDQ1IEwgNDUgNTUgWiIgZmlsbD0iIzAwMCIvPgogIDxwYXRoIGQ9Ik0gNTUgNTUgTCA2NSA0NSBMIDc1IDU1IFoiIGZpbGw9IiMwMDAiLz4KICA8dGV4dCB4PSI1MCIgeT0iODUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMHB4IiBmaWxsPSIjMDAwIj5DT1JST1NJVkU8L3RleHQ+Cjwvc3ZnPg==');
}

/* GHS06 - Totenkopf */
.ghs-pictogram.ghs06 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjQwIiByPSIyMCIgZmlsbD0iIzAwMCIvPgogIDxjaXJjbGUgY3g9IjQzIiBjeT0iMzUiIHI9IjMiIGZpbGw9IiNmZmYiLz4KICA8Y2lyY2xlIGN4PSI1NyIgY3k9IjM1IiByPSIzIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggZD0iTSA0NSA0NSBMIDUwIDUwIEwgNTUgNDUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPHBhdGggZD0iTSAzNSA2MCBMIDQwIDY1IEwgNDUgNjAgTCA1MCA2NSBMIDU1IDYwIEwgNjAgNjUgTCA2NSA2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz4KICA8dGV4dCB4PSI1MCIgeT0iODUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMHB4IiBmaWxsPSIjMDAwIj5UT1hJQzwvdGV4dD4KPC9zdmc+');
}

/* GHS07 - Ausrufezeichen */
.ghs-pictogram.ghs07 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cmVjdCB4PSI0NyIgeT0iMjAiIHdpZHRoPSI2IiBoZWlnaHQ9IjMwIiBmaWxsPSIjMDAwIi8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI2MCIgcj0iNCIgZmlsbD0iIzAwMCIvPgogIDx0ZXh0IHg9IjUwIiB5PSI4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEwcHgiIGZpbGw9IiMwMDAiPklSUklUQU5UPC90ZXh0Pgo8L3N2Zz4=');
}

/* GHS08 - Gesundheitsgefahr */
.ghs-pictogram.ghs08 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cGF0aCBkPSJNIDQwIDQwIEwgNDUgMzUgTCA1NSAzNSBMIDYwIDQwIEwgNjAgNjAgTCA1NSA2NSBMIDQ1IDY1IEwgNDAgNjAgWiIgZmlsbD0iIzAwMCIvPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUiIGZpbGw9IiNmZmYiLz4KICA8dGV4dCB4PSI1MCIgeT0iODUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMHB4IiBmaWxsPSIjMDAwIj5IRUFMVE1IQVPBSEQ8L3RleHQ+Cjwvc3ZnPg==');
}

/* GHS09 - Umweltgefahr */
.ghs-pictogram.ghs09 {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjUwLDUgOTUsNTAgNTAsOTUgNSw1MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZGMyNjI2IiBzdHJva2Utd2lkdGg9IjMiLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz4KICA8cGF0aCBkPSJNIDQwIDQ1IEMgNDAgNDAgNDUgMzUgNTAgNDAgQyA1NSAzNSA2MCA0MCA2MCA0NSBDIDYwIDUwIDU1IDU1IDUwIDUwIEMgNDUgNTUgNDAgNTAgNDAgNDUiIGZpbGw9IiMwNGI5NDEiLz4KICA8cGF0aCBkPSJNIDQ1IDU1IEMgNDUgNjAgNTAgNjUgNTAgNjAgQyA1MCA2NSA1NSA2MCA1NSA1NSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDQ5NGMzIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8Y2lyY2xlIGN4PSI0MyIgY3k9IjQyIiByPSIyIiBmaWxsPSIjNGY4NmIwIi8+CiAgPGNpcmNsZSBjeD0iNTciIGN5PSI0MiIgcj0iMiIgZmlsbD0iIzRmODZiMCIvPgogIDx0ZXh0IHg9IjUwIiB5PSI4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEwcHgiIGZpbGw9IiMwMDAiPkVOVklST05NRU5UPC90ZXh0Pgo8L3N2Zz4=');
}

/* Hazard Symbol Container */
.hazard-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin: 0.5rem 0;
}

.hazard-symbol {
    position: relative;
}

.hazard-symbol:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 4px;
}

/* GHS Symbol Display in Lists */
.ghs-symbols-display {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.ghs-symbol {
    display: inline-block;
}

/* Responsive GHS Pictograms */
@media (max-width: 768px) {
    .ghs-pictogram {
        width: 28px;
        height: 28px;
    }
    
    .ghs-pictogram.large {
        width: 40px;
        height: 40px;
    }
}

/* Enhanced Training Form Styles - TÜV Compliant */
.form-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
    background: #f8fafc;
    border-radius: 0.5rem 0.5rem 0 0;
    overflow-x: auto;
}

.form-tabs .tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    border-bottom: 3px solid transparent;
}

.form-tabs .tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.form-tabs .tab-btn.active {
    background: #3b82f6;
    color: white;
    border-bottom-color: #1d4ed8;
}

.form-tabs .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #1d4ed8;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

/* Form Layout Enhancements */
.form-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.form-section h3 {
    color: #1e293b;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section h3 i {
    color: #3b82f6;
}

/* Enhanced Form Controls */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.help-text {
    font-weight: 400;
    color: #6b7280;
    font-style: italic;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: #ffffff;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group small {
    display: block;
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Validation Styles */
.validation-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

.validation-success {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
}

/* Checkbox and Radio Groups */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.2s ease;
}

.checkbox-group label:hover {
    background: #f8fafc;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.radio-group label:hover {
    background: #f8fafc;
    border-color: #3b82f6;
}

.radio-group input[type="radio"]:checked + label,
.radio-group label:has(input[type="radio"]:checked) {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

/* File Upload Area */
.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    background: #f9fafb;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.file-upload-area:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.file-upload-area i {
    font-size: 2rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.file-upload-area p {
    color: #6b7280;
    margin: 0.5rem 0;
}

.file-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* Uploaded Files Display */
.uploaded-files {
    margin-top: 1rem;
}

.uploaded-file-item {
    display: flex;
    justify-content: between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.file-info i {
    color: #3b82f6;
    width: 1.25rem;
}

.file-name {
    font-weight: 500;
    color: #374151;
}

.file-size {
    color: #6b7280;
    font-size: 0.875rem;
}

.btn-remove {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.2s ease;
}

.btn-remove:hover {
    background: #dc2626;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
}

/* Modal Enhancements for Training Form */
.large-modal .modal-content {
    max-width: 90vw !important;
    width: 90vw !important;
    height: 90vh !important;
    margin: 5vh auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    border-radius: 8px !important;
    padding: 20px !important;
    width: 98vw;
    max-height: 95vh;
    overflow-y: auto;
}

.training-form {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
}

/* Progress Indicator */
.form-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.progress-step.active {
    color: #3b82f6;
    font-weight: 600;
}

.progress-step.completed {
    color: #10b981;
}

/* Responsive Design for Training Form */
@media (max-width: 768px) {
    .form-tabs {
        flex-wrap: wrap;
    }
    
    .form-tabs .tab-btn {
        flex: 1;
        min-width: 120px;
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }
    
    .form-section {
        padding: 1rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .large-modal .modal-content {
        width: 95vw;
        margin: 1rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Advanced Training Features Styling */
.experimental-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.experimental-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.experimental-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.experimental-card h4 {
    margin: 0 0 0.75rem 0;
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.experimental-card h4 i {
    color: #3b82f6;
    font-size: 1rem;
}

.experimental-card label {
    display: block;
    margin: 0.5rem 0;
    font-size: 0.8rem;
    color: #374151;
}

.experimental-card input[type="checkbox"] {
    margin-right: 0.5rem;
}

.api-integrations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.integration-item {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.integration-item:hover {
    border-color: #10b981;
    background: #f0fdf4;
}

.integration-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

.integration-item input[type="checkbox"] {
    margin: 0;
}

/* Difficulty Slider Group */
.difficulty-slider-group {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.difficulty-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
}

.difficulty-item label {
    min-width: 100px;
    font-weight: 500;
    color: #374151;
}

.difficulty-item input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #e5e7eb;
    outline: none;
    transition: background 0.2s ease;
}

.difficulty-item input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.difficulty-item input[type="range"]::-webkit-slider-thumb:hover {
    background: #2563eb;
    transform: scale(1.1);
}

.difficulty-value {
    min-width: 50px;
    text-align: center;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

/* Question Builder Styles */
.question-builder {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

.question-creator {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.question-creator .btn-secondary {
    background: #3b82f6;
    color: white;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.question-creator .btn-secondary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

.questions-container {
    min-height: 200px;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 1rem;
    background: #ffffff;
    position: relative;
}

.questions-container:empty::before {
    content: "Hier werden Ihre erstellten Fragen angezeigt...";
    color: #9ca3af;
    font-style: italic;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Media Type Cards */
.media-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.media-type-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.media-type-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.1);
    transform: translateY(-4px);
}

.media-type-card.active {
    border-color: #10b981;
    background: #f0fdf4;
}

.media-type-card i {
    font-size: 2.5rem;
    color: #6b7280;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.media-type-card:hover i,
.media-type-card.active i {
    color: #3b82f6;
}

.media-type-card h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
}

.media-type-card label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    font-weight: 500;
    cursor: pointer;
}

.media-upload {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

/* Validation Styles */
.validation-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2;
}

.validation-success {
    border-color: #10b981 !important;
    background-color: #f0fdf4;
}

/* Question Builder Styles */
.question-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    transition: all 0.2s ease;
}

.question-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.question-number {
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.question-type {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.remove-question {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-question:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.question-content label {
    display: block;
    margin: 0.75rem 0 0.25rem 0;
    font-weight: 500;
    color: #374151;
}

.question-content textarea,
.question-content input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.answer-options {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0.75rem 0;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
}

.answer-option input[type="radio"] {
    margin: 0;
    transform: scale(1.2);
}

.answer-option input[type="text"] {
    flex: 1;
    margin: 0;
}

.true-false-options {
    display: flex;
    gap: 2rem;
    margin: 0.75rem 0;
}

.true-false-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

/* Difficulty Balance Indicator */
.difficulty-balance {
    text-align: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.difficulty-balance.balanced {
    background: #f0fdf4;
    color: #166534;
    border: 2px solid #22c55e;
}

.difficulty-balance.unbalanced {
    background: #fef2f2;
    color: #991b1b;
    border: 2px solid #ef4444;
}

/* Media Preview Styles */
.media-preview {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.media-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: white;
    border-radius: 0.375rem;
    margin: 0.5rem 0;
    border: 1px solid #d1d5db;
}

.media-preview-item i {
    color: #3b82f6;
    font-size: 1.25rem;
    width: 20px;
    text-align: center;
}

.media-preview-item span {
    flex: 1;
    font-size: 0.875rem;
    color: #374151;
}

.media-preview-item button {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.media-preview-item button:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Compliance Indicator Styles */
.compliance-indicator {
    margin-bottom: 1.5rem;
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Experimental Features */
.experimental-active {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}

.experimental-active h4 {
    color: #065f46;
}

.experimental-active h4 i {
    color: #10b981;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ===== PROFESSIONAL MACHINE MANAGEMENT STYLES ===== */

/* Professional Machine Modal */
.professional-machine-modal {
    z-index: 10000;
}

.professional-machine-modal .modal-content {
    max-width: 1400px !important;
    width: 95% !important;
    max-height: 95vh !important;
    overflow: hidden;
    margin: 1% auto !important;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

/* Professional Header */
.professional-machine-modal .modal-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.header-content h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.compliance-indicators {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    animation: fadeInUp 0.6s ease-out;
}

.tuev-badge {
    background: #10b981;
    color: white;
}

.iso-badge {
    background: #3b82f6;
    color: white;
}

.ce-badge {
    background: #f59e0b;
    color: white;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress Indicator */
.progress-container {
    padding: 1rem 2rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.progress-bar {
    width: 100%;
    height: 0.75rem;
    background: #e2e8f0;
    border-radius: 0.375rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
    border-radius: 0.375rem;
    transition: width 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.progress-text {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
}

/* Professional Tab Navigation */
.professional-tabs {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    padding: 0 2rem;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.professional-tabs::-webkit-scrollbar {
    height: 6px;
}

.professional-tabs::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.professional-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.professional-tabs .form-tab {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.professional-tabs .form-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease;
}

.professional-tabs .form-tab:hover::before {
    left: 100%;
}

.professional-tabs .form-tab:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
    transform: translateY(-1px);
}

.professional-tabs .form-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    box-shadow: 0 -2px 10px rgba(59, 130, 246, 0.1);
}

.professional-tabs .form-tab.active i {
    color: #3b82f6;
    animation: tabPulse 2s infinite;
}

@keyframes tabPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Modal Body with Scroll */
.professional-machine-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Professional Form */
.professional-form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 2rem;
    min-height: 500px;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Headers */
.tab-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.tab-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 1px;
}

.tab-header h3 {
    margin: 0 0 0.75rem 0;
    color: #1e293b;
    font-size: 1.375rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tab-header h3 i {
    color: #3b82f6;
    font-size: 1.25rem;
}

.tab-description {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    font-style: italic;
}

/* Form Sections */
.form-section {
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.form-section h4 {
    margin: 0 0 1.5rem 0;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section h4::before {
    content: '';
    width: 4px;
    height: 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 2px;
}

.form-section h5 {
    margin: 1.5rem 0 1rem 0;
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section h5::before {
    content: '▶';
    color: #3b82f6;
    font-size: 0.75rem;
}

/* Form Grids */
.professional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.safety-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

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

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #374151;
    font-weight: 600;
    font-size: 0.875rem;
    position: relative;
}

.form-group label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.form-group:focus-within label::after {
    width: 100%;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: #ffffff;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.form-group input:valid,
.form-group select:valid,
.form-group textarea:valid {
    border-color: #10b981;
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: #6b7280;
    font-size: 0.75rem;
    font-style: italic;
}

/* Checkbox and Radio Groups */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.radio-group,
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.checkbox-grid label,
.radio-group label,
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.checkbox-grid label::before,
.radio-group label::before,
.checkbox-group label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease;
}

.checkbox-grid label:hover::before,
.radio-group label:hover::before,
.checkbox-group label:hover::before {
    left: 100%;
}

.checkbox-grid label:hover,
.radio-group label:hover,
.checkbox-group label:hover {
    border-color: #3b82f6;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.checkbox-grid label input:checked + span,
.radio-group label input:checked + span,
.checkbox-group label input:checked + span {
    color: #3b82f6;
    font-weight: 600;
}

/* Safety Categories */
.safety-category {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.safety-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #10b981, #3b82f6);
}

.safety-category:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.safety-category h5 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
}

/* Professional Footer */
.professional-footer {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 2px solid #e2e8f0;
    border-radius: 0 0 1rem 1rem;
    flex-shrink: 0;
}

.professional-footer .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

.professional-footer .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
}

.professional-footer .btn-outline {
    background: transparent;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
}

.professional-footer .btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #3b82f6;
    transition: left 0.3s ease;
    z-index: -1;
}

.professional-footer .btn-outline:hover:not(:disabled)::before {
    left: 0;
}

.professional-footer .btn-outline:hover:not(:disabled) {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.professional-footer .btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.professional-footer .btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.professional-footer .btn-primary::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.5s ease;
}

.professional-footer .btn-primary:hover::before {
    left: 100%;
}

.professional-footer .btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .professional-machine-modal .modal-content {
        width: 98% !important;
        margin: 1% auto !important;
    }
    
    .professional-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .professional-machine-modal .modal-content {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0;
        max-height: 100vh !important;
    }
    
    .professional-tabs {
        flex-direction: column;
        max-height: 200px;
        overflow-y: auto;
        padding: 0;
    }
    
    .professional-tabs .form-tab {
        border-bottom: none;
        border-left: 3px solid transparent;
        text-align: left;
        padding: 1rem 1.5rem;
    }
    
    .professional-tabs .form-tab.active {
        border-left-color: #3b82f6;
        border-bottom: none;
    }
    
    .tab-content {
        padding: 1rem;
    }
    
    .form-grid,
    .compliance-grid,
    .safety-grid,
    .professional-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .professional-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .professional-footer > * {
        width: 100%;
        justify-content: center;
    }
}
    50% {
        transform: scale(1.1);
    }
}

/* Advanced Tab Progress */
.tab-progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 0 0 0.5rem 0.5rem;
    transform-origin: left;
    animation: progressExpand 0.5s ease-out;
}

@keyframes progressExpand {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* TÜV Professional Styling */
.tuev-certified-indicator {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 1rem;
    border-radius: 0.75rem;
    text-align: center;
    margin: 1rem 0;
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2);
    position: relative;
    overflow: hidden;
}

.tuev-certified-indicator::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Mobile Optimizations for Advanced Features */
@media (max-width: 768px) {
    .experimental-features {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .experimental-card {
        padding: 0.75rem;
    }
    
    .media-types-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .media-type-card {
        padding: 1rem;
    }
    
    .media-type-card i {
        font-size: 2rem;
    }
    
    .api-integrations {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .question-creator {
        flex-direction: column;
    }
    
    .question-creator .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .question-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .answer-option {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .true-false-options {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ===== DOCUMENT UPLOAD & TÜV EXPORT STYLES ===== */

/* Document Upload Area */
.document-upload-area {
    margin: 1.5rem 0;
}

.upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.upload-content i {
    font-size: 3rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.upload-content h5 {
    margin: 0 0 0.5rem 0;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
}

.upload-content p {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.btn-upload {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Uploaded Documents List */
.uploaded-documents {
    margin-top: 2rem;
}

.uploaded-documents h5 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
}

.document-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.document-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.document-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.document-info i {
    font-size: 1.5rem;
    color: #3b82f6;
    width: 24px;
    text-align: center;
}

.document-details h6 {
    margin: 0 0 0.25rem 0;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
}

.document-details small {
    color: #6b7280;
    font-size: 0.75rem;
}

.document-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-view,
.btn-download,
.btn-delete {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.btn-view {
    background: #3b82f6;
    color: white;
}

.btn-view:hover {
    background: #1d4ed8;
    transform: scale(1.1);
}

.btn-download {
    background: #10b981;
    color: white;
}

.btn-download:hover {
    background: #059669;
    transform: scale(1.1);
}

.btn-delete {
    background: #ef4444;
    color: white;
}

.btn-delete:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.no-documents {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 2rem;
    background: #f9fafb;
    border-radius: 0.75rem;
    border: 1px dashed #d1d5db;
}

/* TÜV Export Actions */
.export-actions {
    margin: 1.5rem 0;
}

.export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.btn-export {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    text-align: left;
    color: inherit;
    text-decoration: none;
}

.btn-export:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #ffffff, rgba(59, 130, 246, 0.05));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

.btn-export i {
    font-size: 2rem;
    color: #3b82f6;
    min-width: 40px;
    text-align: center;
}

.btn-export div strong {
    display: block;
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.btn-export div small {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Responsive Design for Document Management */
@media (max-width: 768px) {
    .export-grid {
        grid-template-columns: 1fr;
    }
    
    .btn-export {
        padding: 1rem;
    }
    
    .btn-export i {
        font-size: 1.5rem;
    }
    
    .document-item {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .document-actions {
        justify-content: center;
    }
}

/* Success/Error States for Document Upload */
.upload-zone.success {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.upload-zone.error {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.upload-zone.success i {
    color: #10b981;
}

.upload-zone.error i {
    color: #ef4444;
}

/* Print Styles - Hide Upload/Export in Print */
@media print {
    .document-upload-area,
    .export-actions {
        display: none !important;
    }
}

/* ===================================
   ENTERPRISE STÖRUNGSMELDUNG STYLES
   ================================= */

/* Ultra-Professional Modal Header */
.enterprise-modal-header {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 25%, #f59e0b 50%, #10b981 75%, #3b82f6 100%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    padding: 1.5rem 2rem;
    border-radius: 1rem 1rem 0 0;
    border: none;
    position: relative;
    overflow: hidden;
}

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

.enterprise-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 20px 20px;
    animation: stripeMove 2s linear infinite;
}

@keyframes stripeMove {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

.enterprise-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

.enterprise-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.enterprise-title-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    animation: pulse 2s infinite;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.enterprise-title-text {
    color: white;
}

.enterprise-title-text h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.enterprise-subtitle {
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 400;
}

.enterprise-status-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.2);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.status-text {
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
}

.enterprise-controls {
    display: flex;
    gap: 0.5rem;
}

.control-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
}

.control-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

/* Advanced Action Dashboard */
.advanced-action-dashboard {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.advanced-action-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.dashboard-header {
    text-align: center;
    margin-bottom: 2rem;
}

.dashboard-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dashboard-subtitle {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
}

.action-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 10;
}

.action-category {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.action-category:hover {
    border-color: #3b82f6;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.category-icon {
    width: 50px;
    height: 50px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.category-info h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
}

.category-info p {
    margin: 0.5rem 0 0 0;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Smart Templates */
.smart-templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.template-btn {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border: 2px solid #d1d5db;
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.template-btn:hover {
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
    border-color: #8b5cf6;
    transform: scale(1.02);
}

.template-btn.hydraulic { border-left: 4px solid #ef4444; }
.template-btn.electrical { border-left: 4px solid #f59e0b; }
.template-btn.mechanical { border-left: 4px solid #3b82f6; }
.template-btn.software { border-left: 4px solid #10b981; }

.template-title {
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.template-description {
    color: #6b7280;
    font-size: 0.75rem;
    margin: 0;
}

/* AI Tools */
.ai-tools {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ai-tool-btn {
    background: linear-gradient(135deg, #1f2937, #374151);
    border: 2px solid #4b5563;
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ai-tool-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transition: left 0.5s ease;
}

.ai-tool-btn:hover::before {
    left: 100%;
}

.ai-tool-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #60a5fa;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    transform: scale(1.05);
}

.ai-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 10;
}

.ai-title {
    font-weight: 600;
    margin: 0;
    font-size: 0.875rem;
    position: relative;
    z-index: 10;
}

/* Express Actions */
.express-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.express-btn {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
    border: none;
    border-radius: 2rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.express-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

.express-btn:hover::before {
    width: 200%;
    height: 200%;
}

.express-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.express-btn.priority { background: linear-gradient(135deg, #f59e0b, #d97706); }
.express-btn.emergency { 
    background: linear-gradient(135deg, #dc2626, #991b1b);
    animation: emergencyPulse 2s infinite;
}

@keyframes emergencyPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(220, 38, 38, 0.5); }
    50% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.8), 0 0 30px rgba(220, 38, 38, 0.4); }
}

.express-btn.duplicate { background: linear-gradient(135deg, #6b7280, #4b5563); }
.express-btn.draft { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

/* Voice Visualization */
.voice-visualization {
    display: none;
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
    border: 2px solid #f59e0b;
    border-radius: 1rem;
    padding: 2rem;
    margin: 1rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.voice-visualization.active {
    display: block;
    animation: voiceGlow 2s infinite;
}

@keyframes voiceGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.6); }
}

.voice-waveform {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 1rem 0;
}

.wave-bar {
    width: 4px;
    height: 20px;
    background: #f59e0b;
    border-radius: 2px;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.wave-bar:nth-child(1) { animation-name: wave1; animation-delay: 0.1s; }
.wave-bar:nth-child(2) { animation-name: wave2; animation-delay: 0.2s; }
.wave-bar:nth-child(3) { animation-name: wave3; animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-name: wave2; animation-delay: 0.4s; }
.wave-bar:nth-child(5) { animation-name: wave1; animation-delay: 0.5s; }

@keyframes wave1 { to { height: 40px; } }
@keyframes wave2 { to { height: 30px; } }
@keyframes wave3 { to { height: 50px; } }

.voice-status {
    color: #92400e;
    font-weight: 600;
    margin: 1rem 0;
}

.voice-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.keyword-tag {
    background: #f59e0b;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Camera Preview */
.camera-preview {
    display: none;
    background: #1f2937;
    border: 2px solid #374151;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem 0;
    position: relative;
}

.camera-preview.active {
    display: block;
}

.camera-viewfinder {
    width: 100%;
    height: 200px;
    background: #000;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.camera-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border: 2px dashed #3b82f6;
    border-radius: 0.5rem;
    animation: scanLine 2s infinite;
}

@keyframes scanLine {
    0%, 100% { border-color: #3b82f6; }
    50% { border-color: #60a5fa; }
}

.camera-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.camera-btn {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.camera-btn:hover {
    background: #1d4ed8;
    transform: scale(1.1);
}

/* Real-time Analysis Panel */
.realtime-analysis {
    display: none;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid #10b981;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

.realtime-analysis.active {
    display: block;
    animation: analysisGlow 3s infinite;
}

@keyframes analysisGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.4); }
}

.analysis-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.analysis-icon {
    width: 40px;
    height: 40px;
    background: #10b981;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.analysis-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #065f46;
    margin: 0;
}

.analysis-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background: white;
    border: 1px solid #a7f3d0;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #065f46;
    margin: 0;
}

.metric-label {
    color: #047857;
    font-size: 0.75rem;
    margin: 0.5rem 0 0 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analysis-suggestions {
    background: white;
    border: 1px solid #a7f3d0;
    border-radius: 0.75rem;
    padding: 1rem;
}

.suggestions-title {
    font-weight: 600;
    color: #065f46;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.suggestion-item {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.875rem;
    color: #065f46;
}

/* Predictive Analysis */
.prediction-panel {
    display: none;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

.prediction-panel.active {
    display: block;
}

.prediction-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.prediction-icon {
    width: 40px;
    height: 40px;
    background: #f59e0b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.prediction-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #92400e;
    margin: 0;
}

.prediction-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.prediction-card {
    background: white;
    border: 1px solid #fbbf24;
    border-radius: 0.75rem;
    padding: 1rem;
}

.prediction-type {
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.prediction-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d97706;
    margin: 0;
}

.prediction-confidence {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.confidence-bar {
    flex: 1;
    height: 4px;
    background: #fde68a;
    border-radius: 2px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: #f59e0b;
    transition: width 1s ease;
}

.confidence-text {
    font-size: 0.75rem;
    color: #92400e;
    font-weight: 500;
}

/* Audit Exchange Basic Styling */
.info-box {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 2rem;
    margin: 2rem 0;
}

.info-box h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.info-box ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.info-box li {
    margin: 0.5rem 0;
    color: var(--text-primary);
}

/* Tab Navigation */
.exchange-tabs {
    display: flex;
    background: var(--secondary-bg);
    border-radius: 0.75rem;
    padding: 0.5rem;
    margin-bottom: 2rem;
    border: 2px solid var(--border-color);
    gap: 0.25rem;
}

.exchange-tabs .tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.exchange-tabs .tab-btn.active {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.exchange-tabs .tab-btn:hover:not(.active) {
    background: var(--hover-bg);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Form Styling */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-color);
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--hover-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--border-color);
}

/* Statistics */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin: 1.5rem 0;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

.btn-link:hover {
    opacity: 0.8;
}

.no-offers {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
}

.offer-card {
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: var(--card-bg);
}

.offer-card h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.offer-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.offer-detail {
    font-size: 0.9rem;
}

.offer-detail strong {
    color: var(--text-primary);
}

.offer-detail span {
    color: var(--text-secondary);
}

/* Search Filters */
.search-filters {
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.search-filters h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Enhanced Audit Offer Display Styles */
.offer-section {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--secondary-bg);
}

.offer-section h5 {
    color: var(--accent-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.offer-section h5 i {
    font-size: 0.9rem;
    color: var(--accent-color);
}

.scope-description {
    margin: 0.5rem 0;
    padding: 0.75rem;
    background: var(--card-bg);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.process-areas, .industry-experience {
    margin-top: 0.75rem;
    color: var(--text-primary);
}

.process-tags, .industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.process-tag, .industry-tag {
    background: var(--accent-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
}

.process-tag:hover, .industry-tag:hover {
    background: var(--primary-bg);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Scope Requirements Styles */
.scope-requirements-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.scope-requirements-content h5 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.requirements-section, .focus-areas-section {
    margin: 1rem 0;
}

.requirements-section h6, .focus-areas-section h6 {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.requirements-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.requirements-list li {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0.4rem 0;
    padding-left: 0.5rem;
}

.focus-areas {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    background: var(--hover-bg);
    padding: 0.5rem;
    border-radius: 4px;
    margin: 0;
}

.info-text {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
    background: var(--hover-bg);
    border-radius: 8px;
    border: 2px dashed var(--border-color);
}

/* Form Section Styles */
.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-section h4 {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.form-section h4 i {
    font-size: 1rem;
    color: var(--accent-color);
}

/* Checkbox Group Styles */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.checkbox-label:hover {
    background: var(--hover-bg);
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

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

.checkmark {
    /* Custom checkmark styling if needed */
}

/* Field Help Text */
.field-help {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Enhanced Offer Actions */
.offer-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.offer-actions .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

.offer-actions .btn-secondary {
    background: var(--text-secondary);
    color: var(--text-primary);
}

.offer-actions .btn-secondary:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-1px);
}

.offer-actions .btn-danger {
    background: #dc2626;
    color: white;
}

.offer-actions .btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* Auditor Card Styles */
.auditor-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.auditor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.auditor-card h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.auditor-section {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--secondary-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.auditor-section h5 {
    color: var(--accent-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.auditor-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.auditor-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.auditor-detail strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 1rem;
}

.auditor-detail span {
    color: var(--text-secondary);
    text-align: right;
}

.services-list {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1rem;
    margin: 0.75rem 0;
}

.service-item {
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
    font-size: 0.9rem;
}

.service-item strong {
    color: var(--accent-color);
}

.more-services {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 0.75rem;
    padding: 0.5rem;
}

.auditor-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-color);
    justify-content: center;
}

.auditor-actions .btn-primary,
.auditor-actions .btn-secondary {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-weight: 600;
    min-width: 140px;
    justify-content: center;
}

.auditor-actions .btn-primary {
    background: var(--accent-color);
    color: white;
}

.auditor-actions .btn-primary:hover {
    background: var(--primary-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.auditor-actions .btn-secondary {
    background: var(--text-secondary);
    color: var(--text-primary);
}

.auditor-actions .btn-secondary:hover {
    background: var(--border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-actions {
    display: flex;
    gap: 1rem;
}

/* Auditor Management Styles - Premium Design */
.auditor-management {
    background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    padding: 25px;
}

.auditor-management::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}

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

.auditor-management-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    background: rgba(102, 126, 234, 0.05);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.auditor-management-tabs .tab-btn {
    background: transparent;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #6b7280;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.auditor-management-tabs .tab-btn::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.6s;
}

.auditor-management-tabs .tab-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.auditor-management-tabs .tab-btn:hover::before {
    left: 100%;
}

.auditor-management-tabs .tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    transform: translateY(-3px);
}

.auditor-management-tabs .tab-btn.active i {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.auditor-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
}

.stat-card .stat-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.stat-card .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-card .stat-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Auditplan-Generator Premium Design */
#audit-plan-generator-tab {
    background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.9) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

#audit-plan-generator-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981 0%, #059669 50%, #047857 100%);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}

.audit-config-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.audit-config-header h3 {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.audit-config-header p {
    color: #6b7280;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.config-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.config-section {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    padding: 25px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.config-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 16px 16px 0 0;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.config-section:hover::before {
    transform: scaleX(1);
}

.config-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.config-section h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icons für Auditplan-Generator Konfiguration */
#audit-plan-generator-tab .config-section h4 i {
    font-size: 1.8rem;
    color: #667eea;
    margin-right: 15px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    transform: none !important;
    transition: none !important;
}

#audit-plan-generator-tab .config-section h4 i:hover {
    color: #4f46e5;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(102, 126, 234, 0.1) 100%);
    transform: none !important;
}

/* Icons für Auditor-Verwaltung */
.auditor-management .config-section h4 i {
    font-size: 1.8rem;
    color: #667eea;
    margin-right: 15px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    transform: none !important;
    transition: none !important;
}

.auditor-management .config-section h4 i:hover {
    color: #4f46e5;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(102, 126, 234, 0.1) 100%);
    transform: none !important;
}

/* Premium Buttons für Auditplan-Generator */
.audit-action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.premium-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.premium-btn::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.6s;
}

.premium-btn:hover::before {
    left: 100%;
}

.premium-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.premium-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.premium-btn.secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 6px 20px rgba(107, 114, 128, 0.3);
}

.premium-btn.secondary:hover {
    box-shadow: 0 10px 30px rgba(107, 114, 128, 0.4);
}

.premium-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

.premium-btn.danger:hover {
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

/* Premium Audit Blocks Container */
.audit-blocks-container {
    background: linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.5);
    border-radius: 16px;
    padding: 25px;
    margin: 25px 0;
    position: relative;
}

.audit-blocks-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

/* ========== AUDIT NOTES BLOCKS STYLING ========== */
.audit-notes-generator .audit-blocks-section {
    background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.7) 100%);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 30px;
    margin: 25px 0;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
    position: relative;
    overflow: hidden;
}

.audit-notes-generator .audit-blocks-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ef4444 100%);
    border-radius: 16px 16px 0 0;
}

.audit-notes-generator .blocks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.audit-notes-generator .blocks-header h4 {
    margin: 0;
    color: #1e40af;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.audit-notes-generator .blocks-header h4 i {
    color: #3b82f6;
    font-size: 1.2em;
}

.audit-notes-generator .info-notice {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 25px;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95em;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.audit-notes-generator .info-notice i {
    color: #3b82f6;
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Enhanced Notes Block Styling */
.audit-notes-generator .audit-block {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 25px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.08);
    overflow: hidden;
}

.audit-notes-generator .audit-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ef4444 100%);
    border-radius: 20px 20px 0 0;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.audit-notes-generator .audit-block:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 15px 45px rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.audit-notes-generator .audit-block:hover::before {
    opacity: 1;
}

/* Block Header Improvements */
.audit-notes-generator .block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.1);
}

.audit-notes-generator .block-title {
    font-weight: 700;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1em;
}

.audit-notes-generator .block-title i {
    color: #3b82f6;
    font-size: 1.3em;
}

.audit-notes-generator .block-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.audit-notes-generator .block-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.audit-notes-generator .block-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.audit-notes-generator .block-btn.remove {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.audit-notes-generator .block-btn.remove:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.audit-notes-generator .block-btn.duplicate {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.audit-notes-generator .block-btn.duplicate:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* Block Form Improvements */
.audit-notes-generator .block-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.audit-notes-generator .block-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.audit-notes-generator .block-form-group.full-width {
    grid-column: 1 / -1;
}

.audit-notes-generator .block-form-group.date-group {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 16px;
    border-radius: 12px;
    border: 2px solid rgba(251, 191, 36, 0.3);
}

.audit-notes-generator .block-form-group label {
    font-weight: 700;
    color: #1e40af;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audit-notes-generator .block-form-group label::before {
    content: "▶";
    color: #3b82f6;
    font-size: 0.8em;
    opacity: 0.7;
}

.audit-notes-generator .block-form-group input,
.audit-notes-generator .block-form-group select,
.audit-notes-generator .block-form-group textarea {
    padding: 14px 18px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    font-size: 0.95em;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);
    backdrop-filter: blur(4px);
}

.audit-notes-generator .block-form-group input:focus,
.audit-notes-generator .block-form-group select:focus,
.audit-notes-generator .block-form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 24px rgba(59, 130, 246, 0.15);
    background: #ffffff;
    transform: translateY(-2px) scale(1.02);
}

.audit-notes-generator .block-form-group input:valid,
.audit-notes-generator .block-form-group select:valid {
    border-color: #10b981;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.1);
}

.audit-notes-generator .block-form-group textarea {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
    line-height: 1.6;
}

.audit-notes-generator .block-form-group select[multiple] {
    min-height: 120px;
    padding: 12px;
}

.audit-notes-generator .block-form-group small {
    color: #6b7280;
    font-size: 0.85em;
    font-style: italic;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.audit-notes-generator .block-form-group small::before {
    content: "ℹ";
    color: #3b82f6;
    font-weight: bold;
}

/* Multi-input styling */
.audit-notes-generator .multi-input-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.05);
}

.audit-notes-generator .multi-input-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.audit-notes-generator .multi-input-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(4px);
}

.audit-notes-generator .multi-input-item input {
    flex: 1;
    border: 2px solid rgba(59, 130, 246, 0.15);
    background: rgba(255, 255, 255, 0.95);
}

.audit-notes-generator .remove-input-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 10px;
    padding: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit-notes-generator .remove-input-btn:hover {
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.audit-notes-generator .add-input-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audit-notes-generator .add-input-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.audit-notes-generator .add-input-btn i {
    transition: transform 0.3s ease;
}

.audit-notes-generator .add-input-btn:hover i {
    transform: rotate(90deg) scale(1.2);
}

/* Dark theme support */
[data-theme="dark"] .audit-notes-generator .audit-blocks-section {
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.7) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .audit-notes-generator .audit-block {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .audit-notes-generator .block-form-group input,
[data-theme="dark"] .audit-notes-generator .block-form-group select,
[data-theme="dark"] .audit-notes-generator .block-form-group textarea {
    background: rgba(17, 24, 39, 0.8);
    border-color: rgba(75, 85, 99, 0.5);
    color: #f9fafb;
}

/* Department Documents Styling */
.audit-notes-generator .department-documents {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-top: 15px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
}

.audit-notes-generator .department-documents::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
    border-radius: 16px 16px 0 0;
}

.audit-notes-generator .department-documents.show {
    animation: slideInUp 0.5s ease-out;
    transform: scale(1);
    opacity: 1;
}

@keyframes slideInUp {
    0% {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.audit-notes-generator .department-documents label {
    color: #0369a1;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.audit-notes-generator .department-documents label::before {
    content: '📋';
    font-size: 1.2em;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}

.audit-notes-generator .department-documents select {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid rgba(14, 165, 233, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 0.95em;
    color: #1e293b;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 120px;
    resize: vertical;
}

.audit-notes-generator .department-documents select:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);
    background: #ffffff;
    transform: translateY(-2px);
}

.audit-notes-generator .department-documents select:hover {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 6px 25px rgba(14, 165, 233, 0.15);
}

.audit-notes-generator .department-documents select option {
    padding: 12px 16px;
    color: #1e293b;
    background: #ffffff;
    border-bottom: 1px solid rgba(14, 165, 233, 0.1);
    transition: all 0.2s ease;
}

.audit-notes-generator .department-documents select option:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    color: #0369a1;
}

.audit-notes-generator .department-documents select option:checked {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    color: white;
    font-weight: 600;
}

.audit-notes-generator .department-documents small {
    color: #0369a1;
    font-weight: 500;
    font-size: 0.85em;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 165, 233, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 4px solid #0ea5e9;
}

.audit-notes-generator .department-documents small::before {
    content: '💡';
    font-size: 1em;
}

/* Department Input Container Enhancement */
.audit-notes-generator .department-input-container {
    position: relative;
}

.audit-notes-generator .department-input-container select {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
}

.audit-notes-generator .department-input-container select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #ffffff;
    transform: translateY(-1px);
}

.audit-notes-generator .department-input-container input {
    margin-top: 10px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
}

.audit-notes-generator .department-input-container input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #ffffff;
    transform: translateY(-1px);
}

/* Enhanced Multi-Select Styling */
.audit-notes-generator .department-documents select[multiple] {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid rgba(14, 165, 233, 0.3);
    border-radius: 16px;
    padding: 20px;
    min-height: 140px;
    max-height: 200px;
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.6;
    box-shadow: 
        0 8px 25px rgba(14, 165, 233, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.5);
}

.audit-notes-generator .department-documents select[multiple]::-webkit-scrollbar {
    width: 8px;
}

.audit-notes-generator .department-documents select[multiple]::-webkit-scrollbar-track {
    background: rgba(14, 165, 233, 0.1);
    border-radius: 8px;
}

.audit-notes-generator .department-documents select[multiple]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.audit-notes-generator .department-documents select[multiple]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
}

/* Document Counter Badge */
.audit-notes-generator .department-documents::after {
    content: attr(data-count) ' Dokumente verfügbar';
    position: absolute;
    top: 15px;
    right: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
    z-index: 10;
}

/* Dark Theme Support for Documents */
[data-theme="dark"] .audit-notes-generator .department-documents {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.8) 100%);
    border-color: rgba(14, 165, 233, 0.4);
}

[data-theme="dark"] .audit-notes-generator .department-documents select {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    border-color: rgba(14, 165, 233, 0.4);
    color: #f9fafb;
}

[data-theme="dark"] .audit-notes-generator .department-documents select option {
    background: #1f2937;
    color: #f9fafb;
}

[data-theme="dark"] .audit-notes-generator .department-documents select option:checked {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    color: white;
}

[data-theme="dark"] .audit-notes-generator .department-documents small {
    background: rgba(14, 165, 233, 0.2);
    color: #bae6fd;
}

/* Responsive Design for Notes Blocks */
@media (max-width: 768px) {
    .audit-notes-generator .block-form {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    
    .audit-notes-generator .blocks-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .audit-notes-generator .block-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .audit-notes-generator .block-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .audit-notes-generator .audit-block {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .audit-notes-generator .department-documents {
        padding: 15px;
        margin-top: 10px;
    }
    
    /* Mobile-optimized document rows */
    .audit-notes-generator .document-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }
    
    .audit-notes-generator .remove-document-btn {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        justify-content: center;
        margin-top: 8px;
    }
    
    .audit-notes-generator .add-document-row-btn {
        width: 100%;
        padding: 16px;
        justify-content: center;
        font-size: 1rem;
    }
    
    /* Mobile-optimized multi-input */
    .audit-notes-generator .multi-input-item {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        align-items: stretch;
    }
    
    .audit-notes-generator .remove-input-btn {
        width: 100%;
        height: 48px;
        margin-top: 8px;
        justify-content: center;
    }
    
    .audit-notes-generator .add-input-btn {
        width: 100%;
        padding: 16px;
        font-size: 1rem;
    }
    
    .audit-notes-generator .department-documents select[multiple] {
        min-height: 120px;
        max-height: 160px;
        padding: 15px;
    }
    
    .audit-notes-generator .department-documents::after {
        position: static;
        display: block;
        text-align: center;
        margin-top: 10px;
        border-radius: 12px;
    }
}

.blocks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(226, 232, 240, 0.5);
}

.blocks-header h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
}

.blocks-header h4 i {
    color: #667eea;
    font-size: 1.2rem;
}

/* Enhanced Progress Indicators */
.progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    padding: 15px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.progress-step:hover {
    background: rgba(16, 185, 129, 0.1);
    transform: translateX(5px);
}

.step-number {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.step-content h5 {
    margin: 0 0 5px 0;
    color: #1f2937;
    font-weight: 600;
}

.step-content p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-primary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.auditor-list {
    display: grid;
    gap: 1.5rem;
}

.auditor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.auditor-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.auditor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.auditor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.auditor-name {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.auditor-name strong {
    font-size: 1.125rem;
    color: var(--text-primary);
}

.auditor-certification {
    color: var(--accent-color);
    font-size: 0.875rem;
    font-weight: 500;
}

.auditor-status {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-aktiv {
    background: #d1fae5;
    color: #065f46;
}

.status-inaktiv {
    background: #fee2e2;
    color: #991b1b;
}

.status-urlaub {
    background: #fef3c7;
    color: #92400e;
}

.status-ausgebucht {
    background: #e0e7ff;
    color: #3730a3;
}

.auditor-details {
    margin-bottom: 1rem;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.detail-row i {
    width: 1rem;
    color: var(--accent-color);
}

.auditor-standards,
.auditor-industries {
    margin-bottom: 1rem;
}

.auditor-standards strong,
.auditor-industries strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.badge {
    background: var(--accent-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.industry-badge {
    background: #10b981;
}

.auditor-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-small {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-small.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-small.btn-secondary {
    background: #6b7280;
    color: white;
}

.btn-small.btn-danger {
    background: #dc2626;
    color: white;
}

.btn-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-filters {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.filter-group input,
.filter-group select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-results-header {
    margin-bottom: 1.5rem;
}

.search-results-header h4 {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.no-auditors,
.no-results {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 0.75rem;
    border: 2px dashed var(--border-color);
}

.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section h4 {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.checkbox-label:hover {
    background: var(--hover-bg);
}

.checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-color);
}

.checkmark {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.25rem;
    position: relative;
    margin-right: 0.5rem;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

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

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Enhanced Audit Exchange Styles */

/* Hero Section */
.exchange-hero {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
    border-radius: 1rem;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.exchange-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.hero-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-text p {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-hero {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
}

.exchange-icon-large {
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float 3s ease-in-out infinite;
}

.exchange-icon-large i {
    font-size: 4rem;
    color: white;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Dashboard Statistics */
.dashboard-stats {
    margin-bottom: 3rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
    transition: width 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.stat-card:hover::before {
    width: 8px;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-primary .stat-icon { background: var(--accent-color); }
.stat-success .stat-icon { background: #10b981; }
.stat-info .stat-icon { background: #06b6d4; }
.stat-warning .stat-icon { background: #f59e0b; }

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-sublabel {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Quick Actions */
.quick-actions-section {
    margin-bottom: 3rem;
}

.quick-actions-section h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.quick-action-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), #1e40af);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.quick-action-card:hover::before {
    transform: scaleX(1);
}

.quick-action-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-color), #1e40af);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2rem;
    transition: transform 0.3s;
}

.quick-action-card:hover .quick-action-icon {
    transform: scale(1.1);
}

.quick-action-card h4 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.quick-action-card p {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Dashboard Content */
.dashboard-content {
    margin-bottom: 3rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.content-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline {
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: var(--accent-color);
    color: white;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(var(--accent-color-rgb), 0.05);
    transition: background-color 0.2s;
}

.activity-item:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.activity-success { background: #10b981; }
.activity-info { background: #06b6d4; }
.activity-warning { background: #f59e0b; }

.activity-content h4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.activity-content p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.activity-time {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

/* Empty State */
.no-offers-state {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    background: var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--text-secondary);
    font-size: 2rem;
}

.no-offers-state h4 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.no-offers-state p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Trending Section */
.trending-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
}

.trending-section h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.trending-card {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.1), rgba(var(--accent-color-rgb), 0.05));
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.3s;
}

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

.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.standard-badge {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.iso-9001 { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.iso-14001 { background: linear-gradient(135deg, #10b981, #047857); }
.iso-45001 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.iatf-16949 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.trending-count {
    color: #10b981;
    font-weight: 600;
    font-size: 0.875rem;
}

.trending-card h4 {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.trending-card p {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Enhanced Tabs */
.exchange-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: var(--card-bg);
    padding: 0.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
}

.exchange-tabs .tab-btn {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
}

.exchange-tabs .tab-btn:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}

.exchange-tabs .tab-btn.active {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
}

/* Modern Offer Cards */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.modern-offer-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
}

.modern-offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.offer-header {
    padding: 1.5rem 1.5rem 1rem;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.1), rgba(var(--accent-color-rgb), 0.05));
    border-bottom: 1px solid var(--border-color);
}

.offer-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.offer-badge {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.offer-badge.iso-9001 { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.offer-badge.iso-14001 { background: linear-gradient(135deg, #10b981, #047857); }
.offer-badge.iso-45001 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.offer-badge.iatf-16949 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.offer-badge.iso-27001 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.offer-badge.as9100 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.offer-badge.iso-13485 { background: linear-gradient(135deg, #ec4899, #db2777); }
.offer-badge.iso-22000 { background: linear-gradient(135deg, #84cc16, #65a30d); }
.offer-badge.standard-default { background: linear-gradient(135deg, #6b7280, #4b5563); }

.offer-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.offer-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.offer-type {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.offer-quick-info {
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.quick-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.quick-info-item i {
    color: var(--accent-color);
    width: 1rem;
    text-align: center;
}

.offer-key-details {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.offer-key-details h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.process-tags-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.process-tag-modern {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
}

.process-tag-more {
    background: var(--border-color);
    color: var(--text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.availability-info {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(16, 185, 129, 0.05);
}

.availability-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.availability-item:last-child {
    margin-bottom: 0;
}

.text-success { color: #10b981; }
.text-warning { color: #f59e0b; }

.expertise-preview {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.expertise-item {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cert-badge,
.experience-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
}

.industry-preview {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.industry-preview h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.industry-tags-compact {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.industry-tag-compact {
    background: #10b981;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.industry-more {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.offer-footer {
    padding: 1.5rem;
    background: rgba(var(--accent-color-rgb), 0.03);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-stats {
    display: flex;
    gap: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.stat-item i {
    color: var(--accent-color);
}

.stat-number {
    font-weight: 600;
    color: var(--text-primary);
}

.offer-actions-modern {
    display: flex;
    gap: 0.5rem;
}

.btn-action {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.btn-edit-modern {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}

.btn-edit-modern:hover {
    background: var(--accent-color);
    color: white;
}

.btn-view-modern {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.btn-view-modern:hover {
    background: #10b981;
    color: white;
}

.btn-delete-modern {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-delete-modern:hover {
    background: #ef4444;
    color: white;
}

/* TÜV-compliant Notification System */
.notification-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
    pointer-events: none;
}

.notification {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    font-weight: 500;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.notification:hover {
    transform: translateX(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.notification.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.notification.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.notification.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.notification.info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.notification-icon {
    font-size: 1.25rem;
    opacity: 0.9;
}

.notification-message {
    flex: 1;
    line-height: 1.4;
}

.notification-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.notification-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.3);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification.fade-out {
    animation: slideOutRight 0.3s ease-in forwards;
}

/* Enhanced Auditor Details Modal System */
.auditor-details-modal-overlay,
.contact-modal-overlay,
.request-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
}

.auditor-details-modal-content,
.contact-modal-content,
.request-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: slideInUp 0.3s ease-out;
}

.auditor-details-modal-content {
    width: 1200px;
}

.contact-modal-content {
    width: 600px;
}

.request-modal-content {
    width: 800px;
}

.auditor-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
}

.info-card.full-width {
    grid-column: 1 / -1;
}

.info-card h3 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-card h3 i {
    color: var(--accent-color);
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.info-item.full-width {
    flex-direction: column;
    gap: 0.5rem;
}

.info-item i {
    color: #64748b;
    width: 20px;
    margin-top: 2px;
}

.info-item div {
    flex: 1;
}

.info-item label {
    display: block;
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.info-item span {
    color: #1f2937;
    font-size: 0.95rem;
}

.auditor-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.auditor-status-badge.status-aktiv {
    background: #d1fae5;
    color: #065f46;
}

.auditor-status-badge.status-verfügbar {
    background: #dbeafe;
    color: #1e40af;
}

.auditor-status-badge.status-beschäftigt {
    background: #fef3c7;
    color: #92400e;
}

.certification-badge {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
}

.standards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.standard-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
}

.standard-badge.iso-9001 {
    background: linear-gradient(135deg, #059669, #047857);
}

.standard-badge.iso-14001 {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

.standard-badge.iso-45001 {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.standard-badge.iatf-16949 {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.standard-badge.iso-27001 {
    background: linear-gradient(135deg, #ea580c, #c2410c);
}

.standard-badge.standard-default {
    background: linear-gradient(135deg, #64748b, #475569);
}

.industries-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.industry-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.industry-item i {
    color: #10b981;
    font-size: 0.875rem;
}

.industry-item span {
    font-weight: 500;
    color: #374151;
}

.status-indicator {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-indicator.status-aktiv {
    background: #d1fae5;
    color: #065f46;
}

.status-indicator.status-verfügbar {
    background: #dbeafe;
    color: #1e40af;
}

.status-indicator.status-beschäftigt {
    background: #fef3c7;
    color: #92400e;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.notes-content {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    line-height: 1.6;
    color: #374151;
}

.auditor-id {
    font-family: monospace;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #475569;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
}

.modal-header h2,
.modal-header h3 {
    margin: 0;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.modal-footer {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    justify-content: flex-end;
}

.contact-form,
.audit-request-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-info {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.contact-info p {
    margin: 0.5rem 0;
}

.contact-info a {
    color: var(--accent-color);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smart Matching System Styles */
.match-results-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(6px);
    animation: fadeIn 0.4s ease-out;
}

.match-results-content {
    background: white;
    border-radius: 16px;
    width: 1000px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    animation: slideInUp 0.4s ease-out;
}

.match-count {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.request-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.request-summary h3 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
}

.request-details {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.detail-item i {
    color: var(--accent-color);
    width: 16px;
}

.matches-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.match-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
}

.match-card[data-match-score="100"]::before {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.match-card[data-match-score^="9"]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.match-card[data-match-score^="8"]::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.match-card[data-match-score^="7"]::before {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.match-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.match-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.match-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rank-number {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.match-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent-color) 0%, var(--accent-color) var(--percentage, 75%), #e5e7eb var(--percentage, 75%), #e5e7eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
}

.score-circle span {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--accent-color);
}

.score-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.auditor-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auditor-info h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.auditor-cert {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    align-self: flex-start;
}

.auditor-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.match-actions {
    display: flex;
    gap: 0.5rem;
}

.match-details {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: start;
}

.match-strengths h5 {
    margin: 0 0 0.75rem 0;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
}

.strengths-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.strength-item {
    background: #f0f9ff;
    color: #0369a1;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.strength-item.excellent {
    background: #fef3c7;
    color: #92400e;
}

.strength-item i {
    font-size: 0.75rem;
}

.auditor-badges {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}

.standards-preview {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.mini-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.mini-badge.standard {
    background: #e0f2fe;
    color: #0369a1;
}

.mini-badge.more {
    background: #f3f4f6;
    color: #6b7280;
}

.availability-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.availability-badge.aktiv {
    background: #d1fae5;
    color: #065f46;
}

.availability-badge.verfügbar {
    background: #dbeafe;
    color: #1e40af;
}

.availability-badge.beschäftigt {
    background: #fef3c7;
    color: #92400e;
}

/* Enhanced Search and Filter System */
.advanced-search-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.search-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

.search-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* Responsive Design for Modals */
@media (max-width: 768px) {
    .auditor-details-modal-content,
    .contact-modal-content,
    .request-modal-content,
    .match-results-content {
        width: 95vw;
        margin: 1rem;
    }
    
    .auditor-info-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .match-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .match-details {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .auditor-badges {
        align-items: flex-start;
    }
    
    .request-details {
        flex-direction: column;
        gap: 1rem;
    }
    
    .search-filters-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive Design for Enterprise Features */
@media (max-width: 768px) {
    .enterprise-header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .enterprise-status-section {
        justify-content: center;
    }
    
    .action-categories {
        grid-template-columns: 1fr;
    }
    
    .smart-templates,
    .ai-tools {
        grid-template-columns: 1fr;
    }
    
    .express-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .analysis-metrics,
    .prediction-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Action Buttons Section für TÜV-konformes Audit-Angebot */
.action-buttons-section {
    padding: 2rem;
    background: linear-gradient(135deg, var(--accent-color) 0%, rgba(59, 130, 246, 0.8) 100%);
    border-radius: 1rem;
    margin-bottom: 2rem;
    text-align: center;
    color: white;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    min-width: 350px;
}

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

.action-buttons-section .help-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Divider Section */
.divider-section {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    gap: 1rem;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.divider-text {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Advanced Audit Form Overlay */
.advanced-audit-form-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 2rem;
}

.advanced-audit-form-content {
    background: var(--card-bg);
    border-radius: 1rem;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.advanced-audit-form .form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--secondary-bg);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}

.advanced-audit-form .form-section h3 {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.advanced-audit-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.advanced-audit-form .form-group.required label::after {
    content: " *";
    color: #dc2626;
    font-weight: 600;
}

.advanced-audit-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.advanced-audit-form .form-group input,
.advanced-audit-form .form-group select,
.advanced-audit-form .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.advanced-audit-form .form-group input:focus,
.advanced-audit-form .form-group select:focus,
.advanced-audit-form .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.advanced-audit-form .form-group small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.advanced-audit-form .checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.advanced-audit-form .checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.optional-section {
    border-left: 4px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.optional-section h3 {
    color: #f59e0b !important;
}

@media (max-width: 768px) {
    .advanced-audit-form .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .btn-large {
        min-width: auto;
        width: 100%;
    }
    
    .advanced-audit-form-overlay {
        padding: 1rem;
    }
}

/* Modern Info Card Styling */
.info-card.modern-info {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.info-card .info-header h3 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.info-card .info-content p {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(var(--border-color-rgb), 0.3);
}

.feature-list li:last-child {
    border-bottom: none;
}

.text-success {
    color: #10b981;
}

.info-action {
    background: rgba(var(--accent-color-rgb), 0.1);
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
}

.info-action p {
    margin: 0;
    font-weight: 500;
    color: var(--accent-color);
}

/* Responsive Info Card */
@media (max-width: 768px) {
    .info-card.modern-info {
        padding: 1.5rem;
    }
    
    .feature-list li {
        font-size: 0.9rem;
    }
}

/* TÜV-konforme Formular-Styles */
.tuv-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: white;
    padding: 2rem;
    position: relative;
    border-radius: 1rem 1rem 0 0;
}

.compliance-badge {
    position: absolute;
    top: 1rem;
    right: 5rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tuv-form {
    padding: 2rem;
    max-height: 80vh;
    overflow-y: auto;
}

.tuv-section {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tuv-section h3 {
    color: #1e3a8a;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

.compliance-section {
    border-left-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.compliance-section h3 {
    color: #dc2626;
}

.compliance-confirmation {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem;
}

.compliance-confirmation h3 {
    color: #16a34a;
    text-align: center;
    margin-bottom: 2rem;
}

.compliance-checkboxes {
    display: grid;
    gap: 1rem;
}

.compliance-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #d1fae5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.compliance-checkbox:hover {
    background: #f0fdf4;
    border-color: #22c55e;
}

.compliance-checkbox input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: #22c55e;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.checkbox-grid label:hover {
    background: #f8fafc;
    border-color: #3b82f6;
}

.checkbox-grid input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #3b82f6;
}

/* Erweiterte Process-Scope Grid */
.process-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.scope-category {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.scope-category:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.scope-category h5 {
    margin: 0 0 0.75rem 0;
    color: #1e40af;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 0.5rem;
}

.scope-category label {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    border: 1px solid #e5e7eb;
    font-size: 0.85rem;
}

.scope-category label:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: translateX(2px);
}

.scope-category input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 1rem;
    height: 1rem;
    accent-color: #3b82f6;
}

.scope-category input[type="checkbox"]:checked + span {
    font-weight: 500;
    color: #1e40af;
}

.checkbox-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.checkbox-actions .btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-actions .btn-small:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.checkbox-actions .btn-primary {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.checkbox-actions .btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.help-text {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: normal;
}

/* Responsive Anpassungen für Process-Scope */
@media (max-width: 768px) {
    .process-scope-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .scope-category {
        padding: 0.75rem;
    }
    
    .checkbox-actions {
        flex-direction: column;
    }
    
    .checkbox-actions .btn-small {
        text-align: center;
    }
}

/* Scope-Matching-Ampel System */
.scope-matching-indicator {
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    border: 2px solid;
    background: white;
    transition: all 0.3s ease;
}

.scope-matching-indicator.green {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.scope-matching-indicator.yellow {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.scope-matching-indicator.red {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
}

.match-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.match-icon {
    font-size: 1.25rem;
}

.confidence-badge {
    background: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: auto;
}

.scope-matching-indicator.green .confidence-badge {
    background: #10b981;
    color: white;
}

.scope-matching-indicator.yellow .confidence-badge {
    background: #f59e0b;
    color: white;
}

.scope-matching-indicator.red .confidence-badge {
    background: #ef4444;
    color: white;
}

.match-message {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.scope-details {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.scope-details strong {
    color: #374151;
}

.match-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.match-actions .btn-small {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.match-actions .btn-success {
    background: #10b981;
    color: white;
}

.match-actions .btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
}

.match-actions .btn-danger {
    background: #ef4444;
    color: white;
    opacity: 0.7;
    cursor: not-allowed;
}

.match-actions .btn-info {
    background: #3b82f6;
    color: white;
}

.match-actions .btn-info:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* IAF-Code Dropdown Erweiterungen */
.iaf-code-selector {
    position: relative;
}

.iaf-code-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    display: none;
}

.iaf-code-info.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

.iaf-code-info .code-title {
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.5rem;
}

.iaf-code-info .code-examples {
    color: #6b7280;
    font-style: italic;
}

.iaf-code-info .code-requirements {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.iaf-code-info .complexity-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.complexity-badge.standard {
    background: #dbeafe;
    color: #1e40af;
}

.complexity-badge.advanced {
    background: #fef3c7;
    color: #92400e;
}

.complexity-badge.expert {
    background: #fecaca;
    color: #991b1b;
}

/* Benachrichtigungen für Scope-Matching */
.notification.scope-match {
    border-left: 4px solid #10b981;
}

.notification.scope-partial {
    border-left: 4px solid #f59e0b;
}

.notification.scope-mismatch {
    border-left: 4px solid #ef4444;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Anpassungen für Scope-Matching */
@media (max-width: 768px) {
    .scope-matching-indicator {
        padding: 0.75rem;
    }
    
    .match-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .confidence-badge {
        align-self: flex-end;
        margin-left: 0;
    }
    
    .match-actions {
        flex-direction: column;
    }
    
    .match-actions .btn-small {
        justify-content: center;
        text-align: center;
    }
}

/* Kalender-System für Auditor-Verfügbarkeit - Schritt 1: Basis CSS */
.auditor-calendar-container {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calendar-nav-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-nav-btn:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.calendar-month-year {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    min-width: 200px;
    text-align: center;
}

.calendar-actions {
    display: flex;
    gap: 0.5rem;
}

.calendar-view-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.calendar-view-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.calendar-view-btn.active {
    background: white;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.availability-status-legend {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.status-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.status-available { background: #10b981; }
.status-unavailable { background: #ef4444; }
.status-booked { background: #3b82f6; }
.status-preferred { background: #f59e0b; }

/* Simple Calendar Grid für erste Implementation */
.simple-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-day-header {
    background: #f8fafc;
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: #475569;
}

.calendar-day {
    background: white;
    min-height: 60px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 2px solid transparent;
}

.calendar-day:hover {
    background: #f8fafc;
}

.calendar-day.other-month {
    background: #f8fafc;
    color: #94a3b8;
}

.calendar-day.today {
    border-color: #3b82f6;
    background: #eff6ff;
}

.calendar-day.available {
    background: #ecfdf5;
}

.calendar-day.unavailable {
    background: #fef2f2;
}

.calendar-day.booked {
    background: #dbeafe;
}

.calendar-day-number {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.calendar-day-indicators {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.calendar-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Responsive Calendar */
@media (max-width: 768px) {
    .calendar-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .calendar-navigation {
        justify-content: center;
    }
    
    .calendar-actions {
        justify-content: center;
    }
    
    .availability-status-legend {
        justify-content: center;
    }
    
    .calendar-day {
        min-height: 40px;
        padding: 0.25rem;
    }
    
    .calendar-day-number {
        font-size: 0.75rem;
    }
}

/* Auditor Selection Bar */
.auditor-selection-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.auditor-selection-bar label {
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.auditor-selection-bar select {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    min-width: 200px;
}

.auditor-selection-bar select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

.auditor-selection-bar .btn {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .auditor-selection-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .auditor-selection-bar .btn {
        margin-left: 0;
    }
}

/* Availability Modal Styles */
.availability-modal {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.availability-modal .modal-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 0.75rem 0.75rem 0 0;
}

.availability-modal .modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.availability-modal .modal-body {
    padding: 2rem;
    background: white;
    border-radius: 0 0 0.75rem 0.75rem;
}

.availability-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auditor-info {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.auditor-info h3 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.1rem;
}

.auditor-info p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.form-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.form-section h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section h4 i {
    color: #3b82f6;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    transition: border-color 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.weekdays-group {
    margin-top: 1rem;
}

.weekdays-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.weekdays-selector label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
}

.weekdays-selector label:hover {
    background: #e2e8f0;
}

.weekdays-selector input[type="checkbox"] {
    margin: 0;
    width: auto;
    height: auto;
}

.weekdays-selector input[type="checkbox"]:checked + label,
.weekdays-selector label:has(input[type="checkbox"]:checked) {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.form-actions .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s ease;
}

.form-actions .btn-secondary {
    background: #f8fafc;
    color: #374151;
    border: 1px solid #d1d5db;
}

.form-actions .btn-secondary:hover {
    background: #e2e8f0;
}

.form-actions .btn-primary {
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
}

.form-actions .btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

/* Calendar Availability States */
.calendar-day.available {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #22c55e;
    color: #15803d;
}

.calendar-day.partially-available {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #d97706;
}

.calendar-day.unavailable {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
    color: #dc2626;
}

.calendar-day.preferred {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1d4ed8;
}

.calendar-day.available:hover {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.calendar-day.partially-available:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.calendar-day.unavailable:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.calendar-day.preferred:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Availability legend */
.availability-legend {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.availability-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.availability-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid;
}

.availability-legend-color.available {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #22c55e;
}

.availability-legend-color.partially {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}

.availability-legend-color.unavailable {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
}

.availability-legend-color.preferred {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
}

@media (max-width: 768px) {
    .availability-modal {
        max-width: 95vw;
        margin: 1rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .availability-legend {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .weekdays-selector {
        justify-content: space-between;
    }
    
    .weekdays-selector label {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
}

/* Day Details Modal Styles */
.day-details-modal {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.day-details-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.day-info h3 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.25rem;
}

.date-display {
    margin: 0 0 0.75rem 0;
    color: #64748b;
    font-size: 1rem;
}

.availability-status .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-badge.available {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #22c55e;
}

.status-badge.partially {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #f59e0b;
}

.status-badge.unavailable {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #ef4444;
}

.status-badge.preferred {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #3b82f6;
}

.day-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Timeline Styles */
.timeline-container {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

.timeline-container h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-slot {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease;
}

.timeline-slot.booked {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1e40af;
}

.timeline-slot.available {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #22c55e;
    color: #15803d;
}

.timeline-slot.partially {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #d97706;
}

.timeline-slot.outside-hours {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #cbd5e1;
}

.timeline-slot.no-availability {
    background: #fafafa;
    color: #9ca3af;
    border-color: #e5e7eb;
}

.time-label {
    min-width: 60px;
    font-weight: 500;
    font-size: 0.875rem;
}

.slot-content {
    margin-left: 1rem;
    font-size: 0.875rem;
}

/* Bookings List Styles */
.bookings-container {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

.bookings-container h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bookings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.booking-item {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background: #f8fafc;
}

.booking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.booking-header h5 {
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
}

.booking-time {
    font-size: 0.875rem;
    color: #3b82f6;
    font-weight: 500;
}

.booking-details {
    margin-bottom: 1rem;
}

.booking-details p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    color: #64748b;
}

.booking-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.no-bookings {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
}

.no-bookings i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Availability Details */
.availability-details {
    grid-column: 1 / -1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

.availability-details h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.availability-info p {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #64748b;
}

/* Booking Modal Styles */
.booking-modal {
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

.booking-info {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.booking-info h3 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.1rem;
}

.booking-info p {
    margin: 0.25rem 0;
    color: #64748b;
    font-size: 0.9rem;
}

.status-badge.geplant {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #f59e0b;
}

.status-badge.bestätigt {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #22c55e;
}

.status-badge.vorläufig {
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #6366f1;
}

.status-badge.storniert {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #ef4444;
}

@media (max-width: 768px) {
    .day-details-modal,
    .booking-modal {
        max-width: 95vw;
        margin: 1rem;
    }
    
    .day-content {
        grid-template-columns: 1fr;
    }
    
    .day-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .booking-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .booking-actions {
        flex-direction: column;
    }
    
    .timeline-slot {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .slot-content {
        margin-left: 0;
    }
}

.tuv-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 1.5rem 2rem;
    border-radius: 0 0 1rem 1rem;
}

.footer-compliance {
    text-align: center;
    margin-bottom: 1rem;
    color: #64748b;
}

.footer-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.tuv-primary {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.tuv-primary:hover {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Enhanced form groups for TÜV standards */
.tuv-form .form-group.required {
    position: relative;
}

.tuv-form .form-group.required::before {
    content: "TÜV";
    position: absolute;
    top: -0.5rem;
    right: 0;
    background: #dc2626;
    color: white;
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.tuv-form .form-group input,
.tuv-form .form-group select,
.tuv-form .form-group textarea {
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.875rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.tuv-form .form-group input:focus,
.tuv-form .form-group select:focus,
.tuv-form .form-group textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

.tuv-form .form-group input:invalid,
.tuv-form .form-group select:invalid {
    border-color: #dc2626;
    background: #fef2f2;
}

.tuv-form .form-group label {
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 0.75rem;
    display: block;
    font-size: 0.95rem;
}

.tuv-form .form-group small {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    display: block;
    font-style: italic;
}

/* Pattern indicators for validation */
.tuv-form input[pattern]:valid {
    border-color: #22c55e;
    background: #f0fdf4;
}

.tuv-form input[pattern]:invalid:not(:placeholder-shown) {
    border-color: #dc2626;
    background: #fef2f2;
}

/* Responsive TÜV form */
@media (max-width: 768px) {
    .tuv-header {
        padding: 1.5rem;
    }
    
    .compliance-badge {
        position: static;
        display: block;
        margin-top: 1rem;
        text-align: center;
    }
    
    .tuv-form {
        padding: 1rem;
    }
    
    .tuv-section {
        padding: 1.5rem;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-actions {
        flex-direction: column;
    }
    
    .tuv-form .form-group.required::before {
        display: none;
    }
}

/* ===== AUDITOR IMPORT/EXPORT STYLES ===== */

.import-export-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.export-section,
.import-section {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}

.export-section h4,
.import-section h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.export-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.export-option {
    padding: 1rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.export-option:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.export-option button {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 4px;
    background: #3b82f6;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.export-option button:hover {
    background: #2563eb;
}

.option-description {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    margin-bottom: 1rem;
}

.file-upload-area:hover {
    border-color: #3b82f6;
    background: #f0f7ff;
}

.file-upload-area i {
    font-size: 2rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    display: block;
}

.file-upload-area p {
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

.import-options {
    margin: 1rem 0;
}

.import-options .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: #374151;
}

.import-options input[type="checkbox"] {
    margin: 0;
}

.stats-section {
    grid-column: 1 / -1;
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}

.stats-section h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.stat-item {
    background: white;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #3b82f6;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .import-export-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .file-upload-area {
        padding: 1.5rem;
    }
    
    .export-options {
        gap: 0.75rem;
    }
    
    .export-option {
        padding: 0.75rem;
    }
}

/* ===========================
   NOTIFICATION SYSTEM STYLES
   =========================== */

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    min-width: 300px;
    max-width: 500px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #3b82f6;
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 10px;
    animation: slideInRight 0.3s ease-out;
    font-family: 'Inter', sans-serif;
}

.notification-success {
    border-left-color: #10b981;
}

.notification-error {
    border-left-color: #ef4444;
}

.notification-warning {
    border-left-color: #f59e0b;
}

.notification-info {
    border-left-color: #3b82f6;
}

.notification-content {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.75rem;
}

.notification-content i {
    font-size: 1.2rem;
}

.notification-success .notification-content i {
    color: #10b981;
}

.notification-error .notification-content i {
    color: #ef4444;
}

.notification-warning .notification-content i {
    color: #f59e0b;
}

.notification-info .notification-content i {
    color: #3b82f6;
}

.notification-content span {
    color: #374151;
    font-weight: 500;
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.2s ease;
}

.notification-close:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-close i {
    font-size: 0.875rem;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Multiple notifications stacking */
.notification:nth-child(n+2) {
    top: calc(20px + (80px * (n-1)));
}

/* Mobile responsiveness for notifications */
@media (max-width: 768px) {
    .notification {
        left: 20px;
        right: 20px;
        min-width: auto;
        max-width: none;
    }
    
    .notification:nth-child(n+2) {
        top: calc(20px + (70px * (n-1)));
    }
}

/* =============================================================================
   MELDEPFLICHT-WARNUNGEN (TÜV/BEHÖRDEN COMPLIANCE)
   ============================================================================= */

.mandatory-alert {
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: slideInDown 0.3s ease-out;
}

.mandatory-alert.info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 6px solid #2196f3;
}

.mandatory-alert.warning {
    background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
    border-left: 6px solid #ff9800;
}

.mandatory-alert.critical {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-left: 6px solid #f44336;
    animation: pulse 2s infinite;
}

.alert-content {
    display: flex;
    align-items: flex-start;
    padding: 2rem;
    gap: 1.5rem;
}

.alert-icon {
    flex-shrink: 0;
}

.alert-icon i {
    font-size: 2rem;
    color: #333;
}

.mandatory-alert.info .alert-icon i {
    color: #2196f3;
}

.mandatory-alert.warning .alert-icon i {
    color: #ff9800;
}

.mandatory-alert.critical .alert-icon i {
    color: #f44336;
    animation: shake 0.5s infinite alternate;
}

.alert-text {
    flex: 1;
}

.alert-text h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

.alert-text p {
    margin: 0 0 1rem 0;
    color: #555;
    white-space: pre-line;
    line-height: 1.5;
}

.alert-details {
    background: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.alert-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-alert-action {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-alert-action:hover {
    background: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mandatory-alert.critical .btn-alert-action {
    background: #fff;
    border-color: #f44336;
    color: #f44336;
}

.mandatory-alert.critical .btn-alert-action:hover {
    background: #f44336;
    color: white;
}

/* Animations */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { box-shadow: 0 4px 12px rgba(244, 67, 54, 0.15); }
    50% { box-shadow: 0 4px 20px rgba(244, 67, 54, 0.4); }
    100% { box-shadow: 0 4px 12px rgba(244, 67, 54, 0.15); }
}

@keyframes shake {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
}

/* Document Management System */
.documents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.documents-header label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.document-counter {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.document-counter::before {
    content: "📊";
    font-size: 1rem;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    min-height: 120px;
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: var(--secondary-bg);
}

.documents-grid.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-style: italic;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 15px,
        rgba(59, 130, 246, 0.05) 15px,
        rgba(59, 130, 246, 0.05) 30px
    );
}

.documents-grid.empty::before {
    content: "📋 Noch keine Dokumente ausgewählt - Wählen Sie aus dem Dropdown aus";
    font-size: 1rem;
    text-align: center;
}

/* Document Cards */
.document-card {
    background: linear-gradient(135deg, var(--card-bg) 0%, #f8fafc 100%);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: documentSlideIn 0.4s ease forwards;
}

.document-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
    border-color: var(--accent-color);
}

.document-card-header {
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--accent-color) 100%);
    color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.document-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.document-title i {
    font-size: 1.2rem;
    opacity: 0.9;
}

.document-name {
    font-weight: 600;
    font-size: 1rem;
    word-break: break-word;
}

.document-card-header .remove-document {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: white;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-card-header .remove-document:hover {
    background: rgba(220, 38, 38, 0.8);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.document-card-body {
    padding: 1.25rem;
}

.document-inputs {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-label i {
    color: var(--accent-color);
    width: 16px;
}

.document-date-input {
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.document-date-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.document-notes-input {
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all 0.3s ease;
}

.document-notes-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.document-status {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.status-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}

.status-select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.status-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Status color indicators */
.status-select.status-pending { border-left: 4px solid #6b7280; }
.status-select.status-in-progress { border-left: 4px solid #f59e0b; }
.status-select.status-compliant { border-left: 4px solid #10b981; }
.status-select.status-non-compliant { border-left: 4px solid #ef4444; }
.status-select.status-observation { border-left: 4px solid #f97316; }

.documents-summary {
    margin-top: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.documents-summary small {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.documents-summary i {
    color: var(--accent-color);
}

/* Generated Notes Document Styling */
.documents-section {
    margin: 1.5rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 197, 253, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.documents-section h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.documents-section h5 i {
    color: var(--accent-color);
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.document-entry {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.document-entry:hover {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

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

.document-title {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 200px;
}

.document-date {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

.document-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.document-status.pending {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.document-status.in-progress {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.document-status.compliant {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.document-status.non-compliant {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.document-status.observation {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.document-notes {
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid var(--accent-color);
    padding: 0.75rem;
    margin-top: 0.5rem;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.5;
}

.simple-documents {
    color: var(--text-secondary);
    font-style: italic;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.document-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.document-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
    border-color: var(--accent-color);
}

.document-item:hover::before {
    width: 8px;
}

.document-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.document-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.document-date-editor {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.document-date-input {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all 0.3s ease;
    width: 150px;
}

.document-date-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.date-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.date-label:hover {
    color: var(--accent-color);
}

.date-label i {
    font-size: 0.75rem;
}

.document-date i {
    color: var(--accent-color);
}

.remove-document {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #dc2626;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.remove-document:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.add-document-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
}

.add-document-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #1e40af 0%, var(--accent-color) 100%);
}

.add-document-btn i {
    font-size: 1.1rem;
}


.audit-notes-generator .qhse-documents-section label {
    color: #1e40af;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 16px;
    display: block;
}

.audit-notes-generator .qhse-documents-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.audit-notes-generator .qhse-document-item {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.audit-notes-generator .qhse-document-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.audit-notes-generator .document-selection select.qhse-document-select,
.audit-notes-generator .document-date-field input.qhse-document-date,
.audit-notes-generator .document-notes-field input.qhse-document-notes {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
}

.audit-notes-generator .document-selection select.qhse-document-select:focus,
.audit-notes-generator .document-date-field input.qhse-document-date:focus,
.audit-notes-generator .document-notes-field input.qhse-document-notes:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #ffffff;
    transform: scale(1.02);
}

.audit-notes-generator .document-actions .remove-qhse-document {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.audit-notes-generator .document-actions .remove-qhse-document:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.audit-notes-generator .add-qhse-document-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.audit-notes-generator .add-qhse-document-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.audit-notes-generator .add-qhse-document-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.audit-notes-generator .add-qhse-document-btn:hover i {
    transform: rotate(90deg) scale(1.2);
}

/* Mobile responsiveness for QHSE documents */
@media (max-width: 768px) {
    .audit-notes-generator .qhse-document-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .audit-notes-generator .document-actions .remove-qhse-document {
        width: 100%;
        height: 48px;
        margin-top: 8px;
        justify-content: center;
    }
    
    .audit-notes-generator .add-qhse-document-btn {
        width: 100%;
        padding: 16px;
        justify-content: center;
    }
}

/* Legacy QHSE Documents Selection */
.audit-notes-generator .documents-selection-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 2px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1);
}

.audit-notes-generator .document-row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 2px solid rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.audit-notes-generator .document-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.audit-notes-generator .document-row:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.audit-notes-generator .document-row:hover::before {
    transform: translateX(0);
}

.audit-notes-generator .document-select,
.audit-notes-generator .document-date,
.audit-notes-generator .document-notes {
    padding: 12px 16px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
}

.audit-notes-generator .document-select:focus,
.audit-notes-generator .document-date:focus,
.audit-notes-generator .document-notes:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #ffffff;
    transform: scale(1.02);
}

.audit-notes-generator .document-select:valid,
.audit-notes-generator .document-date:valid {
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.audit-notes-generator .document-select {
    background-image: linear-gradient(45deg, transparent 40%, #3b82f6 50%, transparent 60%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.audit-notes-generator .document-date {
    position: relative;
}

.audit-notes-generator .document-date::after {
    content: "📅";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 16px;
}

.audit-notes-generator .document-notes {
    font-family: inherit;
    resize: none;
    min-height: 44px;
}

.audit-notes-generator .remove-document-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.audit-notes-generator .remove-document-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

/* Legacy styles for non-audit-notes-generator contexts */
.document-select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.document-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.document-date {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.document-date:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.document-notes {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.document-notes:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.remove-document-btn {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    border-radius: 4px;
    color: #dc2626;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.remove-document-btn:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.audit-notes-generator .add-document-row-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audit-notes-generator .add-document-row-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
}

.audit-notes-generator .add-document-row-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.audit-notes-generator .add-document-row-btn:hover i {
    transform: rotate(90deg) scale(1.2);
}

/* Legacy add button styling */
.add-document-row-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.add-document-row-btn:hover {
    background: linear-gradient(135deg, #1e40af 0%, var(--accent-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.add-document-row-btn i {
    font-size: 0.9rem;
}

.document-dropdown-container {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.document-dropdown {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.document-dropdown:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.document-date-input {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.date-input {
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    min-width: 150px;
}

.date-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.btn-add-selected {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-add-selected:hover {
    background: linear-gradient(135deg, #1e40af 0%, var(--accent-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-add-selected i {
    font-size: 1rem;
}

/* Document Selection Modal */
.document-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.document-selection-modal.active {
    opacity: 1;
    visibility: visible;
}

.document-selection-content {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.document-selection-modal.active .document-selection-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #dc2626;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.modal-close:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    transform: scale(1.1) rotate(90deg);
}

.document-select-form {
    display: grid;
    gap: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: flex-end;
}

.btn-modal {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-modal-cancel {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-modal-cancel:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    transform: translateY(-2px);
}

.btn-modal-add {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
    color: white;
}

.btn-modal-add:hover {
    background: linear-gradient(135deg, #1e40af 0%, var(--accent-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* Animation for document items */
@keyframes documentSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.document-item {
    animation: documentSlideIn 0.4s ease forwards;
}

/* Document counter */
.documents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.document-counter {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.document-counter i {
    font-size: 0.9rem;
}

/* Dark theme support */
[data-theme="dark"] .document-item {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: #475569;
}

[data-theme="dark"] .document-name {
    color: #f1f5f9;
}

[data-theme="dark"] .document-date {
    color: #94a3b8;
}

[data-theme="dark"] .document-selection-content {
    background: #1e293b;
}

[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group input {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

/* Responsive */
@media (max-width: 768px) {
    .alert-content {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .alert-actions {
        width: 100%;
    }
    
    .btn-alert-action {
        width: 100%;
        justify-content: center;
    }

    .document-selection-content {
        width: 95%;
        padding: 1.5rem;
        margin: 1rem;
    }

    .document-item {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .remove-document {
        align-self: flex-end;
    }

    .document-date-input {
        width: 100%;
        max-width: none;
    }

    .document-info {
        width: 100%;
    }

    /* Mobile responsive for document cards */
    .documents-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.5rem;
        max-height: 400px;
    }

    .document-card-header {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .document-title {
        width: 100%;
    }

    .document-card-header .remove-document {
        align-self: flex-end;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .document-card-body {
        padding: 1rem;
    }

    .status-group {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .status-label {
        min-width: auto;
    }

    .status-select {
        width: 100%;
    }

    .documents-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .document-counter {
        align-self: flex-end;
    }

    /* Mobile responsive for document rows */
    .document-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .remove-document-btn {
        width: 100%;
        height: auto;
        padding: 0.75rem;
        justify-content: center;
    }

    .add-document-row-btn {
        width: 100%;
        justify-content: center;
    }

    .modal-actions {
        flex-direction: column;
    }

    .btn-modal {
        width: 100%;
        justify-content: center;
    }

    .document-dropdown-container {
        flex-direction: column;
        gap: 0.75rem;
    }

    .document-date-input {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .date-input {
        min-width: auto;
        width: 100%;
    }

    .btn-add-selected {
        width: 100%;
        justify-content: center;
    }
}