/* ==========================================================================
   URLAUBSVERWALTUNG – Styles
   Divi Erbel Child v1.1.0
   ========================================================================== */

/* ── Hub/Hauptseite ─────────────────────────────────── */
.erbel-uv-hub {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
.erbel-uv-hub h2 {
    color: #3a2f28;
    margin-bottom: 24px;
}
.erbel-uv-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.erbel-uv-hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background: #fff;
    border: 2px solid #e0d8cf;
    border-radius: 8px;
    text-decoration: none !important;
    color: #3a2f28 !important;
    transition: all 0.2s;
    text-align: center;
    min-height: 180px;
}
.erbel-uv-hub-card:hover {
    border-color: #8B7355;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.erbel-uv-hub-card--admin {
    border-color: #6B8FA3;
    background: #f0f5f8;
}
.erbel-uv-hub-icon {
    font-size: 2.5em;
    margin-bottom: 12px;
}
.erbel-uv-hub-title {
    font-size: 1.15em;
    font-weight: 700;
    margin-bottom: 6px;
}
.erbel-uv-hub-desc {
    font-size: 0.9em;
    color: #888;
}

/* ── Formular-Layout ────────────────────────────────── */
.erbel-uv-form-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
.erbel-uv-form-wrapper h2 {
    color: #3a2f28;
    margin-bottom: 20px;
}
.erbel-uv-form-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}
@media (max-width: 860px) {
    .erbel-uv-form-grid {
        grid-template-columns: 1fr;
    }
}
.erbel-uv-form-main { min-width: 0; }
.erbel-uv-form-row {
    display: flex;
    gap: 15px;
}
.erbel-uv-form-row .erbel-uv-form-group {
    flex: 1;
}
.erbel-uv-form-group {
    margin-bottom: 16px;
}
.erbel-uv-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #555;
    font-size: 0.9em;
}
.erbel-uv-form-group select,
.erbel-uv-form-group input[type="date"],
.erbel-uv-form-group input[type="text"],
.erbel-uv-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    background: #fff;
}
.erbel-uv-input-readonly {
    background: #f5f5f5 !important;
    color: #666;
}
.erbel-uv-section-label {
    display: block;
    font-weight: 700;
    margin: 20px 0 10px 0;
    color: #3a2f28;
    font-size: 1.05em;
}

/* ── Zeitraum-Zeilen ────────────────────────────────── */
.erbel-uv-zeitraeume-container {
    margin-bottom: 20px;
}
.erbel-uv-zeitraum-row {
    background: #fafaf8;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    position: relative;
}
.erbel-uv-zeitraum-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 80px;
    gap: 12px;
    align-items: end;
}
.erbel-uv-form-group--von,
.erbel-uv-form-group--bis,
.erbel-uv-form-group--tage {
    margin-bottom: 0;
}
.erbel-uv-form-group--tage input {
    text-align: center;
    font-weight: 700;
    color: #3a2f28;
}
.erbel-uv-btn-remove-row {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fadbd8;
    border: none;
    color: #c0392b;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1;
    padding: 0;
}
.erbel-uv-btn-remove-row:hover {
    background: #f5b7b1;
}

/* ── Buttons ────────────────────────────────────────── */
.erbel-uv-btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: #3a2f28;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.erbel-uv-btn-primary:hover {
    background: #5a4f48;
}
.erbel-uv-btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.erbel-uv-btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    background: #f0f0f0;
    color: #3a2f28;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.2s;
}
.erbel-uv-btn-secondary:hover {
    background: #e0e0e0;
}
.erbel-uv-btn-success {
    padding: 12px 28px;
    background: #27ae60;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
}
.erbel-uv-btn-success:hover {
    background: #219a52;
}
.erbel-uv-btn-danger {
    padding: 12px 28px;
    background: #e74c3c;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
}
.erbel-uv-btn-danger:hover {
    background: #c0392b;
}
.erbel-uv-btn-small {
    display: inline-block;
    padding: 6px 14px;
    background: #3a2f28;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: none;
    margin-right: 6px;
}
.erbel-uv-btn-small--pdf {
    background: #6B8FA3;
}

/* ── Infobox (rechts) ───────────────────────────────── */
.erbel-uv-infobox {
    background: #fff;
    border: 2px solid #3a2f28;
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 20px;
}
.erbel-uv-infobox h3 {
    margin: 0 0 16px 0;
    color: #3a2f28;
    font-size: 1.1em;
}
.erbel-uv-infobox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9em;
    border-bottom: 1px solid #f0f0f0;
}
.erbel-uv-infobox-row span {
    color: #666;
}
.erbel-uv-infobox-row strong {
    color: #3a2f28;
    font-size: 1.05em;
}
.erbel-uv-infobox-row--rest {
    color: #27ae60;
}
.erbel-uv-infobox-row--rest strong {
    color: #27ae60;
}
.erbel-uv-infobox-divider {
    height: 1px;
    background: #3a2f28;
    margin: 12px 0;
}
.erbel-uv-infobox-row--aktuell {
    background: #fef9e7;
    margin: 0 -20px;
    padding: 8px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.erbel-uv-infobox-row--aktuell strong {
    color: #b7950b;
}
.erbel-uv-infobox-row--resturlaub {
    font-size: 1em;
    margin: 4px 0 0 0;
    border-bottom: none;
}
.erbel-uv-infobox-row--resturlaub strong {
    font-size: 1.2em;
    color: #3a2f28;
}

/* ── Bestätigungsbox ────────────────────────────────── */
.erbel-uv-confirm-box {
    background: #fef9e7;
    border: 1px solid #f1c40f;
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0;
}
.erbel-uv-confirm-box h4 {
    margin: 0 0 12px 0;
}
.erbel-uv-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}
.erbel-uv-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* ── Detailansicht ──────────────────────────────────── */
.erbel-uv-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}
.erbel-uv-detail h2 { color: #3a2f28; }
.erbel-uv-detail-meta {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}
.erbel-uv-detail-row {
    display: flex;
    padding: 4px 0;
    font-size: 0.95em;
}
.erbel-uv-detail-label {
    font-weight: 600;
    color: #666;
    min-width: 160px;
}
.erbel-uv-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.erbel-uv-detail-table th {
    background: #3a2f28;
    color: #fff;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.9em;
}
.erbel-uv-detail-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}
.erbel-uv-detail-table tr:nth-child(even) td {
    background: #fafaf8;
}

/* ── Status-Badges ──────────────────────────────────── */
.erbel-uv-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: 600;
}
.erbel-uv-status--genehmigt { background: #d4efdf; color: #1e8449; }
.erbel-uv-status--abgelehnt { background: #fadbd8; color: #c0392b; }
.erbel-uv-status--eingereicht { background: #d5dbeb; color: #2c3e80; }
.erbel-uv-status--entwurf { background: #fdebd0; color: #b7950b; }
.erbel-uv-badge {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 700;
}

/* ── Ablehnung ──────────────────────────────────────── */
.erbel-uv-ablehnung-box {
    background: #fef9e7;
    border-left: 4px solid #f1c40f;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 6px 6px 0;
}
.erbel-uv-entscheidung-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

/* ── Admin-Tabelle ──────────────────────────────────── */
.erbel-uv-admin, .erbel-uv-meine {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
.erbel-uv-admin-table, .erbel-uv-meine-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.erbel-uv-admin-table th, .erbel-uv-meine-table th {
    background: #3a2f28;
    color: #fff;
    padding: 10px 8px;
    text-align: left;
    font-size: 0.85em;
}
.erbel-uv-admin-table td, .erbel-uv-meine-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
}
.erbel-uv-admin-table tr:hover td, .erbel-uv-meine-table tr:hover td {
    background: #fafaf8;
}
.erbel-uv-filter-form {
    background: #f8f8f8;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.erbel-uv-filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* ── Nachrichten ────────────────────────────────────── */
.erbel-uv-nachrichten {
    margin-top: 30px;
}
.erbel-uv-nachrichten h3 {
    color: #3a2f28;
    margin-bottom: 16px;
}
.erbel-uv-nachrichten-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.erbel-uv-nachricht {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 14px;
}
.erbel-uv-nachricht--ungelesen {
    border-left: 4px solid #3a2f28;
    background: #fafaf8;
}
.erbel-uv-nachricht strong {
    display: block;
    margin-bottom: 4px;
}
.erbel-uv-nachricht-date {
    font-size: 0.8em;
    color: #999;
}
.erbel-uv-nachricht p {
    margin: 6px 0;
    font-size: 0.9em;
    color: #555;
    white-space: pre-line;
}

/* ── Dashboard-Kacheln (nur Mitarbeiter-Dashboard) ─────
   WICHTIG: Das Admin-Dashboard-Layout liegt AUSSCHLIESSLICH in
   style.css (.erbel-admin-dashboard-grid / .erbel-admin-dashboard-card).
   Diese Regeln hier gelten nur fuer die Mitarbeiter-Kacheln
   innerhalb von .erbel-uv-dashboard-kacheln. */
.erbel-uv-dashboard-kacheln {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
}
.erbel-uv-dashboard-kacheln .erbel-uv-dashboard-kachel {
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
}
/* Alle Mitarbeiter-Kacheln exakt gleich groß wie die
   Referenzkachel "Urlaubsverwaltung" (220 × 160 px) –
   keine Unterschiede durch Textlänge. */
.erbel-uv-dashboard-kacheln .erbel-uv-dashboard-kachel-link {
    width: 220px;
    height: 160px;
    min-height: 160px;
    box-sizing: border-box;
    overflow: hidden;
}
.erbel-uv-dashboard-kachel-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    background: #3a2f28;
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none !important;
    text-align: center;
    min-height: 160px;
    box-sizing: border-box;
    transition: transform 0.2s, box-shadow 0.2s;
}
.erbel-uv-dashboard-kachel-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.erbel-uv-dashboard-kachel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #bb8238;
}
.erbel-uv-dashboard-kachel-icon svg {
    display: block;
}
.erbel-uv-dashboard-kachel-title {
    font-size: 1.05em;
    font-weight: 700;
    margin-bottom: 6px;
}
.erbel-uv-dashboard-kachel-desc {
    font-size: 0.82em;
    opacity: 0.75;
}

/* ── Feedback ───────────────────────────────────────── */
.erbel-uv-feedback {
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 600;
}
.erbel-uv-feedback--success {
    background: #d4efdf;
    color: #1e8449;
    border: 1px solid #1e8449;
}
.erbel-uv-feedback--error {
    background: #fadbd8;
    color: #c0392b;
    border: 1px solid #c0392b;
}
.erbel-uv-zeitraum-invalid {
    border-color: #e74c3c !important;
    background: #fef5f5 !important;
}