/* ===================================================
   muveup.music – Einheitliche Dashboard-Karten
   Statusbadge und Buttons außerhalb des Hauptinhalts
   Für Artists & Organizers
   =================================================== */

/* --- Event-/Gig-Karte: Flex-Spalte, Footer außerhalb, volle Breite --- */
.event-item,
.gig-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* Innerer Bereich: Bild + Hauptinhalt (ohne Badge/Buttons) */
.event-item-inner,
.gig-item-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Top-Row und Main-Info: volle Breite nutzen */
.event-item-inner .event-top-row,
.gig-item-inner .event-top-row,
.gig-item-inner .gig-top-row {
    width: 100%;
    flex: 1;
    min-width: 0;
}

/* Status rechts oben, Datum darunter, Erstelldatum darunter */
.event-status-date-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}
.event-status-date-block .event-date {
    margin: 0;
}
.event-status-date-block .status-badge,
.event-status-date-block .tender-status-badge {
    position: static !important;
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: normal;
}
.event-status-date-block .created-date {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin: -2px 0 0;
    text-align: right;
}

.event-item-inner .event-main-info,
.gig-item-inner .gig-main-info {
    flex: 1;
    min-width: 0;
}

.event-item-inner .vibe-container,
.event-item-inner .gig-bottom-row {
    width: 100%;
}

/* Footer: Spacer + Buttons, eigene Zeile, volle Breite */
.event-item-footer,
.gig-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
}
.event-item-footer > span:first-of-type,
.gig-item-footer > span:first-of-type {
    flex: 1;
    min-width: 0;
}

/* Leerer Footer-Spacer + Split-Aktionen: Spacer ausblenden, volle Zeile für links/rechts-Layout */
.event-item-footer:has(> .event-actions.event-actions-tender) > span:first-of-type:empty,
.gig-item-footer:has(> .event-actions.event-actions-tender) > span:first-of-type:empty {
    display: none;
}
.event-item-footer > .event-actions.event-actions-tender,
.gig-item-footer > .event-actions.event-actions-tender {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

/* Statusbadge im Footer – in der Flow bleiben (nicht absolute) */
.event-item-footer .status-badge,
.gig-item-footer .status-badge {
    flex-shrink: 0;
    position: static !important;
}

/* Action-Buttons: einheitliche Mindestbreite */
.event-item-footer .event-actions,
.event-item-footer .gig-actions,
.event-item-footer .tender-actions,
.gig-item-footer .event-actions,
.gig-item-footer .gig-actions,
.gig-item-footer .tender-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.event-item-footer .action-button,
.event-item-footer .btn-action,
.gig-item-footer .action-button,
.gig-item-footer .btn-action {
    min-width: 100px;
    text-align: center;
}

/* Tender-Karten / Karten ohne Bild: Inner als Block, volle Breite */
.event-item:not(:has(.gig-image-container)) .event-item-inner,
.gig-item:not(:has(.gig-image-container)) .gig-item-inner {
    display: block;
    width: 100%;
}

.event-item:not(:has(.gig-image-container)) .event-top-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 15px;
}

.event-item:not(:has(.gig-image-container)) .event-main-info {
    flex: 1;
    min-width: 0;
}

/* Veranstalter- & Künstler-Karten: Meta (Badges/Datum) getrennt von Zeile Bild + Titel – mobil oben Meta, darunter Bild neben Titel */
.event-item-inner:has(> .event-content-wrapper.organizer-card-stack),
.gig-item-inner:has(> .gig-content-wrapper.artist-card-stack) {
    display: block;
    width: 100%;
}

.event-content-wrapper.organizer-card-stack,
.gig-content-wrapper.artist-card-stack {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
}

.organizer-card-meta-row,
.artist-card-meta-row {
    flex-shrink: 0;
    order: 2;
    min-width: 0;
}

.organizer-card-thumb-main,
.artist-card-thumb-main {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-width: 0;
    gap: 20px;
    align-items: flex-start;
    order: 1;
}

.organizer-card-stack .gig-image-container,
.artist-card-stack .gig-image-container {
    flex-shrink: 0;
}

.organizer-card-thumb-main .event-main-info,
.artist-card-thumb-main .gig-main-info {
    flex: 1;
    min-width: 0;
    width: auto;
}

.artist-card-info-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Badge liegt in Meta-Zeile – kein Titel-Padding mehr nötig */
.gig-content-wrapper.artist-card-stack .gig-main-info h3,
.gig-content-wrapper.artist-card-stack .tender-title {
    padding-right: 0;
}

/* Info-Button + Status oben rechts (Info immer ganz rechts) */
.gig-item-inner:has(.artist-card-meta-head),
.event-item-inner:has(.organizer-card-meta-head) {
    position: relative;
    overflow: visible;
}

.artist-card-meta-head,
.organizer-card-meta-head {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    position: relative;
}

.artist-card-meta-head .event-status-date-block,
.organizer-card-meta-head .event-status-date-block {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}

/* Desktop: Footer-Aktionen rechts */
.gig-item-footer .event-actions.event-actions-tender,
.event-item-footer .event-actions.event-actions-tender {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.gig-item-footer .event-actions.event-actions-tender .event-tender-confirm-row,
.event-item-footer .event-actions.event-actions-tender .event-tender-confirm-row {
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.gig-item-footer .event-actions.event-actions-tender .event-tender-primary-pair,
.event-item-footer .event-actions.event-actions-tender .event-tender-primary-pair {
    margin-left: 0;
    flex-shrink: 1;
    min-width: 0;
}

/* MOBILE: Status/Badges oben rechts über dem Titel (keine Überlappung) */
@media (max-width: 768px) {
    .event-item-inner .event-top-row,
    .gig-item-inner .gig-top-row {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .event-item-inner .event-status-date-block,
    .gig-item-inner .event-status-date-block {
        order: -1;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        align-items: flex-end;
        margin-bottom: 2px;
    }
    .event-item-inner .event-main-info,
    .gig-item-inner .gig-main-info {
        order: 0;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    /* Ausschreibungen: zweite Spalte ist .event-date */
    .event-item-inner .event-top-row > .event-date {
        order: -1;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin-bottom: 2px;
    }
    .event-item-inner .event-date .status-badge,
    .event-item-inner .event-date .organizer-planung-combined-pill {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }

    .event-content-wrapper.organizer-card-stack,
    .gig-content-wrapper.artist-card-stack {
        flex-direction: column;
        gap: 8px;
    }

    .organizer-card-meta-row,
    .artist-card-meta-row {
        order: -1;
        width: 100%;
    }

    .organizer-card-thumb-main,
    .artist-card-thumb-main {
        width: 100%;
        gap: 12px;
        align-items: flex-start;
    }

    .gig-item-inner .artist-card-thumb-main .gig-main-info {
        width: auto;
        flex: 1;
        min-width: 0;
    }
}

/* MOBILE: Footer-Buttons volle Breite bei Platzmangel */
@media (max-width: 900px) {
    .gig-item-footer,
    .event-item-footer {
        overflow: visible;
        box-sizing: border-box;
    }

    .event-item-footer,
    .gig-item-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .event-item-footer .event-actions,
    .event-item-footer .gig-actions,
    .gig-item-footer .event-actions,
    .gig-item-footer .gig-actions {
        justify-content: stretch;
    }

    .gig-item-footer .event-actions.event-actions-tender,
    .event-item-footer .event-actions.event-actions-tender {
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    .gig-item-footer .event-actions.event-actions-tender .event-tender-confirm-row,
    .event-item-footer .event-actions.event-actions-tender .event-tender-confirm-row {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .event-item-footer .action-button,
    .event-item-footer .btn-action,
    .gig-item-footer .action-button,
    .gig-item-footer .btn-action {
        flex: 1;
        min-width: 0 !important;
    }

    /* Buttons in event-actions-tender auf Mobilgeräten zuverlässig stapeln */
    .event-item-footer .event-actions.event-actions-tender,
    .gig-item-footer .event-actions.event-actions-tender {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px;
    }

    .event-actions-tender .event-actions-secondary {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 10px;
    }

    .event-actions-tender .event-actions-secondary .action-button {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: center;
    }

    .event-actions-tender .event-tender-confirm-row {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .event-actions-tender .event-tender-confirm-row .event-tender-primary-pair {
        display: contents !important;
    }

    .event-actions-tender .event-tender-confirm-row .event-tender-reject-btn,
    .event-actions-tender .event-tender-confirm-row .event-tender-primary-pair > .action-button,
    .event-actions-tender .event-tender-confirm-row .event-tender-primary-pair > a.action-button {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        white-space: normal !important;
        box-sizing: border-box;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .event-actions-tender .event-tender-confirm-row > .planung-button-primary,
    .event-actions-tender .event-tender-confirm-row > .action-button {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .event-actions-tender > .action-button,
    .event-actions-tender > .planung-button {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        box-sizing: border-box;
        text-align: center;
    }

}

/* Archiv-Tab: Abstand zwischen Karten und zwischen Gig-/Tender-Listen
   (Parent ist oft display:block per Inline/Accordion – daher margin zwischen Listen) */
#archiv-content #gigs-past-list + #tenders-archived-list {
    margin-top: 24px !important;
}
#archiv-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#archiv-content > .dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}
#archiv-content > .dashboard-list > .gig-item,
#archiv-content > .dashboard-list > .event-item,
#archiv-content > .dashboard-list > .tender-card.gig-item {
    margin-bottom: 20px !important;
}
#archiv-content > .dashboard-list > .gig-item:last-child,
#archiv-content > .dashboard-list > .event-item:last-child,
#archiv-content > .dashboard-list > .tender-card.gig-item:last-child {
    margin-bottom: 0 !important;
}

/* Archiv-Künstlerkarten: Status rechts oben wie Veranstalter-Dashboard */
.dashboard-archive-card.tender-card.gig-item {
    border-left-color: #A0A0A0 !important;
}

/* Kompakte Tag-Gruppen mit Kategorie-Label (Stimmung:, Genre:, …) */
.gig-item .dashboard-tags,
.event-item .dashboard-tags {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    width: 100%;
}

.gig-item .dashboard-tag-group,
.event-item .dashboard-tag-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-width: 0;
}

.gig-item .dashboard-tag-label,
.event-item .dashboard-tag-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.35;
}

.gig-item .dashboard-tags .mood-badge,
.gig-item .dashboard-tags .mood-context-badge,
.gig-item .dashboard-tags .genre-tag,
.gig-item .dashboard-tags .venue-tag-btn,
.gig-item .dashboard-tags .tender-venue-tag,
.event-item .dashboard-tags .mood-badge,
.event-item .dashboard-tags .mood-context-badge,
.event-item .dashboard-tags .genre-tag,
.event-item .dashboard-tags .venue-tag-btn,
.event-item .dashboard-tags .tender-venue-tag {
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 10px;
    box-shadow: none;
    font-weight: 500;
}

.gig-item .dashboard-tags .mood-badge,
.event-item .dashboard-tags .mood-badge {
    font-weight: 600;
}

.gig-item .dashboard-tags .mood-context-badge,
.event-item .dashboard-tags .mood-context-badge {
    background: #ede7f3;
    color: #6b4f8a;
    font-weight: 500;
}

/* --- Tender-Karte (Gig-Ausschreibung): aufgeräumtes vertikales Layout --- */
.tender-card.gig-item .tender-card-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.tender-card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.tender-card-heading {
    flex: 1;
    min-width: 0;
}

.tender-card-heading .tender-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
    padding-right: 0;
}

.tender-card-heading .event-occasion-subtitle {
    margin-top: 2px;
    margin-bottom: 0;
}

.tender-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    max-width: 48%;
}

.tender-card-meta .status-badge,
.tender-card-meta .tender-status-badge {
    position: static !important;
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
    text-align: right;
    overflow-wrap: anywhere;
}

.tender-card-meta .created-date {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.tender-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tender-card-info .gig-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #555;
    margin-top: 0;
}

.tender-card-info .gig-detail-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #815da7;
}

.tender-date-flex {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    gap: 1px;
}

.tender-date-flex-main {
    font-weight: 600;
    color: #333;
}

.tender-date-flex-sub {
    font-size: 13px;
    color: #666;
}

.tender-location-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tender-card-tags {
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tender-card-tags .dashboard-tags {
    margin-top: 0;
    gap: 8px;
}

.tender-card-tags .dashboard-tag-group {
    gap: 4px 8px;
}

/* Footer: Ablehnen | Interesse | Öffnen in einer Zeile */
.tender-card .event-actions.event-actions-tender {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    justify-content: stretch;
}

.tender-card .event-tender-action-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
}

.tender-card .event-tender-action-row .action-button {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .tender-card-header-row {
        flex-direction: column;
        gap: 8px;
    }

    .tender-card-meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        max-width: 100%;
        gap: 6px 10px;
    }

    .tender-card-meta .status-badge,
    .tender-card-meta .tender-status-badge,
    .tender-card-meta .created-date {
        text-align: left;
    }
}

@media (max-width: 900px) {
    .tender-card .event-tender-action-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .tender-card .event-tender-action-row .action-button {
        flex: none !important;
        width: 100% !important;
    }
}