/* CTDRA-Layout: Seitenleiste, Navbar-Suche, Dashboard, Aktivitäts-Feed, Repo-Übersicht und
   Komponenten. Wird über templates/custom/header.tmpl auf jeder Seite nach der Theme-CSS geladen,
   damit Seitenleiste und Dashboard auch mit Giteas Standard-Themes funktionieren.
   Farben nur über Giteas --color-*-Variablen, damit jedes Theme ohne eigene Regeln funktioniert.
   --fonts-heading gibt es nur in den CTDRA-Themes, sonst gilt Giteas Hauptschrift.
   Breakpoints laut DESIGN.md: 1280 / 1024 / 768 px. Aufbau und Templates: siehe LAYOUT.md. */

:root {
    --ctdra-sidebar-width: 280px;
    --ctdra-gap: 24px;
    --ctdra-card-padding-x: 24px;
    --ctdra-font-label: 600 12px/1.3 var(--fonts-monospace);
}

@media (max-width: 1279.98px) {
    :root {
        --ctdra-sidebar-width: 240px;
    }
}

/* Icon-Leiste */
@media (max-width: 1023.98px) {
    :root {
        --ctdra-sidebar-width: 64px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --ctdra-sidebar-width: 0px;
        --ctdra-gap: 16px;
        --ctdra-card-padding-x: 16px;
    }
}

/* Material Symbols: Größe und Strichstärke passend zu Giteas Octicons */
.material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

/* ============================================================================================
   Shell: Seitenleiste links neben dem Seiteninhalt
   .full.height enthält Navbar, Banner und den Inhalt (role="main"). Die Seitenleiste steht im
   DOM vor der Navbar. Per Flex-Umbruch und order stehen Navbar und Banner oben über die volle
   Breite, darunter Seitenleiste und Inhalt nebeneinander, danach alles Weitere.
   ============================================================================================ */

/* Der Hintergrund zeichnet Fläche und Rahmen der Seitenleiste bis zum unteren Seitenrand weiter,
   auch unter dem für den Footer reservierten Platz (--page-space-bottom) */
.full.height:has(> .ctdra-sidebar) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    background: linear-gradient(to right,
        var(--color-nav-bg) calc(var(--ctdra-sidebar-width) - 1px),
        var(--color-secondary) calc(var(--ctdra-sidebar-width) - 1px) var(--ctdra-sidebar-width),
        transparent var(--ctdra-sidebar-width));
}

@media (max-width: 767.98px) {
    .full.height:has(> .ctdra-sidebar) {
        background: none;
    }
}

.full.height:has(> .ctdra-sidebar) > * {
    flex: 0 0 100%;
    min-width: 0;
}

.full.height > .ctdra-sidebar {
    flex: 0 0 var(--ctdra-sidebar-width);
    order: 1;
}

/* position: relative macht den Inhalt zum offsetParent. Giteas overflow-menu (Repo-Tabs) vergleicht
   offsetLeft des Menüs mit dem der Tabs und geht davon aus, dass das Menü fast am linken Rand
   seines offsetParent beginnt. Mit <body> als Bezug zählte die Breite der Seitenleiste mit, die
   Tabs liefen dann über den Rand hinaus. */
.full.height:has(> .ctdra-sidebar) > :is([role="main"], .page-content) {
    position: relative;
    flex: 1 1 0;
    order: 1;
}

.full.height:has(> .ctdra-sidebar) > :is([role="main"], .page-content) ~ * {
    order: 2;
}

/* Die Seitenleiste reicht von der Navbar bis zum fixierten Footer, der über die ganze Breite geht.
   Die Maße misst ctdra.js (initShell): --ctdra-sidebar-start (Abstand vom Seitenanfang),
   --ctdra-sidebar-top (Abstand vom Fensterrand, 0 sobald gescrollt), --ctdra-footer-overlay (wie viel
   des Footers gerade im Fenster zu sehen ist) und --ctdra-footer-static (Höhe des Footers, wenn er
   nicht fixiert ist wie in Giteas Standard-Themes, sonst 0).
   Die Werte nach dem Komma gelten, bis das Skript gelaufen ist. */
.ctdra-sidebar {
    min-height: calc(100dvh - var(--ctdra-sidebar-start, 49px) - var(--ctdra-footer-static, 0px));
    background: var(--color-nav-bg);
    border-right: 1px solid var(--color-secondary);
}

/* Feste Höhe, damit Hilfe und API (margin-top: auto) am unteren Rand stehen */
.ctdra-sidebar-inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: calc(100dvh - var(--ctdra-sidebar-top, 49px) - var(--ctdra-footer-overlay, 40px));
    overflow-y: auto;
    padding: 24px 16px 16px;
}

/* Nutzerkarte = Weg zum eigenen Profil. Rahmen, Hover und Pfeil zeigen, dass sie klickbar ist. */
.ctdra-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    color: var(--color-text);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ctdra-sidebar-user:hover {
    background: var(--color-hover);
    border-color: var(--color-primary);
    color: var(--color-text);
    text-decoration: none;
}

.ctdra-sidebar-user.active {
    background: var(--color-primary-alpha-10);
    border-color: var(--color-primary);
}

.ctdra-sidebar-user:focus-visible {
    outline: 2px solid var(--color-primary-alpha-50);
    outline-offset: 1px;
}

.ctdra-sidebar-user-arrow {
    margin-left: auto;
    color: var(--color-text-light-2);
    transition: color 0.15s ease, transform 0.15s ease;
}

.ctdra-sidebar-user:hover .ctdra-sidebar-user-arrow,
.ctdra-sidebar-user.active .ctdra-sidebar-user-arrow {
    color: var(--color-primary);
}

.ctdra-sidebar-user:hover .ctdra-sidebar-user-arrow {
    transform: translateX(2px);
}

.ctdra-sidebar-user .avatar {
    flex-shrink: 0;
}

.ctdra-sidebar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ctdra-sidebar-user-name {
    font-family: var(--fonts-heading, var(--fonts-proportional));
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.ctdra-sidebar-user-login {
    font: 400 12px/1.4 var(--fonts-monospace);
    color: var(--color-text-light-2);
}

.ctdra-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ctdra-sidebar-secondary {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-secondary);
}

.ctdra-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    color: var(--color-text-light);
    font: var(--ctdra-font-label);
    letter-spacing: 0.02em;
}

.ctdra-sidebar-item:hover {
    background: var(--color-hover);
    color: var(--color-text);
    text-decoration: none;
}

.ctdra-sidebar-item.active,
.ctdra-sidebar-item.active:hover {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.ctdra-sidebar-item.active .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.ctdra-sidebar-item:focus-visible {
    outline: 2px solid var(--color-primary-alpha-50);
    outline-offset: 1px;
}

/* Icon-Leiste zwischen 768 und 1023 px: nur Icons, Name als title */
@media (max-width: 1023.98px) {
    .ctdra-sidebar-inner {
        padding-left: 8px;
        padding-right: 8px;
        align-items: center;
    }

    .ctdra-sidebar-user {
        padding: 4px;
    }

    .ctdra-sidebar-user-text,
    .ctdra-sidebar-user-arrow,
    .ctdra-nav-label {
        display: none;
    }

    .ctdra-sidebar-nav {
        align-items: center;
    }

    .ctdra-sidebar-item {
        justify-content: center;
        width: 44px;
        padding: 10px 0;
    }

    .ctdra-sidebar-secondary {
        width: 100%;
    }
}

/* Mobil: Seitenleiste ausgeblendet, die Einträge stehen im Hamburger-Menü der Navbar */
@media (max-width: 767.98px) {
    .full.height > .ctdra-sidebar {
        display: none;
    }

    /* Ohne Seitenleiste würde der Inhalt mit Basis 0 noch in die Zeile der Navbar passen */
    .full.height:has(> .ctdra-sidebar) > :is([role="main"], .page-content) {
        flex-basis: 100%;
    }
}

/* Der API-Link steht für angemeldete Nutzer in der Seitenleiste, im Footer wäre er doppelt */
body:has(.ctdra-sidebar) .page-footer a[href$="/api/swagger"] {
    display: none;
}

/* ============================================================================================
   Navbar: Suchfeld und mobile Einträge
   ============================================================================================ */

#navbar .ctdra-navbar-search {
    position: relative;
    padding: 0 4px 0 8px;
}

/* Ab 1280 px steht das Suchfeld genau in der Mitte der Navbar. Darunter reicht der Platz neben
   den Links nicht, dort bleibt es in der Reihe. */
@media (min-width: 1280px) {
    #navbar {
        position: relative;
    }

    #navbar .ctdra-navbar-search {
        position: absolute;
        left: 50%;
        padding: 0;
        transform: translateX(-50%);
    }

    #navbar .ctdra-navbar-search .material-symbols-outlined {
        left: 10px;
    }

    #navbar .ctdra-navbar-search input {
        width: 280px;
    }
}

#navbar .ctdra-navbar-search .material-symbols-outlined {
    position: absolute;
    left: 18px;
    color: var(--color-text-light-2);
    pointer-events: none;
}

#navbar .ctdra-navbar-search input {
    width: 240px;
    height: 34px;
    padding: 0 12px 0 36px;
    background: var(--color-input-background);
    border: 1px solid var(--color-input-border);
    border-radius: var(--border-radius);
    color: var(--color-input-text);
    font: inherit;
}

#navbar .ctdra-navbar-search input::placeholder {
    color: var(--color-placeholder-text);
}

#navbar .ctdra-navbar-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
}

/* Unter 1024 px reicht der Platz neben den Links nicht (mit deutschen Beschriftungen lief das Feld
   unter die Glocke). Dort entfällt die Suche, "Erkunden" bietet sie ebenfalls. */
@media (max-width: 1023.98px) {
    #navbar .ctdra-navbar-search {
        display: none !important;
    }
}

.ctdra-mobile-nav {
    display: none;
}

@media (max-width: 767.98px) {
    #navbar.navbar-menu-open .ctdra-mobile-nav {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid var(--color-secondary);
    }

    /* Die Einträge stehen nicht direkt in .navbar-left, Giteas Regeln für .item greifen daher nicht */
    #navbar.navbar-menu-open .ctdra-mobile-nav > .item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 40px;
        padding: 3px 13px;
        border-radius: 4px;
        color: var(--color-nav-text);
    }

    #navbar.navbar-menu-open .ctdra-mobile-nav > .item:hover {
        background: var(--color-nav-hover-bg);
        text-decoration: none;
    }

    #navbar .ctdra-mobile-nav .ctdra-nav-label {
        display: inline;
    }
}

/* ============================================================================================
   Seitenkopf und Karten (Dashboard und Feed)
   ============================================================================================ */

.ctdra-page-header {
    margin: 32px 0 24px;
}

.ctdra-page-title {
    margin: 0 0 4px;
    font-family: var(--fonts-heading, var(--fonts-proportional));
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ctdra-page-subtitle {
    margin: 0;
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.5;
}

.ctdra-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-box-body);
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.ctdra-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--ctdra-card-padding-x);
    background: var(--color-box-header);
    border-bottom: 1px solid var(--color-secondary);
}

.ctdra-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--fonts-heading, var(--fonts-proportional));
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.ctdra-card-title .material-symbols-outlined {
    color: var(--color-primary);
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.ctdra-card-label {
    margin: 0;
    font: var(--ctdra-font-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.ctdra-card-action {
    flex-shrink: 0;
    font: var(--ctdra-font-label);
    color: var(--color-primary);
}

.ctdra-card-body {
    padding: 16px var(--ctdra-card-padding-x);
}

.ctdra-card-body-flush {
    padding: 0;
}

.ctdra-card-caption {
    margin: 0 0 8px;
    font: var(--ctdra-font-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-light-2);
}

.ctdra-empty {
    margin: 0;
    padding: 8px 0;
    color: var(--color-text-light-2);
}

.ctdra-card-body-flush > .ctdra-empty {
    padding: 16px var(--ctdra-card-padding-x);
}

.ctdra-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--border-radius);
    background: var(--color-label-bg);
    color: var(--color-label-text);
    font: 600 11px/1.4 var(--fonts-monospace);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ctdra-chip-green {
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-green) 35%, transparent);
    color: var(--color-green);
    text-transform: uppercase;
}

/* ============================================================================================
   Dashboard: 12-Spalten-Raster
   ============================================================================================ */

.ctdra-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ctdra-gap);
}

.ctdra-col-12 {
    grid-column: span 12;
}

.ctdra-col-8 {
    grid-column: span 8;
}

.ctdra-col-4 {
    grid-column: span 4;
}

@media (max-width: 1023.98px) {
    .ctdra-col-8,
    .ctdra-col-4 {
        grid-column: span 12;
    }
}

/* Kacheln, die erst nach dem Laden erscheinen (z. B. Offene Pull-Requests), sind bis dahin versteckt.
   display: flex der Karten würde das hidden-Attribut sonst überschreiben. */
.ctdra-card[hidden] {
    display: none;
}

/* Linke Spalte der Übersicht: PRs, Recent Repositories und weitere Kacheln stehen untereinander */
.ctdra-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ctdra-gap);
    min-width: 0;
}

/* My Issues ist ab 1024 px genau so hoch wie die linke Spalte. contain: size nimmt die Kachel aus der
   Höhenberechnung der Rasterzeile, sie wächst also nicht mit ihren Issues, sondern streckt sich auf die
   Höhe der Spalte. ctdra.js (fitIssues) zeigt dann so viele Issues, wie vollständig hineinpassen. */
@media (min-width: 1024px) {
    .ctdra-dashboard [data-ctdra-widget="issues"] {
        contain: size;
        min-height: 320px;
    }

    .ctdra-dashboard [data-ctdra-widget="issues"] .ctdra-card-body {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }
}

/* Heatmap: Giteas Trennlinie unter der Heatmap entfällt in der Karte */
.ctdra-heatmap-card .divider {
    display: none;
}

/* Gitea berechnet die Höhe der Heatmap aus der Breite ihres Containers (Container Query).
   Mobil bekommt der Container deshalb eine Mindestbreite, die Karte scrollt horizontal. */
.ctdra-heatmap-card .ctdra-card-body {
    overflow-x: auto;
}

@media (max-width: 767.98px) {
    .ctdra-heatmap-card .activity-heatmap-container {
        min-width: 600px;
    }
}

/* Recent Repositories */
.ctdra-repo-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 14px var(--ctdra-card-padding-x) 14px calc(var(--ctdra-card-padding-x) - 2px);
    border-left: 2px solid transparent;
    color: var(--color-text);
}

.ctdra-repo-row + .ctdra-repo-row {
    border-top: 1px solid var(--color-secondary);
}

.ctdra-repo-row:hover {
    background: var(--color-hover);
    border-left-color: var(--color-primary);
    color: var(--color-text);
    text-decoration: none;
}

.ctdra-repo-icon {
    color: var(--color-text-light-2);
}

/* Eigenes Bild eines Repos statt des Icons (Recent Repositories, Watched Repositories) */
.ctdra-repo-avatar,
.ctdra-link-avatar {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
}

.ctdra-repo-row:hover .ctdra-repo-icon {
    color: var(--color-primary);
}

.ctdra-repo-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ctdra-repo-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--fonts-monospace);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ctdra-repo-desc {
    overflow: hidden;
    color: var(--color-text-light);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctdra-repo-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 16px;
    font: 400 12px/1.4 var(--fonts-monospace);
    color: var(--color-text-light);
}

.ctdra-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ctdra-meta .material-symbols-outlined {
    font-size: 16px;
}

/* Status der Checks eines PRs: Icon in der Statusfarbe, Text in der Nebentextfarbe (Kontrast) */
.ctdra-check .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.ctdra-check-success .material-symbols-outlined {
    color: var(--color-green);
}

.ctdra-check-failure .material-symbols-outlined,
.ctdra-check-error .material-symbols-outlined {
    color: var(--color-red);
}

.ctdra-check-pending .material-symbols-outlined,
.ctdra-check-warning .material-symbols-outlined {
    color: var(--color-yellow);
}

.ctdra-check-skipped .material-symbols-outlined {
    color: var(--color-text-light-2);
}

/* Laufende Workflow-Ausführungen drehen ihr Icon (progress_activity), wartende sind gelb wie Ausstehend */
.ctdra-check-running .material-symbols-outlined {
    color: var(--color-yellow);
}

.ctdra-run-icon {
    display: block;
}

.ctdra-spin {
    animation: ctdra-spin 1.2s linear infinite;
}

@keyframes ctdra-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ctdra-spin {
        animation: none;
    }
}

/* Hinweis im Kopf einer Kachel, dass im Hintergrund aktualisiert wird */
.ctdra-card-status {
    display: inline-flex;
    align-items: center;
}

.ctdra-card-status[hidden] {
    display: none;
}

.ctdra-card-title .ctdra-card-status .material-symbols-outlined {
    color: var(--color-text-light-2);
    font-size: 16px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.ctdra-card-footer {
    display: flex;
    justify-content: center;
    padding: 12px var(--ctdra-card-padding-x);
    border-top: 1px solid var(--color-secondary);
}

.ctdra-card-footer[hidden] {
    display: none;
}

/* Ansicht "Alle Ausführungen": Statusfilter als Segmente, daneben die Auswahl des Repos */
.ctdra-run-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--ctdra-gap);
}

.ctdra-segmented {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    background: var(--color-box-body);
}

.ctdra-segmented > button {
    flex-shrink: 0;
    min-height: 32px;
    padding: 6px 12px;
    border: 0;
    background: none;
    color: var(--color-text-light);
    font: var(--ctdra-font-label);
    white-space: nowrap;
    cursor: pointer;
}

.ctdra-segmented > button + button {
    border-left: 1px solid var(--color-secondary);
}

.ctdra-segmented > button:hover {
    background: var(--color-hover);
    color: var(--color-text);
}

.ctdra-segmented > button.active {
    background: var(--color-active);
    color: var(--color-text);
}

.ctdra-segmented > button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.ctdra-select {
    min-height: 34px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--border-radius);
    background: var(--color-input-background);
    color: var(--color-input-text);
    font: inherit;
}

.ctdra-lang-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

@media (max-width: 767.98px) {
    .ctdra-repo-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ctdra-repo-meta {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* My Issues */
[data-ctdra-widget="issues"] .ctdra-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

[data-ctdra-widget="issues"] .ctdra-card-caption {
    margin: 0 4px;
}

.ctdra-issue-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    color: var(--color-text);
}

.ctdra-issue-card:hover {
    border-color: var(--color-primary);
    background: var(--color-hover);
    color: var(--color-text);
    text-decoration: none;
}

.ctdra-issue-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ctdra-issue-title {
    font-weight: 700;
    line-height: 1.4;
}

.ctdra-issue-meta {
    font: 400 12px/1.4 var(--fonts-monospace);
    color: var(--color-text-light);
}

/* Platz am Seitenende für Footer und Schaltfläche. Mit Seitenleiste steht er unten im Inhaltsbereich
   statt unter .full.height: So reicht die Spalte der Seitenleiste bis zum Seitenende, und die klebende
   Seitenleiste wird am Ende nicht nach oben geschoben. Die Regeln sind spezifischer als die in den
   Themes und gewinnen deshalb trotz !important dort. */
.full.height:has(> .ctdra-sidebar) {
    padding-bottom: 0 !important;
}

.full.height:has(> .ctdra-sidebar) > :is([role="main"], .page-content) {
    padding-bottom: var(--page-space-bottom);
}

/* Mit Schaltfläche: Platz für einen fixierten Footer, die Schaltfläche (56 px) und Abstände */
body:has(> .ctdra-fab) > .full.height:has(> .ctdra-sidebar) > :is([role="main"], .page-content) {
    padding-bottom: max(var(--page-space-bottom), calc(var(--ctdra-footer-fixed, 40px) + 88px));
}

body:has(> .ctdra-fab) > .full.height:not(:has(> .ctdra-sidebar)) {
    padding-bottom: max(var(--page-space-bottom), calc(var(--ctdra-footer-fixed, 40px) + 88px)) !important;
}

/* Schaltfläche "New Repository" unten rechts auf allen Seiten, 16 px über dem sichtbaren Footer */

.ctdra-fab {
    position: fixed;
    right: 32px;
    bottom: calc(var(--ctdra-footer-overlay, 40px) + 16px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.ctdra-fab:hover,
.ctdra-fab:focus-visible {
    background: var(--color-primary-hover);
    color: var(--color-primary-contrast);
    box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
    text-decoration: none;
}

.ctdra-fab .material-symbols-outlined {
    font-size: 28px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.ctdra-fab-label {
    position: absolute;
    right: calc(100% + 12px);
    padding: 6px 12px;
    border: 1px solid var(--color-secondary-dark-3);
    border-radius: var(--border-radius);
    background: var(--color-menu);
    color: var(--color-text);
    font: var(--ctdra-font-label);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.ctdra-fab:hover .ctdra-fab-label,
.ctdra-fab:focus-visible .ctdra-fab-label {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .ctdra-fab {
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .ctdra-fab-label {
        display: none;
    }
}

/* ============================================================================================
   Aktivitäts-Feed: Zeitleiste und Seitenspalte
   ============================================================================================ */

.ctdra-feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: var(--ctdra-gap);
}

.ctdra-feed-aside {
    display: flex;
    flex-direction: column;
    gap: var(--ctdra-gap);
}

/* Unter 1280 px stehen die Kacheln der Seitenspalte nebeneinander über dem Feed */
@media (max-width: 1279.98px) {
    .ctdra-feed-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ctdra-feed-aside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        order: -1;
    }
}

/* Mobil: Feed zuerst, Kacheln darunter */
@media (max-width: 767.98px) {
    .ctdra-feed-aside {
        grid-template-columns: minmax(0, 1fr);
        order: 1;
    }
}

.ctdra-stat-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 16px var(--ctdra-card-padding-x);
    list-style: none;
}

.ctdra-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ctdra-stat-name {
    flex: 1;
    color: var(--color-text);
}

.ctdra-stat-value {
    font: 600 14px/1 var(--fonts-monospace);
}

.ctdra-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.ctdra-dot-primary {
    background: var(--color-primary);
}

.ctdra-dot-green {
    background: var(--color-green);
}

.ctdra-dot-violet {
    background: var(--color-purple);
}

.ctdra-dot-red {
    background: var(--color-red);
}

.ctdra-link-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctdra-link-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-text);
}

.ctdra-link-more a {
    padding-left: 30px;
    color: var(--color-primary);
    font: var(--ctdra-font-label);
}

.ctdra-link-list a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.ctdra-link-list .material-symbols-outlined {
    color: var(--color-primary);
}

/* Zeitleiste: Giteas Feed (#activity-feed) mit Avatar links, Linie und Ereignis als Karte */
.ctdra-dashboard #activity-feed > .item {
    position: relative;
    gap: 16px;
    padding: 0 0 20px;
    border-top: none;
}

.ctdra-dashboard #activity-feed > .item::before {
    content: "";
    position: absolute;
    top: 48px;
    bottom: 4px;
    left: 20px;
    width: 1px;
    background: var(--color-secondary);
}

.ctdra-dashboard #activity-feed > .item:has(+ :not(.item))::before,
.ctdra-dashboard #activity-feed > .item:last-child::before {
    display: none;
}

.ctdra-dashboard #activity-feed > .item > .item-leading img.avatar {
    width: 40px;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--color-primary);
    background: var(--color-box-body);
}

.ctdra-dashboard #activity-feed > .item > .item-main {
    padding: 14px 16px;
    background: var(--color-box-body);
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease;
}

.ctdra-dashboard #activity-feed > .item:hover > .item-main {
    border-color: var(--color-primary);
}

.ctdra-dashboard #activity-feed > .item > .item-trailing {
    display: none;
}

@media (max-width: 767.98px) {
    .ctdra-dashboard #activity-feed > .item {
        gap: 10px;
    }

    .ctdra-dashboard #activity-feed > .item::before {
        top: 40px;
        left: 16px;
    }

    .ctdra-dashboard #activity-feed > .item > .item-leading img.avatar {
        width: 32px;
        height: 32px;
        padding: 2px;
    }

    .ctdra-dashboard #activity-feed > .item > .item-main {
        padding: 12px;
    }
}

/* Giteas Repo-Liste (Vue-Komponente #dashboard-repo-list, Ansicht /?view=repos) im Stil der
   Dashboard-Kacheln: Kopfzeile wie Recent Repositories, Suche und Filter linksbündig, Zeilen wie
   die Repo-Zeilen der Übersicht mit Hover-Balken. Giteas Umschalter Repository/Organization ist
   ausgeblendet, den Reiter wählt die Seitenleiste (repo-search-tab). Die Hülle bleibt ohne Rahmen,
   die Karte bildet die Komponente selbst (.ui.tab). */
.ctdra-card.ctdra-repolist-card {
    border: none;
    background: none;
    overflow: visible;
}

.ctdra-repolist-card #dashboard-repo-list {
    width: 100%;
    max-width: none;
    margin: 0;
}

.ctdra-repolist-card #dashboard-repo-list .ui.two.item.menu {
    display: none;
}

.ctdra-repolist-card #dashboard-repo-list .ui.tab {
    overflow: hidden;
    background: var(--color-box-body);
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
}

/* Kopfzeile: Titel in der Überschriftenschrift, Zähler als Chip, "+" als Aktion in der Primärfarbe */
.ctdra-repolist-card #dashboard-repo-list .ui.top.attached.header {
    margin: 0;
    padding: 14px var(--ctdra-card-padding-x);
    background: var(--color-box-header);
    border: none;
    border-bottom: 1px solid var(--color-secondary);
    border-radius: 0;
    font-family: var(--fonts-heading, var(--fonts-proportional));
    font-size: 18px;
    font-weight: 700;
}

/* Icon vor dem Titel wie bei den Dashboard-Kacheln, als Ligatur der Material Symbols */
.ctdra-repolist-card #dashboard-repo-list .ui.top.attached.header > div:first-child::before {
    margin-right: 8px;
    color: var(--color-primary);
    font: 400 20px/1 "Material Symbols Outlined";
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.ctdra-repolist-card #dashboard-repo-list .dashboard-repos .ui.top.attached.header > div:first-child::before {
    content: "folder";
}

.ctdra-repolist-card #dashboard-repo-list .dashboard-orgs .ui.top.attached.header > div:first-child::before {
    content: "corporate_fare";
}

.ctdra-repolist-card #dashboard-repo-list .ui.top.attached.header .ui.label {
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: var(--border-radius);
    font: 600 12px/1.4 var(--fonts-monospace);
}

.ctdra-repolist-card #dashboard-repo-list .ui.top.attached.header > a {
    color: var(--color-primary);
}

/* Suche und Filter */
.ctdra-repolist-card #dashboard-repo-list .repos-search {
    margin: 0;
    padding: 16px var(--ctdra-card-padding-x) 0;
    background: transparent;
    border: none;
}

.ctdra-repolist-card #dashboard-repo-list .repos-search .ui.input > input {
    height: 38px;
    background: var(--color-input-background);
    border-color: var(--color-input-border);
}

.ctdra-repolist-card #dashboard-repo-list .repos-filter {
    margin: 8px 0 0;
    border-bottom: 1px solid var(--color-secondary);
}

.ctdra-repolist-card #dashboard-repo-list .repos-filter .overflow-menu-items {
    justify-content: flex-start !important;
}

/* Liste: Zeilen wie die Repo-Zeilen der Übersicht, die ganze Zeile ist klickbar */
.ctdra-repolist-card #dashboard-repo-list .ui.attached.table.segment {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.ctdra-repolist-card #dashboard-repo-list .repo-owner-name-list {
    margin: 0;
    padding: 0;
}

.ctdra-repolist-card #dashboard-repo-list .repo-owner-name-list > li {
    position: relative;
    gap: 12px;
    min-height: 52px;
    padding: 14px var(--ctdra-card-padding-x) 14px calc(var(--ctdra-card-padding-x) - 2px) !important;
    border-left: 2px solid transparent;
}

.ctdra-repolist-card #dashboard-repo-list .repo-owner-name-list > li + li {
    border-top: 1px solid var(--color-secondary);
}

.ctdra-repolist-card #dashboard-repo-list .repo-owner-name-list > li:hover {
    background: var(--color-hover);
    border-left-color: var(--color-primary);
}

.ctdra-repolist-card #dashboard-repo-list .repo-list-link {
    gap: 12px;
    color: var(--color-text);
    font-family: var(--fonts-monospace);
    font-weight: 600;
}

.ctdra-repolist-card #dashboard-repo-list .repo-list-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ctdra-repolist-card #dashboard-repo-list .repo-list-link svg {
    flex-shrink: 0;
    color: var(--color-text-light-2);
}

/* Eigenes Bild eines Repos oder einer Organisation statt des Octicons. ctdra.js setzt dafür
   data-ctdra-avatar und --ctdra-avatar am Link, die Elemente selbst verwaltet Giteas Vue-Code. */
.ctdra-repolist-card #dashboard-repo-list .repo-list-link[data-ctdra-avatar] > svg:first-child {
    display: none;
}

/* 20 px Bild an der Stelle des Octicons, das 18 px Breite belegt: der negative Rand links und oben
   und unten hält Namen und Zeilenhöhe gleich */
.ctdra-repolist-card #dashboard-repo-list .repo-list-link[data-ctdra-avatar]::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: -2px 0 -2px -2px;
    border-radius: 4px;
    background: var(--ctdra-avatar) center / cover no-repeat;
}

.ctdra-repolist-card #dashboard-repo-list .repo-owner-name-list > li:hover .repo-list-link,
.ctdra-repolist-card #dashboard-repo-list .repo-owner-name-list > li:hover .repo-list-link svg {
    color: var(--color-primary);
    text-decoration: none;
}

/* Zähler und Labels rechts in der Zeile (z. B. Anzahl Repos einer Organisation) */
.ctdra-repolist-card #dashboard-repo-list .repo-owner-name-list > li > :not(.repo-list-link) {
    position: relative;
    z-index: 1;
    margin-left: auto;
    color: var(--color-text-light);
    font: 400 12px/1.4 var(--fonts-monospace);
}

/* Seitennavigation unter der Liste */
.ctdra-repolist-card #dashboard-repo-list .ui.tab > .ui.attached.segment:last-child:not(.table) {
    padding: 12px var(--ctdra-card-padding-x);
    background: var(--color-box-header);
    border: none;
    border-top: 1px solid var(--color-secondary);
}

/* ============================================================================================
   Benutzerprofil und Einstellungen: Avatar bzw. Navigation rechts neben dem Inhalt (ab Tablet).
   Gilt für Benutzer-, Repo-, Org- und Admin-Einstellungen. Andere Seiten mit .flex-container-nav
   (Issues, Meilensteine, Actions) bleiben unverändert. Mobil stapelt Gitea beides über dem Inhalt,
   dort bleibt es so.
   ============================================================================================ */

@media (min-width: 768px) {
    .page-content.user.profile .ui.stackable.grid > .four.wide.column,
    .page-content:is(.user.settings, .repository.settings, .organization.settings, .admin) .flex-container > .flex-container-nav {
        order: 2;
    }
}

/* ============================================================================================
   Repo-Übersicht
   ============================================================================================ */

.repository .secondary-nav {
    background: var(--color-box-body);
}

.repo-header .tw-text-18 {
    font-family: var(--fonts-heading, var(--fonts-proportional));
    font-size: 22px;
}

.repo-header .tw-text-18 a.muted:last-of-type {
    font-weight: 700;
}

/* Tabs mit Unterstrich in der Primärfarbe. Überzählige Tabs verschiebt Giteas overflow-menu
   in ein Ausklappmenü, deshalb hier keine zusätzlichen Abstände. */
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Reiter vom Typ "tabular" (PR-Reiter Diskussion/Commits/Dateien, Markdown-Editor) im gleichen Stil:
   ohne Kasten, mit Unterstrich in der Primärfarbe auf der Trennlinie. Gitea zeichnet den aktiven
   Reiter sonst als Kasten in --color-secondary. Die waagerechte Trennlinie darunter hat dieselbe Farbe
   und ist auf dem dunklen Hintergrund kaum zu sehen (etwa 1,4:1), der Kasten wirkte dann, als ende er
   im Nichts. border-radius braucht !important, weil Gitea ihn so setzt.
   Gitea schiebt den aktiven Reiter mit margin-bottom: -1px über die Linie, die PR-Reiter schneiden
   aber unten ab (overflow-y: hidden). Ohne den Versatz bleibt der Unterstrich ganz sichtbar. */
.ui.tabular.menu .active.item,
.ui.tabular.menu .active.item:hover,
.ui.segment .ui.tabular.menu .active.item,
.ui.segment .ui.tabular.menu .active.item:hover {
    margin-bottom: 0;
    background: transparent;
    border-color: transparent;
    border-radius: 0 !important;
    box-shadow: inset 0 -2px 0 var(--color-primary);
    color: var(--color-primary);
}

/* Dateiliste und README als Karten */
#repo-files-table {
    overflow: hidden;
}

#repo-files-table .repo-file-line:first-child {
    background: var(--color-box-header);
}

#repo-files-table .repo-file-item:hover > .repo-file-cell {
    background: var(--color-hover);
}

#readme .file-header,
.repository .file-header {
    background: var(--color-box-header);
}

/* Seitenleiste der Repo-Startseite: Überschriften im Label-Stil */
.repo-home-sidebar-header {
    font: var(--ctdra-font-label);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.language-stats {
    height: 8px;
    border-radius: 4px;
}

/* ============================================================================================
   Komponenten für alle übrigen Seiten
   ============================================================================================ */

/* Avatare in Giteas Avatar-Stapel (letzter Commit, Commit-Listen) hinterlegt Gitea mit der Seitenfarbe,
   damit sich überlappende Bilder trennen. Die Stapel stehen hier aber auf Karten und Kopfzeilen,
   transparente Bilder bekamen so ein dunkles Quadrat. Undurchsichtige Bilder verdecken sich weiterhin. */
.avatar-stack .avatar,
.avatar-stack:hover .avatar {
    background-color: transparent;
    border-color: transparent;
}

.ui.attached.header:not(.segment),
.ui.top.attached.header {
    background: var(--color-box-header);
}

h4.ui.top.attached.header,
.ui.top.attached.header > .ui.header {
    font-family: var(--fonts-heading, var(--fonts-proportional));
}

/* Breite Inhalte scrollen in ihrer Karte statt die Seite zu verbreitern */
@media (max-width: 767.98px) {
    .ui.attached.segment:has(> .ui.table),
    .ui.segment:has(> .ui.table) {
        overflow-x: auto;
    }
}