/**
 * Event Fahrgemeinschaft - Main Stylesheet
 */

/* --- GENERAL LAYOUT & ELEMENTS --- */
.ef-page-header { text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.ef-page-header h1 { margin-bottom: 5px; }
.ef-organizer { margin: 0; color: #555; font-size: 1.1em; }
#event-fahrgemeinschaft-app { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; max-width: 800px; margin: 20px auto; }
.ef-card { background: #f9f9f9; border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; border-radius: 5px; }
#event-fahrgemeinschaft-app input[type="text"], #event-fahrgemeinschaft-app input[type="email"], #event-fahrgemeinschaft-app input[type="tel"], #event-fahrgemeinschaft-app input[type="number"], #event-fahrgemeinschaft-app select, #event-fahrgemeinschaft-app textarea { display: block; width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
#event-fahrgemeinschaft-app button { background-color: #0073aa; color: white; border: none; padding: 10px 15px; text-align: center; font-size: 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s; }
#event-fahrgemeinschaft-app button:hover { background-color: #005a87; }
#event-fahrgemeinschaft-app button:disabled, .ef-disabled-btn { background-color: #d1d1d1; cursor: not-allowed; color: #666; }
.ef-loader { border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #0073aa; width: 40px; height: 40px; animation: spin 2s linear infinite; margin: 40px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- SECTIONS (FORMS, LISTS) --- */
.ef-role-selection { text-align: center; margin-bottom: 30px; padding: 20px; background: #f1f1f1; border-radius: 5px; }
.ef-role-selection button { margin: 5px; }
.ef-lists-container { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
#drivers-list-container h2, #passengers-list-container h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; font-size: 1.4em; }

/* --- CARD DESIGN --- */
.ef-collapsible-card { background: #fff; border: 1px solid #e1e1e1; border-radius: 5px; margin-bottom: 15px; transition: box-shadow 0.2s ease-in-out; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12); }
.ef-collapsible-card:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.16); }
.ef-card-header { padding: 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.ef-card-body { display: none; padding: 0 15px 15px; border-top: 1px solid #f0f0f0; }
.ef-collapsible-card.is-expanded .ef-card-body { display: block; }
.ef-card-toggle-icon { font-size: 1.2em; transition: transform 0.3s; transform-origin: center; }
.ef-collapsible-card.is-expanded .ef-card-toggle-icon { transform: rotate(180deg); }
.ef-ride-card-header-info { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.ef-ride-card-header-info strong { font-size: 1.1em; display: flex; align-items: center; }
.ef-ride-card-header-info small { color: #555; font-size: 0.9em; word-break: break-word; }
.ef-ride-seats { font-weight: bold; flex-shrink: 0; margin-left: 15px; text-align: right; }
.is-my-ride { background-color: #f0f8ff; border-color: #bde0ff; }
.ride-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.ef-info-card {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    margin-bottom: 30px;
}
.ef-info-card .ef-card-header {
    font-size: 1.1em;
}
.ef-info-card .ef-card-body p {
    margin: 0 0 10px;
}
.ef-info-card .event-time-display {
    font-weight: bold;
    margin-bottom: 15px !important;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.edit-event-info-btn {
    margin-top: 15px;
    background-color: #6c757d;
}

/* --- PASSENGER & REQUEST DETAILS --- */
.passenger-list { list-style: none; padding: 10px 0 0 0; margin-top: 15px; border-top: 1px solid #eee; font-size: 0.95em; }
.passenger-list-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 6px 0; }
.passenger-list .passenger-details { display: none; width: 100%; background-color: #f8f9fa; padding: 10px; margin-top: 5px; border-radius: 4px; font-size: 0.9em; }
.passenger-list .passenger-details p { margin: 0 0 8px; }
.passenger-list .passenger-details p:last-child { margin-bottom: 0; }
.passenger-list-item.is-expanded .passenger-details { display: block; }
.passenger-list-item .passenger-name { cursor: pointer; display: flex; align-items: center; }
.passenger-list-item .passenger-name .ef-card-toggle-icon { font-size: 0.8em; margin-left: 8px; transition: transform 0.3s; }
.passenger-list-item.is-expanded .passenger-name .ef-card-toggle-icon { transform: rotate(180deg); }
.passenger-list-item .passenger-info { flex-grow: 1; }
.passenger-list-item .initial-message { font-style: italic; color: #555; background-color: #f8f9fa; padding: 6px 10px; border-radius: 4px; margin-top: 4px; font-size: 0.9em; }


.admin-buttons button { padding: 2px 8px; font-size: 14px; margin-left: 5px; line-height: 1; border-radius: 3px; }
.confirm-btn, .start-navigation-btn {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}
.start-navigation-btn:hover {
    background-color: #218838 !important;
}
.decline-btn, .remove-passenger-btn { background-color: #dc3545; border-color: #dc3545; }
.cancel-btn { background-color: #ffc107; color: #212529; border-color: #ffc107; }
.edit-seats-btn, .edit-stops-btn, .change-pickup-btn, .edit-phone-btn { background-color: #6c757d; border-color: #6c757d; }
.pending-info { font-size: 0.9em; font-style: italic; color: #e65100; margin: 10px 0; padding: 8px; background-color: #fff8e1; border-radius: 4px; }
.ef-status-info { font-style: italic; color: #e65100; }
.request-actions { margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee; display: flex; gap: 10px; }


/* --- UI INDICATORS --- */
.ef-notification-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background-color: #e65100;
    border-radius: 10px;
    vertical-align: middle;
}

@keyframes highlight-update {
    0%, 100% { background-color: inherit; }
    50% { background-color: #f8d7da; }
}

.is-updated {
    animation: highlight-update 2.5s ease-out;
}
.ef-collapsible-card.is-updated-info {
    background-color: #fff8e1; /* Ein sanftes Gelb */
    border-color: #ffecb3;
    transition: background-color 0.5s ease;
}


/* --- WAITING LIST & INVITATIONS --- */
.invitations-list { margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee; }
.invitations-list ul { list-style: none; padding-left: 0; margin: 5px 0 0; }
.invitations-list li { flex-direction: column; align-items: flex-start; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 8px; }
.invitations-list li:last-child { border-bottom: none; margin-bottom: 0; }
.invitation-details { margin-bottom: 8px; width: 100%; }
.invitation-message { font-style: italic; color: #333; background-color: #f9f9f9; padding: 6px 10px; border-radius: 4px; margin-top: 5px; font-size: 0.9em; }
.invitations-list .admin-buttons { align-self: flex-end; }

/* --- MODAL WINDOW --- */
.ef-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.ef-modal-content { background: white; padding: 30px; border-radius: 5px; width: 90%; max-width: 500px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.ef-modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #888; }
.ef-modal-content h3 { margin-top: 0; }
.ef-propose-self { background-color: #f0f8ff; border: 1px solid #bde0ff; border-radius: 4px; padding: 10px; margin-bottom: 20px; display: flex; align-items: center; }
.ef-propose-self input[type="checkbox"] { width: auto; margin-right: 10px; }
.ef-propose-self label { margin: 0; font-weight: bold; cursor: pointer;}

/* --- STOPS EDIT MODAL --- */
.ef-stops-modal #stops-list { list-style: none; padding: 0; margin: 20px 0; }
.ef-stops-modal .stop-item { display: flex; align-items: center; padding: 10px; border: 1px solid #ddd; margin-bottom: -1px; background-color: #fff; }
.ef-stops-modal .stop-item.is-passenger-stop { background-color: #f8f9fa; color: #555; }
.ef-stops-modal .stop-item.dragging { opacity: 0.5; background: #cce5ff; }
.ef-stops-modal .drag-handle {
    cursor: grab;
    color: #aaa;
    margin-right: 15px;
    font-size: 1.2em;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.ef-stops-modal .stop-text { flex-grow: 1; }
.ef-stops-modal .stop-text i { color: #777; }
.ef-stops-modal .delete-stop-btn { background: none; border: none; color: #dc3545; font-size: 1.5em; cursor: pointer; padding: 0 5px; }
.ef-stops-modal .add-stop-container { display: flex; gap: 10px; margin-top: 15px; }
.ef-stops-modal .add-stop-container input { flex-grow: 1; margin: 0; }
.ef-stops-modal .add-stop-container button { flex-shrink: 0; }
.ef-stops-modal .stop-item.is-passenger-stop {
    background-color: #f8f9fa; /* Heller Hintergrund */
    color: #555; /* Etwas dunklere Schrift */
}

.ef-stops-modal .stop-item.is-passenger-stop .stop-text em {
    font-weight: bold; /* Macht den Text "Mitfahrer" auffälliger */
}

/* --- "IMPORTANT LINKS" CARD --- */
.ef-links-card { background: #f9f9f9; border-style: dashed; margin-top: 40px; }
.ef-links-card .ef-card-header { color: #0073aa; font-weight: bold; }
.link-section { margin-bottom: 25px; }
.link-section h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.link-box { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.link-box input[type="text"] { flex-grow: 1; background-color: #f1f1f1; border: 1px solid #ddd; font-size: 0.9em; }
.link-box button { flex-shrink: 0; }
.text-center { text-align: center; }

/* --- MAPS & FORMS --- */
.ef-map-container { width: 100%; height: 300px; background-color: #e9e9e9; margin: 15px 0; border-radius: 4px; border: 1px solid #ddd; }
#waypoints-container { margin-top: 15px; margin-bottom: 5px; }
#waypoints-container label { display: block; font-weight: bold; margin-bottom: 5px; }
.waypoint-input-group { margin-bottom: 5px; }
#add-waypoint-btn { background-color: #6c757d; font-size: 14px; padding: 8px 12px; margin-bottom: 20px; }
.ef-checkbox-wrapper { display: flex; align-items: center; margin-bottom: 20px; background-color: #f8f9fa; padding: 10px; border-radius: 4px; }
.ef-checkbox-wrapper input[type="checkbox"] { width: auto; margin-right: 10px; }
.ef-checkbox-wrapper label { margin: 0; font-size: 0.9em; }
.ef-ride-card-header-info .ef-departure-time { display: flex; align-items: center; color: #0073aa; font-weight: bold; font-size: 0.9em; margin-top: 4px; }

/* --- SPRACHUMSCHALTER --- */
.ef-lang-switcher { text-align: right; margin-bottom: 15px; }
.lang-btn { background-color: #f1f1f1 !important; color: #555 !important; border: 1px solid #ccc !important; padding: 5px 10px !important; font-size: 12px !important; font-weight: bold; cursor: pointer; }
.lang-btn:hover { background-color: #e1e1e1 !important; }
.lang-btn.is-active { background-color: #0073aa !important; color: white !important; border-color: #0073aa !important; }

/* --- MEIN BEREICH --- */
#my-area-container { margin-bottom: 40px; }
.my-area { padding: 20px; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 5px; }
.my-area h2 { margin-top: 0; border-bottom: 2px solid #dee2e6; padding-bottom: 10px; }

/* --- CHAT & ZEITÄNDERUNG --- */
.edit-time-btn { background: none !important; border: none !important; color: #0073aa !important; padding: 0 0 0 8px !important; font-size: 1em !important; cursor: pointer; vertical-align: middle; box-shadow: none; }
.edit-time-btn:hover { color: #005a87 !important; }
.ef-ride-chat { background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; padding: 10px; margin: 15px 0; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; }
.chat-message { max-width: 80%; margin-bottom: 10px; display: flex; flex-direction: column; }
.chat-message .chat-text { padding: 8px 12px; border-radius: 12px; line-height: 1.4; word-wrap: break-word; }
.chat-message .chat-sender { font-size: 0.8em; font-weight: bold; color: #555; margin: 0 8px 3px; }
.chat-message .chat-timestamp { font-size: 0.7em; color: #999; margin: 3px 8px 0; }
.chat-message.is-driver { align-self: flex-end; align-items: flex-end; }
.chat-message.is-driver .chat-text { background-color: #0073aa; color: white; border-bottom-right-radius: 2px; }
.chat-message.is-passenger { align-self: flex-start; align-items: flex-start; }
.chat-message.is-passenger .chat-text { background-color: #e9e9eb; color: #333; border-bottom-left-radius: 2px; }
.chat-message.is-system { align-self: center; text-align: center; margin: 10px 0; }
.chat-message.is-system .chat-text { background-color: #fff8e1; color: #665c3e; font-style: italic; font-size: 0.85em; padding: 4px 10px; }
.chat-message.is-system .chat-sender, .chat-message.is-system .chat-timestamp { display: none; }
.ef-chat-form { display: flex; margin-top: 10px; gap: 10px; }
.ef-chat-form textarea { flex-grow: 1; min-height: 40px; height: 40px; margin: 0; font-size: 14px; resize: vertical; }
.ef-chat-form button { flex-shrink: 0; height: 40px; }

/* --- BEITRETEN-FORMULAR & SHORTCODE --- */
.ef-join-form { max-width: 400px; margin: 40px auto; text-align: center; }
#event-short-code { text-transform: uppercase; font-size: 1.5em; text-align: center; letter-spacing: 4px; }
#event-short-code::placeholder { font-size: 0.6em; letter-spacing: normal; text-transform: none; }
.ef-error-message { color: #dc3545; margin-top: 15px; font-weight: bold; }
.shortcode-display { margin-top: 20px; padding: 15px; background-color: #e9f5ff; border: 1px solid #bde0ff; border-radius: 4px; text-align: center; }
.shortcode-display p { margin: 0 0 10px 0; font-weight: bold; color: #333; }
.shortcode-display .the-code { font-size: 2em; font-weight: bold; letter-spacing: 5px; color: #005a87; background-color: #fff; padding: 5px 15px; border-radius: 4px; display: inline-block; }

/* --- ROUTEN-DETAILS --- */
.ef-route-details { margin: 15px 0; }
.ef-route-details ol { list-style: none; padding-left: 20px; margin: 0; position: relative; }
.ef-route-details ol::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background-color: #ddd; }
.ef-route-details li { position: relative; padding: 5px 0 5px 25px; }
.ef-route-details li::before { content: '●'; position: absolute; left: -2px; top: 5px; color: #0073aa; font-size: 18px; }
.ef-route-details .stop-address { display: block; }
.ef-route-details .stop-label { font-size: 0.85em; color: #777; }
.ef-route-loader { font-style: italic; color: #888; }


/* --- RESPONSIVE DESIGN --- */
@media (min-width: 768px) { .ef-lists-container { grid-template-columns: 1fr 1fr; } }

.add-to-homescreen-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
}
.add-to-homescreen-btn {
    display: none;
    background-color: #0073aa;
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .add-to-homescreen-btn {
        display: block;
    }
}


/* --- DATUM/ZEIT-FELDER --- */
.ef-datetime-group { margin-bottom: 15px; }
.ef-datetime-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.ef-datetime-group div { display: flex; gap: 10px; }
.ef-datetime-group input[type="date"], .ef-datetime-group input[type="time"] { flex: 1; margin-bottom: 0; }
.ef-datetime-container { background-color: #f8f9fa; padding: 15px; margin-bottom: 15px; border: 1px solid #e1e1e1; border-radius: 4px; }
.ef-datetime-container .ef-checkbox-wrapper { background-color: transparent; padding: 0; margin-top: 10px; margin-bottom: 0; }
.edit-time-btn { background: none !important; border: none !important; color: inherit !important; padding: 0 !important; font: inherit !important; cursor: pointer; display: inline-block; margin-left: 5px; box-shadow: none; line-height: 1; }
.ef-departure-time .edit-time-btn { color: #0073aa !important; }
.edit-time-btn.simple { color: #0073aa !important; font-weight: bold; font-size: 0.9em; margin-top: 4px; }
#departure-recalc-indicator, #departure-recalc-indicator-edit { font-size: 0.9em; font-style: italic; color: #0073aa; margin-left: 10px; }