/* ============================================================================
   PPWR-Lieferantenbefragung — supplier-facing redesign
   Ported design tokens + component styling from the PPWR module design system
   (public/css/ppwr-module.css of the BeGaMo main tool).

   This stylesheet is intentionally loaded LAST so it overrides the older
   questionnaire/header/footer/error/success styles where they conflict.
   It changes look & feel only — every id/class hook used by
   QuestionnaireContent.js and header.js is preserved.
   ============================================================================ */

/* ---- Design tokens (1:1 from ppwr-module.css) ---------------------------- */
:root{
    --br-900:#643F2E; --br-700:#9A6147; --br-500:#AF856F; --br-300:#C6A896;
    --br-200:#DCCCBE; --br-100:#E7DED2; --br-50:#F1EFE5;
    --gr-900:#1C3E08; --gr-700:#3B6D10; --gr-500:#5A8C49; --gr-300:#9DB84F;
    --gr-200:#B9CA81; --gr-100:#D6DDB3; --gr-50:#F4F7EA;
    --bl-900:#1A2F4C; --bl-700:#1D538F; --bl-500:#3272B5; --bl-300:#5490CC;
    --bl-200:#7EB0E0; --bl-100:#AECDF0; --bl-50:#E5F0FC;
    --am-orange:#D9720A; --am-orangetext:#8C4A06; --am-orange-bg:#F7DFC4;
    --am-rot:#C00000; --am-rot-bg:#F3D3D3;
    --radius-s:8px; --radius-m:14px; --radius-l:22px;
    --shadow:0 1px 2px rgba(100,63,46,.05),0 10px 30px -18px rgba(100,63,46,.28);
    --shadow-strong:0 10px 30px -18px rgba(100,63,46,.42);

    --text-heading:#1A2F4C;
    --text-body:#643F2E;
    --text-secondary:#9A6147;
}

/* ---- Base / page ground -------------------------------------------------- */
body{
    font-family:Calibri,Arial,sans-serif;
    color:var(--text-body);
    -webkit-font-smoothing:antialiased;
}

#page-container{
    background:linear-gradient(180deg,var(--bl-50) 0%,#F8FAFD 16%,var(--br-50) 58%,#FAFBFD 100%);
    background-attachment:fixed;
}

#main-content{
    padding:0 20px 24px;
}

:focus-visible{outline:2px solid var(--bl-500);outline-offset:2px}

/* ---- Header -------------------------------------------------------------- */
#site-header{
    background:linear-gradient(180deg,#fff 0%,#F7FAFE 100%);
    color:var(--text-heading);
    border-bottom:1px solid var(--bl-100);
    box-shadow:0 8px 20px -22px rgba(29,83,143,.45);
    align-items:center;
    padding:0;
}

#site-header .navbar-brand-wrapper{
    float:none;
    width:auto;
    height:auto;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
}

#site-header .navbar-brand{
    display:inline-flex;
    align-items:center;
    margin:0;
}

#site-header .navbar-brand img.logo-lg{
    height:34px;
    width:auto;
}

/* Subtle PPWR product tag next to the wordmark */
.hq-brand-tag{
    display:inline-flex;
    align-items:center;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.055em;
    text-transform:uppercase;
    color:var(--bl-700);
    background:var(--bl-50);
    border:1px solid var(--bl-100);
    padding:4px 10px;
    border-radius:99px;
    white-space:nowrap;
    line-height:1.2;
}

#site-header .navbar-nav{
    align-items:center;
    gap:1rem;
}

/* Language switcher */
#site-header .nav-link{color:var(--bl-700)}
#site-header .img-thumbnail{
    background:#fff;
    border:1px solid var(--bl-100);
    border-radius:6px;
    padding:3px;
}
#language-dropdown.dropdown-menu{
    background:#fff;
    border:1px solid var(--bl-100);
    border-radius:var(--radius-s);
    box-shadow:var(--shadow);
    padding:4px;
    overflow:hidden;
}
#language-dropdown .dropdown-item{
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:6px;
    padding:7px 12px;
    color:var(--text-body);
    font-weight:600;
}
#language-dropdown .dropdown-item:hover,
#language-dropdown .dropdown-item:focus{
    background:var(--bl-50);
    color:var(--bl-900);
}

/* ---- Page title ---------------------------------------------------------- */
.text-header{
    max-width:860px;
    margin:0 auto;
    background:transparent;
    color:var(--text-heading);
    text-align:center;
    font-family:Calibri,Arial,sans-serif;
    font-weight:600;
    letter-spacing:-.01em;
    font-size:1.9rem;
    padding:34px 0 10px;
}
.text-header::after{
    content:"";
    display:block;
    width:64px;
    height:4px;
    margin:14px auto 0;
    border-radius:99px;
    background:linear-gradient(90deg,var(--bl-500),var(--gr-500));
}

/* ---- Questionnaire column ------------------------------------------------ */
#questionnaire-main{
    max-width:860px;
    margin:8px auto 0;
}

/* Section cards — one per L1..L6 block */
.q-section{
    background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
    border:1px solid var(--bl-100);
    border-radius:var(--radius-l);
    box-shadow:var(--shadow);
    padding:22px 24px 20px;
    margin-bottom:18px;
}

/* Section header (badge + title + rule) built by _section() */
.q-section-head{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:6px;
}
.q-section-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:28px;
    padding:0 10px;
    border-radius:99px;
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500));
    color:#fff;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.03em;
    flex-shrink:0;
}
.q-section-title{
    margin:0;
    font-family:Calibri,Arial,sans-serif;
    font-size:1.12rem;
    font-weight:600;
    color:var(--text-heading);
    line-height:1.2;
    white-space:nowrap;
}
.q-section-line{
    height:1px;
    flex:1;
    background:linear-gradient(90deg,var(--bl-100),rgba(174,205,240,.10));
}
.q-section-hint{
    margin:0 0 16px;
    color:var(--text-secondary);
    font-size:.9rem;
    line-height:1.5;
}

/* ---- Fields -------------------------------------------------------------- */
.q-field{
    display:flex;
    flex-direction:column;
    margin-bottom:14px;
    max-width:460px;
}
.q-label{
    font-size:.86rem;
    font-weight:600;
    color:var(--text-body);
    margin-bottom:5px;
}
.q-field input,
.q-field select{
    padding:9px 11px;
    border:1px solid var(--br-200);
    border-radius:var(--radius-s);
    background:#fff;
    color:var(--text-body);
    font-family:Calibri,Arial,sans-serif;
    font-size:.95rem;
    transition:border-color .15s,box-shadow .15s;
}
.q-field input:hover,
.q-field select:hover{border-color:var(--bl-200)}
.q-field input:focus,
.q-field select:focus,
.q-field input:focus-visible,
.q-field select:focus-visible{
    outline:none;
    border-color:var(--bl-500);
    box-shadow:0 0 0 3px rgba(50,114,181,.18);
}
.q-field input:disabled,
.q-field select:disabled{
    background:var(--br-50);
    color:var(--text-secondary);
    cursor:not-allowed;
}

/* Yes / No radio group — als klar getrennte, gestapelte Auswahl-Pillen */
.q-yesno{max-width:none;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.q-yesno .q-radio-option{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-right:0;
    padding:10px 20px;
    min-width:160px;
    border:1px solid var(--br-200);
    border-radius:99px;
    background:#fff;
    cursor:pointer;
    font-size:.92rem;
    transition:border-color .15s,background .15s;
}
.q-yesno .q-radio-option:hover{border-color:var(--bl-300);background:var(--bl-50)}
.q-yesno .q-radio-option input{accent-color:var(--bl-500);cursor:pointer}

/* ---- L2 material picker -------------------------------------------------- */
.q-material-category{
    font-weight:700;
    color:var(--text-heading);
    margin:16px 0 8px;
    font-size:.9rem;
}
.q-material-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:8px 14px;
}
.q-material-option{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border:1px solid var(--br-200);
    border-radius:var(--radius-s);
    background:#fff;
    cursor:pointer;
    font-size:.92rem;
    transition:border-color .15s,background .15s;
}
.q-material-option:hover{border-color:var(--bl-300);background:var(--bl-50)}
.q-material-option input{accent-color:var(--bl-500);cursor:pointer;flex-shrink:0}

/* Escape checkbox ("no certificates") */
.q-escape-option{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:14px;
    padding:11px 14px;
    border:1px dashed var(--br-300);
    border-radius:var(--radius-s);
    background:var(--br-50);
    cursor:pointer;
    font-weight:600;
    color:var(--text-body);
}
.q-escape-option input{accent-color:var(--bl-500);cursor:pointer;flex-shrink:0}

/* ---- Hints --------------------------------------------------------------- */
.q-readonly-hint{
    background:var(--bl-50);
    border:1px solid var(--bl-100);
    border-left:4px solid var(--bl-500);
    border-radius:var(--radius-s);
    padding:12px 16px;
    margin-bottom:18px;
    color:var(--bl-900);
    font-weight:600;
}
.q-empty-hint{
    color:var(--am-orangetext);
    background:var(--am-orange-bg);
    border:1px solid rgba(217,114,10,.25);
    border-radius:var(--radius-s);
    padding:10px 14px;
    font-size:.9rem;
}

/* ---- Uploads ------------------------------------------------------------- */
.q-upload-area{
    margin-top:16px;
    padding:16px;
    border:1px solid var(--bl-100);
    border-radius:var(--radius-m);
    background:linear-gradient(180deg,#fff,var(--bl-50));
}
.q-upload-area > .q-label{
    display:block;
    margin-bottom:10px;
}
.q-upload-controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.q-file-input,
.q-valid-until{
    padding:8px 10px;
    border:1px solid var(--br-200);
    border-radius:var(--radius-s);
    background:#fff;
    color:var(--text-body);
    font-family:Calibri,Arial,sans-serif;
    font-size:.9rem;
}
.q-file-input:focus,
.q-valid-until:focus{
    outline:none;
    border-color:var(--bl-500);
    box-shadow:0 0 0 3px rgba(50,114,181,.18);
}
.q-file-input::file-selector-button{
    border:1px solid var(--bl-200);
    background:var(--bl-50);
    color:var(--bl-700);
    font-weight:600;
    border-radius:6px;
    padding:6px 12px;
    margin-right:10px;
    cursor:pointer;
    font-family:Calibri,Arial,sans-serif;
}
.q-file-input::file-selector-button:hover{background:var(--bl-100)}

.q-document-list{
    list-style:none;
    padding:0;
    margin:0 0 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.q-document-row{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border:1px solid var(--br-100);
    border-radius:var(--radius-s);
    background:#fff;
    font-size:.9rem;
    color:var(--text-body);
}
.q-document-row .fa-file-pdf{color:var(--am-rot)}
.q-document-delete{
    cursor:pointer;
    color:var(--am-rot);
    margin-left:auto;
    transition:transform .15s;
}
.q-document-delete:hover{transform:scale(1.12)}

/* ---- Buttons ------------------------------------------------------------- */
/* Secondary: PDF upload */
.q-upload-button.button{
    margin:0;
    font-size:.92rem;
    font-weight:700;
    border-radius:99px;
    padding:9px 18px;
    background:#fff;
    border:1px solid var(--bl-300);
    color:var(--bl-700);
    box-shadow:none;
}
.q-upload-button.button:hover{
    background:var(--bl-50);
    transform:none;
}

/* Primary: submit */
#submit-button.button{
    margin:1rem;
    font-size:1.15rem;
    font-weight:700;
    border-radius:99px;
    padding:14px 40px;
    color:#fff;
    background:linear-gradient(135deg,var(--gr-700),var(--gr-500));
    border:1px solid var(--gr-700);
    box-shadow:0 12px 26px -14px rgba(28,62,8,.6);
}
#submit-button.button:hover{transform:translateY(-1px) scale(1.01)}
#submit-button.hidden{display:none}

/* ---- Error / Success cards ---------------------------------------------- */
.error-message,
.success-message{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:14px;
    max-width:520px;
    margin:9vh auto;
    padding:44px 40px;
    border-radius:var(--radius-l);
    background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
    box-shadow:var(--shadow-strong);
    text-align:center;
    font-weight:600;
    font-size:1.1rem;
}
.error-message{border:1px solid var(--am-rot-bg);color:var(--text-body)}
.success-message{border:1px solid var(--gr-100);color:var(--text-body)}

.error-message i{
    font-size:3rem;
    color:var(--am-rot);
    background:var(--am-rot-bg);
    width:84px;height:84px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
}
.success-message i{
    font-size:3rem;
    color:var(--gr-700);
    background:var(--gr-50);
    width:84px;height:84px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
}
.error-message p,
.success-message p{margin:0;line-height:1.5}

.error-message .retry-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500));
    border:none;
    padding:11px 24px;
    border-radius:99px;
    font-size:1rem;
    font-weight:700;
}
.error-message .retry-button i{
    font-size:1rem;
    background:none;
    width:auto;height:auto;
    color:#fff;
    margin:0;
}
.error-message a{color:#fff;text-decoration:none}

/* ---- Footer -------------------------------------------------------------- */
#site-footer{
    background:linear-gradient(180deg,#fff 0%,#F7FAFE 100%);
    border-top:1px solid var(--bl-100);
}
#site-footer #footer-logo{max-height:2.6rem;opacity:.9}
#site-footer #footer-link-holder{
    justify-content:center;
    gap:20px;
    margin-top:10px;
}
#site-footer a{
    color:var(--bl-700);
    font-size:.85rem;
    font-weight:600;
}
#site-footer a:hover{color:var(--bl-900)}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:640px){
    #main-content{padding:0 14px 20px}
    .text-header{font-size:1.55rem;padding:26px 0 8px}
    .q-section{padding:18px 16px 16px;border-radius:var(--radius-m)}
    .q-section-title{white-space:normal}
    .q-field{max-width:none}
    .q-material-list{grid-template-columns:1fr}
    .q-yesno .q-radio-option{margin-bottom:0}
    #submit-button.button{width:100%;justify-content:center;text-align:center}
    .error-message,.success-message{margin:6vh 12px;padding:34px 22px}
}

@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
}

/* ---- Pflichtfeld-Markierung bei unvollstaendigem Absenden ---------------- */
.q-field.invalid input,
.q-field.invalid select,
.q-field.invalid textarea{ border-color:var(--am-rot) !important; background:var(--am-rot-bg); }
.q-field.invalid .q-label{ color:var(--am-rot); }
.q-field.q-yesno.invalid .q-radio-option{ border-color:var(--am-rot); }
.q-section.invalid,
.q-upload-area.invalid{ outline:2px solid var(--am-rot); outline-offset:3px; border-radius:10px; }

/* ===== Modals im PPWR-Look (Confirm / Alert / Prompt) =======================
   Grundstil kommt aus modal.css (Legacy: Alabaster/Van-Dyke-Braun). Hier auf das
   PPWR-Design angeglichen, analog zum Haupttool (ppwr-suite.css). modal.css nutzt
   `.modal-content #id`-Selektoren (Spezifitaet 1,1,0) -> die Button-Regeln unten
   brauchen selbst ID-Spezifitaet (1,2,0), damit Farben/Kontrast durchschlagen. */
.custom-modal{ background-color:rgba(26,47,76,.45); }
.custom-modal .modal-content{
    background:#fff; border:1px solid var(--br-100); border-radius:var(--radius-l);
    box-shadow:var(--shadow-strong); padding:26px 26px 22px; width:auto;
    min-width:320px; max-width:460px; margin:15% auto; color:var(--text-body);
}
.custom-modal .modal-content p{
    font-family:inherit; font-weight:600; font-size:1.05rem; line-height:1.5;
    color:var(--text-body); text-align:center; margin:2px 0 20px;
}
.custom-modal .modal-content input{
    border:1px solid var(--bl-100); border-radius:var(--radius-s); background:#fff;
    color:var(--text-body); font-family:inherit; font-weight:400; font-size:1rem;
    height:auto; line-height:1.4; padding:9px 12px; margin-bottom:18px;
}
/* Basis fuer alle Modal-Buttons: PPWR-Blau, weisser Text, abgerundet. */
.custom-modal .modal-content button{
    border:1px solid var(--bl-700); border-radius:var(--radius-s); padding:9px 22px;
    margin:0 6px; font-family:inherit; font-weight:600; font-size:1rem; cursor:pointer;
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500)); color:#fff;
    box-shadow:var(--shadow); transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.custom-modal .modal-content button:hover,
.custom-modal .modal-content button:focus{
    background:linear-gradient(135deg,var(--bl-900),var(--bl-700)); color:#fff;
    transform:translateY(-1px); box-shadow:var(--shadow-strong); outline:none;
}
/* Primaer (Ja / OK) = Blau (ID-Spezifitaet gegen modal.css). */
.custom-modal .modal-content #confirmYes,
.custom-modal .modal-content #promptOK,
.custom-modal .modal-content #alertOk{
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500)); color:#fff; border-color:var(--bl-700);
}
.custom-modal .modal-content #confirmYes:hover,
.custom-modal .modal-content #promptOK:hover,
.custom-modal .modal-content #alertOk:hover,
.custom-modal .modal-content #alertOk:focus{
    background:linear-gradient(135deg,var(--bl-900),var(--bl-700)); color:#fff;
}
/* Sekundaer (Nein / Abbrechen) = neutral. */
.custom-modal .modal-content #confirmNo,
.custom-modal .modal-content #promptCancel{
    background:var(--br-50); color:var(--br-900); border-color:var(--br-200); box-shadow:none;
}
.custom-modal .modal-content #confirmNo:hover,
.custom-modal .modal-content #promptCancel:hover{
    background:var(--br-100); color:var(--br-900); filter:none;
}
.custom-modal .close-btn{ color:var(--br-500); }
.custom-modal .close-btn:hover,
.custom-modal .close-btn:focus{ color:var(--br-900); }