/* Careiwo Vermietung - Frontend CSS */
.cverm-dashboard-tab {
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}
.cverm-dashboard-tab h3 {
    margin-top: 0;
}

.cverm-form {
    margin-top: 1rem;
}

.cverm-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cverm-seasons .cverm-form { width: 100%; max-width: none; padding-right: 16px; }
.cverm-seasons .cverm-row {
    flex-direction: column; /* untereinander anordnen */
    flex-wrap: wrap; /* falls eine andere Regel row erzwingt, trotzdem umbrechen */
    gap: 0.75rem;
    padding-right: 16px; /* zusätzlicher Abstand zum rechten Rand */
    align-items: flex-start; /* Felder nicht über die gesamte Breite strecken */
    width: 100%;
    box-sizing: border-box;
}
.cverm-seasons .cverm-field { flex: 0 0 100%; width: 100%; max-width: 560px; } /* Felder begrenzen, damit nicht zu breit */
.cverm-seasons .cverm-field {
    padding-right: 0; /* gleiche Breite wie .cverm-row: kein zusätzlicher Innenabstand */
    box-sizing: border-box;
}
.cverm-seasons .cverm-field input,
.cverm-seasons .cverm-field select,
.cverm-seasons .cverm-field textarea {
    margin-right: 0; /* Feldinhalte füllen die Feldbreite vollständig */
    box-sizing: border-box; /* Breite inkl. Innenabstände und Rahmen berechnen */
}

/* Formular: übergeordnete Wrapper und Zeilen auf volle Breite und vertikal */
.cverm-form { width: 100%; }
.cverm-form .cverm-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
}
.cverm-form .cverm-field { flex: 0 0 100%; width: 100%; }

/* Statistik-Controls: konsistente Optik mit System */
.cverm-controls { gap: 12px; }
.cverm-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    color: #2c3e50;
    font-weight: 500;
}
.cverm-select, .cverm-input {
    padding: 6px 10px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
}
.cverm-controls .button { border-radius: 4px; }
.cverm-divider { flex-shrink: 0; }

.cverm-seasons .cverm-actions { margin-top: 0.75rem; }
.cverm-seasons .button.button-primary {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.cverm-seasons ul { margin-top: 0.5rem; padding-left: 1.2rem; }
.cverm-seasons li { margin-bottom: 0.25rem; }

.cverm-field {
    flex: 1;
}

.cverm-field--full {
    flex: 0 0 100%;
}

.cverm-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cverm-field input,
.cverm-field textarea,
.cverm-field select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
}

.cverm-summary {
    display: flex;
    gap: 2rem;
    padding: 0.75rem 1rem;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.cverm-summary strong {
    display: inline-block;
    min-width: 90px;
}

.cverm-actions {
    margin-top: 0.5rem;
}

.cverm-messages {
    display: none;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.cverm-msg-success {
    display: block;
    background: #e8f7ee;
    border: 1px solid #c8e6cb;
    color: #256b3f;
}

.cverm-msg-error {
    display: block;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #842029;
}

/* Saisonbereiche */
.cverm-seasons {
    margin-top: 1rem;
}
.cverm-seasons-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.cverm-season-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}
.cverm-season-row .cverm-actions {
    flex: 0 0 auto;
}

/* Fahrzeugliste */
.cverm-vehicle-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.cverm-vehicle-card {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    background: #fff;
}
.cverm-vehicle-title { font-size: 1rem; margin-bottom: 0.25rem; }
.cverm-vehicle-base { color: #555; margin-bottom: 0.5rem; }
.cverm-vehicle-seasons ul { margin: 0; padding-left: 1rem; }

@media (max-width: 640px) {
    .cverm-row {
        flex-direction: column;
    }
    .cverm-season-row { flex-direction: column; }
}

/* Menü-Stile: Überschrift „Vermietung“ und Unterpunkte */
/* Nur die Überschrift exakt deaktivieren, nicht die Untertabs */
.cls-menu-list a[href="?tab=vermietung"] {
    font-weight: 700;
    color: #2c3e50;
    pointer-events: none; /* als Überschrift, nicht klickbar */
}

/* Untertabs einrücken und normal klickbar lassen */
.cls-menu-list a[href*="tab=vermietung-stats"],
.cls-menu-list a[href*="tab=vermietung-calendar"],
.cls-menu-list a[href*="tab=vermietung-seasons"],
.cls-menu-list a[href*="tab=vermietung-rentals"] {
    padding-left: 2rem; /* konsistent wie andere Subtabs */
    border-left: 3px solid transparent;
}

/* Kalender-Ansicht */
.cverm-calendar-header {
    margin-bottom: 8px;
}

.cverm-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cverm-day {
    border: 1px solid #ddd;
    min-height: 96px;
    padding: 8px;
    background: #fff;
    position: relative;
}

.cverm-day--head {
    background: #f7f7f7;
    font-weight: 600;
    text-align: center;
    min-height: auto;
    border: 1px solid #eee;
}

.cverm-day--empty {
    background: transparent;
    border: none;
    min-height: 0;
}

.cverm-day-number {
    font-size: 12px;
    color: #666;
    position: absolute;
    top: 6px;
    right: 6px;
}

.cverm-badge {
    display: block;
    margin-top: 22px;
    background: #e8f3ff;
    color: #034c8c;
    border-left: 3px solid #1e88e5;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
}

/* Jahreskalender: eine Zeile pro Fahrzeug */
.cverm-year-header {
    margin-bottom: 8px;
}

.cverm-year-grid {
    display: block;
}

.cverm-year-row {
    display: grid;
    gap: 6px;
    align-items: stretch;
    margin-bottom: 6px;
}

/* Buttons: an andere Tabs (CLS) optisch anpassen */
.cverm-dashboard-tab .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #ffffff;
    color: #495057;
    text-decoration: none;
    box-shadow: none;
    transition: all 0.2s ease-in-out;
}
.cverm-dashboard-tab .button:hover {
    background: #e9ecef;
    color: #343a40;
    border-color: #bfc5ca;
}
.cverm-dashboard-tab .button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,124,186,0.25);
}
.cverm-dashboard-tab .button.button-small {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 8px;
}
.cverm-dashboard-tab .button.button-primary {
    background: #007cba;
    border-color: #007cba;
    color: #ffffff;
}
.cverm-dashboard-tab .button.button-primary:hover {
    background: #006ba1;
    border-color: #006ba1;
}
.cverm-dashboard-tab .cverm-season-delete {
    color: #dc3545;
    border-color: #dc3545;
}
.cverm-dashboard-tab .cverm-season-delete:hover {
    background: #f8d7da;
}

.cverm-year-row--head {
    font-weight: 600;
}

.cverm-year-vehicle-col {
    padding: 6px 8px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.cverm-year-month-col {
    padding: 6px 8px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px; /* größere Monats-Schriftgröße */
}

.cverm-year-month-col.cverm-year-month--head {
    font-size: 14px; /* Kopfzeile „Monat“ auf 14px */
}

/* Tage: Schriftgröße erhöhen */
.cverm-year-day {
    font-size: 14px;
}

.cverm-year-days-col {
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden; /* kein Scrollen */
}

.cverm-year-days-strip {
    display: grid;
    grid-template-columns: repeat(31, 1fr);
    gap: 1px;
}

.cverm-year-day {
    height: 36px; /* Platz für Zahl + Wochentag */
    text-align: center;
    display: grid;
    grid-template-rows: auto auto; /* Zahl oben, Wochentag unten */
    align-content: center;
    justify-items: center;
    font-size: 14px; /* Tage größer, wie gewünscht */
    color: #555;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    min-width: 0; /* gleichmäßige Breite ohne Überlauf */
    position: relative; /* Markierungsleisten am unteren Rand positionieren */
}

.cverm-day-num { line-height: 1; font-weight: 600; }

/* Wochentag unter der Zahl */
.cverm-day-week {
    display: block;
    line-height: 1;
    font-size: 12px; /* leicht kleiner als Zahl für bessere Lesbarkeit */
    opacity: 1; /* Text vollständig sichtbar */
}

/* Leere Platzhalter-Zellen für Tage, die im Monat nicht existieren */
.cverm-year-day--empty {
    background: transparent;
    border-color: transparent;
}

.cverm-day-marks {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 0 2px 2px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* Leisten unten in der Zelle anordnen */
}

.cverm-day-mark {
    width: 100%;
    height: 3px;
    border-radius: 2px;
}

.cverm-year-legend {
    margin: 6px 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cverm-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
}

.cverm-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

.cverm-year-month {
    padding: 6px 8px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    min-height: 40px;
    background: #fff;
}

.cverm-year-month--head {
    background: #f0f0f0;
    text-align: center;
}

.cverm-year-badge {
    display: inline-block;
    background: #e8f3ff;
    color: #034c8c;
    border-left: 3px solid #1e88e5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    margin: 2px 0;
}

/* Saisons Formular */
.cverm-form .cverm-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.cverm-form .cverm-field {
    flex: 1;
}

.cverm-form .cverm-field--full {
    flex: 1 1 100%;
}

.cverm-form label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 6px;
}

.cverm-form input[type="text"],
.cverm-form input[type="date"],
.cverm-form select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cverm-actions {
    margin-top: 8px;
}
.cls-menu-list a[href*="tab=vermietung"]:hover {
    background: transparent;
}

.cls-menu-list a[href*="tab=vermietung-calendar"],
.cls-menu-list a[href*="tab=vermietung-seasons"],
.cls-menu-list a[href*="tab=vermietung-stats"],
.cls-menu-list a[href*="tab=vermietung-rentals"] {
    padding-left: 32px; /* Einrückung für Unterpunkte */
}
/* Aktionen in zwei Reihen und farbige Buttons */
.cverm-actions-row .button {
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 8px;
}

.cverm-action[data-action="accept"] {
    background-color: #2ca54d;
    border-color: #2ca54d;
    color: #fff;
}
.cverm-action[data-action="accept"]:hover { filter: brightness(0.95); }

/* Deaktivierte Aktions-Buttons optisch ausgrauen und unklikbar machen */
.cverm-action[disabled],
.cverm-action.cverm-disabled,
.cverm-action[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Akzeptieren-Button im deaktivierten Zustand etwas blasser einfärben */
.cverm-action[data-action="accept"][disabled],
.cverm-action[data-action="accept"].cverm-disabled,
.cverm-action[data-action="accept"][aria-disabled="true"] {
    background-color: #7fbf93;
    border-color: #7fbf93;
}

/* Keine Hover-Effekte bei deaktivierten Buttons */
.cverm-action[disabled]:hover,
.cverm-action.cverm-disabled:hover,
.cverm-action[aria-disabled="true"]:hover {
    filter: none;
}

.cverm-action[data-action="decline"] {
    background-color: #d93025;
    border-color: #d93025;
    color: #fff;
}
.cverm-action[data-action="decline"]:hover { filter: brightness(0.95); }

.cverm-action[data-action="cancel"] {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}
.cverm-action[data-action="cancel"]:hover { filter: brightness(0.95); }

.cverm-action-detail {
    background-color: #374151;
    border-color: #374151;
    color: #fff;
}
.cverm-action-detail:hover { filter: brightness(0.95); }