/* /gallery-dl-web/assets/css/main_styles.css */

/* === Globale CSS-Variablen (Default/Light Theme - "Flashbang") === */
:root {
    /* Schriftarten */
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Basisfarben Text & Hintergrund */
    --body-bg: #f0f2f5;
    --body-color: #495057;
    --heading-color: #2c3e50;
    --link-color: #007bff;
    --link-hover-color: #0056b3;

    /* Haupt-Layout-Elemente */
    --header-bg: #2c3e50;
    --header-color: #ecf0f1;
    --header-border-accent: #3498db;
    --footer-bg: #2c3e50;
    --footer-color: #bdc3c7;
    --footer-link-color: #ecf0f1;

    /* Komponenten-Hintergründe */
    --content-box-bg: #ffffff;
    --card-bg-color: #ffffff; /* Für Info-Karten etc. */
    --card-header-bg-color: #f8f9fa;
    --card-header-hover-bg-color: #e9ecef; /* Für Summary-Hover */
    --card-header-open-bg-color: #e9ecef; /* Für offene Details */
    --table-header-bg: #f8f9fa;
    --table-row-hover-bg: #f1f3f5;
    --section-bg-secondary: #f8f9fa; /* Für Aktionsleisten etc. */

    /* Ränder (Borders) */
    --border-color: #dee2e6; /* Standard-Randfarbe (z.B. für Karten) */
    --border-color-light: #e9ecef; /* Hellere Variante */
    --border-color-medium: #ced4da; /* Für Inputs etc. */
    --border-color-dark: #adb5bd; /* Dunklere Variante */

    /* Schatten (Box Shadows) */
    --box-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --box-shadow-base: 0 4px 12px rgba(0,0,0,0.08);
    --box-shadow-hover: 0 6px 15px rgba(0,0,0,0.1);
    --box-shadow-focus-ring: 0 0 0 .25rem rgba(13,110,253,.25);

    /* Buttons */
    --btn-primary-bg: #007bff;
    --btn-primary-border: #007bff;
    --btn-primary-text: #fff;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-border: #6c757d;
    --btn-secondary-text: #fff;
    --btn-success-bg: #198754;
    --btn-success-border: #198754;
    --btn-success-text: #fff;
    --btn-danger-bg: #dc3545;
    --btn-danger-border: #dc3545;
    --btn-danger-text: #fff;
    --btn-warning-bg: #ffc107;
    --btn-warning-border: #ffc107;
    --btn-warning-text: #212529; /* Dunkler Text auf Gelb */
    --btn-info-bg: #0dcaf0;
    --btn-info-border: #0dcaf0;
    --btn-info-text: #fff; /* Kann auch dunkel sein, je nach Info-Blau */
    --btn-disabled-opacity: 0.65;

    /* Formular-Elemente */
    --form-input-bg: #fff;
    --form-input-border: #ced4da;
    --form-input-focus-border: #86b7fe;
    --form-input-focus-shadow: var(--box-shadow-focus-ring);
    --form-label-color: #495057;
    --form-text-note-color: #6c757d;

    /* Nachrichten/Alerts (Hintergrund und Text) */
    --message-error-bg: #f8d7da; --message-error-text: #721c24; --message-error-border: #f5c6cb; --message-error-accent: #dc3545;
    --message-success-bg: #d1e7dd; --message-success-text: #0f5132; --message-success-border: #badbcc; --message-success-accent: #198754;
    --message-warning-bg: #fff3cd; --message-warning-text: #664d03; --message-warning-border: #ffecb3; --message-warning-accent: #ffc107;
    --message-info-bg: #cff4fc; --message-info-text: #055160; --message-info-border: #b6effb; --message-info-accent: #0dcaf0;

    /* Spezielle Nachrichten */
    --message-nuclear-bg: #1a1a1a;
    --message-nuclear-text: #ffc107;
    --message-nuclear-border: #ffc107;
    --message-nuclear-shadow1: rgba(255, 193, 7, 0.5);
    --message-nuclear-shadow2: rgba(255, 0, 0, 0.5);
    --message-nuclear-title-color: #dc3545;
    --message-nuclear-detail-text: #f8f9fa;

    --message-critical-bg: #721c24;
    --message-critical-text: #f8d7da;
    --message-critical-border: #f5c6cb;

    /* Code-Blöcke und Inline-Code */
    --code-bg-color: #e9ecef; /* Für Inline <code> */
    --code-text-color: #d63384; /* Für Inline <code> */
    --code-block-bg: #212529; /* Für <pre> Blöcke */
    --code-block-text-color: #f8f9fa; /* Für <pre> Blöcke */

    /* Icons */
    --icon-color-base: var(--body-color);
    --icon-color-muted: #6c757d;
    --icon-color-accent: var(--link-color);
    --icon-color-placeholder: #adb5bd;

    /* Overlays */
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --overlay-icon-color: #fff;

    /* Modals */
    --modal-backdrop-bg: rgba(0,0,0,0.88);
    --modal-footer-bg: rgba(15,15,15,0.85);
    --modal-footer-text-color: #e0e0e0;
    --button-close-bg: rgba(0,0,0,0.5);

    /* Sonstiges */
    --placeholder-bg: #f0f2f5; /* Für Thumbnail-Platzhalter etc. */
    --border-radius-sm: 0.2rem;
    --border-radius-base: 0.25rem;
    --border-radius-lg: 0.3rem;

    /* Z-Indizes (als Referenz, falls benötigt) */
    --zindex-dropdown: 1000;
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-modal-backdrop: 1040;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
    --zindex-tooltip: 1070;
    --zindex-toast-global: 2000;
}

/* === Globale Reset- und Basis-Styles === */
body {
    font-family: var(--font-family-sans-serif);
    margin: 0;
    padding: 0;
    background-color: var(--body-bg);
    color: var(--body-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
}

/* === Layout-Elemente === */
header.main-header {
    background-color: var(--header-bg);
    color: var(--header-color);
    padding: 1rem 2rem;
    border-bottom: 4px solid var(--header-border-accent);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Könnte auch eine Variable sein */
}

.header-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

header.main-header h1 { margin: 0; font-size: 1.6rem; }
header.main-header h1 a { color: inherit; text-decoration: none; }

nav.main-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
nav.main-nav ul li { margin-left: 5px; }
nav.main-nav ul li:first-child { margin-left: 0; }
nav.main-nav ul li a {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--header-color);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}
nav.main-nav ul li a:hover,
nav.main-nav ul li a.active {
    background-color: var(--header-border-accent); /* Nutzt Akzentfarbe für Hover/Aktiv */
    color: var(--btn-primary-text); /* Heller Text auf Akzentfarbe */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 15px;
    flex-grow: 1;
    box-sizing: border-box;
}

main.main-content > h2:first-child,
.content-box > h2:first-child { margin-top: 0; }
main.main-content h2, .content-box h2 {
    color: var(--heading-color);
    border-bottom: 2px solid var(--header-border-accent); /* Konsistenter Akzent */
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

footer.main-footer {
    text-align: center;
    padding: 1.5rem 2rem;
    background-color: var(--footer-bg);
    color: var(--footer-color);
    margin-top: auto;
    font-size: 0.9rem;
}
.footer-content-wrapper { max-width: 1200px; margin: 0 auto; }
footer.main-footer a { color: var(--footer-link-color); text-decoration: none; }
footer.main-footer a:hover { text-decoration: underline; }

/* === UI Komponenten === */
.content-box {
    background-color: var(--content-box-bg);
    padding: 25px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-base);
    margin-bottom: 30px;
}
.content-box h3 {
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.message {
    padding: 1rem; margin-bottom: 1.5rem;
    border-radius: var(--border-radius-base);
    border: 1px solid transparent; font-size: 0.95em; border-left-width: 4px;
}
.message.error, .message.danger {
    color: var(--message-error-text); background-color: var(--message-error-bg);
    border-color: var(--message-error-border); border-left-color: var(--message-error-accent);
}
.message.success {
    color: var(--message-success-text); background-color: var(--message-success-bg);
    border-color: var(--message-success-border); border-left-color: var(--message-success-accent);
}
.message.warning {
    color: var(--message-warning-text); background-color: var(--message-warning-bg);
    border-color: var(--message-warning-border); border-left-color: var(--message-warning-accent);
}
.message.info {
    color: var(--message-info-text); background-color: var(--message-info-bg);
    border-color: var(--message-info-border); border-left-color: var(--message-info-accent);
}
.message.success_nuclear {
    background-color: var(--message-nuclear-bg); color: var(--message-nuclear-text);
    border: 2px solid var(--message-nuclear-border); border-radius: var(--border-radius-base);
    box-shadow: 0 0 15px var(--message-nuclear-shadow1), 0 0 30px var(--message-nuclear-shadow2);
    font-weight: bold; text-align: center; padding: 20px; font-size: 1.1em; margin-bottom: 20px !important;
}
.message.success_nuclear .flash-title {
    font-size: 1.5em; color: var(--message-nuclear-title-color); margin-bottom: 10px; display: block;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.message.success_nuclear .flash-detail { font-size: 0.95em; color: var(--message-nuclear-detail-text); }
.message.error_critical {
    background-color: var(--message-critical-bg); color: var(--message-critical-text);
    border: 1px solid var(--message-critical-border); font-weight: bold;
    text-align: center; padding: 15px; font-size: 1.2em;
}

.btn {
    display: inline-block; font-weight: 500; text-align: center; vertical-align: middle;
    cursor: pointer; border: 1px solid transparent; padding: 0.5rem 1rem;
    font-size: 0.95rem; line-height: 1.5; border-radius: var(--border-radius-base);
    text-decoration: none; white-space: nowrap;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:focus, .btn.focus { outline: 0; box-shadow: var(--btn-primary-focus-shadow, var(--box-shadow-focus-ring)); } /* Fallback, falls btn-primary-focus-shadow nicht existiert */
.btn:disabled, .btn.disabled { opacity: var(--btn-disabled-opacity); cursor: not-allowed; pointer-events: none; }

.btn a,
.btn a:link,
.btn a:visited,
a.btn,
a.btn:link,
a.btn:visited {
    color: inherit; /* WICHTIG: Erbt die Textfarbe des Elternelements (.btn) */
    text-decoration: none; /* Keine Unterstreichung für Button-Links */
}

/* Spezifisch für den :hover Zustand, falls die Textfarbe sich dort ändern soll,
   aber meistens bleibt sie gleich oder wird durch Button-Hover-Effekte geregelt. */
.btn a:hover,
a.btn:hover {
    color: inherit; /* Oder eine spezifische Hover-Textfarbe für Button-Links, falls nötig */
    text-decoration: none;
}

/* Für den "Ansehen"-Button, der oft die .btn-info Klasse hat (oder ähnlich) */
.btn-info,
a.btn-info { /* Stelle sicher, dass die Textfarbe hier definiert ist */
    color: var(--btn-info-text, #fff); /* Textfarbe aus der Variable für Info-Buttons */
    background-color: var(--btn-info-bg);
    border-color: var(--btn-info-border);
}
.btn-info:hover,
a.btn-info:hover {
    color: var(--btn-info-text, #fff); /* Textfarbe sollte auch beim Hover erhalten bleiben, wenn nicht anders definiert */
    /* Der Hintergrund ändert sich durch filter: brightness() oder spezifische Hover-Variablen */
}

.btn-primary { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-text); }
.btn-primary:hover { filter: brightness(90%); }
.btn-secondary { background-color: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-text); }
.btn-secondary:hover { filter: brightness(90%); }
.btn-success { background-color: var(--btn-success-bg); border-color: var(--btn-success-border); color: var(--btn-success-text); }
.btn-success:hover { filter: brightness(90%); }
.btn-danger { background-color: var(--btn-danger-bg); border-color: var(--btn-danger-border); color: var(--btn-danger-text); }
.btn-danger:hover { filter: brightness(90%); }
.btn-warning { background-color: var(--btn-warning-bg); border-color: var(--btn-warning-border); color: var(--btn-warning-text); }
.btn-warning:hover { color: var(--btn-warning-text); filter: brightness(95%); }
.btn-info { background-color: var(--btn-info-bg); border-color: var(--btn-info-border); color: var(--btn-info-text); }
.btn-info:hover { filter: brightness(90%); }

.btn-small { padding: 0.3rem 0.6rem; font-size: 0.8rem; line-height: 1.4; border-radius: var(--border-radius-sm); }
.btn-large { padding: 0.75rem 1.5rem; font-size: 1.1rem; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; font-weight: 500; color: var(--form-label-color); }
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    display: block; width: 100%; padding: .5rem .75rem; font-size: 0.95rem; font-weight: 400;
    line-height: 1.5; color: var(--body-color); background-color: var(--form-input-bg);
    background-clip: padding-box; border: 1px solid var(--form-input-border);
    border-radius: var(--border-radius-base); box-sizing: border-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    color: var(--body-color); background-color: var(--form-input-bg);
    border-color: var(--form-input-focus-border); outline: 0;
    box-shadow: var(--form-input-focus-shadow);
}
.form-group .note,
.form-group .validation-message { font-size: 0.875em; color: var(--form-text-note-color); margin-top: .25rem; display: block; min-height: 1.2em; }
.form-group .validation-message.error { color: var(--message-error-accent); }
.form-group .validation-message.success { color: var(--message-success-accent); }

.data-table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.5rem;
    font-size: 0.9em; background-color: var(--card-bg-color);
    box-shadow: var(--box-shadow-sm); border-radius: var(--border-radius-lg); overflow: hidden;
}
.data-table th, .data-table td {
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-color-light);
    text-align: left; vertical-align: middle;
}
.data-table td { color: var(--body-color); }
.data-table th {
    background-color: var(--table-header-bg); font-weight: 600; color: var(--heading-color);
    border-bottom-width: 2px; white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background-color: var(--table-row-hover-bg); }

.data-table th a, .data-table th a:link, .data-table th a:visited { text-decoration: none; color: inherit; display: inline-block; }
.data-table th a:hover, .data-table th a:focus { text-decoration: none; color: inherit; opacity: 0.8; }
.data-table th .sort-arrow { display: inline-block; width: 1em; }

.table-responsive-wrapper {
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem;
    box-shadow: inset -10px 0 8px -8px rgba(0,0,0,0.05); /* Nur als Beispiel, kann auch eine Variable sein */
}

.text-muted { color: var(--form-text-note-color) !important; }
.text-success { color: var(--message-success-accent) !important; }
.text-warning { color: var(--message-warning-accent) !important; }
.text-danger { color: var(--message-error-accent) !important; }
.text-info { color: var(--message-info-accent) !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.nowrap { white-space: nowrap; }
.word-break-all { word-break: break-all; }

.status-badge {
    padding: 0.3em 0.65em; font-size: 0.78em; font-weight: 700; line-height: 1;
    color: var(--btn-primary-text); /* Standardmäßig heller Text */
    text-align: center; white-space: nowrap; vertical-align: baseline;
    border-radius: var(--border-radius-base); display: inline-block;
}
.status-badge.status-pending, .status-badge.status-queued { background-color: var(--btn-secondary-bg); }
.status-badge.status-running { background-color: var(--btn-primary-bg); }
.status-badge.status-completed { background-color: var(--btn-success-bg); }
.status-badge.status-error { background-color: var(--btn-danger-bg); }
.status-badge.status-paused { background-color: var(--btn-warning-bg); color: var(--btn-warning-text); }

.pagination-nav-wrapper { display: flex; justify-content: center; margin-top: 1.5rem; margin-bottom: 1rem; }
ul.pagination { display: flex; padding-left: 0; list-style: none; border-radius: var(--border-radius-base); }
.page-item { margin: 0 3px; }
.page-item .page-link {
    position: relative; display: block; padding: 0.5rem 0.75rem; line-height: 1.25;
    color: var(--link-color); background-color: var(--form-input-bg);
    border: 1px solid var(--border-color); text-decoration: none;
    border-radius: var(--border-radius-base);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.page-item .page-link:hover {
    z-index: 2; color: var(--link-hover-color);
    background-color: var(--table-row-hover-bg); border-color: var(--border-color);
}
.page-item.active .page-link {
    z-index: 3; color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); cursor: default;
}
.page-item.disabled .page-link {
    color: var(--form-text-note-color); pointer-events: none; cursor: default;
    background-color: var(--form-input-bg); border-color: var(--border-color);
}

#thumbnailStatusWrapperGlobal.status-toast-global {
    position: fixed; bottom: -150px; left: 50%; transform: translateX(-50%);
    padding: 12px 20px; border-radius: var(--border-radius-lg); z-index: var(--zindex-toast-global);
    box-shadow: var(--box-shadow-base); font-size: 0.9em;
    transition: opacity 0.4s ease, bottom 0.4s ease; opacity: 0;
    max-width: 90%; text-align: center; color: var(--btn-primary-text); /* Standardtextfarbe */
}
#thumbnailStatusWrapperGlobal.status-info { background-color: rgba(0, 100, 200, 0.9); }
#thumbnailStatusWrapperGlobal.status-success { background-color: rgba(25, 135, 84, 0.9); }
#thumbnailStatusWrapperGlobal.status-error { background-color: rgba(220, 53, 69, 0.9); }
#thumbnailStatusWrapperGlobal.status-warning { background-color: rgba(255, 193, 7, 0.9); color: var(--btn-warning-text); }

.log-type {
    display: inline-block; padding: 0.25em 0.6em; font-size: 0.78em; font-weight: 600;
    line-height: 1; color: var(--btn-primary-text); text-align: center; white-space: nowrap;
    vertical-align: baseline; border-radius: var(--border-radius-base); text-transform: capitalize;
}
.log-type-system_error, .log-type-system_critical, .log-type-database_error,
.log-type-thumbnail_worker_critical, .log-type-thumbnail_worker_error, .log-type-downloader_error,
.log-type-queue_error, .log-type-project_delete_failed, .log-type-project_delete_action_failed { background-color: var(--btn-danger-bg); }
.log-type-system_warning, .log-type-security_warning, .log-type-security_csrf_failure,
.log-type-security_unauthorized_access, .log-type-security_unauthorized_action, .log-type-downloader_warning,
.log-type-thumbnail_worker_warning, .log-type-project_delete_warning, .log-type-project_action_warning { background-color: var(--btn-warning-bg); color: var(--btn-warning-text); }
.log-type-project_action_completed, .log-type-project_created, .log-type-project_updated,
.log-type-project_deleted, .log-type-downloader_completed, .log-type-thumbnail_generation_completed,
.log-type-system_success { background-color: var(--btn-success-bg); }
.log-type-system_info, .log-type-downloader_info, .log-type-thumbnail_worker_info, .log-type-queue_info { background-color: var(--btn-info-bg); }
.log-type-project_action, .log-type-project_action_detail, .log-type-project_update { background-color: #fd7e14; /* Orange */ }
.log-type-queue, .log-type-downloader_queue, .log-type-project_queued { background-color: #6f42c1; /* Purple */ }
.log-type-downloader_system, .log-type-downloader_project, .log-type-thumbnail_generation_start,
.log-type-thumbnail_generation_progress { background-color: var(--btn-secondary-bg); }
.log-type-gallery_dl_output {
    background-color: var(--code-block-bg); color: var(--code-block-text-color);
    font-family: var(--font-family-monospace); text-transform: none;
}
.log-type:not([class*="log-type-"]), .log-type.log-type-unbekannt, .log-type.log-type-default { background-color: #adb5bd; color: var(--btn-warning-text); }

.tippy-box { border-radius: var(--border-radius-sm); font-size: 0.85em; padding: 6px 10px; color: var(--btn-primary-text); }
.tippy-content { padding: 0; }

/* Globale Pfeile für <details> (kann auch in components.css) */
details > summary {
    list-style: none; cursor: pointer; position: relative;
    padding-left: 25px; /* Mehr Platz für das Icon */
}
details > summary::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900; content: "\f0da"; /* fas fa-caret-right */
    position: absolute; left: 2px; /* Näher am Text */
    top: 50%; transform: translateY(-50%);
    transition: transform 0.2s ease-in-out;
    color: var(--icon-color-muted); /* Farbe für den Pfeil */
}
details[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
/* Kein fas fa-caret-down mehr explizit, die Drehung reicht meist. */