/* =========================================================
   RPG Gesuche CSS - v1.2
   ---------------------------------------------------------
  TIPP: Wenn du im Standard Design ein root-Verzeichnis hast, ersetze die hier definierten Farben mit deinen variablen!
   ========================================================= */

/* 1) WRAPPER & HEADER */
.gesuche-wrapper {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.gesuche-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: #0066a2 url(images/thead.png) top left repeat-x;
    border: 1px solid #004a7c;
    color: #fff;
}

.gesuche-header h1 {
    margin: 0 0 .5rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.gesuche-header p {
    margin: 0;
    font-size: 1.1rem;
    color: #e6f2ff;
}

/* 2) FILTER & TOGGLE BUTTONS */
.gesuche-filter {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

.filter-btn {
    padding: .5rem 1rem;
    border: 1px solid #bbb;
    background: #eee url(images/buttons_bg.png) repeat-x;
    cursor: pointer;
    font-weight: 400;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    color: #333;
    transition: all .2s;
    border-radius: 4px;
}

.filter-btn:hover,
.filter-btn.active {
    background: #0066a2 url(images/thead.png) top left repeat-x;
    color: #fff;
    border-color: #004a7c;
}

.status-toggle,
.type-toggle {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

/* 3) GESUCHE-GRID (Übersicht) */
.gesuche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gesuch-card {
    background: #fff;
    border: 1px solid #ccc;
    overflow: hidden;
    transition: transform .2s;
    display: flex;
    flex-direction: column;
}

.gesuch-card:hover {
    transform: translateY(-4px);
    border-color: #0066a2;
}

.gesuch-avatar {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-bottom: 1px solid #ccc;
}

.gesuch-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gesuch-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0066a2;
    margin-bottom: .5rem;
}

.gesuch-kurzbeschreibung {
    font-size: 13px;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Meta-Container für Badges */
.gesuch-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1rem;
}

/* ---- BADGE-SYSTEM (einheitliche Größen) ---- */
.gesuch-badge,
.status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .45rem .75rem !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    color: #fff !important;
    background-image: none !important;
}

/* Status-Badge-Farben (dynamisch per Slug) */
.status-badge.status-offen,
.status-badge.status-frei,
.status-badge.status-verfuegbar {
    background: #22c55e !important;
}

.status-badge.status-reserviert,
.status-badge.status-bearbeitung,
.status-badge.status-teilreserviert {
    background: #f59e0b !important;
}

.status-badge.status-vergeben,
.status-badge.status-besetzt,
.status-badge.status-archiviert {
    background: #6b7280 !important;
}

.status-badge:not([class*="status-"]) {
    background: #6b7280 !important;
}

/* Badge-Typ-Farben */


.badge-alter {
    background: #8b5cf6 !important;
}

.badge-typ {
    background: #6366f1 !important;
}

.badge-rating {
    background: #ef4444 !important;
}

/* 4) BUTTONS - Einheitliche Styles für alle Button-Typen */
.btn-primary,
.btn-secondary,
.btn-danger,
button.btn-primary,
button.btn-secondary,
button.btn-danger,
a.btn-primary,
a.btn-secondary,
a.btn-danger {
    display: inline-block;
    padding: .6rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 6px !important;
    font-weight: 400;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    background-image: none !important;
    box-sizing: border-box;
    vertical-align: middle; /* ✅ Wichtig für inline Elemente */
    line-height: 1.4; /* ✅ Gleiche Line-Height */
    margin: 0 .5rem 0 0; /* ✅ Einheitlicher Abstand */
}

/* Letzter Button ohne rechten Margin */
.btn-primary:last-child,
.btn-secondary:last-child,
.btn-danger:last-child {
    margin-right: 0;
}

.btn-secondary {
    background: #eee !important;
    color: #333 !important;
    border: 1px solid #bbb !important;
}

.btn-secondary:hover,
.btn-secondary.active {
    background: #0066a2 !important;
    color: #fff !important;
    border-color: #004a7c !important;
}

.btn-danger {
    background: #ef4444 !important;
    color: #fff !important;
    border: 1px solid #dc2626 !important;
    margin-left: 1rem !important; /* Mehr Abstand vor dem roten Button */
}

.btn-danger:hover {
    background: #dc2626 !important;
}
}
/* 5) ZUSÄTZLICHE ELEMENTE */
.gesuch-author {
    margin-top: 1rem;
    font-size: 11px;
    color: #999;
}

.gesuch-author a {
    color: #0072BC;
    text-decoration: none;
}

.gesuch-author a:hover {
    text-decoration: underline;
}

.gesuch-actions {
    margin-top: 1rem;
    font-size: 11px;
}

.gesuch-actions a {
    color: #0072BC;
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: #666;
    grid-column: 1 / -1;
    background: #f5f5f5;
    border: 1px solid #ddd;
}

/* 6) DETAILANSICHT */
.gesuch-detail {
    max-width: 900px;
    margin: 2rem auto;
    background: #fff;
    border: 1px solid #ccc;
    overflow: hidden;
}

.gesuch-detail-header {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    padding: 2rem;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.gesuch-detail-avatar {
    width: 100%;
    border: 1px solid #ddd;
    background: #fff;
    padding: 5px;
}

.gesuch-detail-info h1 {
    margin: 0 0 .5rem 0;
    color: #0066a2;
    font-size: 1.8rem;
}

.gesuch-kurzbeschreibung-detail {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    margin: .75rem 0;
}

.gesuch-detail-body {
    padding: 2rem;
}

.gesuch-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #efefef;
}

.gesuch-section:last-child {
    border-bottom: none;
}

.gesuch-section h3 {
    color: #0066a2;
    margin-bottom: .75rem;
    font-size: 1.2rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #ddd;
}

.gesuch-section-content {
    line-height: 1.7;
    color: #333;
    font-size: 13px;
}

/* 7) SUB-GESUCHE (Gruppengesuche) */
.sub-gesuche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.sub-gesuch-card {
    background: #fff;
    padding: 1.25rem;
    border: 1px solid #ddd;
}

.sub-gesuch-avatar {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin-bottom: .75rem;
    border: 1px solid #ddd;
    background: #fff;
    padding: 5px;
}

.sub-gesuch-info {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: 13px;
}

.sub-gesuch-info h4 {
    margin: 0 !important;
    color: #0066a2 !important;
    font-size: 1.1rem;
    font-weight: 700;
}

.sub-gesuch-info .gesuch-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}

.sub-status-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

/* 8) ANTWORTEN / REPLIES */
.gesuch-replies {
    padding: 2rem;
    border-top: 1px solid #ddd;
    background: #f5f5f5;
}

.gesuch-replies h3 {
    color: #0066a2;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.reply-item {
    background: #fff;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-left: 3px solid #0066a2;
}

.reply-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.reply-header strong {
    color: #0066a2;
}

.reply-date {
    color: #999;
    font-size: 11px;
}

.reply-message {
    line-height: 1.6;
    color: #333;
    font-size: 13px;
}

/* 9) FORMULARE */
.gesuch-reply-form {
    padding: 2rem;
    background: #fff;
    border-top: 1px solid #ddd;
}

.gesuch-reply-form h3 {
    color: #0066a2;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #333;
    font-size: 13px;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select,
.form-group input[type="file"] {
    width: 100%;
    padding: .5rem;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 13px;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.4;
}

.info-message,
.info-box {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    padding: 1rem;
    margin: 1.5rem 0;
    color: #333;
    font-size: 13px;
}

.form-note {
    font-size: 11px;
    color: #666;
    margin-top: .5rem;
    font-style: italic;
}

.form-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.gesuch-form {
    max-width: 800px;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border: 1px solid #ccc;
}

.gesuch-form h1 {
    margin-top: 0;
    color: #0066a2;
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

.sub-gesuch-edit {
    background: #f5f5f5;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
}

/* 10) RESPONSIVE */
@media (max-width: 768px) {
    .gesuche-grid {
        grid-template-columns: 1fr;
    }
    
    .gesuch-detail-header {
        grid-template-columns: 1fr;
    }
    
    .sub-gesuche-grid {
        grid-template-columns: 1fr;
    }
}