/* PSL_1 Material Design 3 Theme */

/* Hide JavaScript warning */
.ls-js-hidden,
.warningjs,
[data-type="checkjavascript"],
.alert-danger.ls-js-hidden {
    display: none !important;
}

/* Base styles */
html {
    background: #424242 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    background: #f5f5f5 !important;
    margin: 0 !important;
    padding-top: 46px !important;
}

:root {
    --bs-border-width: 0 !important;
    --bs-border-color: transparent !important;
}

.bg-light,
.navbar-light {
    background: #424242 !important;
}

.ls-progress,
.progress-wrapper,
[id*="progress"],
.progress {
    display: none !important;
}

.border-bottom,
.border-top {
    border: none !important;
}

/* Navbar - compact */
#survey-nav,
.navbar {
    background: #424242 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    min-height: 34px !important;
    padding: 6px 16px !important;
}

.navbar {
    border: 0px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    min-height: 34px !important;
    padding: 6px 16px !important;
}

/* COMPLETELY hide hamburger menu */
.navbar-toggler,
.navbar-toggler-icon,
button[data-bs-toggle="collapse"],
[data-bs-toggle="collapse"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* FORCE hide overlays and backdrops - EXCEPT file upload modal */
#bootstrap-alert-box-modal,
.offcanvas-backdrop,
.offcanvas {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* FILE UPLOAD MODAL - Allow it to display properly */
.file-upload-modal,
.file-upload-modal.show,
.file-upload-modal.fade,
[id*="file-upload-modal"] {
    display: none;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1055 !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.file-upload-modal.show,
[id*="file-upload-modal"].show {
    display: block !important;
}

/* HIDE modal backdrop by default - it blocks clicks */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Only show backdrop when file-upload-modal is open */
body.modal-open .file-upload-modal ~ .modal-backdrop.show,
.file-upload-modal.show ~ .modal-backdrop.show {
    display: block !important;
    visibility: visible !important;
    opacity: 0.5 !important;
    pointer-events: auto !important;
    z-index: 1050 !important;
}

/* Ensure body never gets modal-open class effects */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* Force all content to be clickable */
body,
html,
#limesurvey,
form,
.survey-form-container,
article {
    pointer-events: auto !important;
}

/* Prevent navbar-collapse from creating overlay */
.navbar-collapse {
    position: static !important;
    background: transparent !important;
}

.navbar-collapse.collapse:not(.show),
.navbar-collapse.collapsing {
    display: flex !important;
    visibility: visible !important;
}

@media (max-width: 768px) {

    .navbar,
    #survey-nav {
        display: flex !important;
        visibility: visible !important;
    }

    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        position: static !important;
        background: transparent !important;
    }

    .navbar-nav {
        flex-direction: row !important;
    }
}

#survey-nav a,
.navbar a {
    color: #fff !important;
}

.navbar-brand {
    display: none !important;
}

/* Ribbon - rounded, same width as cards */
h1.survey-name,
.survey-name {
    border: 2px solid #fff !important;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    padding: 18px 32px !important;
    margin: 32px auto 24px auto !important;
    max-width: 650px !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    text-align: center !important;
    border-radius: 12px !important;
}

/* Cards */
/* Hide ONLY empty description card */
.survey-description:empty {
    display: none !important;
}

/* Survey description/welcome text card */
.survey-description,
.survey-welcome-text {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 24px 24px 24px 60px !important;
    margin: 16px auto !important;
    max-width: 650px !important;
    position: relative !important;
    border: 1px solid #bbb !important;
    line-height: 1.65 !important;
    color: #424242 !important;
}

.survey-description p,
.survey-welcome-text p {
    margin: 0 0 12px 0 !important;
    line-height: 1.65 !important;
}

.survey-description p:last-child,
.survey-welcome-text p:last-child {
    margin-bottom: 0 !important;
}

.survey-description strong {
    color: #1B5E20 !important;
}

/* Document icon for description */
.survey-description::before {
    content: "" !important;
    position: absolute !important;
    top: 24px !important;
    left: 22px !important;
    width: 24px !important;
    height: 24px !important;
    border: 2px solid #2E7D32 !important;
    border-radius: 4px !important;
}

.survey-description::after {
    content: "" !important;
    position: absolute !important;
    top: 32px !important;
    left: 28px !important;
    width: 12px !important;
    height: 2px !important;
    background: #2E7D32 !important;
    box-shadow: 0 4px 0 #2E7D32, 0 8px 0 #2E7D32 !important;
}

/* Welcome card - merged with question count */
.survey-welcome {
    background: #fff !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.15), 4px 0 24px rgba(0, 0, 0, 0.15), -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    padding: 24px 24px 16px 60px !important;
    margin: 16px auto 0 auto !important;
    max-width: 650px !important;
    position: relative !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: none !important;
}

.survey-welcome::before,
.survey-description::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 22px;
    width: 24px;
    height: 24px;
    border: 2px solid #757575;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.survey-welcome::after,
.survey-description::after {
    content: "";
    position: absolute;
    top: 32px;
    left: 28px;
    width: 12px;
    height: 2px;
    background: #757575;
    box-shadow: 0 4px 0 #757575, 0 8px 0 #757575;
    transition: all 0.3s ease;
}

.survey-welcome:hover::before,
.survey-description:hover::before {
    border-color: #2E7D32;
    transform: scale(1.1);
}

.survey-welcome:hover::after,
.survey-description:hover::after {
    background: #2E7D32;
    box-shadow: 0 4px 0 #2E7D32, 0 8px 0 #2E7D32;
}

.survey-welcome p,
.survey-description p {
    margin: 0 0 14px 0;
    line-height: 1.65;
    color: #424242;
}

body,
p,
span,
div,
h1,
h2,
h3,
label {
    word-break: normal !important;
    hyphens: none !important;
}

/* Question count - bottom part of welcome card */
.number-of-questions {
    background: #fff !important;
    max-width: 650px !important;
    margin: 0 auto 24px auto !important;
    padding: 16px 24px 24px 60px !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-top: none !important;
}

.question-count-text {
    color: #757575 !important;
    font-size: 14px !important;
    text-align: left !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Chips */
.btn,
button.btn,
input[type="submit"] {
    border-radius: 24px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    margin: 8px 12px !important;
    border: 1px solid #1C1C1C !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

.btn-primary,
.btn-success,
input[value="Weiter"],
input[value="Absenden"] {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
    transform: translateY(-2px) !important;
}

.btn-secondary,
input[value="Zurück"] {
    background: #f5f5f5 !important;
    color: #1C1C1C !important;
}

/* Hide question help text "Bitte wählen Sie eine der folgenden Antworten:" */
.ls-questionhelp {
    display: none !important;
}

/* Inputs */
.form-control,
select.form-select {
    border: 2px solid #1C1C1C !important;
    border-radius: 8px !important;
}

.list-group-item {
    border: 2px solid #1C1C1C !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
}

/* Material Design 3 Radio Buttons */
.radio-item,
.answer-item.radio-item {
    background: #fff !important;
    border: 2px solid #1C1C1C !important;
    border-radius: 12px !important;
    padding: 16px 20px 16px 50px !important;
    margin: 10px 0 !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: block !important;
}

.radio-item:hover,
.answer-item.radio-item:hover {
    border-color: #2E7D32 !important;
    background: #f8fff8 !important;
    transform: translateX(4px) !important;
}

.radio-item input[type="radio"] {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    accent-color: #2E7D32 !important;
    cursor: pointer !important;
}

.radio-item label,
.answer-item.radio-item label {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1C1C1C !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: block !important;
}

.radio-item:has(input:checked),
.answer-item.radio-item:has(input:checked) {
    border-color: #2E7D32 !important;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25) !important;
}

.radio-item:has(input:checked) label {
    color: #1B5E20 !important;
}

.list-group-item:hover {
    border-color: #2E7D32 !important;
    transform: translateX(4px) !important;
}

.btn-check:checked+.btn {
    background: #2E7D32 !important;
    border-color: #2E7D32 !important;
    color: #fff !important;
}

/* Group title container - styled as card header */
.group-title {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    background: #fff !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    padding: 20px 24px !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.15), 4px 0 24px rgba(0, 0, 0, 0.15), -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 3px solid #2E7D32 !important;
    font-weight: 600 !important;
    color: #1C1C1C !important;
}

/* Questions page: Survey name ribbon via form::before */
form#limesurvey.survey-form-container {
    position: relative !important;
    padding-top: 0 !important;
}

/* Title ribbon - now using LimeSurvey's survey title from database */
h1.survey-name,
.survey-name {
    display: block !important;
    border: 2px solid #fff !important;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    padding: 18px 32px !important;
    margin: 32px auto 24px auto !important;
    max-width: 650px !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    text-align: center !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* Question container - MD3 Card */
.question-container,
[id^="question"],
.ls-answers {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    padding: 24px !important;
    margin: 16px auto !important;
    max-width: 650px !important;
    border: 1px solid #bbb !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

/* Card hover elevation */
.question-container:hover,
[id^="question"]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* Question title inside card */
.question-title-container,
.ls-label-question {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1C1C1C !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #E8F5E9 !important;
    line-height: 1.4 !important;
}

/* Question number badge */
.question-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-right: 12px !important;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.3) !important;
}

/* Answers container inside card */
.ls-answers,
.answer-container,
.answers-list {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Radio/Checkbox items - MD3 style */
.radio-item,
.checkbox-item,
.answer-item {
    background: #FAFAFA !important;
    border: 2px solid #E0E0E0 !important;
    border-radius: 12px !important;
    padding: 16px 20px 16px 52px !important;
    margin: 8px 0 !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Radio hover disabled - cleaner look */
.radio-item:hover,
.checkbox-item:hover,
.answer-item:hover {
    /* No hover effect */
}

/* Selected state - MD3 filled tonal */
.radio-item:has(input:checked),
.checkbox-item:has(input:checked),
.answer-item:has(input:checked) {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important;
    border-color: #2E7D32 !important;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25) !important;
}

.radio-item:has(input:checked) label,
.checkbox-item:has(input:checked) label {
    color: #1B5E20 !important;
    font-weight: 600 !important;
}

/* Radio/Checkbox input positioning */
.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"],
.answer-item input[type="radio"],
.answer-item input[type="checkbox"] {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    accent-color: #2E7D32 !important;
    cursor: pointer !important;
}

/* Text input fields - MD3 outlined */
.form-control,
textarea.form-control,
input[type="text"],
input[type="number"],
select.form-select {
    background: #fff !important;
    border: 2px solid #79747E !important;
    border-radius: 8px !important;
    padding: 16px !important;
    font-size: 16px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-control:focus,
textarea.form-control:focus,
input[type="text"]:focus,
select.form-select:focus {
    border-color: #2E7D32 !important;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2) !important;
    outline: none !important;
}

/* Textarea specific */
textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Dropdown/Select - MD3 style */
select.form-select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23424242' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

/* Yes/No buttons - MD3 segmented button */
.btn-group .btn,
.yes-no .btn {
    border-radius: 24px !important;
    padding: 12px 32px !important;
    font-weight: 500 !important;
    border: 2px solid #79747E !important;
    background: #fff !important;
    color: #1C1C1C !important;
    margin: 4px !important;
    transition: all 0.2s ease !important;
}

.btn-group .btn:hover,
.yes-no .btn:hover {
    background: #F5F5F5 !important;
    border-color: #2E7D32 !important;
}

.btn-group .btn.active,
.btn-group .btn:checked,
.yes-no .btn.active {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    border-color: #2E7D32 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3) !important;
}

/* Navigation buttons container - buttons at outer edges */
.navigator,
.ls-move-btn-wrapper,
[id*="navigator"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 24px !important;
    margin: 16px auto !important;
    max-width: 650px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Primary action button (Weiter/Submit) */
input[value="Weiter"],
input[value="Absenden"],
.btn-primary {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

input[value="Weiter"]:hover,
input[value="Absenden"]:hover,
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4) !important;
}

/* Secondary button (Zurück) */
input[value="Zurück"],
.btn-secondary {
    background: #fff !important;
    color: #1C1C1C !important;
    border: 2px solid #79747E !important;
    border-radius: 24px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
}

input[value="Zurück"]:hover,
.btn-secondary:hover {
    background: #F5F5F5 !important;
    border-color: #424242 !important;
}

/* Group title as section header */
.group-title {
    background: #fff !important;
    max-width: 650px !important;
    margin: 24px auto 8px auto !important;
    padding: 20px 24px !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08), 2px 0 8px rgba(0, 0, 0, 0.08), -2px 0 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 3px solid #2E7D32 !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    color: #1C1C1C !important;
}

/* Mandatory question indicator */
.asterisk,
.mandatory {
    color: #D32F2F !important;
    font-weight: 700 !important;
}

/* Error state */
.has-error .form-control,
.error .form-control {
    border-color: #D32F2F !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2) !important;
}

/* Success state */
.has-success .form-control {
    border-color: #2E7D32 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {

    .question-container,
    [id^="question"],
    .group-title {
        margin: 12px 8px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .radio-item,
    .checkbox-item,
    .answer-item {
        padding: 14px 16px 14px 48px !important;
    }
}

/* ========================================
   MATERIAL DESIGN 3 - FILE UPLOAD
   Modern drag & drop upload component
   ======================================== */

/* File upload container */
.upload-file,
.file-upload,
[id*="upload"],
.uploadfiles,
.qq-uploader {
    background: #fff !important;
    border: 2px dashed #79747E !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
}

.upload-file:hover,
.file-upload:hover,
[id*="upload"]:hover,
.uploadfiles:hover,
.qq-uploader:hover {
    border-color: #2E7D32 !important;
    background: #F1F8F4 !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15) !important;
}

/* Drag active state */
.upload-file.drag-over,
.qq-uploader.qq-upload-drop-area-active {
    border-color: #2E7D32 !important;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important;
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.25) !important;
}

/* Upload icon - Material Design style */
.upload-file::before,
.qq-upload-button::before {
    content: "cloud_upload" !important;
    font-family: 'Material Icons', sans-serif !important;
    font-size: 48px !important;
    color: #2E7D32 !important;
    display: block !important;
    margin-bottom: 16px !important;
}

/* Upload button styling */
.qq-upload-button,
.btn-upload,
input[type="file"]+label,
.upload-btn {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3) !important;
    transition: all 0.2s ease !important;
    margin: 16px auto !important;
}

.qq-upload-button:hover,
.btn-upload:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4) !important;
}

/* File input hidden but accessible */
input[type="file"] {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Upload text */
.qq-upload-drop-area span,
.upload-file span,
.upload-text {
    display: block !important;
    color: #424242 !important;
    font-size: 16px !important;
    margin-top: 12px !important;
}

.upload-file small,
.qq-upload-drop-area small,
.file-types {
    display: block !important;
    color: #757575 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
}

/* File list - uploaded files */
.qq-upload-list,
.uploadedfiles,
.file-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 0 0 !important;
}

.qq-upload-list li,
.uploadedfiles li,
.file-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #F5F5F5 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.qq-upload-list li:hover,
.file-item:hover {
    background: #EEEEEE !important;
    border-color: #BDBDBD !important;
}

/* File icon */
.qq-upload-file::before,
.file-item::before {
    content: "description" !important;
    font-family: 'Material Icons', sans-serif !important;
    font-size: 24px !important;
    color: #2E7D32 !important;
}

/* File name */
.qq-upload-file,
.file-name {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1C1C1C !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* File size */
.qq-upload-size,
.file-size {
    font-size: 12px !important;
    color: #757575 !important;
}

/* Delete/Cancel button */
.qq-upload-cancel,
.qq-upload-delete,
.file-delete {
    background: none !important;
    border: none !important;
    color: #D32F2F !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.qq-upload-cancel:hover,
.qq-upload-delete:hover,
.file-delete:hover {
    background: rgba(211, 47, 47, 0.1) !important;
}

/* Progress bar */
.qq-progress-bar,
.upload-progress {
    width: 100% !important;
    height: 4px !important;
    background: #E0E0E0 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
}

.qq-progress-bar-inner,
.upload-progress-bar {
    height: 100% !important;
    background: linear-gradient(90deg, #2E7D32 0%, #4CAF50 100%) !important;
    border-radius: 2px !important;
    transition: width 0.3s ease !important;
}

/* Upload success state */
.qq-upload-success,
.upload-success {
    border-color: #2E7D32 !important;
    background: #E8F5E9 !important;
}

.qq-upload-success .qq-upload-file::before,
.upload-success .file-item::before {
    content: "check_circle" !important;
    color: #2E7D32 !important;
}

/* Upload error state */
.qq-upload-fail,
.upload-error {
    border-color: #D32F2F !important;
    background: #FFEBEE !important;
}

.qq-upload-fail .qq-upload-file::before,
.upload-error .file-item::before {
    content: "error" !important;
    color: #D32F2F !important;
}

/* Status message */
.qq-upload-status-text,
.upload-status {
    font-size: 12px !important;
    margin-top: 4px !important;
}

.qq-upload-success .qq-upload-status-text {
    color: #2E7D32 !important;
}

.qq-upload-fail .qq-upload-status-text {
    color: #D32F2F !important;
}

/* Spinner for uploading */
.qq-upload-spinner,
.upload-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #E0E0E0 !important;
    border-top-color: #2E7D32 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Drop area highlight */
.qq-upload-drop-area {
    display: none !important;
}

.qq-upload-drop-area-active {
    display: block !important;
}

/* ========================================
   LIMESURVEY FILE UPLOAD MODAL - MD3 STYLE
   ======================================== */

/* Modal dialog container */
.file-upload-modal .modal-dialog {
    max-width: 600px !important;
    margin: 60px auto !important;
}

.file-upload-modal .modal-content {
    background: #fff !important;
    border-radius: 24px !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24) !important;
    overflow: hidden !important;
}

/* Modal header */
.file-upload-modal .modal-header,
.file-upload-modal-header {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    padding: 20px 24px !important;
    border: none !important;
    border-radius: 24px 24px 0 0 !important;
}

.file-upload-modal .modal-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.file-upload-modal .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

.file-upload-modal .btn-close:hover {
    opacity: 1 !important;
}

/* Modal body */
.file-upload-modal .modal-body,
.file-upload-modal-body {
    padding: 24px !important;
    background: #FAFAFA !important;
}

/* Uploader frame inside modal */
.uploader-frame,
[id*="uploader"] {
    background: #fff !important;
    border: 2px dashed #BDBDBD !important;
    border-radius: 16px !important;
    padding: 32px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    min-height: 200px !important;
}

.uploader-frame:hover,
[id*="uploader"]:hover {
    border-color: #2E7D32 !important;
    background: #F1F8F4 !important;
}

/* Upload button inside modal */
.model-container .btn,
.upload-div .btn,
#button_30 {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3) !important;
    transition: all 0.2s ease !important;
    margin: 16px 0 !important;
}

.model-container .btn:hover,
.upload-div .btn:hover,
#button_30:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4) !important;
}

/* Upload message/info */
.uploadmsg,
.alert-info.uploadmsg {
    background: #E3F2FD !important;
    color: #1565C0 !important;
    border: 1px solid #90CAF9 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin-top: 16px !important;
}

/* Upload status */
.uploadstatus {
    background: #FFF3E0 !important;
    color: #E65100 !important;
    border: 1px solid #FFCC80 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

/* Modal footer */
.file-upload-modal .modal-footer,
.file-upload-modal-footer {
    background: #fff !important;
    padding: 16px 24px !important;
    border-top: 1px solid #E0E0E0 !important;
    border-radius: 0 0 24px 24px !important;
}

.file-upload-modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
}

/* Upload button on main survey page */
.upload-button .btn,
.upload-button a.btn,
a.upload,
#upload_936770X3X30 {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3) !important;
    transition: all 0.2s ease !important;
}

.upload-button .btn:hover,
a.upload:hover,
#upload_936770X3X30:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4) !important;
    color: #fff !important;
}

/* Upload icon */
.upload-button .fa-upload,
.upload-button .ri-upload-fill,
a.upload .fa-upload,
a.upload .ri-upload-fill {
    font-size: 18px !important;
}

/* Upload item container on survey page */
.upload-item,
.ls-answers.upload-item {
    background: #fff !important;
    border: 2px dashed #BDBDBD !important;
    border-radius: 16px !important;
    padding: 24px !important;
    text-align: center !important;
    margin: 16px 0 !important;
    transition: all 0.3s ease !important;
}

.upload-item:hover {
    border-color: #2E7D32 !important;
    background: #F9FBF9 !important;
}

/* Uploaded files table */
.uploadedfiles table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

.uploadedfiles thead {
    display: none !important;
}

.uploadedfiles tbody tr {
    background: #F5F5F5 !important;
    border-radius: 12px !important;
}

.uploadedfiles tbody td {
    padding: 12px 16px !important;
    border: none !important;
}

.uploadedfiles tbody td:first-child {
    border-radius: 12px 0 0 12px !important;
}

.uploadedfiles tbody td:last-child {
    border-radius: 0 12px 12px 0 !important;
}

/* Edit button in uploaded files */
.trigger_edit_upload_936770X3X30,
.uploadedfiles .btn {
    background: #fff !important;
    color: #2E7D32 !important;
    border: 2px solid #2E7D32 !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
}

.trigger_edit_upload_936770X3X30:hover,
.uploadedfiles .btn:hover {
    background: #2E7D32 !important;
    color: #fff !important;
}