html, body {
    /* Reset entfernt Browser-Standardabstand (8px) der sonst vertikalen Scrollbalken verursacht */
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Arial, sans-serif;
    background-color: #f7f7f7;
    color: #222222;
}

:root { --brand-red:#990000; --brand-black:#222222; --brand-gray:#929292; }

a, .btn-link { color:#006bb7; }

.btn-primary { background-color:var(--brand-red); border-color:var(--brand-red); color:#fff; font-weight:500; font-size:1.1rem; border-radius:8px; box-shadow:none; transition:background .2s; }
.btn-primary:hover,.btn-primary:focus { background-color:#b80017; border-color:#b80017; }
.btn:focus,.btn:active:focus,.btn-link.nav-link:focus,.form-control:focus,.form-check-input:focus { box-shadow:none; }

/* Mehr Luft oben für alle Seiteninhalte */
.content { padding-top:2.25rem; }
@media (max-width:640.98px){ .content { padding-top:1.5rem; } }

.valid.modified:not([type=checkbox]) { outline:none; }
.invalid { outline:none; }
.validation-message { color:#e50000; }

.darker-border-checkbox.form-check-input { border-color:#929292; }

.form-floating > .form-control::placeholder { color:var(--bs-secondary-color); text-align:start; }
.form-floating > .form-control:focus::placeholder { text-align:start; }

.form-control { border-radius:10px; border:1.5px solid var(--brand-gray); font-size:1.05rem; font-family:'Roboto', Arial, sans-serif; color:var(--brand-black); background:#fff; box-shadow:none; transition:border-color .2s, background .2s; }
.form-control:focus { border-color:var(--brand-red); outline:none; }

.form-label { font-weight:500; color:var(--brand-black); font-size:.95rem; }
input::placeholder { color:var(--brand-gray); font-size:.95rem; font-family:'Roboto', Arial, sans-serif; }

/* Login Layout */
.login-page { max-width:100%; }
.login-container { width:100%; max-width:560px; margin:2rem auto 0 auto; padding:2.5rem 2rem 2rem; background:#fff; border-radius:16px; display:flex; flex-direction:column; align-items:center; }
.login-logo { width:260px; margin-bottom:2.2rem; display:block; }
.login-container form { width:100%; }

/* Small/mobile: kein Schatten, vollflächig weiß */
@media (max-width:575.98px) {
  html,body { background:#fff; }
  .login-page.container { padding-left:0; padding-right:0; }
  .login-container { margin-top:0; border-radius:0; padding:2rem 1.1rem 2.5rem; max-width:100%; box-shadow:none !important; }
  .login-logo { width:75%; max-width:320px; min-width:230px; }
  .form-control { font-size:1.1rem; padding:1rem 1rem; }
  .btn.btn-lg { font-size:1.18rem; padding:1rem 1.05rem; border-radius:12px; }
}

/* Add shadow erst ab >= 576px */
@media (min-width:576px) { .login-container { box-shadow:0 2px 20px rgba(34,34,34,.08); } }
@media (min-width:768px) { .login-container { max-width:600px; padding:3rem 3rem 2.5rem; } .login-logo { width:300px; } }
@media (min-width:1200px) { .login-container { max-width:640px; } }

/* Toast */
.toast { position:fixed; top:2rem; left:50%; transform:translateX(-50%); min-width:320px; max-width:90vw; background:var(--brand-red); color:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(34,34,34,.12); padding:1rem 2rem; font-size:1.1rem; font-weight:500; z-index:9999; display:flex; align-items:center; gap:1rem; }
.toast-close { position:absolute; top:.5rem; right:.7rem; background:transparent; border:none; color:#fff; font-size:1.3em; cursor:pointer; padding:.2em; line-height:1; transition:color .2s; z-index:1; }
.toast-close:hover { color:#eee; }
.toast-success { background:#388e3c; }
.toast-error { background:var(--brand-red); }
.toast-error-icon { color:#fff; font-size:1.8em; text-shadow:0 0 1px #fff,0 0 2px #fff; }

/* Password Field with Toggle */
.password-field-container { position:relative; }
.password-input { padding-right:3rem !important; }
.password-toggle-btn { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--brand-gray); cursor:pointer; padding:.25rem; border-radius:4px; transition:color .2s; z-index:10; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; }
.password-toggle-btn:hover, .password-toggle-btn:focus { color:var(--brand-black); outline:none; }
.password-toggle-icon { display:block; font-size:1.1rem; }

/* Mobile optimization for password toggle */
@media (max-width:575.98px) {
  .password-toggle-btn { width:2.5rem; height:2.5rem; right:.5rem; }
  .password-toggle-icon { font-size:1.2rem; }
}

main {
  overflow:auto
}

/* Order Overview - Dynamic Tab Labels */
.nav-pills .btn {
    white-space: nowrap; /* Prevent line breaks in tab labels */
    min-width: 80px; /* Minimum width for consistency */
}

@media (max-width: 767px) {
    .nav-pills .btn {
        font-size: 0.85rem; /* Smaller font on mobile */
        padding: 0.35rem 0.65rem; /* Reduce padding on mobile */
        min-width: 70px;
    }
}
.form-floating > #orderInfo.uniform-textarea,
.form-floating > #discInfo.uniform-textarea,
.form-floating > #customerInfo.uniform-textarea {
    padding-top: 0.625rem !important;
}
/* Override uniform-textarea height for specific fields */
.form-floating > #customerInfo,
.form-floating > #customerInfo.uniform-textarea {
    min-height: 120px !important;
    padding-top: 1.625rem;
}
.form-floating > #orderInfo,
.form-floating > #orderInfo.uniform-textarea {
    min-height: 120px !important;
    padding-top: 1.625rem;
}
.form-floating > #discInfo,
.form-floating > #discInfo.uniform-textarea {
    min-height: 200px !important;
    padding-top: 1.625rem !important;
}
.label-textarea {
    /*padding: 0 0.8rem !important;*/
    height: 30px !important;
    top: 12px !important;
    left: 0.5rem !important;
    width: 110% !important;
    background: #FFF !important;
}
.custom-checkbox {
    border-radius: .25em;
    height: 25px;
    width: 25px;
    margin: 0;
}
/* Large checkbox to match form control height - 58x58px with green checkmark */
.checkbox-large {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    cursor: pointer;
    margin: 0 !important;
    flex-shrink: 0;
    transform: scale(1) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 4px !important;
    background-color: white !important;
    position: relative;
    transition: border-color 0.2s;
}

.checkbox-large:hover {
    border-color: #72c685 !important;
}

.checkbox-large:checked {
    border-color: #72c685 !important;
    background-color: white !important;
}

.checkbox-large:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 2px;
    width: 8px;
    height: 15px;
    border: solid #28a745;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
    }

.checkbox-large:focus {
    box-shadow: 0 0 0 0.25rem rgba(114, 198, 133, 0.25) !important;
    border-color: #72c685 !important;
}

/* Standard checkbox with green checkmark - 25x25px */
.checkbox-standard {
    width: 25px !important;
    height: 25px !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 4px !important;
    background-color: white !important;
    position: relative;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.checkbox-standard:hover {
    border-color: #72c685 !important;
}

.checkbox-standard:checked {
    border-color: #72c685 !important;
    background-color: white !important;
}

.checkbox-standard:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 2px;
    width: 8px;
    height: 15px;
    border: solid #28a745;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}

.checkbox-standard:focus {
    box-shadow: 0 0 0 0.25rem rgba(114, 198, 133, 0.25) !important;
    border-color: #72c685 !important;
}