/* Zusätzlicher Padding-Bottom, damit der Content nicht hinter dem fixierten Footer liegt */
body {
    padding-bottom: 120px;
}

/* Schriftgröße ca. 25% kleiner für fast alles (Root auf 12px statt 16px bzw. 75%) */
html {
    font-size: 75%;
}

/* Bootstrap Overrides & Custom: Schrift überall kleiner */
body,
input,
button,
select,
textarea,
.form-control,
.form-label,
.card,
.table,
.alert,
.navbar,
label,
.form-select,
.table th,
.table td,
.list-group-item,
.btn {
    font-size: 0.85rem !important; /* ca. 25% kleiner als vorher 1rem */
}

/* Styling für das Formular zur Eingabe der API Zugangsdaten */
#config-container {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 50px auto;
    width: 300px;
}
#config-container h2 {
    text-align: center;
}

/* Container für die Repo-Auswahl */
#repo-container {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    width: 300px;
}

/* Container für die Dateiliste (links) */
#file-container {
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
    max-height: 600px; /* Höhe verdoppelt von 300px auf 600px */
    overflow-y: auto;
    width: 300px;
}

/* Container für den Context-Eingabebereich (rechts) */
#context-container {
    float: left;
    margin-left: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;
}

/* Container für Fehlermeldungen */
#error-container {
    clear: both;
    border: 1px solid red;
    padding: 10px;
    background-color: #ffe6e6;
    color: red;
    margin: 10px;
}

/* Container für die API Response */
#response-container {
    clear: both;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

/* Styling für den aufklappbaren Inhalt */
#response-content {
    display: none;
    margin-top: 10px;
}

/* Zeigt den Cursor als Pointer */
.toggle-header {
    cursor: pointer;
    user-select: none;
}

/* Styling für den Bereich der API-Zugangsdaten */
#credentials-container {
    float: right;
    margin: 10px;
}

/* Tab-Styles für den Debug-Bereich */
#response-tabs {
    border: 1px solid #ccc;
}
#response-tabs .tab-links {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}
#response-tabs .tab-links li {
    float: left;
}
#response-tabs .tab-links li a {
    display: block;
    padding: 10px 15px;
    color: #000;
    text-decoration: none;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: -1px;
    background: #f1f1f1;
}
#response-tabs .tab-links li.active a,
#response-tabs .tab-links li a:hover {
    background: #ffffff;
}
#response-tabs .tab-content .tab {
    display: none;
    padding: 15px;
}
#response-tabs .tab-content .tab.active {
    display: block;
}

/* Footer für Debug & API Response Tabs, fixiert am unteren Rand */
#debug-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    height: 300px;
    overflow-y: auto;
    font-size: 0.82rem !important;
}

/* ---------------- Neues CSS aus api_frontend.php Inline-Styling auslagern ---------------- */
body {
    padding-top: 70px;
    padding-bottom: 320px;
}
#debug-footer {
    height: 300px;
    overflow-y: auto;
}
.available-files-card {
    /* Anpassung entfernt: height/min-height in .context-box-card geregelt */
    display: flex;
    flex-direction: column;
}
.available-files-card .card-body {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

/* ----------- SCROLLBAR für Verfügbare Dateien/Liste einrichten (maximale Höhe & Scrollbar) ----------- */
.available-files-list {
    flex-grow: 1;
    overflow-y: auto;
    max-height: 54vh; /* Deutlich niedriger: ~1/2 der Viewport-Höhe, damit am Rand mehr Luft bleibt */
    min-height: 0;
}

/* Optional: Optisch schönerer Scrollbar für alle modernen Browser */
.available-files-list {
    scrollbar-width: thin;
    scrollbar-color: #b0b0cc #e9ecef;
}
.available-files-list::-webkit-scrollbar {
    width: 8px;
}
.available-files-list::-webkit-scrollbar-thumb {
    background: #b0b0cc;
    border-radius: 4px;
}
.available-files-list::-webkit-scrollbar-track {
    background: #e9ecef;
}

#token-progress-container {
    width: 100%;
    background-color: #e9ecef;
    border-radius: 0.375rem;
    height: 1.3rem;
    margin-bottom: 0.4rem;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
}
#token-progress-bar {
    height: 100%;
    background-color: #0d6efd;
    text-align: center;
    color: white;
    font-size: 0.83rem;
    line-height: 1.2rem;
    transition: width 0.5s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------- DARK MODE SUPPORT -------------- */
body.dark-mode,
html.dark-mode,
.dark-mode {
    background-color: #18191d !important;
    color: #ccc !important;
}

body.dark-mode .navbar,
html.dark-mode .navbar,
.dark-mode .navbar {
    background-color: #23242a !important;
    color: #eee !important;
}

body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .btn,
.dark-mode .navbar .navbar-brand,
.dark-mode .navbar .nav-link,
.dark-mode .navbar .btn {
    color: #ccc !important;
    background-color: transparent !important;
    border-color: #444 !important;
}

body.dark-mode .card,
.dark-mode .card {
    background-color: #202128 !important;
    color: #ccc !important;
    border-color: #32343c !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #23242a !important;
    color: #ccc !important;
    border-color: #3a3b41;
}

body.dark-mode .alert-danger,
body.dark-mode .alert-success,
body.dark-mode .alert-info,
.dark-mode .alert-danger,
.dark-mode .alert-success,
.dark-mode .alert-info {
    color: #fff;
    background-color: #222c2d !important;
    border-color: #224;
}

body.dark-mode .list-group-item,
.dark-mode .list-group-item {
    background-color: #23242a !important;
    color: #ccc !important;
}

body.dark-mode .table,
.dark-mode .table {
    background-color: #222 !important;
    color: #cce !important;
}

body.dark-mode #debug-footer,
.dark-mode #debug-footer {
    background: #202128 !important;
    color: #b9cce3 !important;
    border-top: 1px solid #253055 !important;
}

body.dark-mode .table th, 
body.dark-mode .table td,
.dark-mode .table th, 
.dark-mode .table td {
    background-color: #25262c !important;
    color: #bcc !important;
}

/* Diff2Html dunkel erzwingen (siehe orig CSS: .d2h-dark-color-scheme) */
#diff2html-container .d2h-wrapper,
#diff2html-container .d2h-file-wrapper,
#diff2html-container .d2h-file-header {
    font-size: 0.85rem !important;
}
body.dark-mode #diff2html-container .d2h-wrapper,
body.dark-mode #diff2html-container .d2h-file-wrapper,
body.dark-mode #diff2html-container .d2h-file-header {
    background: #141920 !important;
    color: #e6edf3 !important;
}

/* Diff2Html Style: Theme switch über Klasse */
#diff2html-container .d2h-wrapper,
#diff2html-container .d2h-file-wrapper,
#diff2html-container .d2h-file-header,
#diff2html-container table.d2h-diff-table,
#diff2html-container .d2h-file-list-wrapper,
#diff2html-container .d2h-file-list-header,
#diff2html-container .d2h-file-list-title {
    font-size: 0.82rem !important;
}
#diff2html-container * {
    font-size: 0.95em !important;
}
body.dark-mode #diff2html-container .d2h-wrapper,
body.dark-mode #diff2html-container .d2h-file-wrapper,
body.dark-mode #diff2html-container .d2h-file-header,
body.dark-mode #diff2html-container table.d2h-diff-table,
body.dark-mode #diff2html-container .d2h-file-list-wrapper,
body.dark-mode #diff2html-container .d2h-file-list-header,
body.dark-mode #diff2html-container .d2h-file-list-title {
    background: #141920 !important;
    color: #e6edf3 !important;
}
body.dark-mode #diff2html-container pre,
body.dark-mode #diff2html-container code {
    background: #25262c !important;
    color: #b9cce3 !important;
}

/* Reine Utility-Klassen für manuelles Umschalten */
html.dark-mode,
body.dark-mode {
    --bs-body-bg: #18191d;
    --bs-body-color: #ccc;
    --bs-card-bg: #23242a;
    --bs-navbar-bg: #202128;
}

/* Button/Toggle Styles für DarkMode Switcher */
.dark-mode-toggle {
    margin-left: 0.4rem;
    font-size: 0.9em;
    background: none;
    border: none;
    color: #0d6efd;
    cursor: pointer;
    outline: none;
    opacity: 0.95;
    transition: color 0.2s;
}
.dark-mode .dark-mode-toggle { color: #89b4fa; }

@media (max-width: 900px) {
    html { font-size: 65%; }
}

/* End dark mode block */


/* ---------------- WAIT OVERLAY ---------------- */
#wait-overlay {
    position: fixed;
    z-index: 20000;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    display: none;
}
#wait-overlay .wait-overlay-bg {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(22,22,32,0.64);
    z-index: 1;
}
#wait-overlay .wait-overlay-inner {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#wait-overlay .wait-overlay-spinner {
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #2145aa;
    border-radius: 50%;
    animation: wait-overlay-spin 1s linear infinite;
}
@keyframes wait-overlay-spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
#wait-overlay .wait-overlay-text {
    color: #fff;
    font-size: 1.35rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px #181911;
}

/* Darkmode Anpassung für Overlay */
body.dark-mode #wait-overlay .wait-overlay-bg {
    background: rgba(0,0,0,0.91);
}
body.dark-mode #wait-overlay .wait-overlay-text {
    color: #acc2e2;
}
body.dark-mode #wait-overlay .wait-overlay-spinner {
    border: 8px solid #313342;
    border-top: 8px solid #83b4ed;
}

/* -------- Anpassung für Context Eingabe-Box und Verfügbare Dateien Box – jeweils ca. 200px niedriger! -------- */
.context-box-card,
.available-files-card {
    min-height: 80px;
    max-height: 340px;
    height: 100%;
}
.context-box-card .card-body,
.available-files-card .card-body {
    min-height: 80px;
    max-height: 340px;
}
/* Damit das Textfeld nicht zu kurz wird */
.context-box-card textarea {
    min-height: 64px;
    max-height: 120px;
    flex: 1 1 40px;
}
/* Minimal- & Maximalhöhen angepasst für große Screens */
@media (min-width: 1200px) {
    .context-box-card,
    .available-files-card {
        min-height: 80px;
        max-height: 340px;
        height: 100%;
    }
    .context-box-card .card-body,
    .available-files-card .card-body {
        min-height: 80px;
        max-height: 340px;
    }
}
/* Damit Cols nebeneinander gleich hoch, falls verschiedene Inhalte */
.row > [class*='col-'] > .card {
    height: 100%;
}