/* /Components/Common/LicenseBanner.razor.rz.scp.css */
/* Lizenzhinweis über dem Inhalt. Zwei Dringlichkeitsstufen: Bernstein für "es läuft
   etwas ab", Rot für "es ist etwas gesperrt". Ohne diese Unterscheidung stumpft der
   Hinweis in den vier Wochen vor Ablauf ab, und die tatsächliche Sperre geht unter. */

.license-banner[b-p4nhw2txjb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    flex-shrink: 0;
    z-index: 100;
}

.license-banner--warn[b-p4nhw2txjb] {
    background-color: #b45309;
    color: #fff;
}

.license-banner--danger[b-p4nhw2txjb] {
    background-color: #b91c1c;
    color: #fff;
}

.license-banner-link[b-p4nhw2txjb] {
    color: #fde68a;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

.license-banner-link:hover[b-p4nhw2txjb] {
    color: #fef3c7;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout – scoped Styles

   Diese Datei ist bewusst fast leer. Was hier vorher stand und warum es weg ist:

   1. .sidebar, .nav-item, .nav-item.active, .content, .body-container
      Vollständige Zweitdefinitionen von Regeln, die app.css ebenfalls hat.
      Kein harmloses Doppel: Blazor hängt an scoped Selektoren ein Attribut an,
      .nav-item.active[b-x] schlägt damit .sidebar .nav-item.active aus app.css.
      Im MainLayout griff deshalb die hiesige Variante (eckige 48px-Zeilen,
      3px-Linkslinie in Indigo #6366f1), im SettingsLayout mangels eigener
      scoped-Datei die Marken-Variante aus app.css - die beiden Menüs der
      Anwendung sahen unterschiedlich aus. Zusätzlich stritten sich zwei
      Sidebar-Breiten (230px hier gegen var(--sidebar-expanded) dort) mit dem
      Einklapp-Zustand. Die Sidebar liegt jetzt ausschließlich in app.css.

   2. .header
      Altlast: das Markup verwendet .app-header, diesen Block gab es nicht mehr.

   3. tr:hover
      Scoped CSS trifft ausschließlich Elemente aus MainLayout.razor - dort gibt
      es keine Tabelle. Die Regel hat nie etwas gefärbt. Zeilen-Hover regeln
      list-page.css und workspace.css.

   4. .license-banner, .license-banner-link
      Scoped CSS erreicht keine Kindkomponenten. Der Hinweis wird von
      <LicenseBanner /> gerendert und von Common/LicenseBanner.razor.css
      gestaltet - die Regeln hier waren wirkungslose Kopien.
      (Deren Farben sind noch hartkodiert; eigenes Thema.)
   ============================================================ */

/* Grundfläche hinter Kopfzeile, Navigation und Inhalt. Bleibt hier, weil
   SettingsLayout und LoginLayout eigene Flächen mitbringen. */
.app-container[b-kvvx749uwt] {
    background: var(--tint);
}
/* /Components/Pages/Dialogs/RequirementOverlayDialog.razor.rz.scp.css */
/* Ehemals wwwroot/css/requirementDetail.css - als globales <link> eingebunden.
   Das führte dazu, dass generische Klassen wie .card und .alert JEDE Seite
   beeinflussten, die diese Komponente einbindet (z.B. ProjectDetail.razor:
   der Projekt-Header dort ist auch eine .card und bekam dadurch ungewollt
   20px Padding + abweichenden Schatten/Radius). Als Blazor-CSS-Isolation-Datei
   (.razor.css) gilt das jetzt nur noch für Elemente, die von
   RequirementOverlayDialog selbst gerendert werden. */

/* .page-title ist hier entfallen. Die Klasse kommt im Markup dieses Dialogs
   nicht vor (Überbleibsel aus der Zeit als globales requirementDetail.css) und
   heißt inzwischen genauso wie der app-weite Seitentitel aus list-page.css.
   Da scoped CSS die höhere Spezifität hat, hätte diese tote Regel den globalen
   Titel innerhalb des Dialogs still überschrieben, sobald ihn dort jemand
   verwendet - font-weight wäre von 700 auf 600 gefallen. */

.card[b-xw3l9i5rmg] {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(20, 33, 47, 0.1);
    padding: 20px;
}

.form-section[b-xw3l9i5rmg] {
    margin-bottom: 30px;
}

    /* Abschnittsüberschriften im Overlay.
       Ohne font-size greift Bootstraps h4 mit 1.5rem - das ist genauso groß wie
       der app-weite .page-title und damit GRÖSSER als der Dialogtitel darüber
       (ein h5 mit 1.25rem). Die Hierarchie stand also auf dem Kopf.
       1rem setzt die Abschnitte klar unter den Dialogtitel und deutlich über den
       Fließtext. Die Regel trifft alle Abschnitte auf einmal, im Markup war
       nichts zu ändern. */
    .form-section h4[b-xw3l9i5rmg] {
        margin-bottom: 12px;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--ink);
    }

.form-grid[b-xw3l9i5rmg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.description-box[b-xw3l9i5rmg] {
    min-height: 175px !important;
}


.assignment-list[b-xw3l9i5rmg] {
    list-style: none;
    padding-left: 0;
}

    .assignment-list li[b-xw3l9i5rmg] {
        padding: 6px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    }

.suggestion-box[b-xw3l9i5rmg] {
    background: var(--tint);
    border-color: var(--line);
    padding: 12px;
    border-radius: var(--radius);
    font-style: italic;
    color: var(--ink-soft);
}

.button-row[b-xw3l9i5rmg] {
    display: flex;
    gap: 12px;
}


.form-grid-large-title[b-xw3l9i5rmg] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    align-items: end;
}


.title-area input[b-xw3l9i5rmg] {
    font-size: 1.1rem;
    font-weight: 500;
}


.small-input[b-xw3l9i5rmg] {
    padding: 6px 8px;
    font-size: 0.9rem;
}

.btn-sm i[b-xw3l9i5rmg] {
    font-size: 1.1rem;
}

.alert[b-xw3l9i5rmg] {
    transition: opacity 0.5s ease-in-out;
}


.assignment-list[b-xw3l9i5rmg] {
    list-style: none;
    padding-left: 0;
}

.assignment-item[b-xw3l9i5rmg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.remove-btn[b-xw3l9i5rmg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: 7px;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color .15s ease, background-color .15s ease;
}

/* Rot erst beim Überfahren: In einer Liste zugewiesener Personen sind mehrere
   dieser Knöpfe untereinander - dauerhaft rot lasen sie sich wie eine Warnung. */
.remove-btn:hover[b-xw3l9i5rmg] {
    color: var(--red);
    background: var(--red-soft);
}

/* Audit-Log (Änderungshistorie): Badges für alte/neue Werte dürfen bei
   langen Texten (z.B. Titeländerungen) nicht die Zeile aufblähen, sondern
   müssen umbrechen. Sonst wird der ganze Overlay-Content horizontal
   scrollbar, weil .req-overlay-content overflow-y:auto erzwingt, was
   overflow-x implizit ebenfalls auf auto setzt. */
.audit-entry-body[b-xw3l9i5rmg] {
    min-width: 0;
}

.audit-value-badge[b-xw3l9i5rmg] {
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    text-align: left;
}
/* /Components/Pages/ProjectFolderBrowser.razor.rz.scp.css */
.fb-row[b-7khr2275nc] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 110px 170px 130px 48px;
    align-items: center;
    column-gap: .75rem;

    /* Ohne das markiert der Browser beim Ziehen den Text unter dem Zeiger:
       SortableJS läuft hier mit forceFallback, simuliert den Drag also über
       Maus-Ereignisse - die native Textauswahl startet parallel dazu mit. Weil
       die Zeile ein Raster aus mehreren <span> ist, entstand dabei in jeder
       Spalte ein eigener blauer Auswahlblock.

       Bewusst dauerhaft und nicht nur während des Ziehens: Die Auswahl beginnt
       schon beim Mausklick, bevor SortableJS überhaupt eine Klasse setzt, an der
       sich das per CSS festmachen ließe. Zeilen sind hier ohnehin Klickziele zum
       Öffnen, kein Lesetext - Dateinamen lassen sich über "Umbenennen" kopieren. */
    user-select: none;
    -webkit-user-select: none;
}

.fb-header[b-7khr2275nc] {
    background-color: var(--paper);
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--line) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

.fb-drag-handle[b-7khr2275nc] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--ink-soft) 50%, transparent);
    cursor: grab;
    transition: color .12s ease;
}

.fb-drag-handle:hover[b-7khr2275nc] {
    color: var(--ink-soft);
}

.fb-drag-handle:active[b-7khr2275nc] {
    cursor: grabbing;
}

.fb-name-link[b-7khr2275nc] {
    cursor: pointer;
    padding: 3px 7px;
    margin: -3px -7px;
    border-radius: 7px;
    color: var(--ink);
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.fb-name-link:hover[b-7khr2275nc] {
    color: var(--clr-primary);
    background-color: var(--accent-soft);
}

/* Zeilentrenner und Hover wie in der Datenkarte. Die Bootstrap-Utility
   .border-bottom im Markup zeichnet --bs-border-color, das theme.css bereits auf
   --line gesetzt hat; hier wird nur noch abgeschwächt. */
.folder-row[b-7khr2275nc],
.document-row[b-7khr2275nc] {
    border-bottom-color: color-mix(in srgb, var(--line) 55%, transparent) !important;
    transition: background-color .12s ease;
}

.folder-row:hover[b-7khr2275nc],
.document-row:hover[b-7khr2275nc] {
    background-color: color-mix(in srgb, var(--clr-primary) 4%, transparent);
}

/* Zeilenaktionen erst beim Überfahren zeigen, wie in der Datenkarte.
   .row-actions selbst wird in list-page.css auf opacity:0 gesetzt; die dortige
   Sichtbar-Regel greift nur für .data-table-Zeilen, deshalb hier die Entsprechung
   für die Rasterzeilen des Ordner-Browsers. Tastaturfokus und geöffnetes Menü
   sind mit abgedeckt, Touch-Geräte über die Medienabfrage darunter. */
.folder-row:hover .row-actions[b-7khr2275nc],
.document-row:hover .row-actions[b-7khr2275nc],
.folder-row:focus-within .row-actions[b-7khr2275nc],
.document-row:focus-within .row-actions[b-7khr2275nc] {
    opacity: 1;
}

@media (hover: none) {
    .folder-row .row-actions[b-7khr2275nc],
    .document-row .row-actions[b-7khr2275nc] {
        opacity: 1;
    }
}

/* ── Drag & Drop ──────────────────────────────────────────────────────────

   REIHENFOLGE BEACHTEN: Die .dnd-drag-over-Regeln müssen NACH den :hover-Regeln
   oben stehen.

   Blazor hängt an scoped Selektoren ein Attribut an. Damit hat
   .folder-row:hover[b-x] die Spezifität (0,3,0) - genauso viel wie
   .folder-row.dnd-drag-over[b-x]. Beim Ziehen steht der Cursor zwangsläufig über
   dem Ablageziel, beide Regeln greifen also gleichzeitig, und bei Gleichstand
   entscheidet die Quellreihenfolge. Stünde .dnd-drag-over vorher, übermalte der
   schwache Hover-Ton die Ziel-Hervorhebung und die Rückmeldung beim Ziehen wäre
   praktisch unsichtbar.

   Der einfache Selektor .dnd-drag-over bleibt zusätzlich stehen: Er trifft den
   Breadcrumb-Eintrag, der weder .folder-row noch .document-row ist. */

.dnd-drag-over[b-7khr2275nc],
.folder-row.dnd-drag-over[b-7khr2275nc],
.document-row.dnd-drag-over[b-7khr2275nc] {
    background-color: color-mix(in srgb, var(--clr-primary) 12%, transparent);
    outline: 2px dashed var(--clr-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

.breadcrumb-item.dnd-drag-over[b-7khr2275nc] {
    background-color: color-mix(in srgb, var(--clr-primary) 14%, transparent);
    outline: 2px dashed var(--clr-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Der Name hat eine eigene Hover-Fläche (.fb-name-link). Beim Ziehen über die
   Zeile zeichnete die sich zusätzlich in die Ziel-Hervorhebung hinein, wodurch
   das Ablageziel als zwei ineinanderliegende Kästen erschien statt als ein Block. */
.dnd-drag-over .fb-name-link[b-7khr2275nc],
.dnd-drag-over .fb-name-link:hover[b-7khr2275nc] {
    background-color: transparent;
    color: inherit;
}

/* Die gezogene Zeile selbst zurücknehmen, solange der Klon am Cursor hängt.
   Die Klasse kommt von SortableJS (ghostClass, Standardwert "sortable-ghost").

   Hier stand zuvor .dnd-dragging - diese Klasse setzt aber weder folderDnd.js
   noch SortableJS, die Regel war also seit jeher wirkungslos und die Quellzeile
   blieb beim Ziehen unverändert stehen. */
.folder-row.sortable-ghost[b-7khr2275nc],
.document-row.sortable-ghost[b-7khr2275nc] {
    opacity: .35;
}

/* Greifpunkt hervorheben, sobald die Zeile aufgenommen wurde. */
.folder-row.sortable-chosen .fb-drag-handle[b-7khr2275nc],
.document-row.sortable-chosen .fb-drag-handle[b-7khr2275nc] {
    color: var(--clr-primary);
}

/* Breadcrumb: die Grundgestaltung liefert .crumb aus list-page.css, hier bleibt
   nur, was der Ordner-Browser zusätzlich braucht (Ablageziel beim Ziehen). */
.breadcrumb-clickable[b-7khr2275nc] {
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.breadcrumb-clickable.active[b-7khr2275nc] {
    cursor: default;
}

.breadcrumb-clickable.active:hover[b-7khr2275nc] {
    background-color: transparent;
}


/* ── Ordnerbaum im Verschieben-Dialog ───────────────────────────────────── */

.move-tree-row[b-7khr2275nc] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 16px;
    border: none;
    background: none;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.move-tree-row:hover[b-7khr2275nc] {
    background-color: var(--tint);
}

.move-tree-row.selected[b-7khr2275nc] {
    background-color: var(--accent-soft);
    font-weight: 600;
    color: var(--clr-primary);
}

.move-tree-row:last-child[b-7khr2275nc] {
    border-bottom: none;
}


/* ── Datei-Ablagebereich für leeren Ordner / neues Projekt (fileDropZone.js) ── */

.fb-dropzone[b-7khr2275nc] {
    margin: 20px;
    border: 2px dashed var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--tint) 50%, var(--paper));
    transition: background-color .15s ease, border-color .15s ease;
}

.fb-dropzone__label[b-7khr2275nc] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 48px 16px;
    text-align: center;
    color: var(--ink-soft);
}

.fb-dropzone__label > .bi[b-7khr2275nc] {
    color: color-mix(in srgb, var(--clr-primary) 55%, var(--ink-soft));
}

.fb-dropzone__title[b-7khr2275nc] {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.fb-dropzone__hint[b-7khr2275nc] {
    color: var(--ink-soft);
}

/* Aktiv, während eine Datei über der Zone schwebt (Klasse per JS gesetzt) */
.fb-dropzone--over[b-7khr2275nc] {
    border-color: var(--clr-primary);
    background-color: color-mix(in srgb, var(--clr-primary) 6%, transparent);
}

.fb-dropzone--over .fb-dropzone__label[b-7khr2275nc],
.fb-dropzone--over .fb-dropzone__title[b-7khr2275nc] {
    color: var(--clr-primary);
}

/* Während Upload/Analyse läuft: keine weitere Ablage annehmen */
.fb-dropzone--busy[b-7khr2275nc] {
    cursor: default;
    opacity: .75;
}


@media (prefers-reduced-motion: reduce) {
    .fb-name-link[b-7khr2275nc],
    .fb-drag-handle[b-7khr2275nc],
    .folder-row[b-7khr2275nc],
    .document-row[b-7khr2275nc],
    .move-tree-row[b-7khr2275nc],
    .fb-dropzone[b-7khr2275nc],
    .breadcrumb-clickable[b-7khr2275nc] {
        transition: none;
    }
}