/* Stil für die uploadstatus-Tabelle */
.table-upload-status {
    width: 100%;
    border-collapse: collapse;
}

.table-striped {
    tbody {

        /* Status: In Progress (upload-status-0) - Blue */

        tr.upload-status-0 {
            background-color: rgb(237, 247, 255); /* Light blue for 'in progress' */
        }

        tr.upload-status-0:hover {
            background-color: rgb(204, 229, 255); /* Darker blue on hover */
        }

        /* Status: OK (upload-status-200) - Green */

        tr.upload-status-200 {
            background-color: rgb(237, 255, 237); /* Light green for 'ok' */
        }

        tr.upload-status-200:hover {
            background-color: rgb(204, 255, 204); /* Darker green on hover */
        }

        /* Status: Aborted (upload-status-501) - Orange */

        tr.upload-status-501 {
            background-color: rgb(255, 247, 237); /* Light orange for 'aborted' */
        }

        tr.upload-status-501:hover {
            background-color: rgb(255, 223, 191); /* Darker orange on hover */
        }

        /* Audio Item - Teal */

        tr.medium-2 {
            background-color: rgb(204, 255, 230); /* Light mint */
        }

        tr.medium-2:hover {
            background-color: rgb(179, 245, 212); /* Slightly darker mint on hover */
        }

        tr.medium-2.ftp-upload {
            background-color: rgb(184, 245, 220); /* Slightly different mint for FTP */
        }

        tr.medium-2.ftp-upload:hover {
            background-color: rgb(159, 235, 202); /* Darker mint on hover for FTP */
        }

        /* Video Item - Lavender */

        tr.medium-1 {
            background-color: rgb(230, 230, 255); /* Light lavender */
        }

        tr.medium-1:hover {
            background-color: rgb(204, 204, 245); /* Slightly darker lavender on hover */
        }

        tr.medium-1.ftp-upload {
            background-color: rgb(210, 210, 245); /* Slightly different lavender for FTP */
        }

        tr.medium-1.ftp-upload:hover {
            background-color: rgb(185, 185, 235); /* Darker lavender on hover for FTP */
        }

        /* Status: No Rights (no-rights) - Bright Yellow */

        tr.no-rights {
            background-color: rgb(255, 255, 153); /* Bright yellow for 'no rights' */
        }

        tr.no-rights:hover {
            background-color: rgb(255, 255, 102); /* More saturated yellow on hover */
        }

        /* Status: Error (upload-status-500) - Red */

        tr.empty-file,
        tr.upload-status-500 {
            background-color: rgb(255, 204, 204); /* Light red for 'error' */
        }

        tr.empty-file:hover,
        tr.upload-status-500:hover {
            background-color: rgb(251, 117, 117); /* Darker red on hover */
        }
    }
}

/* Status-specific icons using pseudo-elements */

.upload-status-200 td:first-child::before {
    content: "\2713"; /* Checkmark */
    color: green;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}

.upload-status-500 td:first-child::before {
    content: "\2716"; /* Cross (X) */
    color: red;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}

/* Container to hold the circles */

.upload-status-0 td:first-child {
    display: flex; /* Enables placing circles side by side */
    height: 100%; /* Ensure full height for Flexbox centering */
    gap: 4px; /* Space between circles */
}

/* Styling for both circles */

.upload-status-0 td:first-child::before,
.upload-status-0 td:first-child::after {
    content: ''; /* Empty content for circles */
    display: inline-block;
    width: 8px; /* Diameter of the circles */
    height: 8px;
    border-radius: 50%; /* Makes them circular */
    background-color: darkgreen; /* Starting color for both circles */
    animation: blink-alternate 2s infinite; /* Shared animation, phased to alternate */
}

/* First circle: Starts normal */

.upload-status-0 td:first-child::before {
    animation-delay: 0s; /* No delay */
}

/* Second circle: Delay to alternate blinking */

.upload-status-0 td:first-child::after {
    animation-delay: 1s; /* 1-second delay */
}

/* Animation: Blinking effect */
@keyframes blink-alternate {
    0%, 50% {
        opacity: 1; /* Fully visible */
    }
    51%, 100% {
        opacity: 0; /* Invisible */
    }
}

.upload-status-501 td:first-child::before {
    content: "\26A0"; /* Warning symbol */
    color: purple;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}

/* Progress bar styling */

.progress {
    position: relative;
    height: 20px;
    background-color: #e9ecef;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    line-height: 20px;
    text-align: center;
    color: #fff;
    background-color: #17a2b8;
    transition: width 0.4s ease;
}

.form-upload-status-filter {
    margin-bottom: 11px;
}

/* File icon for filename inside table-upload-status */
.table-upload-status .filename a::after {
    content: "\1F4C4"; /* File icon Unicode */
    margin-left: 5px; /* Space between icon and filename */
    color: black; /* Optional: Blue color for the icon */
    font-size: 16px; /* Adjust size */
    display: inline-block;
}

.panel-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.panel-container .panel {
    flex: 1 1 45%; /* Grows to occupy available space but ensures both panels take roughly equal space */
    min-width: 300px; /* Ensures a minimum width for the panels */
    max-width: 100%; /* Ensures it doesn't overflow the container */
}


#myCustomForm {
    display: none;
}

.modal-dialog #myCustomForm {
    display: block;
}

#myCustomForm .form-group {
    display: flex;
    flex-direction: column; /* Alternativ auch "row" für Label und Input nebeneinander */
    margin-bottom: 0;
}

#myCustomForm .form-section {
    margin-top: 20px;
}

#myCustomForm .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    align-items: center; /* Zentriert Eingabefelder */
}

#myCustomForm .form-group {
    display: flex;
    flex-direction: column;
}

#myCustomForm .form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

#myCustomForm .form-control {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#myCustomForm .form-hint {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: red;
}

#myCustomForm .form-hint i {
    margin-right: 5px;
    color: #007bff; /* Farbe des Icons */
}

/* Für den Checkbox-Bereich */
#myCustomForm .checkbox-group {
    display: flex;
    align-items: center; /* Checkbox und Label vertikal zentrieren */
    gap: 10px; /* Abstand zwischen Checkbox und Label */
    margin-bottom: 10px; /* Optionaler Abstand nach unten */
}

#myCustomForm .checkbox-group input[type="checkbox"] {
    margin: 0; /* Entferne Standardabstände der Checkbox */
}

#myCustomForm #progress-container {
    flex-direction: column;
    align-items: center;
}

#myCustomForm #progress-filename {
    margin-bottom: 10px; /* Abstand zwischen Dateiname und Progressbar */
    text-align: center;
    font-size: 14px; /* Optional - Textgröße anpassen */
    font-weight: bold; /* Optional - Hervorhebung */
}

.transcription-panel {
    padding: 1rem;
}

.transcription-render {
    border: 1px solid #eee;
    border-radius: 4px;
}

.srt-cue {
    padding: .5rem .75rem;
    border-bottom: 1px solid #f2f2f2;
}

.srt-cue:last-child {
    border-bottom: 0;
}

.srt-time {
    font-family: monospace;
    color: #666;
    margin-bottom: .25rem;
}

.srt-text {
    line-height: 1.45;
}
/* SEO-Begleittext – UI */
.seo-card {
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb; /* helles Grau */
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Accordion-Rahmen */
.accordion-section {
    margin: 12px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    background: #fff;
}

/* Header-Leiste */
.accordion-header {
    background: #f6f8fa;
    border-bottom: 1px solid #e5e7eb;
}

/* Trigger im Header mit Chevron */
.accordion-trigger {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: 0;
    color: #222;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}
.accordion-trigger::after {
    content: "▾";
    margin-left: auto;
    color: #666;
    transition: transform .2s ease;
}
.accordion-trigger[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.accordion-trigger:hover,
.accordion-trigger:focus {
    background: #eef2f5;
    color: #0b5560;
}

/* Inhalt */
.accordion-body {
    padding: 14px;
}

/* SEO-UI */
.seo-card { border: none; box-shadow: none; padding: 0; }
.seo-generator { display: grid; gap: 12px; }
.seo-actions { display: flex; align-items: center; gap: 8px; }

/* KI-Button (Indigo) */
.btn-ai {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 12px;
    padding: 6px 6px;
    border: 1px solid #004b8f;
    background-color: #ee0546;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.5;
    cursor: pointer;
}
.btn-ai:hover,
.btn-ai:focus { background-color: #b50031; color: #fff; border-color: #004b8f; text-decoration: none; }
.btn-ai:active { background-color: #005db3; }
.btn-ai .t3js-icon { display: inline-flex; }
.btn-ai .icon-markup svg { width: 16px; height: 16px; }

/* SEO-Ausgabe */
.seo-result { margin-top: 8px; }
.seo-output {
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #eceff1;
    border-radius: 6px;
}
.seo-text { white-space: pre-wrap; line-height: 1.5; color: #1f2937; }
.seo-meta { margin-top: 6px; color: #6b7280; font-size: .9em; }

/* Lade-Animation während SEO-Generierung */
.seo-loading {
    display: none;
    align-items: center;
    gap: 8px;
    color: #6b7280;
}
.seo-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #cfd8dc;
    border-top-color: var(--theme-color-indigo, #00737d);
    border-radius: 50%;
    animation: seo-spin .8s linear infinite;
}
@keyframes seo-spin { to { transform: rotate(360deg); } }

.table-uploads th:nth-child(1) { width: 5%; }   /* A/V */
.table-uploads th:nth-child(2) { width: 10%; }  /* Datum */
.table-uploads th:nth-child(3) { width: 35%; }  /* Titel */
.table-uploads th:nth-child(4) { width: 25%; }  /* Dateiname */
.table-uploads th:nth-child(5) { width: 7%; }  /* Stammname */
.table-uploads th:nth-child(6),
.table-uploads th:nth-child(7) { width: 2%; }   /* RS, FB */
.table-uploads th:nth-child(8) { width: 20%; }  /* Username */

.table-uploads {
    table-layout: fixed;   /* Fixiert Spaltenbreiten */
}

.table-uploads td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; /* blockiert Maus-Klicks */
}

.rating-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.rating-label {
    flex: 0 0 250px; /* Feste Breite für die Beschreibungen */
    margin-bottom: 0 !important;
    font-weight: normal;
    padding-right: 15px;
}

/* Styling der Sterne */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* Damit Hover-Effekte von links nach rechts funktionieren */
    justify-content: flex-end;
    font-size: 1.8rem;
    cursor: pointer;
}

.star-rating span {
    color: #ccc;
    padding: 0 2px;
    transition: color 0.2s;
}

.star-rating span.active {
    color: #ffb400; /* aktive Sterne */
}
.star-rating span:hover,
.star-rating span:hover ~ span {
    color: #ffd700; /* Hover-Effekt */
}