/* Custom CSS for the application inspired by Gesundheitsförderung Schweiz */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #f9f9f9;
    height: 100%; /* Ensure full height for flex layout */
    margin: 0; /* Remove default margin */
}

h1, h3, h4 {
    color: #f57c00;
    font-weight: 700; /* Bold text for titles */
}

h4 {
    margin-bottom: 1.5rem; /* Increase bottom margin for h4 */
}

.table-bordered {
    border: 1px solid #dee2e6;
}

.table-hover tbody tr:hover {
    background-color: #f5f5f5;
}

.table-light {
    background-color: #f8f9fa;
}

.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

.navbar-brand {
    color: #f57c00;
}

.navbar-nav .nav-link {
    color: #333;
}

.navbar-nav .nav-link:hover {
    color: #f57c00;
}

.navbar-nav .dropdown-menu {
    background-color: #ffffff;
}

.btn-primary {
    background-color: #f57c00;
    border-color: #f57c00;
}

.btn-primary:hover {
    background-color: #e56c00;
    border-color: #e56c00;
}

/* Ensure active/selected primary buttons are orange, not Bootstrap blue */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.active:hover,
.show > .btn-primary.dropdown-toggle,
.btn-primary:focus-visible {
    background-color: #f57c00;
    border-color: #f57c00;
    color: #ffffff;
}

/* Orange focus ring instead of blue */
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-outline-primary:focus,
.btn-outline-primary.active:focus {
    box-shadow: 0 0 0 0.2rem rgba(245, 124, 0, 0.25);
}

/* Orange outline style for inactive toggle */
.btn-outline-primary {
    color: #f57c00;
    border-color: #f57c00;
    background-color: #ffffff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff;
    background-color: #f57c00;
    border-color: #f57c00;
}

/* Keep outline buttons orange when active/selected */
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #ffffff;
    background-color: #f57c00;
    border-color: #f57c00;
}

.btn-icon {
    width: 36px; /* Adjust width to match padding */
    height: 36px; /* Make buttons square */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove Bootstrap default padding */
    border-radius: 6px; /* Keep consistent rounded edges */
}

.btn-group-inline {
    display: flex;
    gap: 6px; /* Adjust spacing between buttons */
    align-items: center; /* Keep icons vertically centered */
    flex-wrap: nowrap; /* Prevent buttons from wrapping */
}

.badge {
    font-size: 90%;
}

.badge.bg-warning {
    background-color: #ffc107;
}

.badge.bg-success {
    background-color: #28a745;
}

.badge.bg-danger {
    background-color: #dc3545;
}

.container-fluid {
    padding: 0 50px;
}

.table th, .table td {
    text-align: center;
    vertical-align: middle;
}

/* Flexbox wrapper to ensure footer stays at the bottom */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1; /* Allows content to grow and push footer down */
}

/* Additional styles for alignment and responsiveness */
@media (max-width: 768px) {
    .container-fluid {
        padding: 0 15px;
    }
}

select {
    background-color: #f57c00; /* Background color for select */
    color: white; /* Text color */
}

select:focus {
    outline: none; /* Remove blue outline on focus */
    box-shadow: 0 0 5px #f57c00; /* Optional: adds a soft shadow */
}

option:checked {
    background-color: #f57c00; /* Color of selected option */
    color: white;
}

option {
    background-color: white; /* Background for unselected options */
    color: black; /* Text color for unselected options */
}

/* Disabled selects should look clearly disabled (grey), not white */
select:disabled,
select[disabled] {
    background-color: #e9ecef; /* Light grey background */
    color: #6c757d; /* Muted text color */
    border-color: #ced4da;
    cursor: not-allowed;
}

/* Ensure disabled multi-select options inherit grey styling */
select:disabled option,
select[disabled] option {
    background-color: #e9ecef;
    color: #6c757d;
}

/* Also dim the selection highlight for disabled selects */
select:disabled option:checked,
select[disabled] option:checked {
    background-color: #d6d9dc; /* Softer grey for selected */
    color: #6c757d;
}

.badge {
    display: inline-flex; /* Flex layout for better centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    height: 30px; /* Matches button height */
    line-height: normal; /* Standard line height for centering */
    padding: 0 12px; /* Matches button padding */
    font-size: 0.875rem; /* Font size to match buttons */
    font-weight: 400; /* Normal font weight */
    border-radius: 0.25rem; /* Rounded corners */
}

.table th, .table td {
    font-size: 0.95rem; /* Smaller font size */
    text-align: left;
    vertical-align: top;
}

/* Highlight for current user's role in indicators */
.role-highlight {
    background-color: #ffe0b2; /* Light orange background */
    color: #333;
    padding: 0 2px;
    border-radius: 3px;
}

/* Scope toggle button colors to match indicators.html */
.scope-toggle .btn-warning {
    color: #ffffff;
    background-color: #f57c00;
    border-color: #f57c00;
}
.scope-toggle .btn-outline-warning {
    color: #f57c00;
    border-color: #f57c00;
    background-color: #ffffff;
}
.scope-toggle .btn-outline-warning:hover,
.scope-toggle .btn-outline-warning:focus {
    color: #ffffff;
    background-color: #f57c00;
    border-color: #f57c00;
}

/* Consistent appearance for disabled form controls inside disabled fieldsets */
fieldset:disabled .form-control,
fieldset[disabled] .form-control,
fieldset:disabled .form-select,
fieldset[disabled] .form-select {
    background-color: #e9ecef; /* Light grey background */
    color: #6c757d; /* Muted text color */
    border-color: #ced4da;
}

/* Also ensure disabled textarea and number inputs inherit the same styles */
fieldset:disabled textarea.form-control,
fieldset[disabled] textarea.form-control,
fieldset:disabled input.form-control[type="number"],
fieldset[disabled] input.form-control[type="number"] {
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #ced4da;
}

/* Grey out labels and helper texts inside disabled fieldsets (Sollwerte section) */
fieldset:disabled .form-label,
fieldset[disabled] .form-label {
    color: #6c757d;
}

/* Grey out the slider's 'Wert:' line and percent suffix when disabled */
fieldset:disabled .sollwert-slider p,
fieldset[disabled] .sollwert-slider p,
fieldset:disabled .input-group-text,
fieldset[disabled] .input-group-text {
    color: #6c757d;
    background-color: #e9ecef;
    border-color: #ced4da;
}

/* --- Dashboard To-Do Enhancements --- */
.badge-pill {
    border-radius: 999px;
}

.status-badge {
    border: 1px solid transparent;
}

.status-open {
    background-color: #ffffff; /* white */
    color: #000; /* black text */
    border: 2px solid #000; /* strong black border */
}

.status-draft {
    background-color: #6c757d; /* grey like Ausstehend (secondary) */
    color: #fff;
}

.status-pending {
    background-color: #ffc107; /* warning */
    color: #212529;
}

.status-rejected {
    background-color: #dc3545; /* danger */
    color: #fff;
}

.status-approved {
    background-color: #28a745; /* success */
    color: #fff;
}

.todo-row:hover {
    background-color: #f7f7f9;
}

.stat-card table thead th {
    font-weight: 600;
    color: #495057;
}

.stat-card table tbody td {
    border-top: 1px solid #eee;
}

.stat-card .btn-outline-secondary {
    border-color: #ced4da;
}

.stat-card .btn-outline-secondary:hover,
.stat-card .btn-outline-secondary:focus {
    background-color: #f1f3f5;
}

/* --- Completed state visuals --- */
.stat-card.complete {
    background-color: #f8f9fa; /* light grey */
    border: 1px solid #e9ecef;
}

.stat-card.complete h4,
.stat-card.complete p {
    color: #6c757d; /* grey text */
}

.stat-card.complete i {
    color: #6c757d; /* grey icons */
}

.badge.muted {
    opacity: 0.5;
    filter: grayscale(80%);
}

.status-approved.highlight {
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.35);
}

/* Done badge styling */
.badge-done {
    background-color: #28a745; /* success green */
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
}

/* Attention highlight removed per feedback */

/* Orange utility background for elements/badges */
.bg-orange {
    background-color: #f57c00 !important;
    color: #fff !important;
}

/* Smaller badges for period labels in indicators list */
.badge-sollwert {
    height: 20px; /* Smaller height than default 30px */
    padding: 0 8px; /* Tighter horizontal padding */
    font-size: 0.70rem; /* Smaller font size */
    line-height: 1; /* Keep content vertically centered */
}