/* --- CORE STYLES --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
    margin: 0;
    padding: 40px 20px;
    background-image: url('/static/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    line-height: 1.6;
    background-color: #f4f7f9;
}

.container {
    max-width: 800px;
    margin: auto;
    background: rgba(255, 255, 255, 0.98);
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
}

.logo-container {
    text-align: center;
    margin-bottom: 20px;
}

.logo-container img {
    max-width: 150px;
    height: auto;
    border-radius: 8px;
}

h1 {
    color: #0056b3;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 2.2em;
}

h2 {
    color: #0056b3;
    border-bottom: 2px solid #eef;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.6em;
}

.section-divider {
    margin: 40px 0;
    border: 1px solid #eee;
}

.mode-toggle { display: flex; justify-content: center; gap: 12px; margin-bottom: 25px; }
.mode-button { padding: 10px 20px; border: 1px solid #cdd5e0; border-radius: 999px; background: #f2f5fb; color: #44516b; font-size: 0.95em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.mode-button:hover { background: #e2e8f6; }
.mode-button.active { background: #0056b3; color: #fff; border-color: #0056b3; box-shadow: 0 4px 10px rgba(0, 86, 179, 0.3); }
.mode-section { display: none; }
.mode-section.active { display: block; }

/* --- TAB NAVIGATION --- */
.tab-nav { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 25px; }
.tab-button { padding: 12px 20px; cursor: pointer; border: none; background-color: transparent; font-size: 1.1em; color: #555; transition: color 0.3s ease, border-bottom 0.3s ease; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-button:hover { color: #0056b3; }
.tab-button.active { color: #007bff; border-bottom: 3px solid #007bff; font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }


/* --- SETTINGS SUB NAVIGATION --- */
.sub-tab-nav { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; }
.sub-tab-button { padding: 8px 14px; cursor: pointer; border: none; background: transparent; color: #555; font-size: 1em; border-bottom: 2px solid transparent; transition: color 0.3s ease, border-bottom 0.3s ease; }
.sub-tab-button:hover { color: #0056b3; }
.sub-tab-button.active { color: #007bff; border-bottom-color: #007bff; font-weight: 600; }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }


/* --- STATUS & LOG --- */
.status-box { padding: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 1.1em; }
.status-running { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.status-stopped { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.status-indicator { font-weight: bold; font-size: 1.2em; }
.control-buttons button { padding: 10px 20px; font-size: 1em; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-left: 10px; }
.control-buttons button:active { transform: translateY(1px); }
.btn-start { background-color: #28a745; color: white; }
.btn-start:hover { background-color: #218838; }
.btn-stop { background-color: #dc3545; color: white; }
.btn-stop:hover { background-color: #c82333; }
.next-interval-timer { margin-top: 10px; padding: 8px 12px; background: #eef5ff; border: 1px solid #d6e4ff; border-radius: 6px; font-size: 0.95em; color: #335; }
.interval-count { margin-top: 6px; background: #f4f8ff; border-style: dashed; }
.log-container { margin-top: 10px; max-height: 400px; overflow-y: auto; border: 1px solid #eee; padding: 10px; background: #f9f9f9; border-radius: 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.log-entry { border-bottom: 1px solid #eee; padding: 10px 0; }
.log-entry:last-child { border-bottom: none; }
.log-header { font-weight: bold; color: #333; display: flex; align-items: center; margin-bottom: 5px; }
.log-nummer { background: #007bff; color: white; padding: 3px 8px; border-radius: 5px; margin-right: 10px; font-size: 0.85em; }
.log-stichwort { font-size: 1.1em; color: #0056b3; }
.log-timestamp { font-size: 0.8em; color: #666; margin-left: auto; }
.log-body { padding-left: 10px; font-size: 0.9em; color: #666; }
.log-body p { margin: 5px 0; }
.section-hint { margin: 0 0 18px 0; font-size: 0.95em; color: #51607a; background: #f2f6ff; border: 1px solid #d9e3ff; padding: 12px 16px; border-radius: 8px; }
.editor-hint { margin: 10px 0 14px 0; font-size: 0.9em; color: #58627d; background: #f7f9ff; border-left: 3px solid #8aa2f2; padding: 10px 14px; border-radius: 6px; }

.service-status-bar { margin-top: 18px; padding: 12px 16px; border: 1px solid #dbe2f4; border-radius: 10px; background: #f4f7ff; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.service-status-label { font-weight: 600; color: #1f3c88; font-size: 0.95em; }
.service-status-indicators { display: flex; gap: 10px; flex-wrap: wrap; }
.service-indicator { font-size: 0.9em; color: #4a4f68; background: #eef1fb; border: 1px solid #d3d9f2; border-radius: 999px; padding: 4px 12px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.service-indicator strong { font-weight: 600; }
.service-indicator.indicator-active { background: #e6f5ea; border-color: #9fd6b2; color: #226038; }
.service-indicator.indicator-warning { background: #fff3e0; border-color: #f5c87c; color: #8a5a14; }
.service-indicator.indicator-inactive { background: #f3f4f8; border-color: #d4d6de; color: #616575; }

/* --- QUICK ACTIONS --- */
.quick-actions { margin-top: 20px; padding: 15px; border: 1px solid #d0dcff; border-radius: 8px; background-color: #f5f7ff; }
.quick-actions h3 { margin: 0 0 6px 0; color: #0056b3; }
.quick-actions-subtitle { margin: 0 0 12px 0; font-size: 0.9em; color: #555; }
.quick-actions-list { display: flex; flex-wrap: wrap; gap: 12px; }
.quick-actions-empty { margin: 0; font-size: 0.9em; color: #666; }
.quick-action-btn { flex: 1 1 200px; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; border: 1px solid #c5d4ff; border-radius: 8px; background: #ffffff; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; text-align: left; }
.quick-action-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.quick-action-btn.active, .quick-action-btn.quick-action-active { border-color: #ffc107; background: #fffaf1; }
.quick-action-label { font-weight: 600; color: #1f3c88; }
.quick-action-meta { font-size: 0.85em; color: #555; }
.quick-action-status { font-size: 0.8em; color: #666; }
.quick-action-btn.active .quick-action-status, .quick-action-btn.quick-action-active .quick-action-status { color: #856404; }
/* --- FORMS (CONFIG & DESIGN) --- */
.config-form, .upload-form { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; align-items: center; margin-top: 15px; }
.config-form label, .upload-form label { font-weight: bold; color: #555; }
.config-form input, .upload-form input, .config-form textarea { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ddd; box-sizing: border-box; }
.config-form .form-checkbox { width: auto; justify-self: start; }
.config-form button, .upload-form button { grid-column: 2 / 3; background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; width: auto; justify-self: start; }
.config-form.single-column { grid-template-columns: 1fr; }
.config-form.single-column label:empty { display: none; }
.config-form.single-column button { grid-column: 1 / -1; }
.toggle-cell { display: flex; align-items: center; justify-content: flex-start; height: 100%; }
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #cfd6e6; border-radius: 999px; transition: background-color 0.25s ease; }
.toggle-slider::before { content: ""; position: absolute; height: 22px; width: 22px; left: 2px; top: 2px; background-color: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.25s ease; }
.toggle-switch input:checked + .toggle-slider { background: #2cbe74; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }
.toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 0 3px rgba(44,190,116,0.3); }
.toggle-switch input:disabled + .toggle-slider { background: #e0e6f0; cursor: not-allowed; }
.toggle-switch input:disabled + .toggle-slider::before { background: #f3f5fa; box-shadow: none; }
.config-form.single-column .toggle-cell { justify-content: flex-start; }

/* --- DATA EDITOR (STICHWORT & STRASSE) --- */
.editor-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.editor-subtitle { font-size: 0.9em; color: #666; margin-top: 5px; }
.io-buttons { display: flex; gap: 10px; }
.btn-io { padding: 8px 15px; border: 1px solid #ccc; background-color: #f8f9fa; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s; }
.btn-io:hover { background-color: #e9ecef; }
.demo-download { font-size: 0.85em; color: #666; text-align: right; margin: -10px 0 15px 0; }
.demo-download a { color: #007bff; text-decoration: none; }
.demo-download a:hover { text-decoration: underline; }
.table-controls { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; }
.btn-add-row { background-color: #28a745; color: white; font-size: 1em; padding: 8px 15px; border-radius: 5px; border: none; cursor: pointer; }
.btn-save-table { background-color: #007bff; color: white; font-size: 1em; padding: 8px 15px; border-radius: 5px; border: none; cursor: pointer; }

/* STRASSEN TABLE */
.table-container { max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; }
.data-table th { background-color: #f8f9fa; font-weight: 600; position: sticky; top: 0; }
.data-table tbody tr:hover { background-color: #f1f3f5; }
.data-table td[contenteditable="true"]:focus { background-color: #e9ecef; outline: 2px solid #007bff; }
.btn-delete-row { background: transparent; border: none; cursor: pointer; font-size: 1.2em; color: #dc3545; }

/* STICHWORT GROUPS */
.group-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 20px; background-color: #fdfdfd; }
.group-header { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
.group-header input { padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; }
.group-header .stichwort-input { font-weight: bold; flex-basis: 200px; }
.group-header .alarm-input { flex-grow: 1; }
.btn-delete-group { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 8px 12px; border-radius: 5px; cursor: pointer; }
.group-meta { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 10px; align-items: center; margin: 12px 0; }
.group-probability-label { font-weight: 600; color: #555; }
.probability-input { padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 0.95em; }
.group-probability-hint { grid-column: 1 / -1; font-size: 0.8em; color: #777; }
.meldebilder-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.meldebild-tag { display: inline-flex; align-items: center; background-color: #e9ecef; padding: 5px 10px; border-radius: 15px; font-size: 0.9em; }
.tag-delete-btn { background: #6c757d; color: white; border: none; border-radius: 50%; width: 18px; height: 18px; margin-left: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.add-meldebild-form { display: flex; gap: 10px; }
.add-meldebild-input { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 5px; }
.btn-add-meldebild { background-color: #e0e0e0; border: 1px solid #ccc; padding: 8px 15px; cursor: pointer; border-radius: 5px; }

/* TOAST NOTIFICATIONS */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 12px 25px; border-radius: 8px; color: white; z-index: 1000; opacity: 0; transition: opacity 0.5s, bottom 0.5s; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.toast.success { background-color: #28a745; }
.toast.error { background-color: #dc3545; }
.toast.show { opacity: 1; bottom: 30px; }
/* --- SCHEDULED OPERATIONS --- */
.scheduled-description { font-size: 0.9em; color: #555; margin-top: -10px; margin-bottom: 15px; }
.scheduled-controls, .preset-controls { display: flex; justify-content: flex-end; margin-bottom: 15px; gap: 10px; }
.btn-add-scheduled { background-color: #28a745; color: white; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.95em; }
.btn-add-scheduled:hover { background-color: #218838; }
.btn-add-preset { background-color: #0056b3; color: white; padding: 8px 18px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.95em; }
.btn-add-preset:hover { background-color: #004999; }
.scheduled-list, .preset-list { display: flex; flex-direction: column; gap: 15px; }
.scheduled-empty, .preset-empty { text-align: center; color: #666; padding: 20px 0; background: #f9f9f9; border: 1px dashed #ccc; border-radius: 8px; }
.scheduled-card, .preset-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.scheduled-header, .preset-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.scheduled-title, .preset-title { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; }
.scheduled-status { font-size: 0.85em; color: #555; background: #eef2ff; padding: 4px 10px; border-radius: 12px; }
.scheduled-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 15px; }
.scheduled-field { display: flex; flex-direction: column; }
.scheduled-field span { font-size: 0.85em; color: #555; margin-bottom: 4px; font-weight: 600; }
.scheduled-field input, .scheduled-field textarea { padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 0.95em; }
.scheduled-field textarea { resize: vertical; min-height: 60px; }
.selection-checklist { display: block; padding: 8px; background: #f4f7ff; border: 1px solid #d4dcf5; border-radius: 8px; max-height: 260px; overflow-y: auto; width: 100%; box-sizing: border-box; }
.selection-option { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #c8d2ee; border-radius: 6px; padding: 6px 10px; font-size: 0.9em; color: #455067; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; margin-bottom: 6px; box-sizing: border-box; }
.selection-option:last-child { margin-bottom: 0; }
.selection-option:hover { background: #eef3ff; border-color: #9fb5f9; }
#settings-konfiguration .selection-checklist,
#settings-konfiguration .selection-option { width: 100%; box-sizing: border-box; }
.selection-option input { margin: 0; }
.field-full-width { grid-column: 1 / -1; }
.selection-field .selection-checklist { max-height: 260px; }
.selection-empty { font-size: 0.85em; color: #666; margin: 0; }
.scheduled-actions, .preset-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scheduled-actions button, .preset-actions button { padding: 8px 12px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: transform 0.2s ease; }
.scheduled-actions button:active, .preset-actions button:active { transform: translateY(1px); }
.btn-scheduled-save { background-color: #007bff; color: white; }
.btn-scheduled-queue { background-color: #17a2b8; color: white; }
.btn-scheduled-reset { background-color: #ffc107; color: #333; }
.btn-scheduled-delete { background-color: #dc3545; color: white; }
.btn-preset-trigger { background-color: #17a2b8; color: white; }
.btn-preset-save { background-color: #007bff; color: white; }
.btn-preset-delete { background-color: #dc3545; color: white; }

/* --- LOG BADGE --- */
.log-badge { background: #ffc107; color: #333; padding: 0 8px; border-radius: 10px; font-size: 0.75em; margin-left: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.log-badge-preset { background: #20c997; color: #fff; }

.footer {
    max-width: 800px;
    margin: 40px auto 0;
    padding: 18px 24px;
    text-align: center;
    color: #1f3c88;
    font-size: 0.95em;
    font-weight: 600;
    background: #eef3ff;
    border: 1px solid #d0dcff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.01em;
}

.footer a {
    color: #0056b3;
    text-decoration: none;
    margin-left: 10px;
    font-weight: 700;
}

.footer a:hover,
.footer a:focus {
    text-decoration: underline;
}

/* --- RESPONSIVE TWEAKS --- */
@media (max-width: 900px) {
    body {
        padding: 24px 12px;
        background-attachment: scroll;
    }
    .container {
        padding: 20px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    }
    .tab-nav {
        flex-wrap: wrap;
        gap: 6px;
    }
    .tab-button {
        flex: 1 1 45%;
        text-align: center;
        padding: 10px 14px;
        font-size: 1em;
    }
    .status-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .control-buttons {
        width: 100%;
        display: flex;
        gap: 10px;
    }
    .control-buttons button {
        flex: 1;
        margin-left: 0;
    }
    .service-status-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .service-status-indicators {
        width: 100%;
        gap: 6px;
    }
    .config-form,
    .upload-form {
        grid-template-columns: 1fr;
    }
    .config-form label {
        margin-bottom: 4px;
    }
    .toggle-cell {
        justify-content: flex-start;
    }
    .scheduled-controls, .preset-controls {
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .scheduled-controls button,
    .preset-controls button {
        flex: 1 1 140px;
    }
    .scheduled-header,
    .preset-header {
        flex-direction: column;
        align-items: stretch;
    }
    .scheduled-actions,
    .preset-actions {
        width: 100%;
    }
    .scheduled-actions button,
    .preset-actions button {
        flex: 1 1 calc(50% - 10px);
    }
    .group-header {
        flex-direction: column;
        align-items: stretch;
    }
    .group-header .stichwort-input {
        flex-basis: auto;
    }
    .add-meldebild-form {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .add-meldebild-input {
        width: 100%;
    }
    .btn-add-meldebild {
        width: 100%;
    }
    .table-controls {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .table-controls button {
        width: 100%;
    }
    .io-buttons {
        flex-wrap: wrap;
        width: 100%;
    }
    .io-buttons .btn-io {
        flex: 1 1 calc(50% - 6px);
    }
    .demo-download {
        text-align: left;
    }
    .group-meta {
        grid-template-columns: 1fr;
    }
    .scheduled-fields {
        grid-template-columns: 1fr;
    }
    .scheduled-actions button {
        flex: 1 1 100%;
    }
}

@media (max-width: 540px) {
    h1 {
        font-size: 1.85em;
    }
    h2 {
        font-size: 1.35em;
    }
    .tab-button {
        flex: 1 1 100%;
    }
    .quick-actions {
        padding: 12px;
    }
    .quick-action-btn {
        min-width: 100%;
    }
    .scheduled-field {
        width: 100%;
    }
    .scheduled-field input,
    .scheduled-field textarea {
        font-size: 0.9em;
    }
    .footer {
        padding: 16px;
        font-size: 0.85em;
    }
    .toast {
        left: 10px;
        right: 10px;
        transform: none;
        bottom: 16px;
    }
}

.impressum-section {
    margin-bottom: 25px;
}

.impressum-section h2 {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.impressum-section p {
    margin: 0;
    line-height: 1.6;
}

.impressum-back {
    margin-top: 40px;
}

.impressum-back a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.impressum-back a:hover {
    text-decoration: underline;
}