:root {
    --color-bg: #f4f5f7;
    --color-surface: #ffffff;
    --color-border: #dcdfe4;
    --color-text: #1f2430;
    --color-text-muted: #626a7a;
    --color-primary: #2c5f7c;
    --color-primary-dark: #1f4459;
    --color-danger: #b3261e;
    --color-success: #2e7d47;
    --radius: 6px;
}

* { box-sizing: border-box; }

/* Reserviert immer Platz fuer die vertikale Scrollbar, auch wenn die aktuelle Seite gar nicht
   scrollen muss. Ohne das aendert sich die verfuegbare Breite je nach Seiteninhalt (kurze Seite
   ohne Scrollbar vs. lange Seite mit) - und genau das lies die flex-wrap-Hauptnavigation
   sichtbar "springen" (z.B. "ChordPro-Aenderungen" mal in Zeile 1, mal in Zeile 2, je nachdem
   ob die gerade angezeigte Seite eine Scrollbar brauchte oder nicht - reproduzierbar zwischen
   Dashboard/Bands-Liste/Band-Bearbeiten-Formular, die alle unterschiedlich hoch sind). */
html {
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--color-primary); }

header.topnav {
    background: var(--color-primary-dark);
    color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    gap: 1rem;
}

header.topnav .brand {
    font-weight: 700;
    margin-right: 1rem;
}

header.topnav nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1;
}

header.topnav nav a {
    color: #e8eef2;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.92rem;
}

header.topnav nav a:hover,
header.topnav nav a.active {
    background: rgba(255, 255, 255, 0.15);
}

header.topnav form { margin: 0; }

/* .topnav-auth buendelt user-info/Buttons/Logout in einem Wrapper (fuers Hamburger-Menue unten
   noetig) - auf breiten Screens soll das aber weiter wie eine einfache Fortsetzung der
   Kopfzeile aussehen, daher hier derselbe Flex-Zeilen-Stil wie vorher direkt auf .topnav. */
header.topnav .topnav-auth {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Hamburger-Toggle nur unter der Media Query unten sichtbar. */
header.topnav .topnav-toggle {
    display: none;
}

header.topnav .user-info {
    font-size: 0.85rem;
    color: #cdd8de;
}

main.container {
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    /* Breite Tabellen (auf schmalen Screens fast alle) scrollen innerhalb der Card, statt die
       ganze Seite (inkl. Nav/Überschrift) horizontal zu verschieben. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

th { color: var(--color-text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }

tr:hover td { background: #fafbfc; }

/* Mitgliedertabelle (Bands\Manage, Admin-Ansicht) ist mit 10 schmalen Spalten dichter als
   normale Tabellen - die globale th-Schriftgröße (0.85rem, uppercase) sorgt hier für krumme
   Umbrüche mitten im Wort ("SPITZNAM/E", "LEADE/R"). Eigene, kleinere Überschrift-Schrift nur
   für diese Tabelle, da eine globale th-Änderung jede andere Tabelle im Programm mitverändern
   würde. */
.mitglieder-tabelle th { font-size: 0.68rem; padding-left: 0.45rem; padding-right: 0.45rem; }

/* Songs\Manage: Pflichtfelder, die auch Song::unvollstaendig bestimmen (Jahr/Tonart/Tempo/
   Akkorde) - blasses Rot solange leer, rein über :invalid (required + leerer Wert), damit der
   Hintergrund sofort beim Tippen wieder normal wird statt erst nach einem Livewire-Roundtrip.
   Disabled Felder (schreibgeschützte Ansicht) sind laut HTML5-Spec von der
   Constraint-Validation ausgenommen und bleiben deshalb automatisch unfarbig. */
.pflichtfeld-song:invalid { background: #fdecea; }

.btn {
    display: inline-block;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: normal;
    text-decoration: none;
}

.btn:hover { background: #f0f1f3; }

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover { background: var(--color-primary-dark); }

.btn-danger {
    background: #fff;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-danger:hover { background: #fdecea; }

.btn-add {
    background: #e6f4ea;
    border-color: #bfe3c8;
    color: var(--color-success);
}

.btn-add:hover { background: #d4ecdb; }

.btn-sm { padding: 0.2rem 0.55rem; font-size: 0.82rem; }

input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], input[type=email], select, textarea {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-family: inherit;
    background: #fff;
    color: var(--color-text);
}

input[type=file] {
    width: 100%;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--color-text-muted);
}

input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover {
    background: #f0f1f3;
}

label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
    margin-top: 0.6rem;
}

.field-error { color: var(--color-danger); font-size: 0.8rem; margin-top: 0.15rem; }

.flash {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.flash-success { background: #e6f4ea; color: var(--color-success); border: 1px solid #bfe3c8; }
.flash-error { background: #fdecea; color: var(--color-danger); border: 1px solid #f3c2bd; }

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: #eef1f4;
    color: var(--color-text-muted);
}

.badge-aktiv { background: #e6f4ea; color: var(--color-success); }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: end;
    margin-bottom: 1rem;
}

.toolbar > div { min-width: 160px; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 25, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 50;
}

.modal {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.login-wrap {
    max-width: 340px;
    margin: 4rem auto;
}

.db-label-badge {
    display: inline-block;
    background: #b3261e;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius);
}

/* Auf der Login-Seite gibt es keine Kopfzeile, in die der Marker als normales
   Flex-Element passen könnte - dort bleibt er als frei schwebendes Element. */
.db-label-badge--floating {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cards-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.cards-row > .card { margin-bottom: 0; flex: 0 1 auto; }

.table-fit { width: auto; }
.table-fit th, .table-fit td { white-space: nowrap; }

.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { color: var(--color-text); }

input[type=text].input-inline {
    width: auto;
    min-width: 12rem;
    background: transparent;
    border: 1px solid transparent;
    padding: 0.3rem 0.4rem;
}
input[type=text].input-inline:hover { border-color: var(--color-border); }
input[type=text].input-inline:focus { border-color: var(--color-primary); background: #fff; outline: none; }

.text-muted { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.flex-row { display: flex; gap: 0.5rem; align-items: center; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.chordpro-pre {
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: #fbfbfc;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    max-height: 500px;
    overflow-y: auto;
}

/* ChordPro-Rendering, Struktur/Klassennamen an Referenzformatierung angelehnt */
div.cpro, div.cpro-kopf { font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
div.cpro-kopf h1 { font-size: 1.3rem; margin: 0 0 0.2rem; }
div.cpro p { margin: 0.4em 0; }

/* Kopfbereich als zwei ausgerichtete Spalten: links Jahr/Artist, rechts Tonart/Tempo/Laufzeit.
   Jede Zeile ist ihr eigener Flex-Container (links-/rechts-Zelle), dadurch liegt Zeile 1 rechts
   garantiert auf Höhe von Jahr, Zeile 2 auf Höhe von Artist - unabhängig von Schriftgrößen. */
div.cpro-meta { margin-bottom: 0.6rem; }
div.cpro-meta-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
div.cpro-meta-zeile .cpro-clear { display: none; }
div.cpro-meta-links-zelle { color: var(--color-text-muted); font-size: 0.85rem; }
div.cpro-meta-links-zelle strong { color: var(--color-text); }
div.cpro-meta-jahr { font-size: 1rem; }
div.cpro-meta-rechts-zelle { color: var(--color-text-muted); font-size: 1rem; text-align: right; white-space: nowrap; }
div.cpro-meta-rechts-zelle strong { color: var(--color-text); }
div.cpro-line { margin: 0.15rem 0; }
div.cpro-line-section { display: inline-block; float: left; }
div.cpro-line-section .chord { color: #b5720a; font-weight: 700; }
div.cpro-line-section .lyric { color: inherit; }
div.cpro-chorus { padding-left: 0.9rem; margin: 0.3rem 0; border-left: 3px solid var(--color-border); }
div.cpro-clear { clear: both; }
div.cpro-comment { background-color: #f0f1f3; font-style: italic; padding: 0.2rem 0.5rem; border-radius: 4px; display: inline-block; }

/* Pagination (Bootstrap-Klassennamen, ohne Bootstrap-CSS zu laden) */
.pagination { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.pagination .page-item .page-link,
.pagination .page-item span {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
    background: var(--color-surface);
}
.pagination .page-item.active .page-link,
.pagination .page-item.active span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.pagination .page-item.disabled span { color: var(--color-text-muted); }
.pagination .page-item a.page-link:hover { background: #f0f1f3; }

.songsheet-kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; gap: 1rem; }
.songsheet-logo { width: 180px; height: 130px; object-fit: contain; }

@media (max-width: 640px) {
    main.container { margin: 0.75rem auto; padding: 0 0.6rem; }
    .card { padding: 0.85rem; }
    h1 { font-size: 1.25rem; }

    header.topnav { padding: 0.4rem 0.6rem; gap: 0.5rem; position: relative; }

    /* Hamburger-Icon: drei Balken per CSS statt Icon-Font/SVG - kein zusaetzliches Asset noetig. */
    header.topnav .topnav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 30px;
        height: 30px;
        margin-left: auto;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: var(--radius);
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
    }
    header.topnav .topnav-toggle span {
        display: block;
        width: 16px;
        height: 2px;
        margin: 0 auto;
        background: #fff;
        border-radius: 1px;
    }

    /* nav und .topnav-auth sind beide .topnav-collapsible - zugeklappt (Standard) unsichtbar,
       aufgeklappt als eigene volle Zeile unter der Kopfzeile (dank flex-wrap auf .topnav). */
    header.topnav .topnav-collapsible {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }
    header.topnav .topnav-collapsible.is-open { display: flex; }
    header.topnav nav.topnav-collapsible a { padding: 0.6rem 0.6rem; font-size: 0.92rem; }
    header.topnav .topnav-auth {
        /* nicht wie die Nav-Links stretchen - sonst wuerde "Passwort aendern" (ein blankes
           .btn-a, ohne Form drumherum wie die anderen beiden) zu einer vollbreiten Flaeche statt
           wie die Buttons daneben ein kompaktes .btn zu bleiben. */
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 0.4rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    header.topnav .user-info { display: block; }

    /* Auf breiten Screens stehen Filter/Formular-Felder nebeneinander (min-width:160px) - auf
       schmalen wird das schnell zu eng zum Treffen; volle Breite je Feld ist auf einem
       Touchscreen die bessere Wahl als mehrere schmale Felder in einer Reihe. */
    .toolbar > div { min-width: 0; flex: 1 1 100%; }

    .songsheet-kopfzeile { flex-direction: column; }
    .songsheet-logo { width: 130px; height: auto; }
}

@media print {
    .db-label-badge, .songsheet-kopfzeile .flex-row { display: none; }
    body { background: #fff; }
    main.container { max-width: none; margin: 0; padding: 0; }
    .card { border: none; padding: 0; }
}