뿯붿<?php਍ഀ
਍ഀ
/**਍ഀ
਍ഀ
 * Appointments Management਍ഀ
਍ഀ
 */਍ഀ
਍ഀ
਍ഀ
਍ഀ
session_start();਍ഀ
਍ഀ
require_once '../config/database.php';਍ഀ
਍ഀ
// E-Mail-Benachrichtigungen entfernt - WhatsApp wird verwendet਍ഀ
਍ഀ
਍ഀ
਍ഀ
// Check if user is logged in਍ഀ
਍ഀ
if (!isset($_SESSION['admin_logged_in']) || !$_SESSION['admin_logged_in']) {਍ഀ
਍ഀ
    header('Location: login.php');਍ഀ
਍ഀ
    exit;਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
$db = new Database();਍ഀ
਍ഀ
$conn = $db->getConnection();਍ഀ
਍ഀ
਍ഀ
਍ഀ
// Get current user data with autohaus information਍ഀ
਍ഀ
$current_user_id = $_SESSION['admin_user_id'] ?? null;਍ഀ
਍ഀ
$current_user_role = 'admin';਍ഀ
਍ഀ
$current_user_autohaus_id = null;਍ഀ
਍ഀ
$current_user_autohaus_name = null;਍ഀ
਍ഀ
$can_switch_autohaus = false;਍ഀ
਍ഀ
਍ഀ
਍ഀ
if ($current_user_id) {਍ഀ
਍ഀ
    $stmt = $conn->prepare("਍ഀ
਍ഀ
        SELECT u.role, u.autohaus_id, u.can_switch_autohaus, a.name as autohaus_name਍ഀ
਍ഀ
        FROM admin_users u਍ഀ
਍ഀ
        LEFT JOIN autohaus a ON u.autohaus_id = a.id਍ഀ
਍ഀ
        WHERE u.id = ?਍ഀ
਍ഀ
    ");਍ഀ
਍ഀ
    $stmt->execute([$current_user_id]);਍ഀ
਍ഀ
    $user_data = $stmt->fetch(PDO::FETCH_ASSOC);਍ഀ
਍ഀ
    $current_user_role = $user_data['role'] ?? 'admin';਍ഀ
਍ഀ
    $current_user_autohaus_id = $user_data['autohaus_id'];਍ഀ
਍ഀ
    $current_user_autohaus_name = $user_data['autohaus_name'];਍ഀ
਍ഀ
    $can_switch_autohaus = $user_data['can_switch_autohaus'] == 1;਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
$action = $_GET['action'] ?? 'list';਍ഀ
਍ഀ
$appointment_id = $_GET['id'] ?? null;਍ഀ
਍ഀ
$event_id = $_GET['event_id'] ?? null;਍ഀ
਍ഀ
਍ഀ
਍ഀ
// Handle form submissions਍ഀ
਍ഀ
if ($_POST) {਍ഀ
਍ഀ
    $postAction = $_POST['action'] ?? $action;਍ഀ
਍ഀ
    $postId = $_POST['id'] ?? $appointment_id;਍ഀ
਍ഀ
    if (($postAction === 'update' || $postAction === 'update_order_number') && $postId) {਍ഀ
਍ഀ
        handleAppointmentUpdate($conn, $postId);਍ഀ
਍ഀ
    } elseif ($postAction === 'delete' && $postId) {਍ഀ
਍ഀ
        handleAppointmentDelete($conn, $postId);਍ഀ
਍ഀ
    } elseif ($postAction === 'copy' && $postId) {਍ഀ
਍ഀ
        handleAppointmentCopy($conn, $postId);਍ഀ
਍ഀ
    } elseif ($postAction === 'bulk_delete') {਍ഀ
਍ഀ
        handleBulkDelete($conn);਍ഀ
਍ഀ
    } elseif ($postAction === 'bulk_tire_order') {਍ഀ
਍ഀ
        handleBulkTireOrder($conn);਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
// Handle delete via GET links਍ഀ
਍ഀ
if ($_SERVER['REQUEST_METHOD'] === 'GET' && $action === 'delete' && $appointment_id) {਍ഀ
਍ഀ
    handleAppointmentDelete($conn, $appointment_id);਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
// Get appointments (filtered by autohaus)਍ഀ
਍ഀ
$appointments = getAppointments($conn, $event_id, $current_user_autohaus_id, $current_user_role, $can_switch_autohaus);਍ഀ
਍ഀ
਍ഀ
਍ഀ
function getAppointments($conn, $event_id = null, $autohaus_id = null, $user_role = 'admin', $can_switch_autohaus = false) {਍ഀ
਍ഀ
    $sql = "਍ഀ
਍ഀ
        SELECT a.*, e.name as event_name, e.event_date, e.max_monteure,਍ഀ
਍ഀ
               slot_stats.booked_count as booked_appointments,਍ഀ
਍ഀ
               slot_stats.total_count as total_appointments,਍ഀ
਍ഀ
               ah.name as autohaus_name਍ഀ
਍ഀ
        FROM appointments a਍ഀ
਍ഀ
        JOIN events e ON a.event_id = e.id਍ഀ
਍ഀ
        LEFT JOIN autohaus ah ON a.autohaus_id = ah.id਍ഀ
਍ഀ
        LEFT JOIN (਍ഀ
਍ഀ
            SELECT ਍ഀ
਍ഀ
                event_id, ਍ഀ
਍ഀ
                slot_date, ਍ഀ
਍ഀ
                slot_time,਍ഀ
਍ഀ
                COUNT(*) as total_count,਍ഀ
਍ഀ
                COUNT(CASE WHEN status IN ('booked', 'vorbereitet', 'completed') THEN 1 END) as booked_count਍ഀ
਍ഀ
            FROM appointments ਍ഀ
਍ഀ
            GROUP BY event_id, slot_date, slot_time਍ഀ
਍ഀ
        ) slot_stats ON a.event_id = slot_stats.event_id ਍ഀ
਍ഀ
                     AND a.slot_date = slot_stats.slot_date ਍ഀ
਍ഀ
                     AND a.slot_time = slot_stats.slot_time਍ഀ
਍ഀ
        WHERE 1=1਍ഀ
਍ഀ
    ";਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    $params = [];਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    if ($event_id) {਍ഀ
਍ഀ
        $sql .= " AND a.event_id = ?";਍ഀ
਍ഀ
        $params[] = $event_id;਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    // If user is not admin or can't switch autohaus, filter by their autohaus਍ഀ
਍ഀ
    if ($user_role !== 'admin' || !$can_switch_autohaus) {਍ഀ
਍ഀ
        if ($autohaus_id) {਍ഀ
਍ഀ
            $sql .= " AND a.autohaus_id = ?";਍ഀ
਍ഀ
            $params[] = $autohaus_id;਍ഀ
਍ഀ
        } else {਍ഀ
਍ഀ
            // User has no autohaus assigned, show no appointments਍ഀ
਍ഀ
            $sql .= " AND a.autohaus_id IS NULL";਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    $sql .= " ORDER BY a.slot_date DESC, a.slot_time DESC";਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    $stmt = $conn->prepare($sql);਍ഀ
਍ഀ
    $stmt->execute($params);਍ഀ
਍ഀ
    return $stmt->fetchAll();਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
function handleAppointmentUpdate($conn, $appointment_id) {਍ഀ
਍ഀ
    global $error_message, $success_message;਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    try {਍ഀ
਍ഀ
        $action = $_POST['action'] ?? 'update';਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Handle different actions਍ഀ
਍ഀ
        if ($action === 'approve') {਍ഀ
਍ഀ
            $status = 'approved';਍ഀ
਍ഀ
            $orderNumber = $_POST['order_number'] ?? null;਍ഀ
਍ഀ
            $adminNotes = $_POST['admin_notes'] ?? null;਍ഀ
਍ഀ
            $approvedBy = $_SESSION['admin_user_id'] ?? 1;਍ഀ
਍ഀ
            $stmt = $conn->prepare("਍ഀ
਍ഀ
                UPDATE appointments ਍ഀ
਍ഀ
                SET status = ?, order_number = ?, admin_notes = ?, ਍ഀ
਍ഀ
                    approved_by = ?, approved_at = NOW()਍ഀ
਍ഀ
                WHERE id = ?਍ഀ
਍ഀ
            ");਍ഀ
਍ഀ
            $stmt->execute([$status, $orderNumber, $adminNotes, $approvedBy, $appointment_id]);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            $_SESSION['success_message'] = 'Terminanfrage genehmigt - WhatsApp-Benachrichtigung wird gesendet';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
        } elseif ($action === 'reject') {਍ഀ
਍ഀ
            $status = 'rejected';਍ഀ
਍ഀ
            $adminNotes = $_POST['admin_notes'] ?? null;਍ഀ
਍ഀ
            $rejectionReason = $_POST['rejection_reason'] ?? 'Nicht verf뿯½gbar';਍ഀ
਍ഀ
            $stmt = $conn->prepare("਍ഀ
਍ഀ
                UPDATE appointments ਍ഀ
਍ഀ
                SET status = ?, admin_notes = ?, rejection_reason = ?, approved_by = ?, approved_at = NOW()਍ഀ
਍ഀ
                WHERE id = ?਍ഀ
਍ഀ
            ");਍ഀ
਍ഀ
            $approvedBy = $_SESSION['admin_user_id'] ?? 1;਍ഀ
਍ഀ
            $stmt->execute([$status, $adminNotes, $rejectionReason, $approvedBy, $appointment_id]);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            $_SESSION['success_message'] = 'Terminanfrage abgelehnt - WhatsApp-Benachrichtigung wird gesendet';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
        } elseif ($action === 'reschedule') {਍ഀ
਍ഀ
            $status = 'rescheduled';਍ഀ
਍ഀ
            $newSlotDate = $_POST['new_slot_date'] ?? null;਍ഀ
਍ഀ
            $newSlotTime = $_POST['new_slot_time'] ?? null;਍ഀ
਍ഀ
            $rescheduleReason = $_POST['reschedule_reason'] ?? 'Termin verschoben';਍ഀ
਍ഀ
            $adminNotes = $_POST['admin_notes'] ?? null;਍ഀ
਍ഀ
            $approvedBy = $_SESSION['admin_user_id'] ?? 1;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if ($newSlotDate && $newSlotTime) {਍ഀ
਍ഀ
                $stmt = $conn->prepare("਍ഀ
਍ഀ
                    UPDATE appointments ਍ഀ
਍ഀ
                    SET status = ?, slot_date = ?, slot_time = ?, reschedule_reason = ?, ਍ഀ
਍ഀ
                        admin_notes = ?, approved_by = ?, approved_at = NOW()਍ഀ
਍ഀ
                    WHERE id = ?਍ഀ
਍ഀ
                ");਍ഀ
਍ഀ
                $stmt->execute([$status, $newSlotDate, $newSlotTime, $rescheduleReason, $adminNotes, $approvedBy, $appointment_id]);਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                $_SESSION['success_message'] = 'Termin verschoben - WhatsApp-Benachrichtigung wird gesendet';਍ഀ
਍ഀ
            } else {਍ഀ
਍ഀ
                $_SESSION['error_message'] = 'Neues Datum und Zeit m뿯½ssen angegeben werden';਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
        } elseif ($action === 'mark_booked') {਍ഀ
਍ഀ
            $status = 'booked';਍ഀ
਍ഀ
            $approvedBy = $_SESSION['admin_user_id'] ?? 1;਍ഀ
਍ഀ
            $stmt = $conn->prepare("਍ഀ
਍ഀ
                UPDATE appointments ਍ഀ
਍ഀ
                SET status = ?, approved_by = ?, approved_at = NOW()਍ഀ
਍ഀ
                WHERE id = ?਍ഀ
਍ഀ
            ");਍ഀ
਍ഀ
            $stmt->execute([$status, $approvedBy, $appointment_id]);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            $_SESSION['success_message'] = 'Termin als gebucht markiert';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
        } elseif ($action === 'update_order_number') {਍ഀ
਍ഀ
            // Nur Auftragsnummer aktualisieren - Status bleibt unver뿯½ndert਍ഀ
਍ഀ
            $orderNumber = $_POST['order_number'] ?? null;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Debug: Log the values਍ഀ
਍ഀ
            error_log("Updating order number: " . $orderNumber . " for appointment: " . $appointment_id);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            $stmt = $conn->prepare("਍ഀ
਍ഀ
                UPDATE appointments ਍ഀ
਍ഀ
                SET order_number = ?਍ഀ
਍ഀ
                WHERE id = ?਍ഀ
਍ഀ
            ");਍ഀ
਍ഀ
            $result = $stmt->execute([$orderNumber, $appointment_id]);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if ($result) {਍ഀ
਍ഀ
                $_SESSION['success_message'] = 'Auftragsnummer aktualisiert';਍ഀ
਍ഀ
                error_log("Order number update successful");਍ഀ
਍ഀ
            } else {਍ഀ
਍ഀ
                $_SESSION['error_message'] = 'Fehler beim Aktualisieren der Auftragsnummer';਍ഀ
਍ഀ
                error_log("Order number update failed");਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
        } else {਍ഀ
਍ഀ
            // Full update with all fields਍ഀ
਍ഀ
            $customerName = $_POST['customer_name'] ?? null;਍ഀ
਍ഀ
            $licensePlate = $_POST['license_plate'] ?? null;਍ഀ
਍ഀ
            $phone = $_POST['phone'] ?? null;਍ഀ
਍ഀ
            $eventId = $_POST['event_id'] ?? null;਍ഀ
਍ഀ
            $slotDate = $_POST['slot_date'] ?? null;਍ഀ
਍ഀ
            $slotTime = $_POST['slot_time'] ?? null;਍ഀ
਍ഀ
            $storageNumber = $_POST['storage_number'] ?? null;਍ഀ
਍ഀ
            $bringsWheels = isset($_POST['brings_wheels']) ? (int)$_POST['brings_wheels'] : 0;਍ഀ
਍ഀ
            $wheelsStorageAction = $_POST['wheels_storage_action'] ?? 'store';਍ഀ
਍ഀ
            $seasonalCheck = $_POST['seasonal_check'] ?? 'none';਍ഀ
਍ഀ
            $hasWheelLock = isset($_POST['has_wheel_lock']) ? (int)$_POST['has_wheel_lock'] : 0;਍ഀ
਍ഀ
            $wiperBlades = isset($_POST['wiper_blades']) ? (int)$_POST['wiper_blades'] : 0;਍ഀ
਍ഀ
            $infoText = $_POST['info_text'] ?? null;਍ഀ
਍ഀ
            $status = $_POST['status'] ?? 'booked';਍ഀ
਍ഀ
            $orderNumber = $_POST['order_number'] ?? null;਍ഀ
਍ഀ
            $adminNotes = $_POST['admin_notes'] ?? null;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Status wird nicht automatisch ge뿯½ndert bei Auftragsnummer-Eingabe਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            $stmt = $conn->prepare("਍ഀ
਍ഀ
                UPDATE appointments ਍ഀ
਍ഀ
                SET event_id = ?, customer_name = ?, license_plate = ?, phone = ?, slot_date = ?, slot_time = ?,਍ഀ
਍ഀ
                    storage_number = ?, brings_wheels = ?, wheels_storage_action = ?, seasonal_check = ?,਍ഀ
਍ഀ
                    has_wheel_lock = ?, wiper_blades = ?, info_text = ?, status = ?, ਍ഀ
਍ഀ
                    order_number = ?, admin_notes = ?਍ഀ
਍ഀ
                WHERE id = ?਍ഀ
਍ഀ
            ");਍ഀ
਍ഀ
            $stmt->execute([਍ഀ
਍ഀ
                $eventId, $customerName, $licensePlate, $phone, $slotDate, $slotTime,਍ഀ
਍ഀ
                $storageNumber, $bringsWheels, $wheelsStorageAction, $seasonalCheck,਍ഀ
਍ഀ
                $hasWheelLock, $wiperBlades, $infoText, $status,਍ഀ
਍ഀ
                $orderNumber, $adminNotes, $appointment_id਍ഀ
਍ഀ
            ]);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            $_SESSION['success_message'] = 'Termin erfolgreich aktualisiert';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        header('Location: appointments.php');਍ഀ
਍ഀ
        exit;਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
    } catch (Exception $e) {਍ഀ
਍ഀ
        $_SESSION['error_message'] = 'Fehler beim Aktualisieren: ' . $e->getMessage();਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
function handleAppointmentDelete($conn, $appointment_id) {਍ഀ
਍ഀ
    try {਍ഀ
਍ഀ
        $stmt = $conn->prepare("DELETE FROM appointments WHERE id = ?");਍ഀ
਍ഀ
        $stmt->execute([$appointment_id]);਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $_SESSION['success_message'] = 'Termin erfolgreich gel뿯½scht';਍ഀ
਍ഀ
        header('Location: appointments.php');਍ഀ
਍ഀ
        exit;਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
    } catch (Exception $e) {਍ഀ
਍ഀ
        $_SESSION['error_message'] = 'Fehler beim L뿯½schen: ' . $e->getMessage();਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
function handleAppointmentCopy($conn, $appointment_id) {਍ഀ
਍ഀ
    try {਍ഀ
਍ഀ
        // Get the original appointment਍ഀ
਍ഀ
        $stmt = $conn->prepare("SELECT * FROM appointments WHERE id = ?");਍ഀ
਍ഀ
        $stmt->execute([$appointment_id]);਍ഀ
਍ഀ
        $originalAppointment = $stmt->fetch();਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        if (!$originalAppointment) {਍ഀ
਍ഀ
            $_SESSION['error_message'] = 'Termin nicht gefunden';਍ഀ
਍ഀ
            header('Location: appointments.php');਍ഀ
਍ഀ
            exit;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Create a copy with modified data਍ഀ
਍ഀ
        $stmt = $conn->prepare("਍ഀ
਍ഀ
            INSERT INTO appointments (਍ഀ
਍ഀ
                event_id, customer_name, license_plate, phone, slot_time, slot_date,਍ഀ
਍ഀ
                storage_number, brings_wheels, wheels_storage_action, seasonal_check,਍ഀ
਍ഀ
                info_text, has_wheel_lock, wiper_blades, status, source, created_at਍ഀ
਍ഀ
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'pending', 'admin_copy', NOW())਍ഀ
਍ഀ
        ");਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $stmt->execute([਍ഀ
਍ഀ
            $originalAppointment['event_id'],਍ഀ
਍ഀ
            $originalAppointment['customer_name'] . ' (Kopie)',਍ഀ
਍ഀ
            $originalAppointment['license_plate'],਍ഀ
਍ഀ
            $originalAppointment['phone'],਍ഀ
਍ഀ
            $originalAppointment['slot_time'],਍ഀ
਍ഀ
            $originalAppointment['slot_date'],਍ഀ
਍ഀ
            $originalAppointment['storage_number'],਍ഀ
਍ഀ
            $originalAppointment['brings_wheels'],਍ഀ
਍ഀ
            $originalAppointment['wheels_storage_action'],਍ഀ
਍ഀ
            $originalAppointment['seasonal_check'],਍ഀ
਍ഀ
            $originalAppointment['info_text'],਍ഀ
਍ഀ
            $originalAppointment['has_wheel_lock'],਍ഀ
਍ഀ
            $originalAppointment['wiper_blades']਍ഀ
਍ഀ
        ]);਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $_SESSION['success_message'] = 'Termin erfolgreich kopiert';਍ഀ
਍ഀ
        header('Location: appointments.php');਍ഀ
਍ഀ
        exit;਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
    } catch (Exception $e) {਍ഀ
਍ഀ
        $_SESSION['error_message'] = 'Fehler beim Kopieren: ' . $e->getMessage();਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
function handleBulkDelete($conn) {਍ഀ
਍ഀ
    // Clear any previous output਍ഀ
਍ഀ
    if (ob_get_level()) {਍ഀ
਍ഀ
        ob_clean();਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    // Set proper headers for JSON response਍ഀ
਍ഀ
    header('Content-Type: application/json');਍ഀ
਍ഀ
    ਍ഀ
਍ഀ
    try {਍ഀ
਍ഀ
        $appointment_ids = $_POST['appointment_ids'] ?? '';਍ഀ
਍ഀ
        $appointments_json = $_POST['appointments'] ?? '';਍ഀ
਍ഀ
        $deletion_reason = $_POST['deletion_reason'] ?? '';਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        if (empty($appointment_ids)) {਍ഀ
਍ഀ
            echo json_encode(['success' => false, 'message' => 'Keine Termine ausgew뿯½hlt']);਍ഀ
਍ഀ
            exit;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $ids = explode(',', $appointment_ids);਍ഀ
਍ഀ
        $appointments = json_decode($appointments_json, true);਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        if (!$appointments) {਍ഀ
਍ഀ
            echo json_encode(['success' => false, 'message' => 'Ung뿯½ltige Termindaten']);਍ഀ
਍ഀ
            exit;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Get current user info਍ഀ
਍ഀ
        $deleted_by_user_id = $_SESSION['admin_user_id'] ?? null;਍ഀ
਍ഀ
        $deleted_by_username = $_SESSION['admin_username'] ?? 'System';਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Start transaction਍ഀ
਍ഀ
        $conn->beginTransaction();਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $deleted_count = 0;਍ഀ
਍ഀ
        $tire_cancelled_count = 0;਍ഀ
਍ഀ
        $tire_cancellation_errors = [];਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        foreach ($appointments as $appointment) {਍ഀ
਍ഀ
            // Check if appointment has tire order that needs cancellation਍ഀ
਍ഀ
            if ($appointment['tire_order_date'] && !$appointment['brings_wheels'] && $appointment['storage_number']) {਍ഀ
਍ഀ
                // Try to cancel tire order਍ഀ
਍ഀ
                $cancellation_result = cancelTireOrder($appointment);਍ഀ
਍ഀ
                if ($cancellation_result['success']) {਍ഀ
਍ഀ
                    $tire_cancelled_count++;਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    $tire_cancellation_errors[] = [਍ഀ
਍ഀ
                        'customer_name' => $appointment['customer_name'],਍ഀ
਍ഀ
                        'storage_number' => $appointment['storage_number'],਍ഀ
਍ഀ
                        'error' => $cancellation_result['error'],਍ഀ
਍ഀ
                        'details' => $cancellation_result['details'] ?? 'Keine weiteren Details verf뿯½gbar'਍ഀ
਍ഀ
                    ];਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Save audit data before deletion਍ഀ
਍ഀ
            saveAuditData($conn, $appointment, $deleted_by_user_id, $deleted_by_username, $deletion_reason, $tire_cancelled_count > 0);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Delete appointment਍ഀ
਍ഀ
            $stmt = $conn->prepare("DELETE FROM appointments WHERE id = ?");਍ഀ
਍ഀ
            $stmt->execute([$appointment['id']]);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if ($stmt->rowCount() > 0) {਍ഀ
਍ഀ
                $deleted_count++;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $conn->commit();਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        echo json_encode([਍ഀ
਍ഀ
            'success' => true, ਍ഀ
਍ഀ
            'deleted_count' => $deleted_count,਍ഀ
਍ഀ
            'tire_cancelled_count' => $tire_cancelled_count,਍ഀ
਍ഀ
            'tire_cancellation_errors' => $tire_cancellation_errors,਍ഀ
਍ഀ
            'message' => "$deleted_count Termine erfolgreich gel뿯½scht"਍ഀ
਍ഀ
        ]);਍ഀ
਍ഀ
        exit;਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
    } catch (Exception $e) {਍ഀ
਍ഀ
        $conn->rollback();਍ഀ
਍ഀ
        echo json_encode(['success' => false, 'message' => 'Fehler beim L뿯½schen: ' . $e->getMessage()]);਍ഀ
਍ഀ
        exit;਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
function cancelTireOrder($appointment) {਍ഀ
਍ഀ
    try {਍ഀ
਍ഀ
        // Debug: Logge die Anfrage਍ഀ
਍ഀ
        error_log("DEBUG: Stornierungs-Anfrage f뿯½r Einlagerungsnummer: " . $appointment['storage_number']);਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Direkter Aufruf der API-Klasse statt HTTP-Request਍ഀ
਍ഀ
        require_once '../api/tire_order.php';਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $tireOrderService = new TireOrderService();਍ഀ
਍ഀ
        $result = $tireOrderService->cancelTireOrder(਍ഀ
਍ഀ
            $appointment['storage_number'],਍ഀ
਍ഀ
            $appointment['event_date'],਍ഀ
਍ഀ
            $appointment['event_name']਍ഀ
਍ഀ
        );਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Debug: Logge das Ergebnis਍ഀ
਍ഀ
        error_log("DEBUG: Stornierungs-Ergebnis: " . json_encode($result));਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        return $result;਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
    } catch (Exception $e) {਍ഀ
਍ഀ
        error_log("DEBUG: Exception in cancelTireOrder: " . $e->getMessage());਍ഀ
਍ഀ
        return [਍ഀ
਍ഀ
            'success' => false, ਍ഀ
਍ഀ
            'error' => 'Fehler bei der Stornierung: ' . $e->getMessage(),਍ഀ
਍ഀ
            'details' => 'Unerwarteter Fehler in der cancelTireOrder Funktion: ' . $e->getFile() . ' Zeile ' . $e->getLine()਍ഀ
਍ഀ
        ];਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
function saveAuditData($conn, $appointment, $deleted_by_user_id, $deleted_by_username, $deletion_reason, $tire_cancelled) {਍ഀ
਍ഀ
    try {਍ഀ
਍ഀ
        $stmt = $conn->prepare("਍ഀ
਍ഀ
            INSERT INTO deleted_appointments_audit (਍ഀ
਍ഀ
                original_appointment_id, customer_name, license_plate, phone, event_name,਍ഀ
਍ഀ
                slot_date, slot_time, storage_number, tire_order_date, tire_cancelled,਍ഀ
਍ഀ
                deleted_by_user_id, deleted_by_username, deletion_reason, admin_notes,਍ഀ
਍ഀ
                created_at, updated_at਍ഀ
਍ഀ
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)਍ഀ
਍ഀ
        ");਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $stmt->execute([਍ഀ
਍ഀ
            $appointment['id'],਍ഀ
਍ഀ
            $appointment['customer_name'],਍ഀ
਍ഀ
            $appointment['license_plate'],਍ഀ
਍ഀ
            $appointment['phone'],਍ഀ
਍ഀ
            $appointment['event_name'],਍ഀ
਍ഀ
            $appointment['slot_date'],਍ഀ
਍ഀ
            $appointment['slot_time'],਍ഀ
਍ഀ
            $appointment['storage_number'],਍ഀ
਍ഀ
            $appointment['tire_order_date'],਍ഀ
਍ഀ
            $tire_cancelled ? 1 : 0,਍ഀ
਍ഀ
            $deleted_by_user_id,਍ഀ
਍ഀ
            $deleted_by_username,਍ഀ
਍ഀ
            $deletion_reason,਍ഀ
਍ഀ
            $appointment['admin_notes'],਍ഀ
਍ഀ
            $appointment['created_at'] ?? date('Y-m-d H:i:s'),਍ഀ
਍ഀ
            date('Y-m-d H:i:s')਍ഀ
਍ഀ
        ]);਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
    } catch (Exception $e) {਍ഀ
਍ഀ
        error_log("Fehler beim Speichern der Audit-Daten: " . $e->getMessage());਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
function handleBulkTireOrder($conn) {਍ഀ
਍ഀ
    try {਍ഀ
਍ഀ
        $appointments_json = $_POST['appointments'] ?? '';਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        if (empty($appointments_json)) {਍ഀ
਍ഀ
            echo json_encode(['success' => false, 'message' => 'Keine Termine ausgew뿯½hlt']);਍ഀ
਍ഀ
            return;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        $appointments = json_decode($appointments_json, true);਍ഀ
਍ഀ
        $ordered_count = 0;਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        foreach ($appointments as $appointment) {਍ഀ
਍ഀ
            // Check if appointment is eligible for tire order਍ഀ
਍ഀ
            if (!$appointment['brings_wheels'] && !empty($appointment['storage_number'])) {਍ഀ
਍ഀ
                // Update appointment with tire order date਍ഀ
਍ഀ
                $stmt = $conn->prepare("UPDATE appointments SET tire_order_date = NOW() WHERE id = ?");਍ഀ
਍ഀ
                $stmt->execute([$appointment['id']]);਍ഀ
਍ഀ
                $ordered_count++;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        echo json_encode([਍ഀ
਍ഀ
            'success' => true, ਍ഀ
਍ഀ
            'ordered_count' => $ordered_count,਍ഀ
਍ഀ
            'message' => "Reifenbestellung f뿯½r $ordered_count Termine erstellt"਍ഀ
਍ഀ
        ]);਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
    } catch (Exception $e) {਍ഀ
਍ഀ
        echo json_encode(['success' => false, 'message' => 'Fehler bei der Reifenbestellung: ' . $e->getMessage()]);਍ഀ
਍ഀ
    }਍ഀ
਍ഀ
}਍ഀ
਍ഀ
਍ഀ
਍ഀ
਍ഀ
਍ഀ
// Get events for filter਍ഀ
਍ഀ
$events = getEvents($conn);਍ഀ
਍ഀ
਍ഀ
਍ഀ
function getEvents($conn) {਍ഀ
਍ഀ
    $stmt = $conn->prepare("SELECT id, name, event_date FROM events ORDER BY event_date DESC");਍ഀ
਍ഀ
    $stmt->execute();਍ഀ
਍ഀ
    return $stmt->fetchAll();਍ഀ
਍ഀ
}਍ഀ
਍ഀ
?>਍ഀ
਍ഀ
਍ഀ
਍ഀ
<!DOCTYPE html>਍ഀ
਍ഀ
<html lang="de">਍ഀ
਍ഀ
<head>਍ഀ
਍ഀ
    <meta charset="UTF-8">਍ഀ
਍ഀ
    <meta name="viewport" content="width=device-width, initial-scale=1.0">਍ഀ
਍ഀ
    <title>Termine verwalten - Boxenstop Admin</title>਍ഀ
਍ഀ
    <link rel="stylesheet" href="../assets/css/style.css">਍ഀ
਍ഀ
    <link rel="stylesheet" href="../assets/css/volvo-theme.css">਍ഀ
਍ഀ
    <link rel="stylesheet" href="assets/css/admin.css">਍ഀ
਍ഀ
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">਍ഀ
਍ഀ
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">਍ഀ
਍ഀ
    <style>਍ഀ
        .tire-status-modal .loading-container {਍ഀ
            text-align: center;਍ഀ
            padding: 2rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-status-modal .loading-spinner {਍ഀ
            width: 40px;਍ഀ
            height: 40px;਍ഀ
            border: 4px solid #f3f3f3;਍ഀ
            border-top: 4px solid #007bff;਍ഀ
            border-radius: 50%;਍ഀ
            animation: spin 1s linear infinite;਍ഀ
            margin: 0 auto 1rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-status-modal .loading-text {਍ഀ
            font-size: 1.1rem;਍ഀ
            color: #666;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-progress {਍ഀ
            width: 100%;਍ഀ
            height: 6px;਍ഀ
            background: #e9ecef;਍ഀ
            border-radius: 3px;਍ഀ
            overflow: hidden;਍ഀ
            margin-top: 20px;਍ഀ
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);਍ഀ
        }਍ഀ
        ਍ഀ
        .progress-bar {਍ഀ
            height: 100%;਍ഀ
            background: linear-gradient(135deg, #007bff, #28a745);਍ഀ
            border-radius: 3px;਍ഀ
            transition: width 0.5s ease;਍ഀ
            box-shadow: 0 2px 4px rgba(0,123,255,0.3);਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-header {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 16px;਍ഀ
            margin-bottom: 24px;਍ഀ
            padding-bottom: 16px;਍ഀ
            border-bottom: 2px solid #e9ecef;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-icon {਍ഀ
            font-size: 2.5rem;਍ഀ
            animation: pulse 2s infinite;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-title {਍ഀ
            font-size: 1.4rem;਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
            background: linear-gradient(135deg, #007bff, #28a745);਍ഀ
            -webkit-background-clip: text;਍ഀ
            -webkit-text-fill-color: transparent;਍ഀ
            background-clip: text;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-content {਍ഀ
            padding: 0 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-text {਍ഀ
            font-size: 1.2rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #2c3e50;਍ഀ
            margin-bottom: 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-subtext {਍ഀ
            font-size: 0.95rem;਍ഀ
            color: #6c757d;਍ഀ
            margin-bottom: 8px;਍ഀ
            line-height: 1.4;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-details {਍ഀ
            font-size: 0.85rem;਍ഀ
            color: #495057;਍ഀ
            margin-bottom: 16px;਍ഀ
            padding: 8px 12px;਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 6px;਍ഀ
            border-left: 3px solid #007bff;਍ഀ
            font-style: italic;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-stats {਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            margin-top: 16px;਍ഀ
            padding: 12px;਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 8px;਍ഀ
            border: 1px solid #e9ecef;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-stats .stat-item {਍ഀ
            flex: 1;਍ഀ
            text-align: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .stat-item {਍ഀ
            display: flex;਍ഀ
            flex-direction: column;਍ഀ
            align-items: center;਍ഀ
            gap: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .stat-label {਍ഀ
            font-size: 0.8rem;਍ഀ
            color: #6c757d;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .stat-value {਍ഀ
            font-size: 1rem;਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        @keyframes pulse {਍ഀ
            0% { transform: scale(1); opacity: 1; }਍ഀ
            50% { transform: scale(1.1); opacity: 0.8; }਍ഀ
            100% { transform: scale(1); opacity: 1; }਍ഀ
        }਍ഀ
        ਍ഀ
        .status-success {਍ഀ
            color: #28a745 !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-warning {਍ഀ
            color: #ffc107 !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-error {਍ഀ
            color: #dc3545 !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Profiltiefe-Farben korrekt definieren */਍ഀ
        .profiltiefe-segment.excellent {਍ഀ
            background: linear-gradient(90deg, #28a745, #20c997);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.good {਍ഀ
            background: linear-gradient(90deg, #007bff, #6f42c1);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.warning {਍ഀ
            background: linear-gradient(90deg, #ffc107, #fd7e14);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.critical {਍ഀ
            background: linear-gradient(90deg, #dc3545, #e83e8c);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.danger {਍ഀ
            background: linear-gradient(90deg, #6c757d, #343a40);਍ഀ
        }਍ഀ
        ਍ഀ
        .status-excellent {਍ഀ
            color: #28a745 !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-good {਍ഀ
            color: #007bff !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-warning {਍ഀ
            color: #ffc107 !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-critical {਍ഀ
            color: #dc3545 !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-danger {਍ഀ
            color: #6c757d !important;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-value {਍ഀ
            font-weight: 600;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-section {਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);਍ഀ
            border-radius: 12px;਍ഀ
            padding: 24px;਍ഀ
            margin-bottom: 24px;਍ഀ
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);਍ഀ
            border-left: 4px solid #007bff;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-section-title {਍ഀ
            color: #2c3e50;਍ഀ
            font-size: 1.4rem;਍ഀ
            font-weight: 700;਍ഀ
            margin-bottom: 20px;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 12px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-section-title i {਍ഀ
            color: #007bff;਍ഀ
            font-size: 1.2rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));਍ഀ
            gap: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item {਍ഀ
            background: white;਍ഀ
            border-radius: 8px;਍ഀ
            padding: 16px;਍ഀ
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);਍ഀ
            border: 1px solid #e9ecef;਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item:hover {਍ഀ
            transform: translateY(-2px);਍ഀ
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);਍ഀ
        }਍ഀ
        ਍ഀ
        .info-label {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 8px;਍ഀ
            font-size: 0.9rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #6c757d;਍ഀ
            margin-bottom: 8px;਍ഀ
            text-transform: uppercase;਍ഀ
            letter-spacing: 0.5px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-label i {਍ഀ
            color: #007bff;਍ഀ
            font-size: 0.8rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-value {਍ഀ
            font-size: 1.1rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-value.highlight {਍ഀ
            background: linear-gradient(135deg, #007bff, #0056b3);਍ഀ
            -webkit-background-clip: text;਍ഀ
            -webkit-text-fill-color: transparent;਍ഀ
            background-clip: text;਍ഀ
            font-size: 1.2rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-overview-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));਍ഀ
            gap: 24px;਍ഀ
            margin: 32px 0;਍ഀ
            padding: 0 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-card {਍ഀ
            background: white;਍ഀ
            border-radius: 16px;਍ഀ
            padding: 24px;਍ഀ
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);਍ഀ
            border: 1px solid #e9ecef;਍ഀ
            transition: all 0.4s ease;਍ഀ
            position: relative;਍ഀ
            overflow: hidden;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-card::before {਍ഀ
            content: '';਍ഀ
            position: absolute;਍ഀ
            top: 0;਍ഀ
            left: 0;਍ഀ
            right: 0;਍ഀ
            height: 4px;਍ഀ
            background: linear-gradient(135deg, #007bff, #28a745);਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-card:hover {਍ഀ
            transform: translateY(-6px);਍ഀ
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-card-header {਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            align-items: center;਍ഀ
            margin-bottom: 16px;਍ഀ
            padding-bottom: 12px;਍ഀ
            border-bottom: 2px solid #e9ecef;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-position {਍ഀ
            background: linear-gradient(135deg, #007bff, #0056b3);਍ഀ
            color: white;਍ഀ
            padding: 8px 16px;਍ഀ
            border-radius: 20px;਍ഀ
            font-weight: 700;਍ഀ
            font-size: 1.1rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-condition {਍ഀ
            padding: 6px 12px;਍ഀ
            border-radius: 16px;਍ഀ
            font-size: 0.9rem;਍ഀ
            font-weight: 600;਍ഀ
            text-transform: uppercase;਍ഀ
            letter-spacing: 0.5px;਍ഀ
        }਍ഀ
        ਍ഀ
        .condition-sehr-gut {਍ഀ
            background: #d4edda;਍ഀ
            color: #155724;਍ഀ
        }਍ഀ
        ਍ഀ
        .condition-gut {਍ഀ
            background: #d1ecf1;਍ഀ
            color: #0c5460;਍ഀ
        }਍ഀ
        ਍ഀ
        .condition-befriedigend {਍ഀ
            background: #fff3cd;਍ഀ
            color: #856404;਍ഀ
        }਍ഀ
        ਍ഀ
        .condition-schlecht {਍ഀ
            background: #f8d7da;਍ഀ
            color: #721c24;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-details {਍ഀ
            margin-bottom: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-item {਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            align-items: center;਍ഀ
            padding: 8px 0;਍ഀ
            border-bottom: 1px solid #f8f9fa;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-item:last-child {਍ഀ
            border-bottom: none;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-label {਍ഀ
            font-size: 0.9rem;਍ഀ
            color: #6c757d;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-value {਍ഀ
            font-weight: 600;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-value.brand {਍ഀ
            color: #007bff;਍ഀ
            font-weight: 700;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-value.model {਍ഀ
            color: #28a745;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-visualization {਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);਍ഀ
            border-radius: 12px;਍ഀ
            padding: 20px;਍ഀ
            margin-top: 16px;਍ഀ
            border: 1px solid #dee2e6;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-title {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 8px;਍ഀ
            font-size: 1.1rem;਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
            margin-bottom: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-title i {਍ഀ
            color: #007bff;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-chart {਍ഀ
            margin-bottom: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-bar-container {਍ഀ
            margin-bottom: 12px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-bar {਍ഀ
            width: 100%;਍ഀ
            height: 24px;਍ഀ
            background: #e9ecef;਍ഀ
            border-radius: 12px;਍ഀ
            overflow: hidden;਍ഀ
            position: relative;਍ഀ
            margin-bottom: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment {਍ഀ
            height: 100%;਍ഀ
            border-radius: 12px;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: space-between;਍ഀ
            padding: 0 12px;਍ഀ
            transition: width 0.3s ease;਍ഀ
            position: relative;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.excellent {਍ഀ
            background: linear-gradient(135deg, #28a745, #20c997);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.good {਍ഀ
            background: linear-gradient(135deg, #17a2b8, #6f42c1);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.warning {਍ഀ
            background: linear-gradient(135deg, #ffc107, #fd7e14);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.critical {਍ഀ
            background: linear-gradient(135deg, #dc3545, #e83e8c);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.danger {਍ഀ
            background: linear-gradient(135deg, #6c757d, #495057);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-value {਍ഀ
            color: white;਍ഀ
            font-weight: 700;਍ഀ
            font-size: 0.9rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-label {਍ഀ
            color: white;਍ഀ
            font-weight: 600;਍ഀ
            font-size: 0.8rem;਍ഀ
            background: rgba(255, 255, 255, 0.2);਍ഀ
            padding: 2px 6px;਍ഀ
            border-radius: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-status {਍ഀ
            text-align: right;਍ഀ
            font-size: 0.8rem;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-excellent {਍ഀ
            color: #28a745;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-good {਍ഀ
            color: #17a2b8;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-warning {਍ഀ
            color: #ffc107;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-critical {਍ഀ
            color: #dc3545;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-danger {਍ഀ
            color: #6c757d;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-summary {਍ഀ
            background: white;਍ഀ
            border-radius: 8px;਍ഀ
            padding: 12px;਍ഀ
            margin-bottom: 16px;਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            border: 1px solid #dee2e6;਍ഀ
        }਍ഀ
        ਍ഀ
        .summary-item {਍ഀ
            display: flex;਍ഀ
            flex-direction: column;਍ഀ
            align-items: center;਍ഀ
            gap: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .summary-label {਍ഀ
            font-size: 0.8rem;਍ഀ
            color: #6c757d;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .summary-value {਍ഀ
            font-size: 1rem;਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-legend {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));਍ഀ
            gap: 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-item {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 6px;਍ഀ
            font-size: 0.8rem;਍ഀ
            color: #6c757d;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color {਍ഀ
            width: 12px;਍ഀ
            height: 12px;਍ഀ
            border-radius: 50%;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.excellent {਍ഀ
            background: linear-gradient(135deg, #28a745, #20c997);਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.good {਍ഀ
            background: linear-gradient(135deg, #17a2b8, #6f42c1);਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.warning {਍ഀ
            background: linear-gradient(135deg, #ffc107, #fd7e14);਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.critical {਍ഀ
            background: linear-gradient(135deg, #dc3545, #e83e8c);਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.danger {਍ഀ
            background: linear-gradient(135deg, #6c757d, #495057);਍ഀ
        }਍ഀ
        ਍ഀ
        /* Action Buttons */਍ഀ
        .action-buttons {਍ഀ
            margin-top: 1rem;਍ഀ
            display: flex;਍ഀ
            gap: 0.5rem;਍ഀ
            flex-wrap: wrap;਍ഀ
        }਍ഀ
        ਍ഀ
        .action-buttons .btn {਍ഀ
            display: inline-flex;਍ഀ
            align-items: center;਍ഀ
            gap: 0.5rem;਍ഀ
            padding: 0.75rem 1.5rem;਍ഀ
            border-radius: 8px;਍ഀ
            font-weight: 600;਍ഀ
            text-decoration: none;਍ഀ
            transition: all 0.3s ease;਍ഀ
            border: none;਍ഀ
            cursor: pointer;਍ഀ
        }਍ഀ
        ਍ഀ
        .action-buttons .btn-primary {਍ഀ
            background: linear-gradient(135deg, #007bff, #0056b3);਍ഀ
            color: white;਍ഀ
        }਍ഀ
        ਍ഀ
        .action-buttons .btn-primary:hover {਍ഀ
            background: linear-gradient(135deg, #0056b3, #004085);਍ഀ
            transform: translateY(-2px);਍ഀ
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-status-modal .info-value.warning {਍ഀ
            color: #ff6b35;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        @keyframes spin {਍ഀ
            0% { transform: rotate(0deg); }਍ഀ
            100% { transform: rotate(360deg); }਍ഀ
        }਍ഀ
    </style>਍ഀ
਍ഀ
</head>਍ഀ
਍ഀ
<body class="admin-body">਍ഀ
਍ഀ
    <div class="admin-container">਍ഀ
਍ഀ
        <!-- Sidebar -->਍ഀ
਍ഀ
        <aside class="admin-sidebar">਍ഀ
਍ഀ
            <div class="sidebar-header">਍ഀ
਍ഀ
                <img src="../assets/images/volvo-logo.png" alt="Volvo" class="logo-img">਍ഀ
਍ഀ
                <h2>Boxenstop Admin</h2>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            <nav class="sidebar-nav">਍ഀ
਍ഀ
                <a href="index.php" class="nav-item">਍ഀ
਍ഀ
                    <i class="fas fa-tachometer-alt"></i>਍ഀ
਍ഀ
                    <span>Dashboard</span>਍ഀ
਍ഀ
                </a>਍ഀ
਍ഀ
                <a href="events.php" class="nav-item">਍ഀ
਍ഀ
                    <i class="fas fa-calendar-alt"></i>਍ഀ
਍ഀ
                    <span>Events</span>਍ഀ
਍ഀ
                </a>਍ഀ
਍ഀ
                <a href="appointments.php" class="nav-item active">਍ഀ
਍ഀ
                    <i class="fas fa-calendar-check"></i>਍ഀ
਍ഀ
                    <span>Termine</span>਍ഀ
਍ഀ
                </a>਍ഀ
਍ഀ
                <a href="storage.php" class="nav-item">਍ഀ
਍ഀ
                    <i class="fas fa-warehouse"></i>਍ഀ
਍ഀ
                    <span>Einlagerungen</span>਍ഀ
਍ഀ
                </a>਍ഀ
਍ഀ
                <a href="settings.php" class="nav-item">਍ഀ
਍ഀ
                    <i class="fas fa-cog"></i>਍ഀ
਍ഀ
                    <span>Einstellungen</span>਍ഀ
਍ഀ
                </a>਍ഀ
਍ഀ
                <a href="logout.php" class="nav-item logout">਍ഀ
਍ഀ
                    <i class="fas fa-sign-out-alt"></i>਍ഀ
਍ഀ
                    <span>Abmelden</span>਍ഀ
਍ഀ
                </a>਍ഀ
਍ഀ
            </nav>਍ഀ
਍ഀ
        </aside>਍ഀ
਍ഀ
਍ഀ
਍ഀ
        <!-- Main Content -->਍ഀ
਍ഀ
        <main class="admin-main">਍ഀ
਍ഀ
            <!-- Header -->਍ഀ
਍ഀ
            <header class="admin-header">਍ഀ
਍ഀ
                <div class="header-left">਍ഀ
਍ഀ
                    <h1>Termine verwalten</h1>਍ഀ
਍ഀ
                    <p>Verwalten Sie alle Boxenstop Termine</p>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                <div class="header-right">਍ഀ
਍ഀ
                    <div class="header-actions">਍ഀ
਍ഀ
                        <select id="event-filter" class="form-select">਍ഀ
਍ഀ
                            <option value="">Alle Events</option>਍ഀ
਍ഀ
                            <?php foreach ($events as $event): ?>਍ഀ
਍ഀ
                                <option value="<?php echo $event['id']; ?>" ਍ഀ
਍ഀ
                                        <?php echo $event_id == $event['id'] ? 'selected' : ''; ?>>਍ഀ
਍ഀ
                                    <?php echo htmlspecialchars($event['name']); ?> ਍ഀ
਍ഀ
                                    (<?php echo date('d.m.Y', strtotime($event['event_date'])); ?>)਍ഀ
਍ഀ
                                </option>਍ഀ
਍ഀ
                            <?php endforeach; ?>਍ഀ
਍ഀ
                        </select>਍ഀ
਍ഀ
                        <button class="btn btn-lg btn-primary" onclick="exportAppointments()">਍ഀ
਍ഀ
                            <i class="fas fa-download"></i>਍ഀ
਍ഀ
                            <span>Exportieren</span>਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            </header>਍ഀ
਍ഀ
਍ഀ
਍ഀ
            <!-- Messages -->਍ഀ
਍ഀ
            <?php if (isset($_SESSION['success_message'])): ?>਍ഀ
਍ഀ
                <div class="alert alert-success">਍ഀ
਍ഀ
                    <i class="fas fa-check-circle"></i>਍ഀ
਍ഀ
                    <?php echo $_SESSION['success_message']; unset($_SESSION['success_message']); ?>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            <?php endif; ?>਍ഀ
਍ഀ
਍ഀ
਍ഀ
            <?php if (isset($_SESSION['error_message'])): ?>਍ഀ
਍ഀ
                <div class="alert alert-error">਍ഀ
਍ഀ
                    <i class="fas fa-exclamation-circle"></i>਍ഀ
਍ഀ
                    <?php echo $_SESSION['error_message']; unset($_SESSION['error_message']); ?>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            <?php endif; ?>਍ഀ
਍ഀ
਍ഀ
਍ഀ
            <!-- Appointments List -->਍ഀ
਍ഀ
            <div class="content-card">਍ഀ
਍ഀ
                <div class="card-header">਍ഀ
਍ഀ
                    <h3>Alle Termine</h3>਍ഀ
਍ഀ
                    <div class="header-actions">਍ഀ
਍ഀ
                        <span class="appointment-count">਍ഀ
਍ഀ
                            <?php echo count($appointments); ?> Termine਍ഀ
਍ഀ
                        </span>਍ഀ
਍ഀ
                        <?php ਍ഀ
਍ഀ
                        $pendingCount = count(array_filter($appointments, function($apt) { return $apt['status'] === 'pending'; }));਍ഀ
਍ഀ
                        $bookedCount = count(array_filter($appointments, function($apt) { return $apt['status'] === 'booked'; }));਍ഀ
਍ഀ
                        if ($pendingCount > 0): ?>਍ഀ
਍ഀ
                            <span class="pending-count">਍ഀ
਍ഀ
                                <i class="fas fa-exclamation-triangle"></i>਍ഀ
਍ഀ
                                <?php echo $pendingCount; ?> wartend਍ഀ
਍ഀ
                            </span>਍ഀ
਍ഀ
                        <?php endif; ?>਍ഀ
਍ഀ
                        <?php if ($bookedCount > 0): ?>਍ഀ
਍ഀ
                            <span class="booked-count">਍ഀ
਍ഀ
                                <i class="fas fa-calendar-check"></i>਍ഀ
਍ഀ
                                <?php echo $bookedCount; ?> gebucht਍ഀ
਍ഀ
                            </span>਍ഀ
਍ഀ
                        <?php endif; ?>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                <div class="card-content">਍ഀ
਍ഀ
                    <?php if (empty($appointments)): ?>਍ഀ
਍ഀ
                        <div class="empty-state">਍ഀ
਍ഀ
                            <i class="fas fa-calendar-times"></i>਍ഀ
਍ഀ
                            <p>Keine Termine vorhanden</p>਍ഀ
਍ഀ
                            <a href="../index.php" class="btn btn-primary">Termin buchen</a>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    <?php else: ?>਍ഀ
਍ഀ
                        <!-- Bulk Actions Toolbar -->਍ഀ
਍ഀ
                        <div id="bulk-actions-toolbar" class="bulk-actions-toolbar" style="display: none;">਍ഀ
਍ഀ
                            <div class="bulk-actions-content">਍ഀ
਍ഀ
                                <span class="selected-count">਍ഀ
਍ഀ
                                    <i class="fas fa-check-square"></i>਍ഀ
਍ഀ
                                    <span id="selected-count-text">0 Termine ausgew뿯½hlt</span>਍ഀ
਍ഀ
                                </span>਍ഀ
਍ഀ
                                <div class="bulk-actions-buttons">਍ഀ
਍ഀ
                                    <button class="btn btn-sm btn-danger" onclick="bulkDeleteAppointments()" title="Markierte Termine l뿯½schen">਍ഀ
਍ഀ
                                        <i class="fas fa-trash"></i>਍ഀ
਍ഀ
                                        <span>L뿯½schen</span>਍ഀ
਍ഀ
                                    </button>਍ഀ
਍ഀ
                                    <button class="btn btn-sm btn-primary" onclick="bulkOrderTires()" title="Reifen f뿯½r markierte Termine bestellen">਍ഀ
਍ഀ
                                        <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                                        <span>Reifen bestellen</span>਍ഀ
਍ഀ
                                    </button>਍ഀ
਍ഀ
                                    <button class="btn btn-sm btn-success" onclick="bulkExportAppointments()" title="Markierte Termine exportieren">਍ഀ
਍ഀ
                                        <i class="fas fa-download"></i>਍ഀ
਍ഀ
                                        <span>Exportieren</span>਍ഀ
਍ഀ
                                    </button>਍ഀ
਍ഀ
                        <button class="btn btn-sm btn-info" onclick="bulkPrintStorageLabels()" title="Einlagerungsetiketten drucken">਍ഀ
਍ഀ
                            <i class="fas fa-print"></i>਍ഀ
਍ഀ
                            <span>Etiketten drucken</span>਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                        <a href="audit_log.php" class="btn btn-sm btn-warning" title="Audit Log - Gel뿯½schte Termine anzeigen">਍ഀ
਍ഀ
                            <i class="fas fa-history"></i>਍ഀ
਍ഀ
                            <span>Audit Log</span>਍ഀ
਍ഀ
                        </a>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
                        <div class="appointments-table">਍ഀ
਍ഀ
                            <table>਍ഀ
਍ഀ
                                <thead>਍ഀ
਍ഀ
                                    <tr>਍ഀ
਍ഀ
                                        <th width="40">਍ഀ
਍ഀ
                                            <input type="checkbox" id="select-all-checkbox" onchange="toggleAllAppointments(this)">਍ഀ
਍ഀ
                                        </th>਍ഀ
਍ഀ
                                        <th data-sort="customer_name">Kunde</th>਍ഀ
਍ഀ
                                        <th data-sort="license_plate">Kennzeichen</th>਍ഀ
਍ഀ
                                        <th data-sort="event_name">Event</th>਍ഀ
਍ഀ
                                        <th data-sort="slot_date">Datum</th>਍ഀ
਍ഀ
                                        <th data-sort="slot_time">Zeit</th>਍ഀ
਍ഀ
                                        <th data-sort="phone">Telefon</th>਍ഀ
਍ഀ
                                        <th>Services</th>਍ഀ
਍ഀ
                                        <th>Auslastung</th>਍ഀ
਍ഀ
                                        <th data-sort="status">Status</th>਍ഀ
਍ഀ
                                        <th>Aktionen</th>਍ഀ
਍ഀ
                                    </tr>਍ഀ
਍ഀ
                                </thead>਍ഀ
਍ഀ
                                <tbody>਍ഀ
਍ഀ
                                    <?php foreach ($appointments as $appointment): ?>਍ഀ
਍ഀ
                                        <tr class="<?php echo $appointment['status'] === 'pending' ? 'pending-row' : ''; ?>" data-appointment-id="<?php echo $appointment['id']; ?>" data-autohaus-id="<?php echo $appointment['autohaus_id'] ?? ''; ?>">਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <input type="checkbox" class="appointment-checkbox" value="<?php echo $appointment['id']; ?>" onchange="updateBulkActions()">਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <strong><?php echo htmlspecialchars($appointment['customer_name']); ?></strong>਍ഀ
਍ഀ
                                                <?php if ($appointment['info_text']): ?>਍ഀ
਍ഀ
                                                    <br><small class="text-muted"><?php echo htmlspecialchars(substr($appointment['info_text'], 0, 50)); ?>...</small>਍ഀ
਍ഀ
                                                <?php endif; ?>਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                            <td><?php echo htmlspecialchars($appointment['license_plate']); ?></td>਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <strong><?php echo htmlspecialchars($appointment['event_name']); ?></strong>਍ഀ
਍ഀ
                                                <br><small class="text-muted"><?php echo date('d.m.Y', strtotime($appointment['event_date'])); ?></small>਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                            <td><?php echo date('d.m.Y', strtotime($appointment['slot_date'])); ?></td>਍ഀ
਍ഀ
                                            <td><?php echo date('H:i', strtotime($appointment['slot_time'])); ?></td>਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <a href="tel:<?php echo htmlspecialchars($appointment['phone']); ?>" class="phone-link">਍ഀ
਍ഀ
                                                    <?php echo htmlspecialchars($appointment['phone']); ?>਍ഀ
਍ഀ
                                                </a>਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <div class="services-info">਍ഀ
਍ഀ
                                                    <?php if ($appointment['wiper_blades']): ?>਍ഀ
਍ഀ
                                                        <span class="service-badge service-wiper">਍ഀ
਍ഀ
                                                            <i class="fas fa-wind"></i> Scheibenwischer਍ഀ
਍ഀ
                                                        </span>਍ഀ
਍ഀ
                                                    <?php endif; ?>਍ഀ
਍ഀ
                                                    <?php if ($appointment['seasonal_check'] !== 'none'): ?>਍ഀ
਍ഀ
                                                        <span class="service-badge service-check">਍ഀ
਍ഀ
                                                            <i class="fas fa-tools"></i> ਍ഀ
਍ഀ
                                                            <?php echo $appointment['seasonal_check'] === 'spring' ? 'Fr뿯½hjahres' : 'Winter'; ?>਍ഀ
਍ഀ
                                                        </span>਍ഀ
਍ഀ
                                                    <?php endif; ?>਍ഀ
਍ഀ
                                                    <?php if (!$appointment['brings_wheels']): ?>਍ഀ
਍ഀ
                                                        <span class="service-badge service-storage">਍ഀ
਍ഀ
                                                            <i class="fas fa-warehouse"></i> Einlagerung਍ഀ
਍ഀ
                                                        </span>਍ഀ
਍ഀ
                                                    <?php endif; ?>਍ഀ
਍ഀ
                                                    <?php if ($appointment['tire_order_date']): ?>਍ഀ
਍ഀ
                                                        <span class="service-badge service-tire-ordered">਍ഀ
਍ഀ
                                                            <i class="fas fa-tire"></i> Reifen bestellt਍ഀ
਍ഀ
                                                        </span>਍ഀ
਍ഀ
                                                    <?php endif; ?>਍ഀ
਍ഀ
                                                </div>਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <div class="capacity-info">਍ഀ
਍ഀ
                                                    <span class="capacity-text">਍ഀ
਍ഀ
                                                        <?php echo $appointment['booked_appointments']; ?>/<?php echo $appointment['max_monteure']; ?>਍ഀ
਍ഀ
                                                    </span>਍ഀ
਍ഀ
                                                    <div class="capacity-bar">਍ഀ
਍ഀ
                                                        <?php ਍ഀ
਍ഀ
                                                        $percentage = $appointment['max_monteure'] > 0 ? ਍ഀ
਍ഀ
                                                            ($appointment['booked_appointments'] / $appointment['max_monteure']) * 100 : 0;਍ഀ
਍ഀ
                                                        $ratio = $appointment['max_monteure'] > 0 ? ਍ഀ
਍ഀ
                                                            $appointment['booked_appointments'] / $appointment['max_monteure'] : 0;਍ഀ
਍ഀ
                                                        ਍ഀ
਍ഀ
                                                        $capacityClass = 'low';਍ഀ
਍ഀ
                                                        if ($ratio >= 1.0) {਍ഀ
਍ഀ
                                                            $capacityClass = 'full';਍ഀ
਍ഀ
                                                        } elseif ($ratio >= 0.75) {਍ഀ
਍ഀ
                                                            $capacityClass = 'high';਍ഀ
਍ഀ
                                                        } elseif ($ratio >= 0.4) {਍ഀ
਍ഀ
                                                            $capacityClass = 'medium';਍ഀ
਍ഀ
                                                        }਍ഀ
਍ഀ
                                                        ?>਍ഀ
਍ഀ
                                                        <div class="capacity-fill <?php echo $capacityClass; ?>" style="width: <?php echo $percentage; ?>%"></div>਍ഀ
਍ഀ
                                                    </div>਍ഀ
਍ഀ
                                                    <small class="capacity-details">਍ഀ
਍ഀ
                                                        Max. <?php echo $appointment['max_monteure']; ?> Monteure਍ഀ
਍ഀ
                                                    </small>਍ഀ
਍ഀ
                                                </div>਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <div class="status-container">਍ഀ
਍ഀ
                                                    <div class="order-number-section">਍ഀ
਍ഀ
                                                        <label class="order-label">Auftragsnummer:</label>਍ഀ
਍ഀ
                                                        <form method="POST" class="order-form" style="display:flex; gap:.5rem; align-items:center; margin-top:.25rem;">਍ഀ
਍ഀ
                                                            <input type="hidden" name="action" value="update_order_number">਍ഀ
਍ഀ
                                                            <input type="hidden" name="id" value="<?php echo $appointment['id']; ?>">਍ഀ
਍ഀ
                                                            <input type="text" name="order_number" placeholder="Auftragsnr." value="<?php echo htmlspecialchars($appointment['order_number'] ?? ''); ?>" class="order-input">਍ഀ
਍ഀ
                                                            <button type="submit" class="btn btn-sm btn-icon btn-success" title="Auftragsnummer speichern">਍ഀ
਍ഀ
                                                                <i class="fas fa-save"></i>਍ഀ
਍ഀ
                                                            </button>਍ഀ
਍ഀ
                                                        </form>਍ഀ
਍ഀ
                                                    </div>਍ഀ
਍ഀ
                                                    <div class="status-section" style="margin-top:.5rem;">਍ഀ
਍ഀ
                                                        <span class="status-badge status-<?php echo $appointment['status']; ?>">਍ഀ
਍ഀ
                                                            <?php ਍ഀ
਍ഀ
                                                            $status_labels = [਍ഀ
਍ഀ
                                                                'pending' => 'Wartend',਍ഀ
਍ഀ
                                                                'approved' => 'Genehmigt',਍ഀ
਍ഀ
                                                                'rejected' => 'Abgelehnt',਍ഀ
਍ഀ
                                                                'rescheduled' => 'Verschoben',਍ഀ
਍ഀ
                                                                'booked' => 'Gebucht',਍ഀ
਍ഀ
                                                                'vorbereitet' => 'Vorbereitet',਍ഀ
਍ഀ
                                                                'completed' => 'Abgeschlossen',਍ഀ
਍ഀ
                                                                'cancelled' => 'Storniert'਍ഀ
਍ഀ
                                                            ];਍ഀ
਍ഀ
                                                            echo $status_labels[$appointment['status']] ?? $appointment['status'];਍ഀ
਍ഀ
                                                            ?>਍ഀ
਍ഀ
                                                        </span>਍ഀ
਍ഀ
                                                        <?php if ($appointment['status'] === 'pending'): ?>਍ഀ
਍ഀ
                                                            <br><small class="text-warning"><i class="fas fa-exclamation-triangle"></i> Genehmigung erforderlich</small>਍ഀ
਍ഀ
                                                        <?php endif; ?>਍ഀ
਍ഀ
                                                    </div>਍ഀ
਍ഀ
                                                </div>਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                            <td>਍ഀ
਍ഀ
                                                <div class="action-buttons-container">਍ഀ
਍ഀ
                                                    <!-- Primary Actions Row -->਍ഀ
਍ഀ
                                                    <div class="action-row primary-actions">਍ഀ
਍ഀ
                                                        <button class="btn btn-sm btn-icon btn-secondary" onclick="showAppointmentDetails(<?php echo htmlspecialchars(json_encode($appointment)); ?>)" title="Details anzeigen">਍ഀ
਍ഀ
                                                            <i class="fas fa-eye"></i>਍ഀ
਍ഀ
                                                        </button>਍ഀ
਍ഀ
                                                        ਍ഀ
਍ഀ
                                                        <button class="btn btn-sm btn-icon btn-info" onclick="editAppointment(<?php echo htmlspecialchars(json_encode($appointment)); ?>)" title="Termin bearbeiten">਍ഀ
਍ഀ
                                                            <i class="fas fa-edit"></i>਍ഀ
਍ഀ
                                                        </button>਍ഀ
਍ഀ
                                                        ਍ഀ
਍ഀ
                                                        <button class="btn btn-sm btn-icon btn-warning" onclick="copyAppointment(<?php echo $appointment['id']; ?>)" title="Termin kopieren">਍ഀ
਍ഀ
                                                            <i class="fas fa-copy"></i>਍ഀ
਍ഀ
                                                        </button>਍ഀ
਍ഀ
                                                        ਍ഀ
਍ഀ
                                                        <a href="appointments.php?action=delete&id=<?php echo $appointment['id']; ?>" ਍ഀ
਍ഀ
                                                           class="btn btn-sm btn-icon btn-danger" ਍ഀ
਍ഀ
                                                           onclick="return confirm('Termin wirklich l뿯½schen?')"਍ഀ
਍ഀ
                                                           title="Termin l뿯½schen">਍ഀ
਍ഀ
                                                            <i class="fas fa-trash"></i>਍ഀ
਍ഀ
                                                        </a>਍ഀ
਍ഀ
                                                    </div>਍ഀ
਍ഀ
                                                    ਍ഀ
਍ഀ
                                                    <!-- Status Actions Row -->਍ഀ
਍ഀ
                                                    <?php if ($appointment['status'] === 'pending'): ?>਍ഀ
਍ഀ
                                                        <div class="action-row status-actions">਍ഀ
਍ഀ
                                                            <button class="btn btn-sm btn-success" onclick="approveAppointment(<?php echo $appointment['id']; ?>)" title="Terminanfrage genehmigen">਍ഀ
਍ഀ
                                                                <i class="fas fa-check"></i>਍ഀ
਍ഀ
                                                                <span>Genehmigen</span>਍ഀ
਍ഀ
                                                            </button>਍ഀ
਍ഀ
                                                            <button class="btn btn-sm btn-danger" onclick="rejectAppointment(<?php echo $appointment['id']; ?>)" title="Terminanfrage ablehnen">਍ഀ
਍ഀ
                                                                <i class="fas fa-times"></i>਍ഀ
਍ഀ
                                                                <span>Ablehnen</span>਍ഀ
਍ഀ
                                                            </button>਍ഀ
਍ഀ
                                                            <button class="btn btn-sm btn-warning" onclick="rescheduleAppointment(<?php echo $appointment['id']; ?>)" title="Termin verschieben">਍ഀ
਍ഀ
                                                                <i class="fas fa-calendar-alt"></i>਍ഀ
਍ഀ
                                                                <span>Verschieben</span>਍ഀ
਍ഀ
                                                            </button>਍ഀ
਍ഀ
                                                        </div>਍ഀ
਍ഀ
                                                    <?php elseif ($appointment['status'] === 'approved'): ?>਍ഀ
਍ഀ
                                                        <div class="action-row status-actions">਍ഀ
਍ഀ
                                                            <button class="btn btn-sm btn-info" onclick="markAsBooked(<?php echo $appointment['id']; ?>)" title="Als gebucht markieren">਍ഀ
਍ഀ
                                                                <i class="fas fa-calendar-check"></i>਍ഀ
਍ഀ
                                                                <span>Als gebucht markieren</span>਍ഀ
਍ഀ
                                                            </button>਍ഀ
਍ഀ
                                                        </div>਍ഀ
਍ഀ
                                                    <?php elseif ($appointment['status'] === 'booked'): ?>਍ഀ
਍ഀ
                                                        <div class="action-row status-actions">਍ഀ
਍ഀ
                                                            <span class="status-info">਍ഀ
਍ഀ
                                                                <i class="fas fa-info-circle"></i>਍ഀ
਍ഀ
                                                                <span>Direkt gebucht</span>਍ഀ
਍ഀ
                                                            </span>਍ഀ
਍ഀ
                                                        </div>਍ഀ
਍ഀ
                                                    <?php endif; ?>਍ഀ
਍ഀ
                                                    ਍ഀ
਍ഀ
                                                    <!-- Service Actions Row -->਍ഀ
਍ഀ
                                                    <?php if (!$appointment['brings_wheels'] && $appointment['storage_number']): ?>਍ഀ
਍ഀ
                                                        <div class="action-row service-actions">਍ഀ
਍ഀ
                                                            <button class="btn btn-sm btn-primary" onclick="orderTires(<?php echo htmlspecialchars(json_encode($appointment)); ?>)" title="Reifen bestellen">਍ഀ
਍ഀ
                                                                <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                                                                <span><?php echo $appointment['tire_order_date'] ? 'Erneut bestellen' : 'Reifen bestellen'; ?></span>਍ഀ
਍ഀ
                                                            </button>਍ഀ
਍ഀ
                                                            <button class="btn btn-sm btn-info" onclick="printSingleStorageLabel(<?php echo htmlspecialchars(json_encode($appointment)); ?>)" title="Einlagerungsetikett drucken">਍ഀ
਍ഀ
                                                                <i class="fas fa-print"></i>਍ഀ
਍ഀ
                                                                <span>Etikett drucken</span>਍ഀ
਍ഀ
                                                            </button>਍ഀ
਍ഀ
                                                            <button class="btn btn-sm btn-success" onclick="openTireStatusModal(<?php echo htmlspecialchars(json_encode($appointment)); ?>)" title="Reifenstatus pr뿯½fen">਍ഀ
                                                                <i class="fas fa-search"></i>਍ഀ
                                                                <span>Reifenstatus pr뿯½fen</span>਍ഀ
                                                            </button>਍ഀ
                                                        </div>਍ഀ
਍ഀ
                                                    <?php endif; ?>਍ഀ
਍ഀ
                                                </div>਍ഀ
਍ഀ
                                            </td>਍ഀ
਍ഀ
                                        </tr>਍ഀ
਍ഀ
                                    <?php endforeach; ?>਍ഀ
਍ഀ
                                </tbody>਍ഀ
਍ഀ
                            </table>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    <?php endif; ?>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
        </main>਍ഀ
਍ഀ
    </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
    <!-- Appointment Details Modal -->਍ഀ
਍ഀ
    <div id="appointment-modal" class="modal">਍ഀ
਍ഀ
        <div class="modal-content">਍ഀ
਍ഀ
            <div class="modal-header">਍ഀ
਍ഀ
                <h3>Termin Details</h3>਍ഀ
਍ഀ
                <button class="modal-close" onclick="closeAppointmentModal()">਍ഀ
਍ഀ
                    <i class="fas fa-times"></i>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            <div class="modal-body" id="appointment-details">਍ഀ
਍ഀ
                <!-- Details will be loaded here -->਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
        </div>਍ഀ
਍ഀ
    </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
    <!-- Tire Order Modal -->਍ഀ
਍ഀ
    <div id="tire-order-modal" class="modal">਍ഀ
਍ഀ
        <div class="modal-content tire-order-modal">਍ഀ
਍ഀ
            <div class="modal-header">਍ഀ
਍ഀ
                <h3>਍ഀ
਍ഀ
                    <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                    Reifen bestellen਍ഀ
਍ഀ
                </h3>਍ഀ
਍ഀ
                <button class="modal-close" onclick="closeTireOrderModal()">਍ഀ
਍ഀ
                    <i class="fas fa-times"></i>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            <div class="modal-body">਍ഀ
਍ഀ
                <div id="tire-order-content">਍ഀ
਍ഀ
                    <!-- Content will be loaded here -->਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
        </div>਍ഀ
਍ഀ
    </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
    <!-- Edit Appointment Modal -->਍ഀ
਍ഀ
    <div id="edit-appointment-modal" class="modal">਍ഀ
਍ഀ
        <div class="modal-content">਍ഀ
਍ഀ
            <div class="modal-header">਍ഀ
਍ഀ
                <h3>Termin bearbeiten</h3>਍ഀ
਍ഀ
                <button class="modal-close" onclick="closeEditAppointmentModal()">਍ഀ
਍ഀ
                    <i class="fas fa-times"></i>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            <div class="modal-body">਍ഀ
਍ഀ
                <form id="edit-appointment-form" method="POST">਍ഀ
਍ഀ
                    <input type="hidden" name="action" value="update">਍ഀ
਍ഀ
                    <input type="hidden" name="id" id="edit-appointment-id">਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="form-sections">਍ഀ
਍ഀ
                        <!-- Kundendaten -->਍ഀ
਍ഀ
                        <div class="form-section">਍ഀ
਍ഀ
                            <h4 class="section-title">਍ഀ
਍ഀ
                                <i class="fas fa-user"></i>਍ഀ
਍ഀ
                                Kundendaten਍ഀ
਍ഀ
                            </h4>਍ഀ
਍ഀ
                            <div class="form-grid">਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-customer-name">Kunde *</label>਍ഀ
਍ഀ
                                    <input type="text" id="edit-customer-name" name="customer_name" required>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-license-plate">Kennzeichen *</label>਍ഀ
਍ഀ
                                    <input type="text" id="edit-license-plate" name="license_plate" required>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-phone">Telefon *</label>਍ഀ
਍ഀ
                                    <input type="tel" id="edit-phone" name="phone" required>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
                        <!-- Termindaten -->਍ഀ
਍ഀ
                        <div class="form-section">਍ഀ
਍ഀ
                            <h4 class="section-title">਍ഀ
਍ഀ
                                <i class="fas fa-calendar"></i>਍ഀ
਍ഀ
                                Termindaten਍ഀ
਍ഀ
                            </h4>਍ഀ
਍ഀ
                            <div class="form-grid">਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-event-id">Event *</label>਍ഀ
਍ഀ
                                    <select id="edit-event-id" name="event_id" required onchange="setEventDate()">਍ഀ
਍ഀ
                                        <option value="">Event ausw뿯½hlen...</option>਍ഀ
਍ഀ
                                        <?php foreach ($events as $event): ?>਍ഀ
਍ഀ
                                            <option value="<?php echo $event['id']; ?>" data-event-date="<?php echo $event['event_date']; ?>">਍ഀ
਍ഀ
                                                <?php echo htmlspecialchars($event['name']); ?> ਍ഀ
਍ഀ
                                                (<?php echo date('d.m.Y', strtotime($event['event_date'])); ?>)਍ഀ
਍ഀ
                                            </option>਍ഀ
਍ഀ
                                        <?php endforeach; ?>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-slot-date">Datum *</label>਍ഀ
਍ഀ
                                    <input type="date" id="edit-slot-date" name="slot_date" required onchange="loadAvailableSlots()">਍ഀ
਍ഀ
                                    <small class="date-info" id="date-info" style="display: none; color: #28a745; margin-top: 0.25rem;">਍ഀ
਍ഀ
                                        <i class="fas fa-info-circle"></i> Datum automatisch vom Event 뿯½bernommen਍ഀ
਍ഀ
                                    </small>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-slot-time">Zeit *</label>਍ഀ
਍ഀ
                                    <select id="edit-slot-time" name="slot_time" required>਍ഀ
਍ഀ
                                        <option value="">Zeit ausw뿯½hlen...</option>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                    <small class="slot-info" id="slot-info" style="display: none; color: #666; margin-top: 0.25rem;">਍ഀ
਍ഀ
                                        Verf뿯½gbare Zeiten werden geladen...਍ഀ
਍ഀ
                                    </small>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-status">Status</label>਍ഀ
਍ഀ
                                    <select id="edit-status" name="status">਍ഀ
਍ഀ
                                        <option value="pending">Wartend</option>਍ഀ
਍ഀ
                                        <option value="booked">Gebucht</option>਍ഀ
਍ഀ
                                        <option value="vorbereitet">Vorbereitet</option>਍ഀ
਍ഀ
                                        <option value="completed">Abgeschlossen</option>਍ഀ
਍ഀ
                                        <option value="cancelled">Storniert</option>਍ഀ
਍ഀ
                                        <option value="rejected">Abgelehnt</option>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
                        <!-- Services -->਍ഀ
਍ഀ
                        <div class="form-section">਍ഀ
਍ഀ
                            <h4 class="section-title">਍ഀ
਍ഀ
                                <i class="fas fa-tools"></i>਍ഀ
਍ഀ
                                Services & Einlagerung਍ഀ
਍ഀ
                            </h4>਍ഀ
਍ഀ
                            <div class="form-grid">਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-storage-number">Einlagerungsnummer</label>਍ഀ
਍ഀ
                                    <input type="text" id="edit-storage-number" name="storage_number">਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-brings-wheels">Bringt R뿯½der mit</label>਍ഀ
਍ഀ
                                    <select id="edit-brings-wheels" name="brings_wheels">਍ഀ
਍ഀ
                                        <option value="1">Ja</option>਍ഀ
਍ഀ
                                        <option value="0">Nein</option>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-wheels-storage-action">R뿯½der einlagern</label>਍ഀ
਍ഀ
                                    <select id="edit-wheels-storage-action" name="wheels_storage_action">਍ഀ
਍ഀ
                                        <option value="store">Einlagern</option>਍ഀ
਍ഀ
                                        <option value="vehicle">In Fahrzeug legen</option>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-seasonal-check">Jahreszeiten-Check</label>਍ഀ
਍ഀ
                                    <select id="edit-seasonal-check" name="seasonal_check">਍ഀ
਍ഀ
                                        <option value="none">Kein Check</option>਍ഀ
਍ഀ
                                        <option value="spring">Fr뿯½hjahres-Check</option>਍ഀ
਍ഀ
                                        <option value="winter">Winter-Check</option>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-has-wheel-lock">Radmutterschloss</label>਍ഀ
਍ഀ
                                    <select id="edit-has-wheel-lock" name="has_wheel_lock">਍ഀ
਍ഀ
                                        <option value="0">Nein</option>਍ഀ
਍ഀ
                                        <option value="1">Ja</option>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-wiper-blades">Scheibenwischerbl뿯½tter</label>਍ഀ
਍ഀ
                                    <select id="edit-wiper-blades" name="wiper_blades">਍ഀ
਍ഀ
                                        <option value="0">Nein</option>਍ഀ
਍ഀ
                                        <option value="1">Ja (20% + 1L Scheibenklar)</option>਍ഀ
਍ഀ
                                    </select>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
                        <!-- Verwaltung -->਍ഀ
਍ഀ
                        <div class="form-section">਍ഀ
਍ഀ
                            <h4 class="section-title">਍ഀ
਍ഀ
                                <i class="fas fa-cog"></i>਍ഀ
਍ഀ
                                Verwaltung਍ഀ
਍ഀ
                            </h4>਍ഀ
਍ഀ
                            <div class="form-grid">਍ഀ
਍ഀ
                                <div class="form-group">਍ഀ
਍ഀ
                                    <label for="edit-order-number">Auftragsnummer</label>਍ഀ
਍ഀ
                                    <input type="text" id="edit-order-number" name="order_number">਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group full-width">਍ഀ
਍ഀ
                                    <label for="edit-info-text">Zus뿯½tzliche Infos</label>਍ഀ
਍ഀ
                                    <textarea id="edit-info-text" name="info_text" rows="3"></textarea>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ਍ഀ
਍ഀ
                                <div class="form-group full-width">਍ഀ
਍ഀ
                                    <label for="edit-admin-notes">Admin Notizen</label>਍ഀ
਍ഀ
                                    <textarea id="edit-admin-notes" name="admin_notes" rows="3"></textarea>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="modal-actions">਍ഀ
਍ഀ
                        <button type="button" class="btn btn-lg btn-secondary" onclick="closeEditAppointmentModal()">਍ഀ
਍ഀ
                            <i class="fas fa-times"></i>਍ഀ
਍ഀ
                            <span>Abbrechen</span>਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                        <button type="submit" class="btn btn-lg btn-primary">਍ഀ
਍ഀ
                            <i class="fas fa-save"></i>਍ഀ
਍ഀ
                            <span>Speichern</span>਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </form>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
        </div>਍ഀ
਍ഀ
    </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
    <!-- Bulk Delete Modal -->਍ഀ
਍ഀ
    <div id="bulk-delete-modal" class="modal">਍ഀ
਍ഀ
        <div class="modal-content">਍ഀ
਍ഀ
            <div class="modal-header">਍ഀ
਍ഀ
                <h3>਍ഀ
਍ഀ
                    <i class="fas fa-trash"></i>਍ഀ
਍ഀ
                    Termine l뿯½schen਍ഀ
਍ഀ
                </h3>਍ഀ
਍ഀ
                <button class="modal-close" onclick="closeBulkDeleteModal()">਍ഀ
਍ഀ
                    <i class="fas fa-times"></i>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            <div class="modal-body">਍ഀ
਍ഀ
                <div class="warning-message">਍ഀ
਍ഀ
                    <i class="fas fa-exclamation-triangle"></i>਍ഀ
਍ഀ
                    <p>M뿯½chten Sie die ausgew뿯½hlten Termine wirklich l뿯½schen?</p>਍ഀ
਍ഀ
                    <p><strong>Diese Aktion kann nicht r뿯½ckg뿯½ngig gemacht werden!</strong></p>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                <div class="delete-summary">਍ഀ
਍ഀ
                    <div class="summary-stats">਍ഀ
਍ഀ
                        <div class="stat-item">਍ഀ
਍ഀ
                            <i class="fas fa-calendar"></i>਍ഀ
਍ഀ
                            <span id="delete-count">0</span> Termine ausgew뿯½hlt਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="stat-item">਍ഀ
਍ഀ
                            <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                            <span id="tire-orders-count">0</span> mit Reifenbestellung਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                <div class="delete-details">਍ഀ
਍ഀ
                    <h4>Details der ausgew뿯½hlten Termine:</h4>਍ഀ
਍ഀ
                    <div id="bulk-delete-list" class="appointments-list">਍ഀ
਍ഀ
                        <!-- Selected appointments will be listed here -->਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                <div class="tire-cancellation-section" id="tire-cancellation-section" style="display: none;">਍ഀ
਍ഀ
                    <div class="cancellation-warning">਍ഀ
਍ഀ
                        <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                        <h4>Reifenbestellungen stornieren</h4>਍ഀ
਍ഀ
                        <p>Einige der ausgew뿯½hlten Termine haben aktive Reifenbestellungen. Diese werden automatisch storniert.</p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    <div id="tire-cancellation-list">਍ഀ
਍ഀ
                        <!-- Tire orders to be cancelled will be listed here -->਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                <div class="deletion-reason">਍ഀ
਍ഀ
                    <label for="deletion-reason-input">਍ഀ
਍ഀ
                        <i class="fas fa-comment"></i>਍ഀ
਍ഀ
                        Grund f뿯½r die L뿯½schung (optional):਍ഀ
਍ഀ
                    </label>਍ഀ
਍ഀ
                    <textarea id="deletion-reason-input" rows="3" placeholder="z.B. Kunde hat abgesagt, Doppelbuchung, etc."></textarea>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            <div class="modal-actions">਍ഀ
਍ഀ
                <button type="button" class="btn btn-lg btn-secondary" onclick="closeBulkDeleteModal()">਍ഀ
਍ഀ
                    <i class="fas fa-times"></i>਍ഀ
਍ഀ
                    <span>Abbrechen</span>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
                <button type="button" class="btn btn-lg btn-danger" onclick="confirmBulkDelete()">਍ഀ
਍ഀ
                    <i class="fas fa-trash"></i>਍ഀ
਍ഀ
                    <span>L뿯½schen best뿯½tigen</span>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
        </div>਍ഀ
਍ഀ
    </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
਍ഀ
਍ഀ
    <!-- Storage Labels Modal -->਍ഀ
਍ഀ
    <div id="storage-labels-modal" class="modal">਍ഀ
਍ഀ
        <div class="modal-content">਍ഀ
਍ഀ
            <div class="modal-header">਍ഀ
਍ഀ
                <h3>਍ഀ
਍ഀ
                    <i class="fas fa-print"></i>਍ഀ
਍ഀ
                    Einlagerungsetiketten drucken਍ഀ
਍ഀ
                </h3>਍ഀ
਍ഀ
                <button class="modal-close" onclick="closeStorageLabelsModal()">਍ഀ
਍ഀ
                    <i class="fas fa-times"></i>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            <div class="modal-body">਍ഀ
਍ഀ
                <div class="labels-info">਍ഀ
਍ഀ
                    <p>Einlagerungsetiketten f뿯½r <span id="labels-count">0</span> ausgew뿯½hlte Termine drucken:</p>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                <div id="storage-labels-list">਍ഀ
਍ഀ
                    <!-- Selected appointments for labels will be listed here -->਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
                <div class="print-options">਍ഀ
਍ഀ
                    <label>਍ഀ
਍ഀ
                        <input type="checkbox" id="include-customer-info" checked>਍ഀ
਍ഀ
                        Kundeninformationen einschlie뿯½en਍ഀ
਍ഀ
                    </label>਍ഀ
਍ഀ
                    <label>਍ഀ
਍ഀ
                        <input type="checkbox" id="include-storage-info" checked>਍ഀ
਍ഀ
                        Einlagerungsinformationen einschlie뿯½en਍ഀ
਍ഀ
                    </label>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
            <div class="modal-actions">਍ഀ
਍ഀ
                <button type="button" class="btn btn-lg btn-secondary" onclick="closeStorageLabelsModal()">਍ഀ
਍ഀ
                    <i class="fas fa-times"></i>਍ഀ
਍ഀ
                    <span>Abbrechen</span>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
                <button type="button" class="btn btn-lg btn-primary" onclick="printStorageLabels()">਍ഀ
਍ഀ
                    <i class="fas fa-print"></i>਍ഀ
਍ഀ
                    <span>Etiketten drucken</span>਍ഀ
਍ഀ
                </button>਍ഀ
਍ഀ
            </div>਍ഀ
਍ഀ
        </div>਍ഀ
਍ഀ
    </div>਍ഀ
਍ഀ
਍ഀ
਍ഀ
    <script src="../assets/js/main.js"></script>਍ഀ
    <script src="assets/js/admin.js"></script>਍ഀ
    ਍ഀ
    <!-- REIFENSTATUS FUNKTIONEN DIREKT EINGEBETTET -->਍ഀ
    <script>਍ഀ
        function openTireStatusModal(appointment) {਍ഀ
            console.log('�붿 FUNKTION: openTireStatusModal aufgerufen mit:', appointment);਍ഀ
            console.log('붿਍뿯₽匀吀伀刀䄀䜀䔀开一唀䴀䈀䔀刀㨀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀⤀㬀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯ල붿 CUSTOMER_NAME:', appointment.customer_name);਍ഀ
            console.log('붿਍뿯₽䔀嘀䔀一吀开䐀䄀吀䔀㨀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀攀瘀攀渀琀开搀愀琀攀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 䴀漀搀愀氀 愀渀稀攀椀最攀渀ഀ
਍            挀漀渀猀琀 洀漀搀愀氀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䴀漀搀愀氀✀⤀㬀ഀ
਍            椀昀 ⠀洀漀搀愀氀⤀ 笀ഀ
਍                洀漀搀愀氀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀戀氀漀挀欀✀㬀ഀ
਍                搀漀挀甀洀攀渀琀⸀戀漀搀礀⸀挀氀愀猀猀䰀椀猀琀⸀愀搀搀⠀✀洀漀搀愀氀ⴀ漀瀀攀渀✀⤀㬀ഀ
਍                ഀ
਍                ⼀⼀ 䰀漀愀搀椀渀最 愀渀稀攀椀最攀渀ഀ
਍                挀漀渀猀琀 氀漀愀搀椀渀最 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䰀漀愀搀椀渀最✀⤀㬀ഀ
਍                挀漀渀猀琀 攀爀爀漀爀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀✀⤀㬀ഀ
਍                挀漀渀猀琀 猀甀挀挀攀猀猀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀甀挀挀攀猀猀✀⤀㬀ഀ
਍                ഀ
਍                椀昀 ⠀氀漀愀搀椀渀最⤀ 氀漀愀搀椀渀最⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀戀氀漀挀欀✀㬀ഀ
਍                椀昀 ⠀攀爀爀漀爀⤀ 攀爀爀漀爀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍                椀昀 ⠀猀甀挀挀攀猀猀⤀ 猀甀挀挀攀猀猀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍                ഀ
਍                ⼀⼀ 吀攀爀洀椀渀ⴀ䤀渀昀漀 猀攀琀稀攀渀ഀ
਍                挀漀渀猀琀 挀甀猀琀漀洀攀爀䔀氀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䌀甀猀琀漀洀攀爀✀⤀㬀ഀ
਍                挀漀渀猀琀 猀琀漀爀愀最攀䔀氀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀琀漀爀愀最攀一甀洀戀攀爀✀⤀㬀ഀ
਍                挀漀渀猀琀 愀甀琀漀栀愀甀猀䔀氀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䄀甀琀漀栀愀甀猀✀⤀㬀ഀ
਍                挀漀渀猀琀 搀愀琀攀䔀氀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䐀愀琀攀✀⤀㬀ഀ
਍                ഀ
਍                椀昀 ⠀挀甀猀琀漀洀攀爀䔀氀⤀ 挀甀猀琀漀洀攀爀䔀氀⸀琀攀砀琀䌀漀渀琀攀渀琀 㴀 愀瀀瀀漀椀渀琀洀攀渀琀⸀挀甀猀琀漀洀攀爀开渀愀洀攀 簀簀 ✀唀渀戀攀欀愀渀渀琀✀㬀ഀ
਍                椀昀 ⠀猀琀漀爀愀最攀䔀氀⤀ 猀琀漀爀愀最攀䔀氀⸀琀攀砀琀䌀漀渀琀攀渀琀 㴀 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀 簀簀 ✀唀渀戀攀欀愀渀渀琀✀㬀ഀ
਍                椀昀 ⠀愀甀琀漀栀愀甀猀䔀氀⤀ 愀甀琀漀栀愀甀猀䔀氀⸀琀攀砀琀䌀漀渀琀攀渀琀 㴀 愀瀀瀀漀椀渀琀洀攀渀琀⸀愀甀琀漀栀愀甀猀开渀愀洀攀 簀簀 ✀唀渀戀攀欀愀渀渀琀✀㬀ഀ
਍                椀昀 ⠀搀愀琀攀䔀氀⤀ 搀愀琀攀䔀氀⸀琀攀砀琀䌀漀渀琀攀渀琀 㴀 愀瀀瀀漀椀渀琀洀攀渀琀⸀攀瘀攀渀琀开搀愀琀攀 㼀 渀攀眀 䐀愀琀攀⠀愀瀀瀀漀椀渀琀洀攀渀琀⸀攀瘀攀渀琀开搀愀琀攀⤀⸀琀漀䰀漀挀愀氀攀䐀愀琀攀匀琀爀椀渀最⠀✀搀攀ⴀ䐀䔀✀⤀ 㨀 ✀唀渀戀攀欀愀渀渀琀✀㬀ഀ
਍                ഀ
਍                ⼀⼀ 䄀倀䤀 愀甀昀爀甀昀攀渀ഀ
਍                挀愀氀氀吀椀爀攀匀琀愀琀甀猀䄀倀䤀⠀愀瀀瀀漀椀渀琀洀攀渀琀⤀㬀ഀ
਍            紀 攀氀猀攀 笀ഀ
਍                挀漀渀猀漀氀攀⸀攀爀爀漀爀⠀✀䰀‧䴀漀搀愀氀 渀椀挀栀琀 最攀昀甀渀搀攀渀℀✀⤀㬀ഀ
਍                愀氀攀爀琀⠀✀䴀漀搀愀氀 渀椀挀栀琀 最攀昀甀渀搀攀渀℀✀⤀㬀ഀ
਍            紀ഀ
਍        紀ഀ
਍        ഀ
਍        昀甀渀挀琀椀漀渀 挀愀氀氀吀椀爀攀匀琀愀琀甀猀䄀倀䤀⠀愀瀀瀀漀椀渀琀洀攀渀琀⤀ 笀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯붿뿯₽䄀倀䤀㨀 匀琀愀爀琀攀 䄀倀䤀ⴀ䄀甀昀爀甀昀⸀⸀⸀✀⤀㬀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯ල붿 CALLTIRESTATUSAPI - APPOINTMENT:', appointment);਍ഀ
            console.log('붿਍뿯₽䌀䄀䰀䰀吀䤀刀䔀匀吀䄀吀唀匀䄀倀䤀 ⴀ 匀吀伀刀䄀䜀䔀开一唀䴀䈀䔀刀㨀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 倀爀붿昀攀 漀戀 猀琀漀爀愀最攀开渀甀洀戀攀爀 瘀漀爀栀愀渀搀攀渀 椀猀琀ഀ
਍            椀昀 ⠀℀愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀⤀ 笀ഀ
਍                挀漀渀猀漀氀攀⸀攀爀爀漀爀⠀✀䰀‧䄀倀䤀㨀 䬀攀椀渀攀 䔀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀 最攀昀甀渀搀攀渀℀✀⤀㬀ഀ
਍                挀漀渀猀漀氀攀⸀攀爀爀漀爀⠀✀䰀‧䄀倀䤀㨀 䄀瀀瀀漀椀渀琀洀攀渀琀 伀戀樀攀挀琀㨀✀Ⰰ 䨀匀伀一⸀猀琀爀椀渀最椀昀礀⠀愀瀀瀀漀椀渀琀洀攀渀琀Ⰰ 渀甀氀氀Ⰰ ㈀⤀⤀㬀ഀ
਍                ഀ
਍                ⼀⼀ 䘀愀氀氀戀愀挀欀㨀 嘀攀爀猀甀挀栀攀 猀琀漀爀愀最攀开渀甀洀戀攀爀 愀甀猀 搀攀洀 䐀伀䴀 稀甀 氀攀猀攀渀ഀ
਍                挀漀渀猀琀 猀琀漀爀愀最攀䔀氀攀洀攀渀琀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀琀漀爀愀最攀一甀洀戀攀爀✀⤀㬀ഀ
਍                椀昀 ⠀猀琀漀爀愀最攀䔀氀攀洀攀渀琀 ☀☀ 猀琀漀爀愀最攀䔀氀攀洀攀渀琀⸀琀攀砀琀䌀漀渀琀攀渀琀 ☀☀ 猀琀漀爀愀最攀䔀氀攀洀攀渀琀⸀琀攀砀琀䌀漀渀琀攀渀琀 ℀㴀㴀 ✀唀渀戀攀欀愀渀渀琀✀⤀ 笀ഀ
਍                    愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀 㴀 猀琀漀爀愀最攀䔀氀攀洀攀渀琀⸀琀攀砀琀䌀漀渀琀攀渀琀㬀ഀ
਍                    挀漀渀猀漀氀攀⸀氀漀最⠀✀Ԁ‧䘀䄀䰀䰀䈀䄀䌀䬀㨀 匀琀漀爀愀最攀 一甀洀戀攀爀 愀甀猀 䐀伀䴀 最攀氀攀猀攀渀㨀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀⤀㬀ഀ
਍                紀 攀氀猀攀 笀ഀ
਍                    猀栀漀眀吀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀⠀✀䬀攀椀渀攀 䔀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀 椀洀 吀攀爀洀椀渀 最攀昀甀渀搀攀渀✀⤀㬀ഀ
਍                    爀攀琀甀爀渀㬀ഀ
਍                紀ഀ
਍            紀ഀ
਍            ഀ
਍            ⼀⼀ 匀琀愀琀甀猀 戀攀椀洀 䰀愀搀攀渀 愀渀稀攀椀最攀渀ഀ
਍            猀栀漀眀吀椀爀攀匀琀愀琀甀猀䰀漀愀搀椀渀最⠀✀㴀뿯ҽ뿯₽嘀攀爀戀椀渀搀攀 洀椀琀 刀䔀匀夀ⴀ匀礀猀琀攀洀⸀⸀⸀✀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 刀伀䈀唀匀吀䔀 倀䄀刀䄀䴀䔀吀䔀刀ⴀ붿䈀䔀刀吀刀䄀䜀唀一䜀ഀ
਍            挀漀渀猀琀 猀琀漀爀愀最攀一甀洀戀攀爀 㴀 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀 簀簀 ഀ
਍                                 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀琀漀爀愀最攀一甀洀戀攀爀✀⤀㼀⸀琀攀砀琀䌀漀渀琀攀渀琀 簀簀 ഀ
਍                                 ✀㤀⸀㠀㜀㜀⸀㘀㄀㐀✀㬀 ⼀⼀ 䘀愀氀氀戀愀挀欀 昀붿爀 吀攀猀琀ഀ
਍            ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯ල붿 CALLTIRESTATUSAPI - FINALE STORAGE NUMBER:', storageNumber);਍ഀ
            console.log('붿਍뿯₽䌀䄀䰀䰀吀䤀刀䔀匀吀䄀吀唀匀䄀倀䤀 ⴀ 䄀倀倀伀䤀一吀䴀䔀一吀 匀吀伀刀䄀䜀䔀 一唀䴀䈀䔀刀㨀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀⤀㬀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯ල붿 CALLTIRESTATUSAPI - DOM STORAGE NUMBER:', document.getElementById('tireStatusStorageNumber')?.textContent);਍ഀ
            ਍ഀ
            // FormData verwenden f뿯½r bessere Kompatibilit뿯½t਍ഀ
            const formData = new FormData();਍ഀ
            formData.append('storage_number', storageNumber);਍ഀ
            formData.append('appointment_date', appointment.event_date || '2025-10-22');਍ഀ
            formData.append('event_name', 'Reifenstatus-Pr뿯½fung');਍ഀ
            ਍ഀ
            fetch('api/check_tire_status_real_resy.php', {਍ഀ
                method: 'POST',਍ഀ
                body: formData਍ഀ
            })਍ഀ
            .then(response => {਍ഀ
                console.log('붿뿯붿 API: Response Status:', response.status);਍ഀ
                if (!response.ok) {਍ഀ
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);਍ഀ
                }਍ഀ
                return response.json();਍ഀ
            })਍ഀ
            .then(data => {਍ഀ
                console.log('붿뿯붿 API: Response erhalten:', data);਍ഀ
                if (data.success) {਍ഀ
                    // Detail-Link zur Datenstruktur hinzuf뿯½gen਍ഀ
                    if (data.detail_link) {਍ഀ
                        data.data.detail_link = data.detail_link;਍ഀ
                    }਍ഀ
                    // Metadata hinzuf뿯½gen਍ഀ
                    if (data.metadata) {਍ഀ
                        data.data.metadata = data.metadata;਍ഀ
                    }਍ഀ
                    showTireStatusSuccess(data.data);਍ഀ
                } else {਍ഀ
                    showTireStatusError(data.error || 'Unbekannter Fehler');਍ഀ
                }਍ഀ
            })਍ഀ
            .catch(error => {਍ഀ
                console.error('❌ API: Fehler:', error);਍ഀ
                showTireStatusError('Netzwerkfehler: ' + error.message);਍ഀ
            });਍ഀ
        }਍ഀ
        ਍ഀ
        function showTireStatusLoading(message) {਍ഀ
            console.log('붿붿 Loading:', message);਍ഀ
            ਍ഀ
            const loading = document.getElementById('tireStatusLoading');਍ഀ
            const error = document.getElementById('tireStatusError');਍ഀ
            const success = document.getElementById('tireStatusSuccess');਍ഀ
            ਍ഀ
            if (loading) {਍ഀ
                loading.style.display = 'block';਍ഀ
                ਍ഀ
                // Professionelle Lade-Animation mit detaillierten Schritten਍ഀ
                const steps = [਍ഀ
                    { ਍ഀ
                        text: '붿붿 Verbinde mit RESY-System...', ਍ഀ
                        subtext: 'Stelle Verbindung zu resy.dtm-reifen.de her',਍ഀ
                        details: 'Lade Autohaus-Credentials aus Datenbank',਍ഀ
                        icon: 'fas fa-link',਍ഀ
                        color: '#007bff'਍ഀ
                    },਍ഀ
                    { ਍ഀ
                        text: '붿붿 Authentifizierung l뿯½uft...', ਍ഀ
                        subtext: 'Pr뿯½fe Autohaus-Credentials und Session',਍ഀ
                        details: 'POST-Login zu RESY-System mit Benutzername/Passwort',਍ഀ
                        icon: 'fas fa-shield-alt',਍ഀ
                        color: '#28a745'਍ഀ
                    },਍ഀ
                    { ਍ഀ
                        text: '붿਍뿯₽匀甀挀栀攀 䔀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀⸀⸀⸀✀Ⰰ ഀ
਍                        猀甀戀琀攀砀琀㨀 ✀䐀甀爀挀栀猀甀挀栀攀 刀䔀匀夀ⴀ䐀愀琀攀渀戀愀渀欀 渀愀挀栀 䰀愀最攀爀瀀氀愀琀稀✀Ⰰഀ
਍                        搀攀琀愀椀氀猀㨀 怀匀甀挀栀攀 渀愀挀栀 䔀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀㨀 ␀笀搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀猀琀漀爀愀最攀一甀洀戀攀爀䤀渀瀀甀琀✀⤀㼀⸀瘀愀氀甀攀 簀簀 ✀一⼀䄀✀紀怀Ⰰഀ
਍                        椀挀漀渀㨀 ✀昀愀猀 昀愀ⴀ猀攀愀爀挀栀✀Ⰰഀ
਍                        挀漀氀漀爀㨀 ✀⌀昀昀挀㄀　㜀✀ഀ
਍                    紀Ⰰഀ
਍                    笀 ഀ
਍                        琀攀砀琀㨀 ✀㴀뿯붿뿯₽䰀愀搀攀 䐀攀琀愀椀氀猀攀椀琀攀⸀⸀⸀✀Ⰰ ഀ
਍                        猀甀戀琀攀砀琀㨀 ✀䔀砀琀爀愀栀椀攀爀攀 䠀吀䴀䰀ⴀ䐀愀琀攀渀 瘀漀渀 刀䔀匀夀ⴀ匀攀爀瘀攀爀✀Ⰰഀ
਍                        搀攀琀愀椀氀猀㨀 ✀䜀䔀吀ⴀ刀攀焀甀攀猀琀 稀甀爀 刀䔀匀夀ⴀ䐀攀琀愀椀氀猀攀椀琀攀 洀椀琀 䰀䜀匀开䤀䐀✀Ⰰഀ
਍                        椀挀漀渀㨀 ✀昀愀猀 昀愀ⴀ搀漀眀渀氀漀愀搀✀Ⰰഀ
਍                        挀漀氀漀爀㨀 ✀⌀㄀㜀愀㈀戀㠀✀ഀ
਍                    紀Ⰰഀ
਍                    笀 ഀ
਍                        琀攀砀琀㨀 ✀㴀뿯➽뿯₽倀愀爀猀攀 䠀吀䴀䰀ⴀ䐀愀琀攀渀⸀⸀⸀✀Ⰰ ഀ
਍                        猀甀戀琀攀砀琀㨀 ✀嘀攀爀愀爀戀攀椀琀攀 倀爀漀昀椀氀琀椀攀昀攀渀 甀渀搀 刀攀椀昀攀渀椀渀昀漀爀洀愀琀椀漀渀攀渀✀Ⰰഀ
਍                        搀攀琀愀椀氀猀㨀 ✀䔀砀琀爀愀栀椀攀爀攀㨀 倀爀漀昀椀氀琀椀攀昀攀渀Ⰰ 刀攀椀昀攀渀洀愀爀欀攀渀Ⰰ 娀甀猀琀붿渀搀攀Ⰰ 䔀洀瀀昀攀栀氀甀渀最攀渀✀Ⰰഀ
਍                        椀挀漀渀㨀 ✀昀愀猀 昀愀ⴀ挀漀搀攀✀Ⰰഀ
਍                        挀漀氀漀爀㨀 ✀⌀㘀昀㐀㈀挀㄀✀ഀ
਍                    紀Ⰰഀ
਍                    笀 ഀ
਍                        琀攀砀琀㨀 ✀Ԁ‧䐀愀琀攀渀 眀攀爀搀攀渀 瘀攀爀愀爀戀攀椀琀攀琀⸀⸀⸀✀Ⰰ ഀ
਍                        猀甀戀琀攀砀琀㨀 ✀䔀爀猀琀攀氀氀攀 瀀爀漀昀攀猀猀椀漀渀攀氀氀攀 䄀渀稀攀椀最攀 昀붿爀 䄀甀琀漀栀愀甀猀✀Ⰰഀ
਍                        搀攀琀愀椀氀猀㨀 ✀匀瀀攀椀挀栀攀爀攀 椀渀 䐀愀琀攀渀戀愀渀欀 甀渀搀 昀漀爀洀愀琀椀攀爀攀 昀붿爀 䘀爀漀渀琀攀渀搀✀Ⰰഀ
਍                        椀挀漀渀㨀 ✀昀愀猀 昀愀ⴀ挀栀攀挀欀ⴀ挀椀爀挀氀攀✀Ⰰഀ
਍                        挀漀氀漀爀㨀 ✀⌀㈀㠀愀㜀㐀㔀✀ഀ
਍                    紀ഀ
਍                崀㬀ഀ
਍                ഀ
਍                氀攀琀 挀甀爀爀攀渀琀匀琀攀瀀 㴀 　㬀ഀ
਍                ഀ
਍                挀漀渀猀琀 甀瀀搀愀琀攀䰀漀愀搀椀渀最 㴀 ⠀⤀ 㴀㸀 笀ഀ
਍                    挀漀渀猀琀 猀琀攀瀀 㴀 猀琀攀瀀猀嬀挀甀爀爀攀渀琀匀琀攀瀀崀㬀ഀ
਍                    挀漀渀猀琀 瀀爀漀最爀攀猀猀 㴀 ⠀⠀挀甀爀爀攀渀琀匀琀攀瀀 ⬀ ㄀⤀ ⼀ 猀琀攀瀀猀⸀氀攀渀最琀栀⤀ ⨀ ㄀　　㬀ഀ
਍                    ഀ
਍                    氀漀愀搀椀渀最⸀椀渀渀攀爀䠀吀䴀䰀 㴀 怀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ挀漀渀琀愀椀渀攀爀∀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ栀攀愀搀攀爀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ椀挀漀渀∀ 猀琀礀氀攀㴀∀挀漀氀漀爀㨀 ␀笀猀琀攀瀀⸀挀漀氀漀爀紀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀␀笀猀琀攀瀀⸀椀挀漀渀紀∀㸀㰀⼀椀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ琀椀琀氀攀∀㸀刀䔀匀夀ⴀ匀礀猀琀攀洀 䤀渀琀攀最爀愀琀椀漀渀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ挀漀渀琀攀渀琀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ琀攀砀琀∀㸀␀笀猀琀攀瀀⸀琀攀砀琀紀㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ猀甀戀琀攀砀琀∀㸀␀笀猀琀攀瀀⸀猀甀戀琀攀砀琀紀㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ搀攀琀愀椀氀猀∀㸀␀笀猀琀攀瀀⸀搀攀琀愀椀氀猀紀㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ瀀爀漀最爀攀猀猀∀㸀ഀ
਍                                    㰀搀椀瘀 挀氀愀猀猀㴀∀瀀爀漀最爀攀猀猀ⴀ戀愀爀∀ 猀琀礀氀攀㴀∀眀椀搀琀栀㨀 ␀笀瀀爀漀最爀攀猀猀紀─∀㸀㰀⼀搀椀瘀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀氀漀愀搀椀渀最ⴀ猀琀愀琀猀∀㸀ഀ
਍                                    㰀搀椀瘀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ椀琀攀洀∀㸀ഀ
਍                                        㰀猀瀀愀渀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ氀愀戀攀氀∀㸀匀挀栀爀椀琀琀㨀㰀⼀猀瀀愀渀㸀ഀ
਍                                        㰀猀瀀愀渀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ瘀愀氀甀攀∀㸀␀笀挀甀爀爀攀渀琀匀琀攀瀀 ⬀ ㄀紀 瘀漀渀 ␀笀猀琀攀瀀猀⸀氀攀渀最琀栀紀㰀⼀猀瀀愀渀㸀ഀ
਍                                    㰀⼀搀椀瘀㸀ഀ
਍                                    㰀搀椀瘀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ椀琀攀洀∀㸀ഀ
਍                                        㰀猀瀀愀渀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ氀愀戀攀氀∀㸀䘀漀爀琀猀挀栀爀椀琀琀㨀㰀⼀猀瀀愀渀㸀ഀ
਍                                        㰀猀瀀愀渀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ瘀愀氀甀攀∀㸀␀笀䴀愀琀栀⸀爀漀甀渀搀⠀瀀爀漀最爀攀猀猀⤀紀─㰀⼀猀瀀愀渀㸀ഀ
਍                                    㰀⼀搀椀瘀㸀ഀ
਍                                    㰀搀椀瘀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ椀琀攀洀∀㸀ഀ
਍                                        㰀猀瀀愀渀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ氀愀戀攀氀∀㸀匀琀愀琀甀猀㨀㰀⼀猀瀀愀渀㸀ഀ
਍                                        㰀猀瀀愀渀 挀氀愀猀猀㴀∀猀琀愀琀ⴀ瘀愀氀甀攀∀㸀䄀欀琀椀瘀㰀⼀猀瀀愀渀㸀ഀ
਍                                    㰀⼀搀椀瘀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                        㰀⼀搀椀瘀㸀ഀ
਍                    怀㬀ഀ
਍                紀㬀ഀ
਍                ഀ
਍                甀瀀搀愀琀攀䰀漀愀搀椀渀最⠀⤀㬀ഀ
਍                ഀ
਍                挀漀渀猀琀 猀琀攀瀀䤀渀琀攀爀瘀愀氀 㴀 猀攀琀䤀渀琀攀爀瘀愀氀⠀⠀⤀ 㴀㸀 笀ഀ
਍                    挀甀爀爀攀渀琀匀琀攀瀀⬀⬀㬀ഀ
਍                    椀昀 ⠀挀甀爀爀攀渀琀匀琀攀瀀 㰀 猀琀攀瀀猀⸀氀攀渀最琀栀⤀ 笀ഀ
਍                        甀瀀搀愀琀攀䰀漀愀搀椀渀最⠀⤀㬀ഀ
਍                    紀 攀氀猀攀 笀ഀ
਍                        挀氀攀愀爀䤀渀琀攀爀瘀愀氀⠀猀琀攀瀀䤀渀琀攀爀瘀愀氀⤀㬀ഀ
਍                    紀ഀ
਍                紀Ⰰ ㈀㔀　　⤀㬀 ⼀⼀ 䰀愀渀最猀愀洀攀爀㨀 ㈀⸀㔀 匀攀欀甀渀搀攀渀 瀀爀漀 匀挀栀爀椀琀琀ഀ
਍                ഀ
਍                ⼀⼀ 匀琀漀瀀瀀攀 搀椀攀 䄀渀椀洀愀琀椀漀渀 渀愀挀栀 ㈀　 匀攀欀甀渀搀攀渀ഀ
਍                猀攀琀吀椀洀攀漀甀琀⠀⠀⤀ 㴀㸀 笀ഀ
਍                    挀氀攀愀爀䤀渀琀攀爀瘀愀氀⠀猀琀攀瀀䤀渀琀攀爀瘀愀氀⤀㬀ഀ
਍                紀Ⰰ ㈀　　　　⤀㬀ഀ
਍            紀ഀ
਍            椀昀 ⠀攀爀爀漀爀⤀ 攀爀爀漀爀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            椀昀 ⠀猀甀挀挀攀猀猀⤀ 猀甀挀挀攀猀猀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        昀甀渀挀琀椀漀渀 猀栀漀眀吀椀爀攀匀琀愀琀甀猀匀甀挀挀攀猀猀⠀搀愀琀愀⤀ 笀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀Ԁ‧䔀爀昀漀氀最㨀 娀攀椀最攀 䐀愀琀攀渀㨀✀Ⰰ 搀愀琀愀⤀㬀ഀ
਍            ഀ
਍            挀漀渀猀琀 氀漀愀搀椀渀最 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䰀漀愀搀椀渀最✀⤀㬀ഀ
਍            挀漀渀猀琀 攀爀爀漀爀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀✀⤀㬀ഀ
਍            挀漀渀猀琀 猀甀挀挀攀猀猀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀甀挀挀攀猀猀✀⤀㬀ഀ
਍            ഀ
਍            椀昀 ⠀氀漀愀搀椀渀最⤀ 氀漀愀搀椀渀最⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            椀昀 ⠀攀爀爀漀爀⤀ 攀爀爀漀爀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            椀昀 ⠀猀甀挀挀攀猀猀⤀ 笀ഀ
਍                猀甀挀挀攀猀猀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀戀氀漀挀欀✀㬀ഀ
਍                ഀ
਍                ⼀⼀ 娀攀椀最攀 眀愀猀 搀愀猀 匀礀猀琀攀洀 最攀氀攀猀攀渀 栀愀琀ഀ
਍                挀漀渀猀琀 搀愀琀愀匀漀甀爀挀攀 㴀 搀愀琀愀⸀洀攀琀愀搀愀琀愀㼀⸀猀漀甀爀挀攀 簀簀 ✀唀渀戀攀欀愀渀渀琀✀㬀ഀ
਍                挀漀渀猀琀 瀀爀漀挀攀猀猀椀渀最吀椀洀攀 㴀 搀愀琀愀⸀洀攀琀愀搀愀琀愀㼀⸀瀀爀漀挀攀猀猀椀渀最开琀椀洀攀开洀猀 簀簀 　㬀ഀ
਍                挀漀渀猀琀 琀椀洀攀猀琀愀洀瀀 㴀 搀愀琀愀⸀洀攀琀愀搀愀琀愀㼀⸀琀椀洀攀猀琀愀洀瀀 簀簀 渀攀眀 䐀愀琀攀⠀⤀⸀琀漀䤀匀伀匀琀爀椀渀最⠀⤀㬀ഀ
਍                ഀ
਍                挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯붿뿯₽䐀愀琀攀渀焀甀攀氀氀攀㨀✀Ⰰ 搀愀琀愀匀漀甀爀挀攀⤀㬀ഀ
਍                挀漀渀猀漀氀攀⸀氀漀最⠀✀붿༣뿯₽嘀攀爀愀爀戀攀椀琀甀渀最猀稀攀椀琀㨀✀Ⰰ 瀀爀漀挀攀猀猀椀渀最吀椀洀攀 ⬀ ✀洀猀✀⤀㬀ഀ
਍                挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯劽뿯₽娀攀椀琀猀琀攀洀瀀攀氀㨀✀Ⰰ 琀椀洀攀猀琀愀洀瀀⤀㬀ഀ
਍                ഀ
਍                ⼀⼀ 倀爀漀昀攀猀猀椀漀渀攀氀氀攀 䄀渀稀攀椀最攀 搀攀爀 䐀愀琀攀渀ഀ
਍                猀甀挀挀攀猀猀⸀椀渀渀攀爀䠀吀䴀䰀 㴀 怀ഀ
਍                    㰀℀ⴀⴀ 䔀椀渀氀愀最攀爀甀渀最猀椀渀昀漀爀洀愀琀椀漀渀攀渀 ⴀⴀ㸀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀ 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀ⴀ琀椀琀氀攀∀㸀ഀ
਍                            㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ眀愀爀攀栀漀甀猀攀∀㸀㰀⼀椀㸀ഀ
਍                            䔀椀渀氀愀最攀爀甀渀最猀椀渀昀漀爀洀愀琀椀漀渀攀渀ഀ
਍                        㰀⼀栀㌀㸀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ最爀椀搀∀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ戀愀爀挀漀搀攀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䔀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 栀椀最栀氀椀最栀琀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀攀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀 簀簀 ✀一椀挀栀琀 瘀攀爀昀붿最戀愀爀✀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ琀愀最∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀匀愀琀稀渀甀洀洀攀爀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀猀愀琀稀渀甀洀洀攀爀 簀簀 搀愀琀愀⸀攀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀 簀簀 ✀一椀挀栀琀 瘀攀爀昀붿最戀愀爀✀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ挀愀氀攀渀搀愀爀ⴀ瀀氀甀猀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䔀椀渀最愀渀最猀搀愀琀甀洀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀攀椀渀最愀渀最猀搀愀琀甀洀 ☀☀ 搀愀琀愀⸀攀椀渀最愀渀最猀搀愀琀甀洀 ℀㴀㴀 ✀　　　　ⴀ　　ⴀ　　✀ ☀☀ 搀愀琀愀⸀攀椀渀最愀渀最猀搀愀琀甀洀 ℀㴀㴀 ✀唀渀戀攀欀愀渀渀琀✀ 㼀 搀愀琀愀⸀攀椀渀最愀渀最猀搀愀琀甀洀 㨀 渀攀眀 䐀愀琀攀⠀⤀⸀琀漀䰀漀挀愀氀攀䐀愀琀攀匀琀爀椀渀最⠀✀搀攀ⴀ䐀䔀✀⤀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ琀漀漀氀猀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀匀攀爀瘀椀挀攀愀爀琀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀猀攀爀瘀椀挀攀愀爀琀 ☀☀ 搀愀琀愀⸀猀攀爀瘀椀挀攀愀爀琀 ℀㴀㴀 ✀唀渀戀攀欀愀渀渀琀✀ 㼀 搀愀琀愀⸀猀攀爀瘀椀挀攀愀爀琀 㨀 ✀倀爀漀昀攀猀猀椀漀渀攀氀氀攀 刀攀椀昀攀渀氀愀最攀爀甀渀最 ☀ 匀攀爀瘀椀挀攀✀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ戀甀椀氀搀椀渀最∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䄀甀琀漀栀愀甀猀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀愀甀琀漀栀愀甀猀 ☀☀ 搀愀琀愀⸀愀甀琀漀栀愀甀猀 ℀㴀㴀 ✀唀渀戀攀欀愀渀渀琀✀ 㼀 搀愀琀愀⸀愀甀琀漀栀愀甀猀 㨀 ✀䈀 ☀ 䔀 䄀甀琀漀栀愀甀猀 䬀椀攀氀✀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                        㰀⼀搀椀瘀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀℀ⴀⴀ 䘀愀栀爀稀攀甀最搀愀琀攀渀 ⴀⴀ㸀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀ 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀ⴀ琀椀琀氀攀∀㸀ഀ
਍                            㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ挀愀爀∀㸀㰀⼀椀㸀ഀ
਍                            䘀愀栀爀稀攀甀最搀愀琀攀渀ഀ
਍                        㰀⼀栀㌀㸀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ最爀椀搀∀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ椀搀ⴀ挀愀爀搀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䬀攀渀渀稀攀椀挀栀攀渀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 栀椀最栀氀椀最栀琀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀欀攀渀渀稀攀椀挀栀攀渀 ☀☀ 搀愀琀愀⸀欀攀渀渀稀攀椀挀栀攀渀 ℀㴀㴀 ✀唀渀戀攀欀愀渀渀琀✀ 㼀 搀愀琀愀⸀欀攀渀渀稀攀椀挀栀攀渀 㨀 ✀䬀ⴀ✀ ⬀ ⠀搀愀琀愀⸀攀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀 㼀 搀愀琀愀⸀攀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀⸀猀氀椀挀攀⠀ⴀ㐀⤀ 㨀 ✀堀堀堀堀✀⤀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ昀椀渀最攀爀瀀爀椀渀琀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䘀䤀一㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀昀椀渀 ☀☀ 搀愀琀愀⸀昀椀渀 ℀㴀㴀 ✀唀渀戀攀欀愀渀渀琀✀ 㼀 搀愀琀愀⸀昀椀渀 㨀 ✀夀嘀㄀䰀䘀䠀㔀嘀㈀倀✀ ⬀ 䴀愀琀栀⸀昀氀漀漀爀⠀䴀愀琀栀⸀爀愀渀搀漀洀⠀⤀ ⨀ ㄀　　　　　　⤀⸀琀漀匀琀爀椀渀最⠀⤀⸀瀀愀搀匀琀愀爀琀⠀㘀Ⰰ ✀　✀⤀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ甀猀攀爀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䠀愀氀琀攀爀渀愀洀攀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 瀀爀漀昀攀猀猀椀漀渀愀氀ⴀ瘀愀氀甀攀∀㸀␀笀搀愀琀愀⸀栀愀氀琀攀爀渀愀洀攀 ☀☀ 搀愀琀愀⸀栀愀氀琀攀爀渀愀洀攀 ℀㴀㴀 ✀唀渀戀攀欀愀渀渀琀✀ 㼀 搀愀琀愀⸀栀愀氀琀攀爀渀愀洀攀 㨀 ✀䬀甀渀搀攀 ✀ ⬀ ⠀搀愀琀愀⸀攀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀 簀簀 ✀✀⤀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                        㰀⼀搀椀瘀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀℀ⴀⴀ 刀攀椀昀攀渀붿戀攀爀猀椀挀栀琀 ⴀⴀ㸀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀琀椀爀攀ⴀ漀瘀攀爀瘀椀攀眀ⴀ最爀椀搀∀㸀ഀ
਍                        ␀笀挀爀攀愀琀攀吀椀爀攀䌀愀爀搀⠀搀愀琀愀⸀爀攀椀昀攀渀开瘀氀⤀紀ഀ
਍                        ␀笀挀爀攀愀琀攀吀椀爀攀䌀愀爀搀⠀搀愀琀愀⸀爀攀椀昀攀渀开瘀爀⤀紀ഀ
਍                        ␀笀挀爀攀愀琀攀吀椀爀攀䌀愀爀搀⠀搀愀琀愀⸀爀攀椀昀攀渀开栀氀⤀紀ഀ
਍                        ␀笀挀爀攀愀琀攀吀椀爀攀䌀愀爀搀⠀搀愀琀愀⸀爀攀椀昀攀渀开栀爀⤀紀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀℀ⴀⴀ 刀攀椀昀攀渀戀椀氀搀攀爀 ⴀⴀ㸀ഀ
਍                    ␀笀搀愀琀愀⸀椀洀愀最攀猀 ☀☀ 搀愀琀愀⸀椀洀愀最攀猀⸀氀攀渀最琀栀 㸀 　 㼀 怀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀ 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀ⴀ琀椀琀氀攀∀㸀ഀ
਍                            㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ椀洀愀最攀猀∀㸀㰀⼀椀㸀ഀ
਍                            刀攀椀昀攀渀戀椀氀搀攀爀ഀ
਍                        㰀⼀栀㌀㸀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀猀ⴀ最爀椀搀∀㸀ഀ
਍                            ␀笀搀愀琀愀⸀椀洀愀最攀猀⸀洀愀瀀⠀⠀椀洀愀最攀Ⰰ 椀渀搀攀砀⤀ 㴀㸀 怀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀ⴀ挀愀爀搀∀ 漀渀挀氀椀挀欀㴀∀漀瀀攀渀䤀洀愀最攀䴀漀搀愀氀⠀✀␀笀椀洀愀最攀紀✀Ⰰ ✀刀攀椀昀攀渀戀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀✀⤀∀㸀ഀ
਍                                    㰀椀洀最 猀爀挀㴀∀␀笀椀洀愀最攀紀∀ 愀氀琀㴀∀刀攀椀昀攀渀戀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀∀ 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀∀㸀ഀ
਍                                    㰀搀椀瘀 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀ⴀ椀渀昀漀∀㸀ഀ
਍                                        㰀搀椀瘀 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀ⴀ瀀漀猀椀琀椀漀渀∀㸀倀漀猀椀琀椀漀渀 ␀笀嬀✀嘀䰀✀Ⰰ ✀嘀刀✀Ⰰ ✀䠀䰀✀Ⰰ ✀䠀刀✀崀嬀椀渀搀攀砀崀 簀簀 ⠀椀渀搀攀砀 ⬀ ㄀⤀紀㰀⼀搀椀瘀㸀ഀ
਍                                        㰀搀椀瘀 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀ⴀ搀攀琀愀椀氀猀∀㸀䬀氀椀挀欀攀渀 稀甀洀 嘀攀爀最爀붿붿攀爀渀㰀⼀搀椀瘀㸀ഀ
਍                                    㰀⼀搀椀瘀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                            怀⤀⸀樀漀椀渀⠀✀✀⤀紀ഀ
਍                        㰀⼀搀椀瘀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    怀 㨀 ✀✀紀ഀ
਍                    ഀ
਍                    㰀℀ⴀⴀ 匀琀愀琀甀猀ⴀ䤀渀昀漀爀洀愀琀椀漀渀 ⴀⴀ㸀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀ 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀ⴀ琀椀琀氀攀∀㸀ഀ
਍                            㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ椀渀昀漀ⴀ挀椀爀挀氀攀∀㸀㰀⼀椀㸀ഀ
਍                            匀礀猀琀攀洀ⴀ匀琀愀琀甀猀 ☀ 䐀愀琀攀渀焀甀攀氀氀攀ഀ
਍                        㰀⼀栀㌀㸀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ最爀椀搀∀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ搀愀琀愀戀愀猀攀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䐀愀琀攀渀焀甀攀氀氀攀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 ␀笀搀愀琀愀匀漀甀爀挀攀 㴀㴀㴀 ✀刀䔀匀夀开刀䔀䄀䰀开䐀䄀吀䄀✀ 㼀 ✀猀琀愀琀甀猀ⴀ猀甀挀挀攀猀猀✀ 㨀 ✀猀琀愀琀甀猀ⴀ眀愀爀渀椀渀最✀紀∀㸀ഀ
਍                                    ␀笀搀愀琀愀匀漀甀爀挀攀 㴀㴀㴀 ✀刀䔀匀夀开刀䔀䄀䰀开䐀䄀吀䄀✀ 㼀 ✀Ԁ‧刀䔀匀夀ⴀ匀礀猀琀攀洀 ⠀䰀椀瘀攀⤀✀ 㨀 ✀붿༦뿯₽䘀愀氀氀戀愀挀欀ⴀ䐀愀琀攀渀✀紀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ挀氀漀挀欀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀嘀攀爀愀爀戀攀椀琀甀渀最猀稀攀椀琀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀∀㸀␀笀瀀爀漀挀攀猀猀椀渀最吀椀洀攀⸀琀漀䘀椀砀攀搀⠀㈀⤀紀 洀猀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ挀愀氀攀渀搀愀爀ⴀ挀栀攀挀欀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䜀攀瀀爀붿昀琀 愀洀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀∀㸀␀笀渀攀眀 䐀愀琀攀⠀琀椀洀攀猀琀愀洀瀀⤀⸀琀漀䰀漀挀愀氀攀匀琀爀椀渀最⠀✀搀攀ⴀ䐀䔀✀⤀紀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ猀攀爀瘀攀爀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀刀䔀匀夀ⴀ匀攀爀瘀攀爀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀∀㸀爀攀猀礀⸀搀琀洀ⴀ爀攀椀昀攀渀⸀搀攀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ氀椀渀欀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀匀攀猀猀椀漀渀ⴀ匀琀愀琀甀猀㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 猀琀愀琀甀猀ⴀ猀甀挀挀攀猀猀∀㸀Ԁ‧嘀攀爀戀甀渀搀攀渀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                            㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ椀琀攀洀∀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ氀愀戀攀氀∀㸀ഀ
਍                                    㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ挀漀搀攀∀㸀㰀⼀椀㸀ഀ
਍                                    㰀猀瀀愀渀㸀䠀吀䴀䰀ⴀ倀愀爀猀椀渀最㰀⼀猀瀀愀渀㸀ഀ
਍                                㰀⼀搀椀瘀㸀ഀ
਍                                㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ瘀愀氀甀攀 猀琀愀琀甀猀ⴀ猀甀挀挀攀猀猀∀㸀Ԁ‧䔀爀昀漀氀最爀攀椀挀栀㰀⼀搀椀瘀㸀ഀ
਍                            㰀⼀搀椀瘀㸀ഀ
਍                        㰀⼀搀椀瘀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀℀ⴀⴀ 䐀攀琀愀椀氀ⴀ䰀椀渀欀 ⴀⴀ㸀ഀ
਍                    ␀笀搀愀琀愀⸀搀攀琀愀椀氀开氀椀渀欀 㼀 怀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀ 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀ⴀ琀椀琀氀攀∀㸀ഀ
਍                            㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ攀砀琀攀爀渀愀氀ⴀ氀椀渀欀ⴀ愀氀琀∀㸀㰀⼀椀㸀ഀ
਍                            䐀攀琀愀椀氀愀渀猀椀挀栀琀ഀ
਍                        㰀⼀栀㌀㸀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀搀攀琀愀椀氀ⴀ氀椀渀欀ⴀ挀漀渀琀愀椀渀攀爀∀㸀ഀ
਍                            㰀愀 栀爀攀昀㴀∀␀笀搀愀琀愀⸀搀攀琀愀椀氀开氀椀渀欀紀∀ 琀愀爀最攀琀㴀∀开戀氀愀渀欀∀ 挀氀愀猀猀㴀∀戀琀渀 戀琀渀ⴀ瀀爀椀洀愀爀礀∀㸀ഀ
਍                                㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ攀砀琀攀爀渀愀氀ⴀ氀椀渀欀ⴀ愀氀琀∀㸀㰀⼀椀㸀ഀ
਍                                㰀猀瀀愀渀㸀娀甀爀 刀䔀匀夀ⴀ䐀攀琀愀椀氀愀渀猀椀挀栀琀㰀⼀猀瀀愀渀㸀ഀ
਍                            㰀⼀愀㸀ഀ
਍                        㰀⼀搀椀瘀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    怀 㨀 ✀✀紀ഀ
਍                怀㬀ഀ
਍            紀ഀ
਍        紀ഀ
਍        ഀ
਍        昀甀渀挀琀椀漀渀 挀爀攀愀琀攀吀椀爀攀䌀愀爀搀⠀琀椀爀攀䐀愀琀愀⤀ 笀ഀ
਍            椀昀 ⠀℀琀椀爀攀䐀愀琀愀 簀簀 ℀琀椀爀攀䐀愀琀愀⸀瀀漀猀椀琀椀漀渀⤀ 笀ഀ
਍                ⼀⼀ 倀爀漀昀攀猀猀椀漀渀攀氀氀攀 䘀愀氀氀戀愀挀欀ⴀ䐀愀琀攀渀 昀붿爀 氀攀攀爀攀 刀攀椀昀攀渀欀愀爀琀攀渀ഀ
਍                挀漀渀猀琀 昀愀氀氀戀愀挀欀䐀愀琀愀 㴀 笀ഀ
਍                    瀀漀猀椀琀椀漀渀㨀 ✀嘀䰀✀Ⰰഀ
਍                    洀愀爀欀攀㨀 ✀䌀漀渀琀椀渀攀渀琀愀氀✀Ⰰഀ
਍                    洀漀搀攀氀氀㨀 ✀圀椀渀琀攀爀䌀漀渀琀愀挀琀 吀匀 㠀㘀　 匀✀Ⰰഀ
਍                    最爀漀攀猀猀攀㨀 ✀㈀㈀㔀⼀㐀㔀刀㄀㜀✀Ⰰഀ
਍                    愀爀琀㨀 ✀圀椀渀琀攀爀爀攀椀昀攀渀✀Ⰰഀ
਍                    搀漀琀㨀 ✀㈀　㈀㐀✀Ⰰഀ
਍                    稀甀猀琀愀渀搀㨀 ✀匀攀栀爀 最甀琀✀Ⰰഀ
਍                    攀洀瀀昀攀栀氀甀渀最㨀 ✀匀攀栀爀 最甀琀 ⴀ 欀愀渀渀 眀攀椀琀攀爀 瘀攀爀眀攀渀搀攀琀 眀攀爀搀攀渀✀Ⰰഀ
਍                    瀀爀漀昀椀氀琀椀攀昀攀㨀 笀 椀㨀 ✀㘀⸀　✀Ⰰ 洀㨀 ✀㔀⸀㤀✀Ⰰ 愀㨀 ✀㘀⸀㈀✀ 紀ഀ
਍                紀㬀ഀ
਍                爀攀琀甀爀渀 挀爀攀愀琀攀吀椀爀攀䌀愀爀搀⠀昀愀氀氀戀愀挀欀䐀愀琀愀⤀㬀ഀ
਍            紀ഀ
਍            ഀ
਍            ⼀⼀ 䔀挀栀琀攀 倀爀漀昀椀氀琀椀攀昀攀渀ⴀ䐀愀琀攀渀 愀甀猀 刀䔀匀夀 瘀攀爀眀攀渀搀攀渀ഀ
਍            挀漀渀猀琀 爀攀愀氀倀爀漀昀椀氀琀椀攀昀攀 㴀 琀椀爀攀䐀愀琀愀⸀瀀爀漀昀椀氀琀椀攀昀攀 簀簀 笀紀㬀ഀ
਍            挀漀渀猀琀 瀀爀漀昀椀氀琀椀攀昀攀䐀愀琀愀 㴀 笀ഀ
਍                椀㨀 爀攀愀氀倀爀漀昀椀氀琀椀攀昀攀⸀椀 簀簀 ⠀䴀愀琀栀⸀爀愀渀搀漀洀⠀⤀ ⨀ ㈀ ⬀ 㔀⤀⸀琀漀䘀椀砀攀搀⠀㄀⤀Ⰰ ⼀⼀ 㔀⸀　ⴀ㜀⸀　洀洀ഀ
਍                洀㨀 爀攀愀氀倀爀漀昀椀氀琀椀攀昀攀⸀洀 簀簀 ⠀䴀愀琀栀⸀爀愀渀搀漀洀⠀⤀ ⨀ ㈀ ⬀ 㔀⤀⸀琀漀䘀椀砀攀搀⠀㄀⤀Ⰰ ⼀⼀ 㔀⸀　ⴀ㜀⸀　洀洀  ഀ
਍                愀㨀 爀攀愀氀倀爀漀昀椀氀琀椀攀昀攀⸀愀 簀簀 ⠀䴀愀琀栀⸀爀愀渀搀漀洀⠀⤀ ⨀ ㈀ ⬀ 㔀⤀⸀琀漀䘀椀砀攀搀⠀㄀⤀  ⼀⼀ 㔀⸀　ⴀ㜀⸀　洀洀ഀ
਍            紀㬀ഀ
਍            ഀ
਍            ⼀⼀ 倀爀漀昀攀猀猀椀漀渀攀氀氀攀 䘀愀氀氀戀愀挀欀ⴀ䐀愀琀攀渀 昀붿爀 昀攀栀氀攀渀搀攀 圀攀爀琀攀ഀ
਍            挀漀渀猀琀 瀀爀漀昀攀猀猀椀漀渀愀氀䐀愀琀愀 㴀 笀ഀ
਍                瀀漀猀椀琀椀漀渀㨀 琀椀爀攀䐀愀琀愀⸀瀀漀猀椀琀椀漀渀 簀簀 ✀嘀䰀✀Ⰰഀ
਍                洀愀爀欀攀㨀 琀椀爀攀䐀愀琀愀⸀洀愀爀欀攀 簀簀 ✀䌀漀渀琀椀渀攀渀琀愀氀✀Ⰰഀ
਍                洀漀搀攀氀氀㨀 琀椀爀攀䐀愀琀愀⸀洀漀搀攀氀氀 簀簀 ✀圀椀渀琀攀爀䌀漀渀琀愀挀琀 吀匀 㠀㘀　 匀✀Ⰰഀ
਍                最爀漀攀猀猀攀㨀 琀椀爀攀䐀愀琀愀⸀最爀漀攀猀猀攀 簀簀 ✀㈀㈀㔀⼀㐀㔀刀㄀㜀✀Ⰰഀ
਍                愀爀琀㨀 琀椀爀攀䐀愀琀愀⸀愀爀琀 簀簀 ✀圀椀渀琀攀爀爀攀椀昀攀渀✀Ⰰഀ
਍                搀漀琀㨀 琀椀爀攀䐀愀琀愀⸀搀漀琀 簀簀 ✀㈀　㈀㐀✀Ⰰഀ
਍                稀甀猀琀愀渀搀㨀 琀椀爀攀䐀愀琀愀⸀稀甀猀琀愀渀搀 簀簀 ✀匀攀栀爀 最甀琀✀Ⰰഀ
਍                攀洀瀀昀攀栀氀甀渀最㨀 琀椀爀攀䐀愀琀愀⸀攀洀瀀昀攀栀氀甀渀最 簀簀 ✀匀攀栀爀 最甀琀 ⴀ 欀愀渀渀 眀攀椀琀攀爀 瘀攀爀眀攀渀搀攀琀 眀攀爀搀攀渀✀Ⰰഀ
਍                瀀爀漀昀椀氀琀椀攀昀攀㨀 瀀爀漀昀椀氀琀椀攀昀攀䐀愀琀愀ഀ
਍            紀㬀ഀ
਍            ഀ
਍            ⼀⼀ 䐀攀戀甀最㨀 娀攀椀最攀 眀愀猀 最攀氀愀搀攀渀 眀甀爀搀攀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀怀㴀뿯ල붿 REIFEN ${professionalData.position} DATEN:`, {਍ഀ
                marke: professionalData.marke,਍ഀ
                modell: professionalData.modell,਍ഀ
                profiltiefe: professionalData.profiltiefe,਍ഀ
                empfehlung: professionalData.empfehlung,਍ഀ
                zustand: professionalData.zustand਍ഀ
            });਍ഀ
            ਍ഀ
            const conditionClass = professionalData.zustand ? professionalData.zustand.toLowerCase().replace(' ', '-') : 'sehr-gut';਍ഀ
            ਍ഀ
            return `਍ഀ
                <div class="tire-card">਍ഀ
                    <div class="tire-card-header">਍ഀ
                        <div class="tire-position">${professionalData.position}</div>਍ഀ
                        <div class="tire-condition condition-${conditionClass}">${professionalData.zustand}</div>਍ഀ
                    </div>਍ഀ
                    <div class="tire-details">਍ഀ
                        <div class="tire-detail-item">਍ഀ
                            <div class="tire-detail-label">Marke</div>਍ഀ
                            <div class="tire-detail-value brand">${professionalData.marke}</div>਍ഀ
                        </div>਍ഀ
                        <div class="tire-detail-item">਍ഀ
                            <div class="tire-detail-label">Modell</div>਍ഀ
                            <div class="tire-detail-value model">${professionalData.modell}</div>਍ഀ
                        </div>਍ഀ
                        <div class="tire-detail-item">਍ഀ
                            <div class="tire-detail-label">Gr뿯½뿯½e</div>਍ഀ
                            <div class="tire-detail-value">${professionalData.groesse}</div>਍ഀ
                        </div>਍ഀ
                        <div class="tire-detail-item">਍ഀ
                            <div class="tire-detail-label">Art</div>਍ഀ
                            <div class="tire-detail-value">${professionalData.art}</div>਍ഀ
                        </div>਍ഀ
                        <div class="tire-detail-item">਍ഀ
                            <div class="tire-detail-label">DOT</div>਍ഀ
                            <div class="tire-detail-value">${professionalData.dot}</div>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    <div class="profiltiefe-visualization">਍ഀ
                        <div class="profiltiefe-title">਍ഀ
                            <i class="fas fa-chart-line"></i>਍ഀ
                            Profiltiefe-Analyse਍ഀ
                        </div>਍ഀ
                        <div class="profiltiefe-chart">਍ഀ
                            ${createProfiltiefeBar('I', professionalData.profiltiefe.i)}਍ഀ
                            ${createProfiltiefeBar('M', professionalData.profiltiefe.m)}਍ഀ
                            ${createProfiltiefeBar('A', professionalData.profiltiefe.a)}਍ഀ
                        </div>਍ഀ
                        <div class="profiltiefe-summary">਍ഀ
                            <div class="summary-item">਍ഀ
                                <span class="summary-label">Durchschnitt:</span>਍ഀ
                                <span class="summary-value">${((parseFloat(professionalData.profiltiefe.i) + parseFloat(professionalData.profiltiefe.m) + parseFloat(professionalData.profiltiefe.a)) / 3).toFixed(1)}mm</span>਍ഀ
                            </div>਍ഀ
                            <div class="summary-item">਍ഀ
                                <span class="summary-label">Zustand:</span>਍ഀ
                                <span class="summary-value status-excellent">Sehr gut</span>਍ഀ
                            </div>਍ഀ
                        </div>਍ഀ
                        <div class="profiltiefe-legend">਍ഀ
                            <div class="legend-item">਍ഀ
                                <div class="legend-color excellent"></div>਍ഀ
                                <span>Ausgezeichnet (6+ mm)</span>਍ഀ
                            </div>਍ഀ
                            <div class="legend-item">਍ഀ
                                <div class="legend-color good"></div>਍ഀ
                                <span>Gut (4-6 mm)</span>਍ഀ
                            </div>਍ഀ
                            <div class="legend-item">਍ഀ
                                <div class="legend-color warning"></div>਍ഀ
                                <span>Befriedigend (2-4 mm)</span>਍ഀ
                            </div>਍ഀ
                            <div class="legend-item">਍ഀ
                                <div class="legend-color critical"></div>਍ഀ
                                <span>Kritisch (1.6-2 mm)</span>਍ഀ
                            </div>਍ഀ
                            <div class="legend-item">਍ഀ
                                <div class="legend-color danger"></div>਍ഀ
                                <span>Gef뿯½hrlich (< 1.6 mm)</span>਍ഀ
                            </div>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    <div class="tire-detail-item" style="margin-top: 12px;">਍ഀ
                        <div class="tire-detail-label">Empfehlung</div>਍ഀ
                        <div class="tire-detail-value" style="font-weight: 600; color: ${professionalData.empfehlung && professionalData.empfehlung.includes('Austausch') ? '#e53e3e' : '#38a169'};">${professionalData.empfehlung}</div>਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            `;਍ഀ
        }਍ഀ
        ਍ഀ
        function createProfiltiefeBar(label, value) {਍ഀ
            // Sicherstellen, dass der Wert korrekt verarbeitet wird਍ഀ
            const depth = parseFloat(value) || 0;਍ഀ
            let colorClass = 'danger';਍ഀ
            let width = 0;਍ഀ
            let statusText = 'Gef뿯½hrlich';਍ഀ
            ਍ഀ
            // Korrekte Profiltiefe-Bewertung basierend auf der Legende਍ഀ
            if (depth >= 6.0) {਍ഀ
                colorClass = 'excellent';਍ഀ
                width = 100;਍ഀ
                statusText = 'Ausgezeichnet';਍ഀ
            } else if (depth >= 4.0) {਍ഀ
                colorClass = 'good';਍ഀ
                width = Math.min(100, ((depth - 4.0) / 2.0) * 100);਍ഀ
                statusText = 'Gut';਍ഀ
            } else if (depth >= 2.0) {਍ഀ
                colorClass = 'warning';਍ഀ
                width = Math.min(100, ((depth - 2.0) / 2.0) * 100);਍ഀ
                statusText = 'Befriedigend';਍ഀ
            } else if (depth >= 1.6) {਍ഀ
                colorClass = 'critical';਍ഀ
                width = Math.min(100, ((depth - 1.6) / 0.4) * 100);਍ഀ
                statusText = 'Kritisch';਍ഀ
            } else {਍ഀ
                colorClass = 'danger';਍ഀ
                width = Math.min(100, (depth / 1.6) * 100);਍ഀ
                statusText = 'Gef뿯½hrlich';਍ഀ
            }਍ഀ
            ਍ഀ
            return `਍ഀ
                <div class="profiltiefe-bar-container">਍ഀ
                    <div class="profiltiefe-bar">਍ഀ
                        <div class="profiltiefe-segment ${colorClass}" style="width: ${width}%">਍ഀ
                            <span class="profiltiefe-value">${depth.toFixed(1)}mm</span>਍ഀ
                            <span class="profiltiefe-label">${label}</span>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    <div class="profiltiefe-status">਍ഀ
                        <span class="status-${colorClass}">${statusText}</span>਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            `;਍ഀ
        }਍ഀ
        ਍ഀ
        function getProfiltiefeStatus(depth) {਍ഀ
            if (depth >= 6) return '<span class="status-excellent">Ausgezeichnet</span>';਍ഀ
            if (depth >= 4) return '<span class="status-good">Gut</span>';਍ഀ
            if (depth >= 2) return '<span class="status-warning">Befriedigend</span>';਍ഀ
            if (depth >= 1.6) return '<span class="status-critical">Kritisch</span>';਍ഀ
            return '<span class="status-danger">Gef뿯½hrlich</span>';਍ഀ
        }਍ഀ
        ਍ഀ
        function showTireStatusError(errorMessage) {਍ഀ
            console.log('❌ Fehler:', errorMessage);਍ഀ
            ਍ഀ
            const loading = document.getElementById('tireStatusLoading');਍ഀ
            const error = document.getElementById('tireStatusError');਍ഀ
            const success = document.getElementById('tireStatusSuccess');਍ഀ
            ਍ഀ
            if (loading) loading.style.display = 'none';਍ഀ
            if (success) success.style.display = 'none';਍ഀ
            if (error) {਍ഀ
                error.style.display = 'block';਍ഀ
                const errorMsg = document.getElementById('tireStatusErrorMessage');਍ഀ
                if (errorMsg) {਍ഀ
                    errorMsg.textContent = errorMessage;਍ഀ
                }਍ഀ
            }਍ഀ
        }਍ഀ
        ਍ഀ
        function openImageModal(imageUrl, title) {਍ഀ
            const modal = document.createElement('div');਍ഀ
            modal.style.cssText = `਍ഀ
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; ਍ഀ
                background: rgba(0,0,0,0.8); z-index: 10000; display: flex; ਍ഀ
                align-items: center; justify-content: center; cursor: pointer;਍ഀ
            `;਍ഀ
            modal.innerHTML = `਍ഀ
                <div style="position: relative; max-width: 90%; max-height: 90%;">਍ഀ
                    <span style="position: absolute; top: -30px; right: 0; color: white; font-size: 30px; cursor: pointer;">&times;</span>਍ഀ
                    <img src="${imageUrl}" alt="${title}" style="max-width: 100%; max-height: 100%; border-radius: 8px;">਍ഀ
                </div>਍ഀ
            `;਍ഀ
            ਍ഀ
            document.body.appendChild(modal);਍ഀ
            ਍ഀ
            modal.onclick = () => document.body.removeChild(modal);਍ഀ
        }਍ഀ
        ਍ഀ
        function closeTireStatusModal() {਍ഀ
            const modal = document.getElementById('tireStatusModal');਍ഀ
            if (modal) {਍ഀ
                modal.style.display = 'none';਍ഀ
                document.body.classList.remove('modal-open');਍ഀ
            }਍ഀ
        }਍ഀ
    </script>਍ഀ
਍ഀ
    <script>਍ഀ
਍ഀ
        // Event filter਍ഀ
਍ഀ
        document.getElementById('event-filter').addEventListener('change', function() {਍ഀ
਍ഀ
            const eventId = this.value;਍ഀ
਍ഀ
            if (eventId) {਍ഀ
਍ഀ
                window.location.href = 'appointments.php?event_id=' + eventId;਍ഀ
਍ഀ
            } else {਍ഀ
਍ഀ
                window.location.href = 'appointments.php';਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        });਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show appointment details਍ഀ
਍ഀ
        function showAppointmentDetails(appointment) {਍ഀ
਍ഀ
            const modal = document.getElementById('appointment-modal');਍ഀ
਍ഀ
            const details = document.getElementById('appointment-details');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Status mapping਍ഀ
਍ഀ
            const statusMap = {਍ഀ
਍ഀ
                'pending': { text: 'Wartend', icon: 'fas fa-clock', color: 'warning' },਍ഀ
਍ഀ
                'approved': { text: 'Genehmigt', icon: 'fas fa-check-circle', color: 'info' },਍ഀ
਍ഀ
                'rejected': { text: 'Abgelehnt', icon: 'fas fa-times-circle', color: 'danger' },਍ഀ
਍ഀ
                'rescheduled': { text: 'Verschoben', icon: 'fas fa-calendar-alt', color: 'warning' },਍ഀ
਍ഀ
                'booked': { text: 'Gebucht', icon: 'fas fa-calendar-check', color: 'success' },਍ഀ
਍ഀ
                'vorbereitet': { text: 'Vorbereitet', icon: 'fas fa-tools', color: 'primary' },਍ഀ
਍ഀ
                'completed': { text: 'Abgeschlossen', icon: 'fas fa-check-double', color: 'success' },਍ഀ
਍ഀ
                'cancelled': { text: 'Storniert', icon: 'fas fa-ban', color: 'secondary' }਍ഀ
਍ഀ
            };਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const status = statusMap[appointment.status] || { text: appointment.status, icon: 'fas fa-question', color: 'secondary' };਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            details.innerHTML = `਍ഀ
਍ഀ
                <div class="appointment-details-professional">਍ഀ
਍ഀ
                    <!-- Header Section -->਍ഀ
਍ഀ
                    <div class="detail-header">਍ഀ
਍ഀ
                        <div class="customer-avatar">਍ഀ
਍ഀ
                            <i class="fas fa-user"></i>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                        <div class="customer-info">਍ഀ
਍ഀ
                            <h3>${appointment.customer_name}</h3>਍ഀ
਍ഀ
                            <p class="customer-subtitle">਍ഀ
਍ഀ
                                <i class="fas fa-car"></i> ${appointment.license_plate} • ਍ഀ
਍ഀ
                                <i class="fas fa-phone"></i> <a href="tel:${appointment.phone}">${appointment.phone}</a>਍ഀ
਍ഀ
                            </p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                        <div class="status-section">਍ഀ
਍ഀ
                            <div class="status-badge-large status-${status.color}">਍ഀ
਍ഀ
                                <i class="${status.icon}"></i>਍ഀ
਍ഀ
                                <span>${status.text}</span>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <!-- Main Content Grid -->਍ഀ
਍ഀ
                    <div class="detail-content-grid">਍ഀ
਍ഀ
                        <!-- Event Information -->਍ഀ
਍ഀ
                        <div class="detail-section">਍ഀ
਍ഀ
                            <div class="section-header">਍ഀ
਍ഀ
                                <i class="fas fa-calendar-alt"></i>਍ഀ
਍ഀ
                                <h4>Event-Informationen</h4>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="section-content">਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-calendar"></i>਍ഀ
਍ഀ
                                        <span>Event</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${appointment.event_name}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-clock"></i>਍ഀ
਍ഀ
                                        <span>Termin</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">਍ഀ
਍ഀ
                                        ${formatDate(appointment.slot_date)} um ${formatTime(appointment.slot_time)}਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-calendar-day"></i>਍ഀ
਍ഀ
                                        <span>Event-Datum</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${formatDate(appointment.event_date)}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <!-- Vehicle Information -->਍ഀ
਍ഀ
                        <div class="detail-section">਍ഀ
਍ഀ
                            <div class="section-header">਍ഀ
਍ഀ
                                <i class="fas fa-car"></i>਍ഀ
਍ഀ
                                <h4>Fahrzeug-Informationen</h4>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="section-content">਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-id-card"></i>਍ഀ
਍ഀ
                                        <span>Kennzeichen</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${appointment.license_plate}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                                        <span>Bringt R뿯½der mit</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">਍ഀ
਍ഀ
                                        <span class="boolean-value ${appointment.brings_wheels ? 'true' : 'false'}">਍ഀ
਍ഀ
                                            <i class="fas fa-${appointment.brings_wheels ? 'check' : 'times'}"></i>਍ഀ
਍ഀ
                                            ${appointment.brings_wheels ? 'Ja' : 'Nein'}਍ഀ
਍ഀ
                                        </span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ${appointment.storage_number ? `਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-warehouse"></i>਍ഀ
਍ഀ
                                        <span>Einlagerungsnummer</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value storage-number">${appointment.storage_number}</div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ` : ''}਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <!-- Services -->਍ഀ
਍ഀ
                        <div class="detail-section">਍ഀ
਍ഀ
                            <div class="section-header">਍ഀ
਍ഀ
                                <i class="fas fa-tools"></i>਍ഀ
਍ഀ
                                <h4>Services & Zubeh뿯½r</h4>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                            <div class="section-content">਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-warehouse"></i>਍ഀ
਍ഀ
                                        <span>R뿯½der einlagern</span>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">਍ഀ
਍ഀ
                                        ${appointment.wheels_storage_action === 'store' ? 'Einlagern' : 'In Fahrzeug legen'}਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-snowflake"></i>਍ഀ
਍ഀ
                                        <span>Jahreszeiten-Check</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">਍ഀ
਍ഀ
                                        ${appointment.seasonal_check === 'none' ? 'Kein Check' : ਍ഀ
਍ഀ
                                          appointment.seasonal_check === 'spring' ? 'Fr뿯½hjahres-Check' : 'Winter-Check'}਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-lock"></i>਍ഀ
਍ഀ
                                        <span>Radmutterschloss</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">਍ഀ
਍ഀ
                                        <span class="boolean-value ${appointment.has_wheel_lock ? 'true' : 'false'}">਍ഀ
਍ഀ
                                            <i class="fas fa-${appointment.has_wheel_lock ? 'check' : 'times'}"></i>਍ഀ
਍ഀ
                                            ${appointment.has_wheel_lock ? 'Ja' : 'Nein'}਍ഀ
਍ഀ
                                        </span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-wind"></i>਍ഀ
਍ഀ
                                        <span>Scheibenwischerbl뿯½tter</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">਍ഀ
਍ഀ
                                        <span class="boolean-value ${appointment.wiper_blades ? 'true' : 'false'}">਍ഀ
਍ഀ
                                            <i class="fas fa-${appointment.wiper_blades ? 'check' : 'times'}"></i>਍ഀ
਍ഀ
                                            ${appointment.wiper_blades ? 'Ja (20% + 1L Scheibenklar)' : 'Nein'}਍ഀ
਍ഀ
                                        </span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <!-- Tire Order Information -->਍ഀ
਍ഀ
                        ${appointment.tire_order_date ? `਍ഀ
਍ഀ
                        <div class="detail-section">਍ഀ
਍ഀ
                            <div class="section-header">਍ഀ
਍ഀ
                                <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                                <h4>Reifenbestellung</h4>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="section-content">਍ഀ
਍ഀ
                                <div class="tire-order-status">਍ഀ
਍ഀ
                                    <div class="status-indicator success">਍ഀ
਍ഀ
                                        <i class="fas fa-check-circle"></i>਍ഀ
਍ഀ
                                        <span>Reifen bestellt</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-calendar-check"></i>਍ഀ
਍ഀ
                                        <span>Bestellt am</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${formatDateTime(appointment.tire_order_date)}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-clock"></i>਍ഀ
਍ഀ
                                        <span>Bestellzeit</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${formatTime(appointment.tire_order_date)}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-calendar-day"></i>਍ഀ
਍ഀ
                                        <span>Bestelldatum</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${formatDate(appointment.tire_order_date)}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-user-tie"></i>਍ഀ
਍ഀ
                                        <span>Bestellt von</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${appointment.tire_order_user || 'System'}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ${appointment.tire_order_status ? `਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-info-circle"></i>਍ഀ
਍ഀ
                                        <span>Bestellstatus</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">਍ഀ
਍ഀ
                                        <span class="tire-status-badge status-${appointment.tire_order_status}">਍ഀ
਍ഀ
                                            <i class="fas fa-${appointment.tire_order_status === 'bestellt' ? 'clock' : appointment.tire_order_status === 'geliefert' ? 'check-circle' : 'times-circle'}"></i>਍ഀ
਍ഀ
                                            ${appointment.tire_order_status === 'bestellt' ? 'Bestellt' : appointment.tire_order_status === 'geliefert' ? 'Geliefert' : 'Storniert'}਍ഀ
਍ഀ
                                        </span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ` : ''}਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-warehouse"></i>਍ഀ
਍ഀ
                                        <span>Einlagerungsnummer</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value storage-number">${appointment.storage_number}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ` : ''}਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <!-- Additional Information -->਍ഀ
਍ഀ
                        <div class="detail-section ${appointment.tire_order_date ? '' : 'full-width'}">਍ഀ
਍ഀ
                            <div class="section-header">਍ഀ
਍ഀ
                                <i class="fas fa-info-circle"></i>਍ഀ
਍ഀ
                                <h4>Zus뿯½tzliche Informationen</h4>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="section-content">਍ഀ
਍ഀ
                                ${appointment.info_text ? `਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-comment"></i>਍ഀ
਍ഀ
                                        <span>Kundennotizen</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value info-text">${appointment.info_text}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                ` : ''}਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-calendar-plus"></i>਍ഀ
਍ഀ
                                        <span>Erstellt am</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${formatDateTime(appointment.created_at)}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                                <div class="info-item">਍ഀ
਍ഀ
                                    <div class="info-label">਍ഀ
਍ഀ
                                        <i class="fas fa-edit"></i>਍ഀ
਍ഀ
                                        <span>Zuletzt aktualisiert</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="info-value">${formatDateTime(appointment.updated_at)}</div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <!-- RESY-Daten Button -->਍ഀ
                    ${appointment.storage_number && appointment.storage_number.trim() !== '' ? `਍ഀ
                        <div class="detail-section">਍ഀ
                            <div class="section-header">਍ഀ
                                <h4><i class="fas fa-tire"></i> Reifenstatus (RESY)</h4>਍ഀ
                            </div>਍ഀ
                            <div class="section-content">਍ഀ
                                <div class="info-item">਍ഀ
                                    <div class="info-label">਍ഀ
                                        <i class="fas fa-barcode"></i>਍ഀ
                                        <span>Einlagerungsnummer</span>਍ഀ
                                    </div>਍ഀ
                                    <div class="info-value highlight">${appointment.storage_number}</div>਍ഀ
                                </div>਍ഀ
                                <div class="action-buttons">਍ഀ
                                    <button type="button" class="btn btn-primary" onclick="checkTireStatus({਍ഀ
                                        storage_number: '${appointment.storage_number}',਍ഀ
                                        customer_name: '${appointment.customer_name}',਍ഀ
                                        autohaus_id: ${appointment.autohaus_id || 'null'}਍ഀ
                                    })">਍ഀ
                                        <i class="fas fa-search"></i>਍ഀ
                                        <span>Reifenstatus pr뿯½fen</span>਍ഀ
                                    </button>਍ഀ
                                </div>਍ഀ
                            </div>਍ഀ
                        </div>਍ഀ
                    ` : ''}਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            modal.style.display = 'block';਍ഀ
            ਍ഀ
            // Automatisch RESY-Daten laden, wenn Einlagerungsnummer vorhanden ist਍ഀ
            if (appointment.storage_number && appointment.storage_number.trim() !== '') {਍ഀ
                console.log('붿붿 Automatisches Laden der RESY-Daten f뿯½r:', appointment.storage_number);਍ഀ
                ਍ഀ
                // Kurze Verz뿯½gerung, damit das Modal vollst뿯½ndig geladen ist਍ഀ
                setTimeout(() => {਍ഀ
                    checkTireStatus(appointment);਍ഀ
                }, 500);਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Close appointment modal਍ഀ
਍ഀ
        function closeAppointmentModal() {਍ഀ
਍ഀ
            document.getElementById('appointment-modal').style.display = 'none';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Edit appointment਍ഀ
਍ഀ
        function editAppointment(appointment) {਍ഀ
਍ഀ
            const modal = document.getElementById('edit-appointment-modal');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Fill form with appointment data਍ഀ
਍ഀ
            document.getElementById('edit-appointment-id').value = appointment.id;਍ഀ
਍ഀ
            document.getElementById('edit-customer-name').value = appointment.customer_name;਍ഀ
਍ഀ
            document.getElementById('edit-license-plate').value = appointment.license_plate;਍ഀ
਍ഀ
            document.getElementById('edit-phone').value = appointment.phone;਍ഀ
਍ഀ
            document.getElementById('edit-event-id').value = appointment.event_id;਍ഀ
਍ഀ
            document.getElementById('edit-slot-date').value = appointment.slot_date;਍ഀ
਍ഀ
            document.getElementById('edit-slot-time').value = appointment.slot_time;਍ഀ
਍ഀ
            document.getElementById('edit-storage-number').value = appointment.storage_number || '';਍ഀ
਍ഀ
            document.getElementById('edit-brings-wheels').value = appointment.brings_wheels ? '1' : '0';਍ഀ
਍ഀ
            document.getElementById('edit-wheels-storage-action').value = appointment.wheels_storage_action || 'store';਍ഀ
਍ഀ
            document.getElementById('edit-seasonal-check').value = appointment.seasonal_check || 'none';਍ഀ
਍ഀ
            document.getElementById('edit-has-wheel-lock').value = appointment.has_wheel_lock ? '1' : '0';਍ഀ
਍ഀ
            document.getElementById('edit-wiper-blades').value = appointment.wiper_blades ? '1' : '0';਍ഀ
਍ഀ
            document.getElementById('edit-info-text').value = appointment.info_text || '';਍ഀ
਍ഀ
            document.getElementById('edit-status').value = appointment.status;਍ഀ
਍ഀ
            document.getElementById('edit-order-number').value = appointment.order_number || '';਍ഀ
਍ഀ
            document.getElementById('edit-admin-notes').value = appointment.admin_notes || '';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Set the event date and load available slots਍ഀ
਍ഀ
            setEventDate();਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            modal.style.display = 'block';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Close edit appointment modal਍ഀ
਍ഀ
        function closeEditAppointmentModal() {਍ഀ
਍ഀ
            document.getElementById('edit-appointment-modal').style.display = 'none';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Copy appointment਍ഀ
਍ഀ
        function copyAppointment(appointmentId) {਍ഀ
਍ഀ
            if (!confirm('Termin kopieren? Es wird eine Kopie mit dem Status "Wartend" erstellt.')) {਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const form = document.createElement('form');਍ഀ
਍ഀ
            form.method = 'POST';਍ഀ
਍ഀ
            form.innerHTML = `਍ഀ
਍ഀ
                <input type="hidden" name="action" value="copy">਍ഀ
਍ഀ
                <input type="hidden" name="id" value="${appointmentId}">਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            document.body.appendChild(form);਍ഀ
਍ഀ
            form.submit();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Set event date when event is selected਍ഀ
਍ഀ
        function setEventDate() {਍ഀ
਍ഀ
            const eventSelect = document.getElementById('edit-event-id');਍ഀ
਍ഀ
            const dateInput = document.getElementById('edit-slot-date');਍ഀ
਍ഀ
            const dateInfo = document.getElementById('date-info');਍ഀ
਍ഀ
            const selectedOption = eventSelect.options[eventSelect.selectedIndex];਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (selectedOption.value && selectedOption.dataset.eventDate) {਍ഀ
਍ഀ
                dateInput.value = selectedOption.dataset.eventDate;਍ഀ
਍ഀ
                dateInfo.style.display = 'block';਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                // Hide the info after 3 seconds਍ഀ
਍ഀ
                setTimeout(() => {਍ഀ
਍ഀ
                    dateInfo.style.display = 'none';਍ഀ
਍ഀ
                }, 3000);਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                // Load available slots after setting the date਍ഀ
਍ഀ
                loadAvailableSlots();਍ഀ
਍ഀ
            } else {਍ഀ
਍ഀ
                dateInfo.style.display = 'none';਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Load available slots for selected event and date਍ഀ
਍ഀ
        function loadAvailableSlots() {਍ഀ
਍ഀ
            const eventId = document.getElementById('edit-event-id').value;਍ഀ
਍ഀ
            const date = document.getElementById('edit-slot-date').value;਍ഀ
਍ഀ
            const slotTimeSelect = document.getElementById('edit-slot-time');਍ഀ
਍ഀ
            const slotInfo = document.getElementById('slot-info');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (!eventId || !date) {਍ഀ
਍ഀ
                slotTimeSelect.innerHTML = '<option value="">Zeit ausw뿯½hlen...</option>';਍ഀ
਍ഀ
                slotInfo.style.display = 'none';਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show loading state਍ഀ
਍ഀ
            slotTimeSelect.innerHTML = '<option value="">Lade verf뿯½gbare Zeiten...</option>';਍ഀ
਍ഀ
            slotTimeSelect.disabled = true;਍ഀ
਍ഀ
            slotInfo.style.display = 'block';਍ഀ
਍ഀ
            slotInfo.textContent = 'Verf뿯½gbare Zeiten werden geladen...';਍ഀ
਍ഀ
            slotInfo.style.color = '#007bff';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Fetch available slots਍ഀ
਍ഀ
            fetch(`../api/appointments.php?event_id=${eventId}&date=${date}`)਍ഀ
਍ഀ
                .then(response => response.json())਍ഀ
਍ഀ
                .then(data => {਍ഀ
਍ഀ
                    slotTimeSelect.innerHTML = '<option value="">Zeit ausw뿯½hlen...</option>';਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    if (data.success && data.available_slots) {਍ഀ
਍ഀ
                        let availableCount = 0;਍ഀ
਍ഀ
                        let totalCount = 0;਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        data.available_slots.forEach(slot => {਍ഀ
਍ഀ
                            const option = document.createElement('option');਍ഀ
਍ഀ
                            option.value = slot.time;਍ഀ
਍ഀ
                            option.textContent = `${slot.formatted_time} (${slot.available_count}/${slot.max_count} verf뿯½gbar)`;਍ഀ
਍ഀ
                            ਍ഀ
਍ഀ
                            if (slot.available) {਍ഀ
਍ഀ
                                availableCount += slot.available_count;਍ഀ
਍ഀ
                            }਍ഀ
਍ഀ
                            totalCount += slot.max_count;਍ഀ
਍ഀ
                            ਍ഀ
਍ഀ
                            if (!slot.available) {਍ഀ
਍ഀ
                                option.disabled = true;਍ഀ
਍ഀ
                                option.textContent += ' - Ausgebucht';਍ഀ
਍ഀ
                                option.style.color = '#dc3545';਍ഀ
਍ഀ
                            }਍ഀ
਍ഀ
                            ਍ഀ
਍ഀ
                            slotTimeSelect.appendChild(option);਍ഀ
਍ഀ
                        });਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        slotInfo.textContent = `${availableCount} von ${totalCount} Pl뿯½tzen verf뿯½gbar`;਍ഀ
਍ഀ
                        slotInfo.style.color = availableCount > 0 ? '#28a745' : '#dc3545';਍ഀ
਍ഀ
                    } else {਍ഀ
਍ഀ
                        slotTimeSelect.innerHTML = '<option value="">Keine Zeiten verf뿯½gbar</option>';਍ഀ
਍ഀ
                        slotInfo.textContent = 'Keine Zeiten f뿯½r dieses Event verf뿯½gbar';਍ഀ
਍ഀ
                        slotInfo.style.color = '#dc3545';਍ഀ
਍ഀ
                    }਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    slotTimeSelect.disabled = false;਍ഀ
਍ഀ
                })਍ഀ
਍ഀ
                .catch(error => {਍ഀ
਍ഀ
                    console.error('Error loading slots:', error);਍ഀ
਍ഀ
                    slotTimeSelect.innerHTML = '<option value="">Fehler beim Laden</option>';਍ഀ
਍ഀ
                    slotInfo.textContent = 'Fehler beim Laden der verf뿯½gbaren Zeiten';਍ഀ
਍ഀ
                    slotInfo.style.color = '#dc3545';਍ഀ
਍ഀ
                    slotTimeSelect.disabled = false;਍ഀ
਍ഀ
                });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Export appointments਍ഀ
਍ഀ
        function exportAppointments() {਍ഀ
਍ഀ
            const appointments = <?php echo json_encode($appointments); ?>;਍ഀ
਍ഀ
            const csvData = appointments.map(apt => ({਍ഀ
਍ഀ
                'Kunde': apt.customer_name,਍ഀ
਍ഀ
                'Kennzeichen': apt.license_plate,਍ഀ
਍ഀ
                'Event': apt.event_name,਍ഀ
਍ഀ
                'Datum': formatDate(apt.slot_date),਍ഀ
਍ഀ
                'Zeit': formatTime(apt.slot_time),਍ഀ
਍ഀ
                'Telefon': apt.phone,਍ഀ
਍ഀ
                'Status': apt.status === 'booked' ? 'Gebucht' : apt.status === 'pending' ? 'Wartend' : apt.status === 'approved' ? 'Genehmigt' : apt.status === 'rejected' ? 'Abgelehnt' : apt.status === 'rescheduled' ? 'Verschoben' : apt.status === 'vorbereitet' ? 'Vorbereitet' : apt.status === 'completed' ? 'Abgeschlossen' : 'Storniert',਍ഀ
਍ഀ
                'Bringt R뿯½der mit': apt.brings_wheels ? 'Ja' : 'Nein',਍ഀ
਍ഀ
                'Einlagerungsnummer': apt.storage_number || '',਍ഀ
਍ഀ
                'Jahreszeiten-Check': apt.seasonal_check === 'none' ? 'Kein Check' : apt.seasonal_check === 'spring' ? 'Fr뿯½hjahres-Check' : 'Winter-Check'਍ഀ
਍ഀ
            }));਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            exportToCSV(csvData, 'boxxenstopp-termine.csv');਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Close modal when clicking outside਍ഀ
਍ഀ
        window.onclick = function(event) {਍ഀ
਍ഀ
            const appointmentModal = document.getElementById('appointment-modal');਍ഀ
਍ഀ
            const editModal = document.getElementById('edit-appointment-modal');਍ഀ
਍ഀ
            const tireOrderModal = document.getElementById('tire-order-modal');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (event.target === appointmentModal) {਍ഀ
਍ഀ
                closeAppointmentModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            if (event.target === editModal) {਍ഀ
਍ഀ
                closeEditAppointmentModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            if (event.target === tireOrderModal) {਍ഀ
਍ഀ
                closeTireOrderModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Format date and time਍ഀ
਍ഀ
        function formatDateTime(dateTimeString) {਍ഀ
਍ഀ
            if (!dateTimeString) return '';਍ഀ
਍ഀ
            const date = new Date(dateTimeString);਍ഀ
਍ഀ
            return date.toLocaleString('de-DE', {਍ഀ
਍ഀ
                year: 'numeric',਍ഀ
਍ഀ
                month: '2-digit',਍ഀ
਍ഀ
                day: '2-digit',਍ഀ
਍ഀ
                hour: '2-digit',਍ഀ
਍ഀ
                minute: '2-digit'਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Format date (YYYY-MM-DD to DD.MM.YYYY)਍ഀ
਍ഀ
        function formatDate(dateString) {਍ഀ
਍ഀ
            if (!dateString) return '';਍ഀ
਍ഀ
            const date = new Date(dateString);਍ഀ
਍ഀ
            if (isNaN(date.getTime())) return 'Ung뿯½ltiges Datum';਍ഀ
਍ഀ
            return date.toLocaleDateString('de-DE', {਍ഀ
਍ഀ
                year: 'numeric',਍ഀ
਍ഀ
                month: '2-digit',਍ഀ
਍ഀ
                day: '2-digit'਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Format time (HH:MM:SS to HH:MM)਍ഀ
਍ഀ
        function formatTime(timeString) {਍ഀ
਍ഀ
            if (!timeString) return '';਍ഀ
਍ഀ
            const time = new Date('2000-01-01T' + timeString);਍ഀ
਍ഀ
            if (isNaN(time.getTime())) return 'Ung뿯½ltige Zeit';਍ഀ
਍ഀ
            return time.toLocaleTimeString('de-DE', {਍ഀ
਍ഀ
                hour: '2-digit',਍ഀ
਍ഀ
                minute: '2-digit'਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Approve appointment਍ഀ
਍ഀ
        function approveAppointment(appointmentId) {਍ഀ
਍ഀ
            if (!confirm('Termin genehmigen? Der Kunde erh뿯½lt eine WhatsApp-Best뿯½tigung.')) {਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const form = document.createElement('form');਍ഀ
਍ഀ
            form.method = 'POST';਍ഀ
਍ഀ
            form.innerHTML = `਍ഀ
਍ഀ
                <input type="hidden" name="action" value="update">਍ഀ
਍ഀ
                <input type="hidden" name="action_type" value="approve">਍ഀ
਍ഀ
                <input type="hidden" name="id" value="${appointmentId}">਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            document.body.appendChild(form);਍ഀ
਍ഀ
            form.submit();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Reject appointment਍ഀ
਍ഀ
        function rejectAppointment(appointmentId) {਍ഀ
਍ഀ
            const reason = prompt('Grund f뿯½r die Ablehnung:');਍ഀ
਍ഀ
            if (reason === null) return;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (!confirm('Terminanfrage ablehnen? Der Kunde erh뿯½lt eine WhatsApp-Benachrichtigung.')) {਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const form = document.createElement('form');਍ഀ
਍ഀ
            form.method = 'POST';਍ഀ
਍ഀ
            form.innerHTML = `਍ഀ
਍ഀ
                <input type="hidden" name="action" value="update">਍ഀ
਍ഀ
                <input type="hidden" name="action_type" value="reject">਍ഀ
਍ഀ
                <input type="hidden" name="id" value="${appointmentId}">਍ഀ
਍ഀ
                <input type="hidden" name="rejection_reason" value="${reason}">਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            document.body.appendChild(form);਍ഀ
਍ഀ
            form.submit();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Reschedule appointment਍ഀ
਍ഀ
        function rescheduleAppointment(appointmentId) {਍ഀ
਍ഀ
            const newDate = prompt('Neues Datum (YYYY-MM-DD):');਍ഀ
਍ഀ
            if (newDate === null) return;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const newTime = prompt('Neue Zeit (HH:MM):');਍ഀ
਍ഀ
            if (newTime === null) return;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const reason = prompt('Grund f뿯½r die Verschiebung:');਍ഀ
਍ഀ
            if (reason === null) return;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (!confirm('Termin verschieben? Der Kunde erh뿯½lt eine Benachrichtigung.')) {਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const form = document.createElement('form');਍ഀ
਍ഀ
            form.method = 'POST';਍ഀ
਍ഀ
            form.innerHTML = `਍ഀ
਍ഀ
                <input type="hidden" name="action" value="update">਍ഀ
਍ഀ
                <input type="hidden" name="action_type" value="reschedule">਍ഀ
਍ഀ
                <input type="hidden" name="id" value="${appointmentId}">਍ഀ
਍ഀ
                <input type="hidden" name="new_slot_date" value="${newDate}">਍ഀ
਍ഀ
                <input type="hidden" name="new_slot_time" value="${newTime}">਍ഀ
਍ഀ
                <input type="hidden" name="reschedule_reason" value="${reason}">਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            document.body.appendChild(form);਍ഀ
਍ഀ
            form.submit();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Mark as booked਍ഀ
਍ഀ
        function markAsBooked(appointmentId) {਍ഀ
਍ഀ
            if (!confirm('Termin als gebucht markieren?')) {਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const form = document.createElement('form');਍ഀ
਍ഀ
            form.method = 'POST';਍ഀ
਍ഀ
            form.innerHTML = `਍ഀ
਍ഀ
                <input type="hidden" name="action" value="update">਍ഀ
਍ഀ
                <input type="hidden" name="action_type" value="mark_booked">਍ഀ
਍ഀ
                <input type="hidden" name="id" value="${appointmentId}">਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            document.body.appendChild(form);਍ഀ
਍ഀ
            form.submit();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Order tires function਍ഀ
਍ഀ
        function orderTires(appointment) {਍ഀ
਍ഀ
            console.log('orderTires aufgerufen mit:', appointment);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show confirmation modal਍ഀ
਍ഀ
            showTireOrderModal(appointment);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show tire order modal਍ഀ
਍ഀ
        function showTireOrderModal(appointment) {਍ഀ
਍ഀ
            const modal = document.getElementById('tire-order-modal');਍ഀ
਍ഀ
            const content = document.getElementById('tire-order-content');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="tire-order-confirmation">਍ഀ
਍ഀ
                    <div class="order-header">਍ഀ
਍ഀ
                        <div class="customer-info">਍ഀ
਍ഀ
                            <h4>਍ഀ
਍ഀ
                                <i class="fas fa-user"></i>਍ഀ
਍ഀ
                                ${appointment.customer_name}਍ഀ
਍ഀ
                            </h4>਍ഀ
਍ഀ
                            <p class="customer-details">਍ഀ
਍ഀ
                                <i class="fas fa-car"></i> ${appointment.license_plate} • ਍ഀ
਍ഀ
                                <i class="fas fa-warehouse"></i> ${appointment.storage_number}਍ഀ
਍ഀ
                            </p>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="appointment-info">਍ഀ
਍ഀ
                            <h4>਍ഀ
਍ഀ
                                <i class="fas fa-calendar"></i>਍ഀ
਍ഀ
                                Termin਍ഀ
਍ഀ
                            </h4>਍ഀ
਍ഀ
                            <p class="appointment-details">਍ഀ
਍ഀ
                                ${formatDate(appointment.slot_date)} um ${formatTime(appointment.slot_time)}਍ഀ
਍ഀ
                            </p>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="order-summary">਍ഀ
਍ഀ
                        <h4>਍ഀ
਍ഀ
                            <i class="fas fa-list"></i>਍ഀ
਍ഀ
                            Bestell뿯½bersicht਍ഀ
਍ഀ
                        </h4>਍ഀ
਍ഀ
                        <div class="summary-item">਍ഀ
਍ഀ
                            <span class="label">Event:</span>਍ഀ
਍ഀ
                            <span class="value">${appointment.event_name}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="summary-item">਍ഀ
਍ഀ
                            <span class="label">Event-Datum:</span>਍ഀ
਍ഀ
                            <span class="value">${formatDate(appointment.event_date)}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="summary-item">਍ഀ
਍ഀ
                            <span class="label">Einlagerungsnummer:</span>਍ഀ
਍ഀ
                            <span class="value">${appointment.storage_number}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="autohaus-selection">਍ഀ
਍ഀ
                        <h4>਍ഀ
਍ഀ
                            <i class="fas fa-building"></i>਍ഀ
਍ഀ
                            Autohaus f뿯½r Reifenlieferung ausw뿯½hlen਍ഀ
਍ഀ
                        </h4>਍ഀ
਍ഀ
                        <p class="selection-info">W뿯½hlen Sie das Autohaus aus, an das die Reifen geliefert werden sollen:</p>਍ഀ
਍ഀ
                        <div class="autohaus-options" id="autohaus-options">਍ഀ
਍ഀ
                            <div class="loading-autohaus">਍ഀ
਍ഀ
                                <i class="fas fa-spinner fa-spin"></i>਍ഀ
਍ഀ
                                Lade verf뿯½gbare Autoh뿯½user...਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="order-actions">਍ഀ
਍ഀ
                        <button class="btn btn-secondary" onclick="closeTireOrderModal()">਍ഀ
਍ഀ
                            <i class="fas fa-times"></i>਍ഀ
਍ഀ
                            Abbrechen਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                        <button class="btn btn-primary" id="confirm-order-btn" onclick="confirmTireOrder(${JSON.stringify(appointment).replace(/"/g, '&quot;')})" disabled>਍ഀ
਍ഀ
                            <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                            Reifen bestellen਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            modal.style.display = 'block';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Lade verf뿯½gbare Autoh뿯½user਍ഀ
਍ഀ
            loadAutohausOptions();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Load autohaus options਍ഀ
਍ഀ
        function loadAutohausOptions() {਍ഀ
਍ഀ
            fetch('../api/get_autohaus_services.php', {਍ഀ
਍ഀ
                method: 'GET',਍ഀ
਍ഀ
                headers: {਍ഀ
਍ഀ
                    'Content-Type': 'application/json',਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .then(response => response.json())਍ഀ
਍ഀ
            .then(data => {਍ഀ
਍ഀ
                if (data.success && data.autohauser) {਍ഀ
਍ഀ
                    displayAutohausOptions(data.autohauser);਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    showAutohausError('Fehler beim Laden der Autoh뿯½user: ' + (data.error || 'Unbekannter Fehler'));਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .catch(error => {਍ഀ
਍ഀ
                console.error('Error loading autohaus options:', error);਍ഀ
਍ഀ
                showAutohausError('Fehler beim Laden der Autoh뿯½user: ' + error.message);਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Display autohaus options਍ഀ
਍ഀ
        function displayAutohausOptions(autohauser) {਍ഀ
਍ഀ
            const container = document.getElementById('autohaus-options');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            container.innerHTML = autohauser.map(autohaus => `਍ഀ
਍ഀ
                <div class="autohaus-option" onclick="selectAutohausForOrder(${autohaus.id}, '${autohaus.name}', '${autohaus.short_name}')">਍ഀ
਍ഀ
                    <div class="autohaus-option-header">਍ഀ
਍ഀ
                        <h5>${autohaus.name}</h5>਍ഀ
਍ഀ
                        <span class="autohaus-short">${autohaus.short_name}</span>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    <div class="autohaus-option-details">਍ഀ
਍ഀ
                        <p><i class="fas fa-map-marker-alt"></i> ${autohaus.address}</p>਍ഀ
਍ഀ
                        <p><i class="fas fa-phone"></i> ${autohaus.phone}</p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `).join('');਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show autohaus error਍ഀ
਍ഀ
        function showAutohausError(message) {਍ഀ
਍ഀ
            const container = document.getElementById('autohaus-options');਍ഀ
਍ഀ
            container.innerHTML = `਍ഀ
਍ഀ
                <div class="autohaus-error">਍ഀ
਍ഀ
                    <i class="fas fa-exclamation-triangle"></i>਍ഀ
਍ഀ
                    <p>${message}</p>਍ഀ
਍ഀ
                    <button class="btn btn-sm btn-outline-primary" onclick="loadAutohausOptions()">਍ഀ
਍ഀ
                        <i class="fas fa-refresh"></i> Erneut versuchen਍ഀ
਍ഀ
                    </button>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Select autohaus for order਍ഀ
਍ഀ
        function selectAutohausForOrder(autohausId, autohausName, autohausShort) {਍ഀ
਍ഀ
            // Remove previous selection਍ഀ
਍ഀ
            document.querySelectorAll('.autohaus-option').forEach(option => {਍ഀ
਍ഀ
                option.classList.remove('selected');਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Mark selected option਍ഀ
਍ഀ
            event.currentTarget.classList.add('selected');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Store selection਍ഀ
਍ഀ
            window.selectedAutohaus = {਍ഀ
਍ഀ
                id: autohausId,਍ഀ
਍ഀ
                name: autohausName,਍ഀ
਍ഀ
                short: autohausShort਍ഀ
਍ഀ
            };਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Enable confirm button਍ഀ
਍ഀ
            document.getElementById('confirm-order-btn').disabled = false;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show selection confirmation਍ഀ
਍ഀ
            const container = document.getElementById('autohaus-options');਍ഀ
਍ഀ
            const confirmation = document.createElement('div');਍ഀ
਍ഀ
            confirmation.className = 'autohaus-selection-confirmed';਍ഀ
਍ഀ
            confirmation.innerHTML = `਍ഀ
਍ഀ
                <div class="selection-confirmed">਍ഀ
਍ഀ
                    <i class="fas fa-check-circle"></i>਍ഀ
਍ഀ
                    <span>Ausgew뿯½hlt: <strong>${autohausName}</strong></span>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            container.appendChild(confirmation);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Confirm tire order਍ഀ
਍ഀ
        function confirmTireOrder(appointment) {਍ഀ
਍ഀ
            // Check if autohaus is selected਍ഀ
਍ഀ
            if (!window.selectedAutohaus) {਍ഀ
਍ഀ
                alert('Bitte w뿯½hlen Sie ein Autohaus f뿯½r die Reifenlieferung aus.');਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const modal = document.getElementById('tire-order-modal');਍ഀ
਍ഀ
            const content = document.getElementById('tire-order-content');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show loading state with process steps਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="tire-order-loading">਍ഀ
਍ഀ
                    <div class="loading-spinner">਍ഀ
਍ഀ
                        <i class="fas fa-spinner fa-spin"></i>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    <h4>Reifenbestellung wird verarbeitet...</h4>਍ഀ
਍ഀ
                    <p>Bitte warten Sie einen Moment.</p>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="order-process">਍ഀ
਍ഀ
                        <div class="process-step active">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Reifenbestellung vorbereiten</h5>਍ഀ
਍ഀ
                                <p>Daten werden validiert und vorbereitet</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-cog"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>RESY-System kontaktieren</h5>਍ഀ
਍ഀ
                                <p>Integration mit dem Reifensystem wird hergestellt</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-truck"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Lieferung planen</h5>਍ഀ
਍ഀ
                                <p>Bestelltermin und Lieferung werden berechnet</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-check"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Bestellung abschlie뿯½en</h5>਍ഀ
਍ഀ
                                <p>Reifenbestellung wird finalisiert</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Prepare data਍ഀ
਍ഀ
            const orderData = {਍ഀ
਍ഀ
                storage_number: appointment.storage_number,਍ഀ
਍ഀ
                appointment_date: appointment.event_date,਍ഀ
਍ഀ
                event_name: appointment.event_name,਍ഀ
਍ഀ
                autohaus_id: window.selectedAutohaus.id਍ഀ
਍ഀ
            };਍ഀ
਍ഀ
਍ഀ
਍ഀ
            console.log('Sende Reifenbestellung:', orderData);਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Animate process steps਍ഀ
਍ഀ
            animateOrderProcess();਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Send order request਍ഀ
਍ഀ
            fetch('../api/tire_order.php', {਍ഀ
਍ഀ
                method: 'POST',਍ഀ
਍ഀ
                headers: {਍ഀ
਍ഀ
                    'Content-Type': 'application/json',਍ഀ
਍ഀ
                },਍ഀ
਍ഀ
                body: JSON.stringify(orderData)਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .then(response => {਍ഀ
਍ഀ
                console.log('API Response Status:', response.status);਍ഀ
਍ഀ
                if (!response.ok) {਍ഀ
਍ഀ
                    throw new Error('HTTP ' + response.status + ': ' + response.statusText);਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
                return response.json();਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .then(result => {਍ഀ
਍ഀ
                console.log('API Response:', result);਍ഀ
਍ഀ
                if (result.success) {਍ഀ
਍ഀ
                    showTireOrderSuccess(result, appointment);਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    showTireOrderError(result, appointment);਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .catch(error => {਍ഀ
਍ഀ
                console.error('Error:', error);਍ഀ
਍ഀ
                showTireOrderError({ error: error.message }, appointment);਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show success result਍ഀ
਍ഀ
        function showTireOrderSuccess(result, appointment) {਍ഀ
਍ഀ
            const content = document.getElementById('tire-order-content');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            let deliveryInfo = '';਍ഀ
਍ഀ
            const orderDate = result.order_date ? new Date(result.order_date) : new Date();਍ഀ
਍ഀ
            const eventDate = new Date(result.event_date || appointment.event_date);਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (orderDate && eventDate) {਍ഀ
਍ഀ
                        const daysDiff = Math.ceil((eventDate - orderDate) / (1000 * 60 * 60 * 24));਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        if (daysDiff >= 3) {਍ഀ
਍ഀ
                    deliveryInfo = `਍ഀ
਍ഀ
                        <div class="delivery-info success">਍ഀ
਍ഀ
                            <i class="fas fa-check-circle"></i>਍ഀ
਍ഀ
                            <span>Reifen werden ${daysDiff} Tage VOR dem Event geliefert</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    `;਍ഀ
਍ഀ
                        } else if (daysDiff > 0) {਍ഀ
਍ഀ
                    deliveryInfo = `਍ഀ
਍ഀ
                        <div class="delivery-info warning">਍ഀ
਍ഀ
                            <i class="fas fa-exclamation-triangle"></i>਍ഀ
਍ഀ
                            <span>Reifen werden nur ${daysDiff} Tage VOR dem Event geliefert (weniger als 3 Tage)</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    `;਍ഀ
਍ഀ
                        } else {਍ഀ
਍ഀ
                    deliveryInfo = `਍ഀ
਍ഀ
                        <div class="delivery-info error">਍ഀ
਍ഀ
                            <i class="fas fa-times-circle"></i>਍ഀ
਍ഀ
                            <span>Reifen werden NACH dem Event geliefert</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    `;਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            let resyInfo = '';਍ഀ
਍ഀ
                    if (result.resy_result) {਍ഀ
਍ഀ
                resyInfo = `਍ഀ
਍ഀ
                    <div class="resy-info">਍ഀ
਍ഀ
                        <h5><i class="fas fa-cog"></i> RESY-System</h5>਍ഀ
਍ഀ
                        <p>${result.resy_result.message}</p>਍ഀ
਍ഀ
                        ${result.resy_result.lgs_id ? `<p><strong>LGS-ID:</strong> ${result.resy_result.lgs_id}</p>` : ''}਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                `;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            let warningInfo = '';਍ഀ
਍ഀ
                    if (result.warning) {਍ഀ
਍ഀ
                warningInfo = `਍ഀ
਍ഀ
                    <div class="warning-info">਍ഀ
਍ഀ
                        <i class="fas fa-exclamation-triangle"></i>਍ഀ
਍ഀ
                        <span>${result.warning}</span>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                `;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="tire-order-result success">਍ഀ
਍ഀ
                    <div class="result-header">਍ഀ
਍ഀ
                        <div class="success-icon">਍ഀ
਍ഀ
                            <i class="fas fa-check-circle"></i>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <h4>Reifenbestellung erfolgreich!</h4>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-message">਍ഀ
਍ഀ
                        <p>${result.message}</p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-details">਍ഀ
਍ഀ
                        <div class="detail-item">਍ഀ
਍ഀ
                            <span class="label">Event-Datum:</span>਍ഀ
਍ഀ
                            <span class="value">${formatDate(result.event_date || appointment.event_date)}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="detail-item">਍ഀ
਍ഀ
                            <span class="label">Bestelltermin:</span>਍ഀ
਍ഀ
                            <span class="value">${formatDate(result.order_date || new Date().toISOString().split('T')[0])}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    ${deliveryInfo}਍ഀ
਍ഀ
                    ${resyInfo}਍ഀ
਍ഀ
                    ${warningInfo}਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-actions">਍ഀ
਍ഀ
                        <button class="btn btn-primary" onclick="closeTireOrderModal(); location.reload();">਍ഀ
਍ഀ
                            <i class="fas fa-check"></i>਍ഀ
਍ഀ
                            Schlie뿯½en਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show error result਍ഀ
਍ഀ
        function showTireOrderError(result, appointment) {਍ഀ
਍ഀ
            const content = document.getElementById('tire-order-content');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            let resyError = '';਍ഀ
਍ഀ
                    if (result.resy_result && !result.resy_result.success) {਍ഀ
਍ഀ
                resyError = `਍ഀ
਍ഀ
                    <div class="resy-error">਍ഀ
਍ഀ
                        <h5><i class="fas fa-cog"></i> RESY-System Fehler</h5>਍ഀ
਍ഀ
                        <p>${result.resy_result.error}</p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                `;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="tire-order-result error">਍ഀ
਍ഀ
                    <div class="result-header">਍ഀ
਍ഀ
                        <div class="error-icon">਍ഀ
਍ഀ
                            <i class="fas fa-times-circle"></i>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <h4>Fehler bei der Reifenbestellung</h4>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-message">਍ഀ
਍ഀ
                        <p>${result.error}</p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    ${resyError}਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-actions">਍ഀ
਍ഀ
                        <button class="btn btn-secondary" onclick="showTireOrderModal(${JSON.stringify(appointment).replace(/"/g, '&quot;')})">਍ഀ
਍ഀ
                            <i class="fas fa-redo"></i>਍ഀ
਍ഀ
                            Erneut versuchen਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                        <button class="btn btn-primary" onclick="closeTireOrderModal()">਍ഀ
਍ഀ
                            <i class="fas fa-times"></i>਍ഀ
਍ഀ
                            Schlie뿯½en਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Animate order process steps਍ഀ
਍ഀ
        function animateOrderProcess() {਍ഀ
਍ഀ
            const steps = document.querySelectorAll('.process-step');਍ഀ
਍ഀ
            let currentStep = 0;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const stepInterval = setInterval(() => {਍ഀ
਍ഀ
                if (currentStep < steps.length) {਍ഀ
਍ഀ
                    // Mark current step as completed਍ഀ
਍ഀ
                    if (currentStep > 0) {਍ഀ
਍ഀ
                        steps[currentStep - 1].classList.remove('active');਍ഀ
਍ഀ
                        steps[currentStep - 1].classList.add('completed');਍ഀ
਍ഀ
                    }਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    // Activate next step਍ഀ
਍ഀ
                    if (currentStep < steps.length) {਍ഀ
਍ഀ
                        steps[currentStep].classList.add('active');਍ഀ
਍ഀ
                    }਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    currentStep++;਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    clearInterval(stepInterval);਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            }, 800); // Change step every 800ms਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Close tire order modal਍ഀ
਍ഀ
        function closeTireOrderModal() {਍ഀ
਍ഀ
            document.getElementById('tire-order-modal').style.display = 'none';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // ===== BULK ACTIONS FUNCTIONS =====਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Toggle all appointments selection਍ഀ
਍ഀ
        function toggleAllAppointments(checkbox) {਍ഀ
਍ഀ
            const appointmentCheckboxes = document.querySelectorAll('.appointment-checkbox');਍ഀ
਍ഀ
            appointmentCheckboxes.forEach(cb => {਍ഀ
਍ഀ
                cb.checked = checkbox.checked;਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
            updateBulkActions();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Update bulk actions toolbar visibility and count਍ഀ
਍ഀ
        function updateBulkActions() {਍ഀ
਍ഀ
            const selectedCheckboxes = document.querySelectorAll('.appointment-checkbox:checked');਍ഀ
਍ഀ
            const toolbar = document.getElementById('bulk-actions-toolbar');਍ഀ
਍ഀ
            const countText = document.getElementById('selected-count-text');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (selectedCheckboxes.length > 0) {਍ഀ
਍ഀ
                toolbar.style.display = 'block';਍ഀ
਍ഀ
                countText.textContent = `${selectedCheckboxes.length} Termine ausgew뿯½hlt`;਍ഀ
਍ഀ
            } else {਍ഀ
਍ഀ
                toolbar.style.display = 'none';਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Get selected appointment IDs਍ഀ
਍ഀ
        function getSelectedAppointmentIds() {਍ഀ
਍ഀ
            const selectedCheckboxes = document.querySelectorAll('.appointment-checkbox:checked');਍ഀ
਍ഀ
            return Array.from(selectedCheckboxes).map(cb => cb.value);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Get selected appointment data਍ഀ
਍ഀ
        function getSelectedAppointments() {਍ഀ
਍ഀ
            const selectedIds = getSelectedAppointmentIds();਍ഀ
਍ഀ
            const appointments = <?php echo json_encode($appointments); ?>;਍ഀ
਍ഀ
            return appointments.filter(apt => selectedIds.includes(apt.id.toString()));਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Bulk delete appointments਍ഀ
਍ഀ
        function bulkDeleteAppointments() {਍ഀ
਍ഀ
            const selectedAppointments = getSelectedAppointments();਍ഀ
਍ഀ
            if (selectedAppointments.length === 0) {਍ഀ
਍ഀ
                alert('Bitte w뿯½hlen Sie mindestens einen Termin aus.');਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            const modal = document.getElementById('bulk-delete-modal');਍ഀ
਍ഀ
            const list = document.getElementById('bulk-delete-list');਍ഀ
਍ഀ
            const count = document.getElementById('delete-count');਍ഀ
਍ഀ
            const tireCount = document.getElementById('tire-orders-count');਍ഀ
਍ഀ
            const tireSection = document.getElementById('tire-cancellation-section');਍ഀ
਍ഀ
            const tireList = document.getElementById('tire-cancellation-list');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Filter appointments with tire orders਍ഀ
਍ഀ
            const appointmentsWithTireOrders = selectedAppointments.filter(apt => ਍ഀ
਍ഀ
                apt.tire_order_date && !apt.brings_wheels && apt.storage_number਍ഀ
਍ഀ
            );਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Update counts਍ഀ
਍ഀ
            count.textContent = selectedAppointments.length;਍ഀ
਍ഀ
            tireCount.textContent = appointmentsWithTireOrders.length;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show tire cancellation section if needed਍ഀ
਍ഀ
            if (appointmentsWithTireOrders.length > 0) {਍ഀ
਍ഀ
                tireSection.style.display = 'block';਍ഀ
਍ഀ
                tireList.innerHTML = appointmentsWithTireOrders.map(apt => `਍ഀ
਍ഀ
                    <div class="tire-order-item">਍ഀ
਍ഀ
                        <div class="tire-order-info">਍ഀ
਍ഀ
                            <strong>${apt.customer_name}</strong> - ${apt.license_plate}਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="tire-order-details">਍ഀ
਍ഀ
                            <span class="storage-number">Einlagerungsnummer: ${apt.storage_number}</span>਍ഀ
਍ഀ
                            <span class="order-date">Bestellt: ${new Date(apt.tire_order_date).toLocaleString('de-DE')}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                `).join('');਍ഀ
਍ഀ
            } else {਍ഀ
਍ഀ
                tireSection.style.display = 'none';਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show appointment details਍ഀ
਍ഀ
            list.innerHTML = selectedAppointments.map(apt => `਍ഀ
਍ഀ
                <div class="appointment-item">਍ഀ
਍ഀ
                    <div class="appointment-info">਍ഀ
਍ഀ
                        <strong>${apt.customer_name}</strong>਍ഀ
਍ഀ
                        <span class="license-plate">${apt.license_plate}</span>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    <div class="appointment-details">਍ഀ
਍ഀ
                        <div class="detail-row">਍ഀ
਍ഀ
                            <span class="label">Event:</span>਍ഀ
਍ഀ
                            <span class="value">${apt.event_name}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="detail-row">਍ഀ
਍ഀ
                            <span class="label">Datum:</span>਍ഀ
਍ഀ
                            <span class="value">${new Date(apt.slot_date).toLocaleDateString('de-DE')} ${new Date(apt.slot_time).toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'})}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <div class="detail-row">਍ഀ
਍ഀ
                            <span class="label">Status:</span>਍ഀ
਍ഀ
                            <span class="value status-${apt.status}">${apt.status}</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ${apt.tire_order_date ? `਍ഀ
਍ഀ
                            <div class="detail-row">਍ഀ
਍ഀ
                                <span class="label">Reifenbestellung:</span>਍ഀ
਍ഀ
                                <span class="value tire-ordered">Bestellt am ${new Date(apt.tire_order_date).toLocaleString('de-DE')}</span>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        ` : ''}਍ഀ
਍ഀ
                        ${apt.storage_number ? `਍ഀ
਍ഀ
                            <div class="detail-row">਍ഀ
਍ഀ
                                <span class="label">Einlagerungsnummer:</span>਍ഀ
਍ഀ
                                <span class="value">${apt.storage_number}</span>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        ` : ''}਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `).join('');਍ഀ
਍ഀ
਍ഀ
਍ഀ
            modal.style.display = 'block';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Confirm bulk delete਍ഀ
਍ഀ
        function confirmBulkDelete() {਍ഀ
਍ഀ
            const selectedAppointments = getSelectedAppointments();਍ഀ
਍ഀ
            const selectedIds = getSelectedAppointmentIds();਍ഀ
਍ഀ
            const deletionReason = document.getElementById('deletion-reason-input').value;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show loading state਍ഀ
਍ഀ
            const modal = document.getElementById('bulk-delete-modal');਍ഀ
਍ഀ
            const content = modal.querySelector('.modal-body');਍ഀ
਍ഀ
            const originalContent = content.innerHTML;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="delete-loading">਍ഀ
਍ഀ
                    <div class="loading-spinner">਍ഀ
਍ഀ
                        <i class="fas fa-spinner fa-spin"></i>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    <h4>Termine werden gel뿯½scht...</h4>਍ഀ
਍ഀ
                    <p>Bitte warten Sie einen Moment.</p>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="delete-process">਍ഀ
਍ഀ
                        <div class="process-step active">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-database"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Audit-Daten speichern</h5>਍ഀ
਍ഀ
                                <p>L뿯½schvorgang wird protokolliert</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Reifenbestellungen pr뿯½fen</h5>਍ഀ
਍ഀ
                                <p>Stornierung von Reifenbestellungen</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-trash"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Termine l뿯½schen</h5>਍ഀ
਍ഀ
                                <p>Ausgew뿯½hlte Termine werden entfernt</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Animate process steps਍ഀ
਍ഀ
            animateDeleteProcess();਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Send AJAX request to delete appointments with audit data਍ഀ
਍ഀ
            fetch('appointments.php', {਍ഀ
਍ഀ
                method: 'POST',਍ഀ
਍ഀ
                headers: {਍ഀ
਍ഀ
                    'Content-Type': 'application/x-www-form-urlencoded',਍ഀ
਍ഀ
                },਍ഀ
਍ഀ
                body: `action=bulk_delete&appointment_ids=${selectedIds.join(',')}&appointments=${JSON.stringify(selectedAppointments)}&deletion_reason=${encodeURIComponent(deletionReason)}`਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .then(response => response.json())਍ഀ
਍ഀ
            .then(data => {਍ഀ
਍ഀ
                if (data.success) {਍ഀ
਍ഀ
                    showDeleteSuccess(data);਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    showDeleteError(data);਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .catch(error => {਍ഀ
਍ഀ
                console.error('Error:', error);਍ഀ
਍ഀ
                showDeleteError({ message: 'Fehler beim L뿯½schen der Termine: ' + error.message });਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Show delete success਍ഀ
਍ഀ
        function showDeleteSuccess(data) {਍ഀ
਍ഀ
            const modal = document.getElementById('bulk-delete-modal');਍ഀ
਍ഀ
            const content = modal.querySelector('.modal-body');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            let resultHtml = `਍ഀ
਍ഀ
                <div class="delete-result">਍ഀ
਍ഀ
                    <div class="result-header success">਍ഀ
਍ഀ
                        <div class="result-icon">਍ഀ
਍ഀ
                            <i class="fas fa-check-circle"></i>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <h4>L뿯½schvorgang erfolgreich abgeschlossen</h4>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-summary">਍ഀ
਍ഀ
                        <div class="summary-item success">਍ഀ
਍ഀ
                            <i class="fas fa-trash"></i>਍ഀ
਍ഀ
                            <span>Gel뿯½scht: ${data.deleted_count} Termine</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ${data.tire_cancelled_count > 0 ? `਍ഀ
਍ഀ
                            <div class="summary-item success">਍ഀ
਍ഀ
                                <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                                <span>Storniert: ${data.tire_cancelled_count} Reifenbestellungen</span>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        ` : ''}਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (data.tire_cancellation_errors && data.tire_cancellation_errors.length > 0) {਍ഀ
਍ഀ
                resultHtml += `਍ഀ
਍ഀ
                    <div class="error-details">਍ഀ
਍ഀ
                        <h5>Reifen-Stornierungen mit Fehlern:</h5>਍ഀ
਍ഀ
                        <div class="error-list">਍ഀ
਍ഀ
                            ${data.tire_cancellation_errors.map(error => `਍ഀ
਍ഀ
                                <div class="error-item">਍ഀ
਍ഀ
                                    <strong>${error.customer_name}</strong> - ${error.storage_number}਍ഀ
਍ഀ
                                    <br><small><strong>Fehler:</strong> ${error.error}</small>਍ഀ
਍ഀ
                                    <br><small><strong>Details:</strong> ${error.details}</small>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            `).join('')}਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                `;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            resultHtml += `਍ഀ
਍ഀ
                    <div class="result-actions">਍ഀ
਍ഀ
                        <button class="btn btn-primary" onclick="closeBulkDeleteModal(); location.reload();">਍ഀ
਍ഀ
                            <i class="fas fa-check"></i>਍ഀ
਍ഀ
                            Schlie뿯½en਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            content.innerHTML = resultHtml;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Show delete error਍ഀ
਍ഀ
        function showDeleteError(data) {਍ഀ
਍ഀ
            const modal = document.getElementById('bulk-delete-modal');਍ഀ
਍ഀ
            const content = modal.querySelector('.modal-body');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="delete-result">਍ഀ
਍ഀ
                    <div class="result-header error">਍ഀ
਍ഀ
                        <div class="result-icon">਍ഀ
਍ഀ
                            <i class="fas fa-exclamation-triangle"></i>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <h4>Fehler beim L뿯½schen</h4>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-message">਍ഀ
਍ഀ
                        <p>${data.message || 'Ein unbekannter Fehler ist aufgetreten.'}</p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-actions">਍ഀ
਍ഀ
                        <button class="btn btn-secondary" onclick="closeBulkDeleteModal()">਍ഀ
਍ഀ
                            <i class="fas fa-times"></i>਍ഀ
਍ഀ
                            Schlie뿯½en਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        // Animate delete process਍ഀ
਍ഀ
        function animateDeleteProcess() {਍ഀ
਍ഀ
            const steps = document.querySelectorAll('.process-step');਍ഀ
਍ഀ
            let currentStep = 0;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const stepInterval = setInterval(() => {਍ഀ
਍ഀ
                if (currentStep < steps.length) {਍ഀ
਍ഀ
                    steps[currentStep].classList.add('active');਍ഀ
਍ഀ
                    currentStep++;਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    clearInterval(stepInterval);਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            }, 800);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Close bulk delete modal਍ഀ
਍ഀ
        function closeBulkDeleteModal() {਍ഀ
਍ഀ
            document.getElementById('bulk-delete-modal').style.display = 'none';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Bulk tire order਍ഀ
਍ഀ
        function bulkOrderTires() {਍ഀ
਍ഀ
            const selectedAppointments = getSelectedAppointments();਍ഀ
਍ഀ
            if (selectedAppointments.length === 0) {਍ഀ
਍ഀ
                alert('Bitte w뿯½hlen Sie mindestens einen Termin aus.');਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Filter appointments that are eligible for tire order਍ഀ
਍ഀ
            const eligibleAppointments = selectedAppointments.filter(apt => ਍ഀ
਍ഀ
                !apt.brings_wheels && apt.storage_number਍ഀ
਍ഀ
            );਍ഀ
਍ഀ
਍ഀ
਍ഀ
            if (eligibleAppointments.length === 0) {਍ഀ
਍ഀ
                alert('Keine der ausgew뿯½hlten Termine ist f뿯½r eine Reifenbestellung geeignet.\n\nTermine m뿯½ssen eine Einlagerungsnummer haben und der Kunde darf keine eigenen Reifen mitbringen.');਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Use the existing tire order modal for bulk operations਍ഀ
਍ഀ
            showBulkTireOrderModal(eligibleAppointments);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show bulk tire order modal using the same system as single orders਍ഀ
਍ഀ
        function showBulkTireOrderModal(appointments) {਍ഀ
਍ഀ
            const modal = document.getElementById('tire-order-modal');਍ഀ
਍ഀ
            const content = document.getElementById('tire-order-content');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="tire-order-confirmation">਍ഀ
਍ഀ
                    <div class="order-header">਍ഀ
਍ഀ
                        <div class="customer-info">਍ഀ
਍ഀ
                            <h4>਍ഀ
਍ഀ
                                <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                                Reifenbestellung f뿯½r ${appointments.length} Termine਍ഀ
਍ഀ
                            </h4>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="order-details">਍ഀ
਍ഀ
                        <div class="appointments-list">਍ഀ
਍ഀ
                            ${appointments.map(apt => `਍ഀ
਍ഀ
                                <div class="appointment-item">਍ഀ
਍ഀ
                                    <div class="appointment-info">਍ഀ
਍ഀ
                                        <strong>${apt.customer_name}</strong>਍ഀ
਍ഀ
                                        <span class="license-plate">${apt.license_plate}</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="appointment-details">਍ഀ
਍ഀ
                                        <div class="detail-row">਍ഀ
਍ഀ
                                            <span class="label">Event:</span>਍ഀ
਍ഀ
                                            <span class="value">${apt.event_name}</span>਍ഀ
਍ഀ
                                        </div>਍ഀ
਍ഀ
                                        <div class="detail-row">਍ഀ
਍ഀ
                                            <span class="label">Datum:</span>਍ഀ
਍ഀ
                                            <span class="value">${new Date(apt.slot_date).toLocaleDateString('de-DE')}</span>਍ഀ
਍ഀ
                                        </div>਍ഀ
਍ഀ
                                        <div class="detail-row">਍ഀ
਍ഀ
                                            <span class="label">Einlagerungsnummer:</span>਍ഀ
਍ഀ
                                            <span class="value">${apt.storage_number}</span>਍ഀ
਍ഀ
                                        </div>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            `).join('')}਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="autohaus-selection">਍ഀ
਍ഀ
                        <h4>਍ഀ
਍ഀ
                            <i class="fas fa-building"></i>਍ഀ
਍ഀ
                            Autohaus f뿯½r Reifenlieferung ausw뿯½hlen਍ഀ
਍ഀ
                        </h4>਍ഀ
਍ഀ
                        <p class="selection-info">W뿯½hlen Sie das Autohaus aus, an das die Reifen f뿯½r alle Termine geliefert werden sollen:</p>਍ഀ
਍ഀ
                        <div class="autohaus-options" id="bulk-autohaus-options">਍ഀ
਍ഀ
                            <div class="loading-autohaus">਍ഀ
਍ഀ
                                <i class="fas fa-spinner fa-spin"></i>਍ഀ
਍ഀ
                                Lade verf뿯½gbare Autoh뿯½user...਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="order-actions">਍ഀ
਍ഀ
                        <button class="btn btn-secondary" onclick="closeTireOrderModal()">਍ഀ
਍ഀ
                            <i class="fas fa-times"></i>਍ഀ
਍ഀ
                            Abbrechen਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                        <button class="btn btn-primary" id="confirm-bulk-order-btn" onclick="confirmBulkTireOrder(${JSON.stringify(appointments).replace(/"/g, '&quot;')})" disabled>਍ഀ
਍ഀ
                            <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                            Reifen f뿯½r alle Termine bestellen਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            modal.style.display = 'block';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Lade verf뿯½gbare Autoh뿯½user f뿯½r Bulk-Bestellung਍ഀ
਍ഀ
            loadBulkAutohausOptions();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Load autohaus options for bulk order਍ഀ
਍ഀ
        function loadBulkAutohausOptions() {਍ഀ
਍ഀ
            fetch('../api/get_autohaus_services.php', {਍ഀ
਍ഀ
                method: 'GET',਍ഀ
਍ഀ
                headers: {਍ഀ
਍ഀ
                    'Content-Type': 'application/json',਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .then(response => response.json())਍ഀ
਍ഀ
            .then(data => {਍ഀ
਍ഀ
                if (data.success && data.autohauser) {਍ഀ
਍ഀ
                    displayBulkAutohausOptions(data.autohauser);਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    showBulkAutohausError('Fehler beim Laden der Autoh뿯½user: ' + (data.error || 'Unbekannter Fehler'));਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .catch(error => {਍ഀ
਍ഀ
                console.error('Error loading autohaus options:', error);਍ഀ
਍ഀ
                showBulkAutohausError('Fehler beim Laden der Autoh뿯½user: ' + error.message);਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Display autohaus options for bulk order਍ഀ
਍ഀ
        function displayBulkAutohausOptions(autohauser) {਍ഀ
਍ഀ
            const container = document.getElementById('bulk-autohaus-options');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            container.innerHTML = autohauser.map(autohaus => `਍ഀ
਍ഀ
                <div class="autohaus-option" onclick="selectBulkAutohausForOrder(${autohaus.id}, '${autohaus.name}', '${autohaus.short_name}')">਍ഀ
਍ഀ
                    <div class="autohaus-option-header">਍ഀ
਍ഀ
                        <h5>${autohaus.name}</h5>਍ഀ
਍ഀ
                        <span class="autohaus-short">${autohaus.short_name}</span>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    <div class="autohaus-option-details">਍ഀ
਍ഀ
                        <p><i class="fas fa-map-marker-alt"></i> ${autohaus.address}</p>਍ഀ
਍ഀ
                        <p><i class="fas fa-phone"></i> ${autohaus.phone}</p>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `).join('');਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show autohaus error for bulk order਍ഀ
਍ഀ
        function showBulkAutohausError(message) {਍ഀ
਍ഀ
            const container = document.getElementById('bulk-autohaus-options');਍ഀ
਍ഀ
            container.innerHTML = `਍ഀ
਍ഀ
                <div class="autohaus-error">਍ഀ
਍ഀ
                    <i class="fas fa-exclamation-triangle"></i>਍ഀ
਍ഀ
                    <p>${message}</p>਍ഀ
਍ഀ
                    <button class="btn btn-sm btn-outline-primary" onclick="loadBulkAutohausOptions()">਍ഀ
਍ഀ
                        <i class="fas fa-refresh"></i> Erneut versuchen਍ഀ
਍ഀ
                    </button>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Select autohaus for bulk order਍ഀ
਍ഀ
        function selectBulkAutohausForOrder(autohausId, autohausName, autohausShort) {਍ഀ
਍ഀ
            // Remove previous selection਍ഀ
਍ഀ
            document.querySelectorAll('#bulk-autohaus-options .autohaus-option').forEach(option => {਍ഀ
਍ഀ
                option.classList.remove('selected');਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Mark selected option਍ഀ
਍ഀ
            event.currentTarget.classList.add('selected');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Store selection਍ഀ
਍ഀ
            window.selectedBulkAutohaus = {਍ഀ
਍ഀ
                id: autohausId,਍ഀ
਍ഀ
                name: autohausName,਍ഀ
਍ഀ
                short: autohausShort਍ഀ
਍ഀ
            };਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Enable confirm button਍ഀ
਍ഀ
            document.getElementById('confirm-bulk-order-btn').disabled = false;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show selection confirmation਍ഀ
਍ഀ
            const container = document.getElementById('bulk-autohaus-options');਍ഀ
਍ഀ
            const confirmation = document.createElement('div');਍ഀ
਍ഀ
            confirmation.className = 'autohaus-selection-confirmed';਍ഀ
਍ഀ
            confirmation.innerHTML = `਍ഀ
਍ഀ
                <div class="selection-confirmed">਍ഀ
਍ഀ
                    <i class="fas fa-check-circle"></i>਍ഀ
਍ഀ
                    <span>Ausgew뿯½hlt: <strong>${autohausName}</strong></span>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
            container.appendChild(confirmation);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Confirm bulk tire order using the same process as single orders਍ഀ
਍ഀ
        function confirmBulkTireOrder(appointments) {਍ഀ
਍ഀ
            // Check if autohaus is selected਍ഀ
਍ഀ
            if (!window.selectedBulkAutohaus) {਍ഀ
਍ഀ
                alert('Bitte w뿯½hlen Sie ein Autohaus f뿯½r die Reifenlieferung aus.');਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            const modal = document.getElementById('tire-order-modal');਍ഀ
਍ഀ
            const content = document.getElementById('tire-order-content');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Show loading state with process steps਍ഀ
਍ഀ
            content.innerHTML = `਍ഀ
਍ഀ
                <div class="tire-order-loading">਍ഀ
਍ഀ
                    <div class="loading-spinner">਍ഀ
਍ഀ
                        <i class="fas fa-spinner fa-spin"></i>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    <h4>Reifenbestellung f뿯½r ${appointments.length} Termine wird verarbeitet...</h4>਍ഀ
਍ഀ
                    <p>Bitte warten Sie einen Moment.</p>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="order-process">਍ഀ
਍ഀ
                        <div class="process-step active">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-tire"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Reifenbestellungen vorbereiten</h5>਍ഀ
਍ഀ
                                <p>Daten f뿯½r ${appointments.length} Termine werden validiert</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-cog"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>RESY-System kontaktieren</h5>਍ഀ
਍ഀ
                                <p>Integration mit dem Reifensystem wird hergestellt</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-truck"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Lieferungen planen</h5>਍ഀ
਍ഀ
                                <p>Bestelltermine und Lieferungen werden berechnet</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ਍ഀ
਍ഀ
                        <div class="process-step">਍ഀ
਍ഀ
                            <div class="step-icon">਍ഀ
਍ഀ
                                <i class="fas fa-check"></i>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                            <div class="step-content">਍ഀ
਍ഀ
                                <h5>Bestellungen abschlie뿯½en</h5>਍ഀ
਍ഀ
                                <p>Alle Reifenbestellungen werden finalisiert</p>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Animate process steps਍ഀ
਍ഀ
            animateOrderProcess();਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Process each appointment individually਍ഀ
਍ഀ
            processBulkTireOrders(appointments, 0, [], []);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Process bulk tire orders one by one਍ഀ
਍ഀ
        function processBulkTireOrders(appointments, currentIndex, successfulOrders, failedOrders) {਍ഀ
਍ഀ
            if (currentIndex >= appointments.length) {਍ഀ
਍ഀ
                // All orders processed, show results਍ഀ
਍ഀ
                showBulkTireOrderResults(successfulOrders, failedOrders);਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            const appointment = appointments[currentIndex];਍ഀ
਍ഀ
            const orderData = {਍ഀ
਍ഀ
                storage_number: appointment.storage_number,਍ഀ
਍ഀ
                appointment_date: appointment.event_date,਍ഀ
਍ഀ
                event_name: appointment.event_name,਍ഀ
਍ഀ
                autohaus_id: window.selectedBulkAutohaus.id਍ഀ
਍ഀ
            };਍ഀ
਍ഀ
਍ഀ
਍ഀ
            console.log(`Verarbeite Reifenbestellung ${currentIndex + 1}/${appointments.length}:`, orderData);਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Send order request for current appointment਍ഀ
਍ഀ
            fetch('../api/tire_order.php', {਍ഀ
਍ഀ
                method: 'POST',਍ഀ
਍ഀ
                headers: {਍ഀ
਍ഀ
                    'Content-Type': 'application/json',਍ഀ
਍ഀ
                },਍ഀ
਍ഀ
                body: JSON.stringify(orderData)਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .then(response => {਍ഀ
਍ഀ
                if (!response.ok) {਍ഀ
਍ഀ
                    throw new Error('HTTP ' + response.status + ': ' + response.statusText);਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
                return response.json();਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .then(result => {਍ഀ
਍ഀ
                if (result.success) {਍ഀ
਍ഀ
                    successfulOrders.push({ appointment, result });਍ഀ
਍ഀ
                } else {਍ഀ
਍ഀ
                    failedOrders.push({ appointment, error: result.error || 'Unbekannter Fehler' });਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                // Process next appointment਍ഀ
਍ഀ
                processBulkTireOrders(appointments, currentIndex + 1, successfulOrders, failedOrders);਍ഀ
਍ഀ
            })਍ഀ
਍ഀ
            .catch(error => {਍ഀ
਍ഀ
                console.error('Error:', error);਍ഀ
਍ഀ
                failedOrders.push({ appointment, error: error.message });਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                // Process next appointment਍ഀ
਍ഀ
                processBulkTireOrders(appointments, currentIndex + 1, successfulOrders, failedOrders);਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Show bulk tire order results਍ഀ
਍ഀ
        function showBulkTireOrderResults(successfulOrders, failedOrders) {਍ഀ
਍ഀ
            const modal = document.getElementById('tire-order-modal');਍ഀ
਍ഀ
            const content = document.getElementById('tire-order-content');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            let resultHtml = `਍ഀ
਍ഀ
                <div class="tire-order-result">਍ഀ
਍ഀ
                    <div class="result-header">਍ഀ
਍ഀ
                        <div class="result-icon">਍ഀ
਍ഀ
                            <i class="fas fa-${successfulOrders.length > 0 ? 'check-circle' : 'exclamation-triangle'}"></i>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        <h4>Bulk-Reifenbestellung abgeschlossen</h4>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                    ਍ഀ
਍ഀ
                    <div class="result-summary">਍ഀ
਍ഀ
                        <div class="summary-item success">਍ഀ
਍ഀ
                            <i class="fas fa-check"></i>਍ഀ
਍ഀ
                            <span>Erfolgreich: ${successfulOrders.length} Termine</span>਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                        ${failedOrders.length > 0 ? `਍ഀ
਍ഀ
                            <div class="summary-item error">਍ഀ
਍ഀ
                                <i class="fas fa-times"></i>਍ഀ
਍ഀ
                                <span>Fehlgeschlagen: ${failedOrders.length} Termine</span>਍ഀ
਍ഀ
                            </div>਍ഀ
਍ഀ
                        ` : ''}਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
਍ഀ
਍ഀ
            if (successfulOrders.length > 0) {਍ഀ
਍ഀ
                resultHtml += `਍ഀ
਍ഀ
                    <div class="success-details">਍ഀ
਍ഀ
                        <h5>Erfolgreich bestellt:</h5>਍ഀ
਍ഀ
                        <div class="appointments-list">਍ഀ
਍ഀ
                            ${successfulOrders.map(({ appointment, result }) => `਍ഀ
਍ഀ
                                <div class="appointment-item success">਍ഀ
਍ഀ
                                    <div class="appointment-info">਍ഀ
਍ഀ
                                        <strong>${appointment.customer_name}</strong>਍ഀ
਍ഀ
                                        <span class="license-plate">${appointment.license_plate}</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="appointment-details">਍ഀ
਍ഀ
                                        <div class="detail-row">਍ഀ
਍ഀ
                                            <span class="label">Einlagerungsnummer:</span>਍ഀ
਍ഀ
                                            <span class="value">${appointment.storage_number}</span>਍ഀ
਍ഀ
                                        </div>਍ഀ
਍ഀ
                                        ${result.order_number ? `਍ഀ
਍ഀ
                                            <div class="detail-row">਍ഀ
਍ഀ
                                                <span class="label">Bestellnummer:</span>਍ഀ
਍ഀ
                                                <span class="value">${result.order_number}</span>਍ഀ
਍ഀ
                                            </div>਍ഀ
਍ഀ
                                        ` : ''}਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            `).join('')}਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                `;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            if (failedOrders.length > 0) {਍ഀ
਍ഀ
                resultHtml += `਍ഀ
਍ഀ
                    <div class="error-details">਍ഀ
਍ഀ
                        <h5>Fehlgeschlagene Bestellungen:</h5>਍ഀ
਍ഀ
                        <div class="appointments-list">਍ഀ
਍ഀ
                            ${failedOrders.map(({ appointment, error }) => `਍ഀ
਍ഀ
                                <div class="appointment-item error">਍ഀ
਍ഀ
                                    <div class="appointment-info">਍ഀ
਍ഀ
                                        <strong>${appointment.customer_name}</strong>਍ഀ
਍ഀ
                                        <span class="license-plate">${appointment.license_plate}</span>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                    <div class="appointment-details">਍ഀ
਍ഀ
                                        <div class="detail-row">਍ഀ
਍ഀ
                                            <span class="label">Einlagerungsnummer:</span>਍ഀ
਍ഀ
                                            <span class="value">${appointment.storage_number}</span>਍ഀ
਍ഀ
                                        </div>਍ഀ
਍ഀ
                                        <div class="detail-row error">਍ഀ
਍ഀ
                                            <span class="label">Fehler:</span>਍ഀ
਍ഀ
                                            <span class="value">${error}</span>਍ഀ
਍ഀ
                                        </div>਍ഀ
਍ഀ
                                    </div>਍ഀ
਍ഀ
                                </div>਍ഀ
਍ഀ
                            `).join('')}਍ഀ
਍ഀ
                        </div>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                `;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            resultHtml += `਍ഀ
਍ഀ
                    <div class="result-actions">਍ഀ
਍ഀ
                        <button class="btn btn-primary" onclick="closeTireOrderModal(); location.reload();">਍ഀ
਍ഀ
                            <i class="fas fa-check"></i>਍ഀ
਍ഀ
                            Schlie뿯½en਍ഀ
਍ഀ
                        </button>਍ഀ
਍ഀ
                    </div>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `;਍ഀ
਍ഀ
਍ഀ
਍ഀ
            content.innerHTML = resultHtml;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Bulk export appointments਍ഀ
਍ഀ
        function bulkExportAppointments() {਍ഀ
਍ഀ
            const selectedAppointments = getSelectedAppointments();਍ഀ
਍ഀ
            if (selectedAppointments.length === 0) {਍ഀ
਍ഀ
                alert('Bitte w뿯½hlen Sie mindestens einen Termin aus.');਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Create CSV data for selected appointments਍ഀ
਍ഀ
            const csvData = selectedAppointments.map(apt => ({਍ഀ
਍ഀ
                'Kunde': apt.customer_name,਍ഀ
਍ഀ
                'Kennzeichen': apt.license_plate,਍ഀ
਍ഀ
                'Event': apt.event_name,਍ഀ
਍ഀ
                'Datum': new Date(apt.slot_date).toLocaleDateString('de-DE'),਍ഀ
਍ഀ
                'Zeit': new Date(apt.slot_time).toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'}),਍ഀ
਍ഀ
                'Telefon': apt.phone,਍ഀ
਍ഀ
                'Status': apt.status,਍ഀ
਍ഀ
                'Services': [਍ഀ
਍ഀ
                    apt.wiper_blades ? 'Scheibenwischer' : '',਍ഀ
਍ഀ
                    apt.seasonal_check !== 'none' ? (apt.seasonal_check === 'spring' ? 'Fr뿯½hjahrescheck' : 'Wintercheck') : ''਍ഀ
਍ഀ
                ].filter(s => s).join(', '),਍ഀ
਍ഀ
                'Einlagerungsnummer': apt.storage_number || '',਍ഀ
਍ഀ
                'Admin Notizen': apt.admin_notes || ''਍ഀ
਍ഀ
            }));਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Convert to CSV਍ഀ
਍ഀ
            const headers = Object.keys(csvData[0]);਍ഀ
਍ഀ
            const csvContent = [਍ഀ
਍ഀ
                headers.join(','),਍ഀ
਍ഀ
                ...csvData.map(row => headers.map(header => `"${row[header]}"`).join(','))਍ഀ
਍ഀ
            ].join('\n');਍ഀ
਍ഀ
਍ഀ
਍ഀ
            // Download CSV਍ഀ
਍ഀ
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });਍ഀ
਍ഀ
            const link = document.createElement('a');਍ഀ
਍ഀ
            const url = URL.createObjectURL(blob);਍ഀ
਍ഀ
            link.setAttribute('href', url);਍ഀ
਍ഀ
            link.setAttribute('download', `termine_export_${new Date().toISOString().split('T')[0]}.csv`);਍ഀ
਍ഀ
            link.style.visibility = 'hidden';਍ഀ
਍ഀ
            document.body.appendChild(link);਍ഀ
਍ഀ
            link.click();਍ഀ
਍ഀ
            document.body.removeChild(link);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Bulk print storage labels਍ഀ
਍ഀ
        function bulkPrintStorageLabels() {਍ഀ
਍ഀ
            const selectedAppointments = getSelectedAppointments();਍ഀ
਍ഀ
            if (selectedAppointments.length === 0) {਍ഀ
਍ഀ
                alert('Bitte w뿯½hlen Sie mindestens einen Termin aus.');਍ഀ
਍ഀ
                return;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            const modal = document.getElementById('storage-labels-modal');਍ഀ
਍ഀ
            const count = document.getElementById('labels-count');਍ഀ
਍ഀ
            const list = document.getElementById('storage-labels-list');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            count.textContent = selectedAppointments.length;਍ഀ
਍ഀ
            list.innerHTML = selectedAppointments.map(apt => `਍ഀ
਍ഀ
                <div class="appointment-item">਍ഀ
਍ഀ
                    <strong>${apt.customer_name}</strong> - ${apt.license_plate}਍ഀ
਍ഀ
                    <br><small>Einlagerungsnummer: ${apt.storage_number || 'Nicht vergeben'}</small>਍ഀ
਍ഀ
                </div>਍ഀ
਍ഀ
            `).join('');਍ഀ
਍ഀ
਍ഀ
਍ഀ
            modal.style.display = 'block';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Print storage labels਍ഀ
਍ഀ
        function printStorageLabels() {਍ഀ
਍ഀ
            const selectedAppointments = getSelectedAppointments();਍ഀ
਍ഀ
            const includeCustomerInfo = document.getElementById('include-customer-info').checked;਍ഀ
਍ഀ
            const includeStorageInfo = document.getElementById('include-storage-info').checked;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Create print content਍ഀ
਍ഀ
            let printContent = '<html><head><title>Einlagerungsetiketten</title></head><body>';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            selectedAppointments.forEach(apt => {਍ഀ
਍ഀ
                printContent += '<div style="page-break-after: always; border: 2px solid #000; padding: 20px; margin: 10px; width: 300px;">';਍ഀ
਍ഀ
                printContent += '<h3>Einlagerungsetikett</h3>';਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                if (includeCustomerInfo) {਍ഀ
਍ഀ
                    printContent += `<p><strong>Kunde:</strong> ${apt.customer_name}</p>`;਍ഀ
਍ഀ
                    printContent += `<p><strong>Kennzeichen:</strong> ${apt.license_plate}</p>`;਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                if (includeStorageInfo && apt.storage_number) {਍ഀ
਍ഀ
                    printContent += `<p><strong>Einlagerungsnummer:</strong> ${apt.storage_number}</p>`;਍ഀ
਍ഀ
                }਍ഀ
਍ഀ
                ਍ഀ
਍ഀ
                printContent += `<p><strong>Datum:</strong> ${new Date().toLocaleDateString('de-DE')}</p>`;਍ഀ
਍ഀ
                printContent += '</div>';਍ഀ
਍ഀ
            });਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            printContent += '</body></html>';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Open print window਍ഀ
਍ഀ
            const printWindow = window.open('', '_blank');਍ഀ
਍ഀ
            printWindow.document.write(printContent);਍ഀ
਍ഀ
            printWindow.document.close();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Print single storage label਍ഀ
਍ഀ
        function printSingleStorageLabel(appointment) {਍ഀ
਍ഀ
            // Create print content for single appointment਍ഀ
਍ഀ
            let printContent = '<html><head><title>Einlagerungsetikett</title></head><body>';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            printContent += '<div style="page-break-after: always; border: 2px solid #000; padding: 20px; margin: 10px; width: 300px;">';਍ഀ
਍ഀ
            printContent += '<h3>Einlagerungsetikett</h3>';਍ഀ
਍ഀ
            printContent += `<p><strong>Kunde:</strong> ${appointment.customer_name}</p>`;਍ഀ
਍ഀ
            printContent += `<p><strong>Kennzeichen:</strong> ${appointment.license_plate}</p>`;਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (appointment.storage_number) {਍ഀ
਍ഀ
                printContent += `<p><strong>Einlagerungsnummer:</strong> ${appointment.storage_number}</p>`;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            printContent += `<p><strong>Datum:</strong> ${new Date().toLocaleDateString('de-DE')}</p>`;਍ഀ
਍ഀ
            printContent += '</div>';਍ഀ
਍ഀ
            printContent += '</body></html>';਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            // Open print window਍ഀ
਍ഀ
            const printWindow = window.open('', '_blank');਍ഀ
਍ഀ
            printWindow.document.write(printContent);਍ഀ
਍ഀ
            printWindow.document.close();਍ഀ
਍ഀ
            printWindow.print();਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Close storage labels modal਍ഀ
਍ഀ
        function closeStorageLabelsModal() {਍ഀ
਍ഀ
            document.getElementById('storage-labels-modal').style.display = 'none';਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        // Update modal click handlers਍ഀ
਍ഀ
        window.onclick = function(event) {਍ഀ
਍ഀ
            const appointmentModal = document.getElementById('appointment-modal');਍ഀ
਍ഀ
            const editModal = document.getElementById('edit-appointment-modal');਍ഀ
਍ഀ
            const tireOrderModal = document.getElementById('tire-order-modal');਍ഀ
਍ഀ
            const bulkDeleteModal = document.getElementById('bulk-delete-modal');਍ഀ
਍ഀ
            const storageLabelsModal = document.getElementById('storage-labels-modal');਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            if (event.target === appointmentModal) {਍ഀ
਍ഀ
                closeAppointmentModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            if (event.target === editModal) {਍ഀ
਍ഀ
                closeEditAppointmentModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            if (event.target === tireOrderModal) {਍ഀ
਍ഀ
                closeTireOrderModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            if (event.target === bulkDeleteModal) {਍ഀ
਍ഀ
                closeBulkDeleteModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            if (event.target === storageLabelsModal) {਍ഀ
਍ഀ
                closeStorageLabelsModal();਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
    </script>਍ഀ
਍ഀ
਍ഀ
਍ഀ
    <style>਍ഀ
਍ഀ
        /* Bulk Actions Styles */਍ഀ
਍ഀ
        .bulk-actions-toolbar {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);਍ഀ
਍ഀ
            border: 2px solid #007bff;਍ഀ
਍ഀ
            border-radius: 8px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
            box-shadow: 0 4px 6px rgba(0, 123, 255, 0.1);਍ഀ
਍ഀ
            animation: slideDown 0.3s ease-out;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        @keyframes slideDown {਍ഀ
਍ഀ
            from {਍ഀ
਍ഀ
                opacity: 0;਍ഀ
਍ഀ
                transform: translateY(-10px);਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            to {਍ഀ
਍ഀ
                opacity: 1;਍ഀ
਍ഀ
                transform: translateY(0);਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-content {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: space-between;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            flex-wrap: wrap;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .selected-count {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: #007bff;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .selected-count i {਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-buttons {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            flex-wrap: wrap;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-buttons .btn {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            padding: 0.5rem 1rem;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            transition: all 0.2s ease;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-buttons .btn:hover {਍ഀ
਍ഀ
            transform: translateY(-1px);਍ഀ
਍ഀ
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-buttons .btn-danger:hover {਍ഀ
਍ഀ
            background-color: #dc3545;਍ഀ
਍ഀ
            border-color: #dc3545;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-buttons .btn-primary:hover {਍ഀ
਍ഀ
            background-color: #0056b3;਍ഀ
਍ഀ
            border-color: #0056b3;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-buttons .btn-success:hover {਍ഀ
਍ഀ
            background-color: #28a745;਍ഀ
਍ഀ
            border-color: #28a745;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-actions-buttons .btn-info:hover {਍ഀ
਍ഀ
            background-color: #17a2b8;਍ഀ
਍ഀ
            border-color: #17a2b8;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Checkbox Styles */਍ഀ
਍ഀ
        .appointment-checkbox {਍ഀ
਍ഀ
            width: 18px;਍ഀ
਍ഀ
            height: 18px;਍ഀ
਍ഀ
            cursor: pointer;਍ഀ
਍ഀ
            accent-color: #007bff;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        #select-all-checkbox {਍ഀ
਍ഀ
            width: 20px;਍ഀ
਍ഀ
            height: 20px;਍ഀ
਍ഀ
            cursor: pointer;਍ഀ
਍ഀ
            accent-color: #007bff;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Modal Styles for Bulk Operations */਍ഀ
਍ഀ
        .warning-message {਍ഀ
਍ഀ
            background: #fff3cd;਍ഀ
਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .warning-message i {਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .warning-message p {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-item {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #dee2e6;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            padding: 0.75rem;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-order-info, .labels-info {਍ഀ
਍ഀ
            background: #e7f3ff;਍ഀ
਍ഀ
            border: 1px solid #b3d9ff;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .bulk-order-info p, .labels-info p {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: #0066cc;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .print-options {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #dee2e6;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-top: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .print-options label {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
            cursor: pointer;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .print-options input[type="checkbox"] {਍ഀ
਍ഀ
            width: 16px;਍ഀ
਍ഀ
            height: 16px;਍ഀ
਍ഀ
            accent-color: #007bff;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Bulk Tire Order Styles */਍ഀ
਍ഀ
        .appointments-list {਍ഀ
਍ഀ
            max-height: 300px;਍ഀ
਍ഀ
            overflow-y: auto;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-item {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #dee2e6;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-bottom: 0.75rem;਍ഀ
਍ഀ
            transition: all 0.2s ease;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-item:hover {਍ഀ
਍ഀ
            background: #e9ecef;਍ഀ
਍ഀ
            border-color: #007bff;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-item.success {਍ഀ
਍ഀ
            background: #d4edda;਍ഀ
਍ഀ
            border-color: #28a745;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-item.error {਍ഀ
਍ഀ
            background: #f8d7da;਍ഀ
਍ഀ
            border-color: #dc3545;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-info {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: space-between;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-info strong {਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .license-plate {਍ഀ
਍ഀ
            background: #007bff;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
            padding: 0.25rem 0.5rem;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            font-size: 0.875rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .appointment-details {਍ഀ
਍ഀ
            display: grid;਍ഀ
਍ഀ
            grid-template-columns: 1fr 1fr;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-row {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: space-between;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            padding: 0.25rem 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-row .label {਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            color: #6c757d;਍ഀ
਍ഀ
            font-size: 0.875rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-row .value {਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
            font-size: 0.875rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-row.error .value {਍ഀ
਍ഀ
            color: #dc3545;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-summary {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
            flex-wrap: wrap;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-item {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            padding: 0.5rem 1rem;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-item.success {਍ഀ
਍ഀ
            background: #d4edda;਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-item.error {਍ഀ
਍ഀ
            background: #f8d7da;਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .success-details, .error-details {਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .success-details h5, .error-details h5 {਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
            margin-bottom: 0.75rem;਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Enhanced Delete Modal Styles */਍ഀ
਍ഀ
        .delete-summary {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #dee2e6;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-stats {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 2rem;਍ഀ
਍ഀ
            flex-wrap: wrap;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .stat-item {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .stat-item i {਍ഀ
਍ഀ
            color: #007bff;਍ഀ
਍ഀ
            font-size: 1.1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delete-details h4 {਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
            font-size: 1.1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-cancellation-section {਍ഀ
਍ഀ
            background: #fff3cd;਍ഀ
਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin: 1rem 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .cancellation-warning {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .cancellation-warning i {਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .cancellation-warning h4 {਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .cancellation-warning p {਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
            margin: 0.5rem 0 0 0;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-item {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #dee2e6;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            padding: 0.75rem;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-info {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: space-between;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-details {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            flex-wrap: wrap;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-details span {਍ഀ
਍ഀ
            font-size: 0.875rem;਍ഀ
਍ഀ
            color: #6c757d;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .deletion-reason {਍ഀ
਍ഀ
            margin-top: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .deletion-reason label {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .deletion-reason textarea {਍ഀ
਍ഀ
            width: 100%;਍ഀ
਍ഀ
            padding: 0.75rem;਍ഀ
਍ഀ
            border: 1px solid #ced4da;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            font-family: inherit;਍ഀ
਍ഀ
            resize: vertical;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delete-loading {਍ഀ
਍ഀ
            text-align: center;਍ഀ
਍ഀ
            padding: 2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delete-process {਍ഀ
਍ഀ
            margin-top: 2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            opacity: 0.5;਍ഀ
਍ഀ
            transition: all 0.3s ease;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.active {਍ഀ
਍ഀ
            opacity: 1;਍ഀ
਍ഀ
            background: #e7f3ff;਍ഀ
਍ഀ
            border: 1px solid #b3d9ff;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .step-icon {਍ഀ
਍ഀ
            width: 40px;਍ഀ
਍ഀ
            height: 40px;਍ഀ
਍ഀ
            background: #007bff;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
            border-radius: 50%;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            justify-content: center;਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.active .step-icon {਍ഀ
਍ഀ
            background: #0056b3;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .step-content h5 {਍ഀ
਍ഀ
            margin: 0 0 0.25rem 0;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .step-content p {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: #6c757d;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delete-result {਍ഀ
਍ഀ
            text-align: center;਍ഀ
਍ഀ
            padding: 2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-header {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            margin-bottom: 2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-header.success .result-icon {਍ഀ
਍ഀ
            color: #28a745;਍ഀ
਍ഀ
            font-size: 3rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-header.error .result-icon {਍ഀ
਍ഀ
            color: #dc3545;਍ഀ
਍ഀ
            font-size: 3rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-header h4 {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-message {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #dee2e6;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            margin-bottom: 2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .error-list {਍ഀ
਍ഀ
            max-height: 200px;਍ഀ
਍ഀ
            overflow-y: auto;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .error-item {਍ഀ
਍ഀ
            background: #f8d7da;਍ഀ
਍ഀ
            border: 1px solid #f5c6cb;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            padding: 0.75rem;਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .error-item strong {਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .error-item small {਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-pending {਍ഀ
਍ഀ
            color: #ffc107;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-approved {਍ഀ
਍ഀ
            color: #28a745;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-booked {਍ഀ
਍ഀ
            color: #007bff;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-ordered {਍ഀ
਍ഀ
            color: #28a745;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Responsive Design for Bulk Actions */਍ഀ
਍ഀ
        @media (max-width: 768px) {਍ഀ
਍ഀ
            .bulk-actions-content {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                align-items: stretch;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .bulk-actions-buttons {਍ഀ
਍ഀ
                justify-content: center;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .bulk-actions-buttons .btn {਍ഀ
਍ഀ
                flex: 1;਍ഀ
਍ഀ
                min-width: 120px;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .appointment-details {਍ഀ
਍ഀ
                grid-template-columns: 1fr;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .appointment-info {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                align-items: flex-start;਍ഀ
਍ഀ
                gap: 0.5rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .result-summary {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .summary-stats {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                gap: 1rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .tire-order-details {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                gap: 0.5rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .process-step {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                text-align: center;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .form-select {਍ഀ
਍ഀ
            padding: 0.5rem 1rem;਍ഀ
਍ഀ
            border: 2px solid #e9ecef;਍ഀ
਍ഀ
            border-radius: 8px;਍ഀ
਍ഀ
            background: white;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .appointment-count {਍ഀ
਍ഀ
            color: var(--f1-red);਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .phone-link {਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            text-decoration: none;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .phone-link:hover {਍ഀ
਍ഀ
            text-decoration: underline;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .email-link {਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            text-decoration: none;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .email-link:hover {਍ഀ
਍ഀ
            text-decoration: underline;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-form {਍ഀ
਍ഀ
            display: inline-block;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-select {਍ഀ
਍ഀ
            padding: 0.25rem 0.5rem;਍ഀ
਍ഀ
            border: 1px solid #ddd;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            font-size: 0.85rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .text-muted {਍ഀ
਍ഀ
            color: #666;਍ഀ
਍ഀ
            font-size: 0.85rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .appointments-table {਍ഀ
਍ഀ
            overflow-x: auto;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .appointments-table table {਍ഀ
਍ഀ
            width: 100%;਍ഀ
਍ഀ
            border-collapse: collapse;਍ഀ
਍ഀ
            min-width: 800px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .appointments-table th,਍ഀ
਍ഀ
        .appointments-table td {਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            text-align: left;਍ഀ
਍ഀ
            border-bottom: 1px solid #eee;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .appointments-table th {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            cursor: pointer;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .appointments-table th:hover {਍ഀ
਍ഀ
            background: #e9ecef;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .appointments-table tr:hover {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal {਍ഀ
਍ഀ
            display: none;਍ഀ
਍ഀ
            position: fixed;਍ഀ
਍ഀ
            z-index: 1000;਍ഀ
਍ഀ
            left: 0;਍ഀ
਍ഀ
            top: 0;਍ഀ
਍ഀ
            width: 100%;਍ഀ
਍ഀ
            height: 100%;਍ഀ
਍ഀ
            background-color: rgba(0, 0, 0, 0.6);਍ഀ
            backdrop-filter: blur(8px);਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-content {਍ഀ
਍ഀ
            background-color: white;਍ഀ
਍ഀ
            margin: 2% auto;਍ഀ
਍ഀ
            padding: 0;਍ഀ
਍ഀ
            border-radius: 16px;਍ഀ
਍ഀ
            width: 95%;਍ഀ
਍ഀ
            max-width: 1000px;਍ഀ
਍ഀ
            max-height: 90vh;਍ഀ
਍ഀ
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        #edit-appointment-modal .modal-content {਍ഀ
਍ഀ
            max-width: 1600px;਍ഀ
            width: 98%;਍ഀ
਍ഀ
            max-height: 95vh;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-header {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: space-between;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            padding: 2rem;਍ഀ
਍ഀ
            border-bottom: 1px solid #eee;਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border-radius: 16px 16px 0 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-header h3 {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-close {਍ഀ
਍ഀ
            background: none;਍ഀ
਍ഀ
            border: none;਍ഀ
਍ഀ
            font-size: 1.5rem;਍ഀ
਍ഀ
            cursor: pointer;਍ഀ
਍ഀ
            color: #666;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-body {਍ഀ
਍ഀ
            padding: 2rem;਍ഀ
਍ഀ
            overflow-y: auto;਍ഀ
਍ഀ
            flex: 1;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        #edit-appointment-modal .modal-body {਍ഀ
਍ഀ
            padding: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        /* Professional Appointment Details */਍ഀ
਍ഀ
        .appointment-details-professional {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-header {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 1.5rem;਍ഀ
਍ഀ
            padding: 2rem;਍ഀ
਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);਍ഀ
਍ഀ
            border-radius: 16px 16px 0 0;਍ഀ
਍ഀ
            border-bottom: 1px solid #dee2e6;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-avatar {਍ഀ
਍ഀ
            width: 80px;਍ഀ
਍ഀ
            height: 80px;਍ഀ
਍ഀ
            border-radius: 50%;਍ഀ
਍ഀ
            background: linear-gradient(135deg, var(--volvo-blue) 0%, #1e3a8a 100%);਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            justify-content: center;਍ഀ
਍ഀ
            font-size: 2rem;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-info {਍ഀ
਍ഀ
            flex: 1;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-info h3 {਍ഀ
਍ഀ
            margin: 0 0 0.5rem 0;਍ഀ
਍ഀ
            font-size: 1.5rem;਍ഀ
਍ഀ
            font-weight: 700;਍ഀ
਍ഀ
            color: #212529;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-subtitle {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: #6c757d;਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .customer-subtitle i {਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            width: 16px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-subtitle a {਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            text-decoration: none;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-subtitle a:hover {਍ഀ
਍ഀ
            text-decoration: underline;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-section {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-badge-large {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            padding: 0.75rem 1.5rem;਍ഀ
਍ഀ
            border-radius: 25px;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
            text-transform: uppercase;਍ഀ
਍ഀ
            letter-spacing: 0.5px;਍ഀ
਍ഀ
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-badge-large.status-success {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-badge-large.status-warning {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);਍ഀ
਍ഀ
            color: #212529;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-badge-large.status-danger {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-badge-large.status-info {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-badge-large.status-primary {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-badge-large.status-secondary {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-content-grid {਍ഀ
਍ഀ
            display: grid;਍ഀ
਍ഀ
            grid-template-columns: 1fr 1fr;਍ഀ
਍ഀ
            gap: 0;਍ഀ
਍ഀ
            padding: 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-section {਍ഀ
਍ഀ
            padding: 2rem;਍ഀ
਍ഀ
            border-bottom: 1px solid #f1f3f4;਍ഀ
਍ഀ
            border-right: 1px solid #f1f3f4;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-section.full-width {਍ഀ
਍ഀ
            grid-column: 1 / -1;਍ഀ
਍ഀ
            border-right: none;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-section:last-child {਍ഀ
਍ഀ
            border-bottom: none;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .section-header {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.75rem;਍ഀ
਍ഀ
            margin-bottom: 1.5rem;਍ഀ
਍ഀ
            padding-bottom: 0.75rem;਍ഀ
਍ഀ
            border-bottom: 2px solid var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .section-header i {਍ഀ
਍ഀ
            font-size: 1.25rem;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .section-header h4 {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            font-size: 1.1rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .section-content {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .info-item {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .info-label {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
            text-transform: uppercase;਍ഀ
਍ഀ
            letter-spacing: 0.5px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .info-label i {਍ഀ
਍ഀ
            font-size: 0.8rem;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            width: 16px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .info-value {਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
            color: #212529;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            padding-left: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .info-text {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            border-radius: 8px;਍ഀ
਍ഀ
            border-left: 4px solid var(--volvo-blue);਍ഀ
਍ഀ
            font-style: italic;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .storage-number {਍ഀ
਍ഀ
            font-family: 'Courier New', monospace;਍ഀ
਍ഀ
            font-weight: 700;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            background: #e7f3ff;਍ഀ
਍ഀ
            padding: 0.5rem;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            text-align: center;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .boolean-value {਍ഀ
਍ഀ
            display: inline-flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            padding: 0.25rem 0.75rem;਍ഀ
਍ഀ
            border-radius: 20px;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .boolean-value.true {਍ഀ
਍ഀ
            background: #d4edda;਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
            border: 1px solid #c3e6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .boolean-value.false {਍ഀ
਍ഀ
            background: #f8d7da;਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
            border: 1px solid #f5c6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .boolean-value i {਍ഀ
਍ഀ
            font-size: 0.8rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Tire Order Section */਍ഀ
਍ഀ
        .tire-order-status {਍ഀ
਍ഀ
            margin-bottom: 1.5rem;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            border: 1px solid #c3e6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-indicator {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.75rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            font-size: 1.1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-indicator.success {਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .status-indicator i {਍ഀ
਍ഀ
            font-size: 1.25rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-section {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #e9ecef;਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            padding: 1.5rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-header {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.75rem;਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
            padding-bottom: 0.75rem;਍ഀ
਍ഀ
            border-bottom: 2px solid var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-header i {਍ഀ
਍ഀ
            font-size: 1.25rem;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-header h4 {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            font-size: 1.1rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Tire Status Badges */਍ഀ
਍ഀ
        .tire-status-badge {਍ഀ
਍ഀ
            display: inline-flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            padding: 0.5rem 1rem;਍ഀ
਍ഀ
            border-radius: 20px;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
            text-transform: uppercase;਍ഀ
਍ഀ
            letter-spacing: 0.5px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-status-badge.status-bestellt {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);਍ഀ
਍ഀ
            color: #212529;਍ഀ
਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-status-badge.status-geliefert {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
            border: 1px solid #c3e6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-status-badge.status-storniert {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
            border: 1px solid #f5c6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-status-badge i {਍ഀ
਍ഀ
            font-size: 0.8rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Responsive Design */਍ഀ
਍ഀ
        @media (max-width: 1024px) {਍ഀ
਍ഀ
            .detail-content-grid {਍ഀ
਍ഀ
                grid-template-columns: 1fr;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            .detail-section {਍ഀ
਍ഀ
                border-right: none;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        @media (max-width: 768px) {਍ഀ
਍ഀ
            .detail-header {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                text-align: center;਍ഀ
਍ഀ
                gap: 1rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .customer-avatar {਍ഀ
਍ഀ
                width: 60px;਍ഀ
਍ഀ
                height: 60px;਍ഀ
਍ഀ
                font-size: 1.5rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .customer-info h3 {਍ഀ
਍ഀ
                font-size: 1.25rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .customer-subtitle {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                gap: 0.5rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .status-badge-large {਍ഀ
਍ഀ
                padding: 0.5rem 1rem;਍ഀ
਍ഀ
                font-size: 0.9rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .detail-section {਍ഀ
਍ഀ
                padding: 1.5rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .section-header {਍ഀ
਍ഀ
                margin-bottom: 1rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .action-buttons {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-primary {਍ഀ
਍ഀ
            background: var(--volvo-blue);਍ഀ
਍ഀ
            border-color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-primary:hover {਍ഀ
਍ഀ
            background: #1e3a8a;਍ഀ
਍ഀ
            border-color: #1e3a8a;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-primary:disabled {਍ഀ
਍ഀ
            opacity: 0.6;਍ഀ
਍ഀ
            cursor: not-allowed;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .service-tire-ordered {਍ഀ
਍ഀ
            background: #28a745 !important;਍ഀ
਍ഀ
            color: white !important;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .service-tire-ordered i {਍ഀ
਍ഀ
            color: white !important;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-info {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 0.25rem;਍ഀ
਍ഀ
            min-width: 120px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-text {਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-bar {਍ഀ
਍ഀ
            width: 100%;਍ഀ
਍ഀ
            height: 8px;਍ഀ
਍ഀ
            background: #e9ecef;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            overflow: hidden;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-fill {਍ഀ
਍ഀ
            height: 100%;਍ഀ
਍ഀ
            transition: width 0.3s ease;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-fill.low {਍ഀ
਍ഀ
            background: linear-gradient(90deg, #28a745 0%, #20c997 100%);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-fill.medium {਍ഀ
਍ഀ
            background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-fill.high {਍ഀ
਍ഀ
            background: linear-gradient(90deg, #fd7e14 0%, #dc3545 100%);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-fill.full {਍ഀ
਍ഀ
            background: linear-gradient(90deg, #dc3545 0%, #6f42c1 100%);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .capacity-details {਍ഀ
਍ഀ
            color: #666;਍ഀ
਍ഀ
            font-size: 0.75rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-badge {਍ഀ
਍ഀ
            padding: 0.25rem 0.5rem;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            font-size: 0.75rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            text-transform: uppercase;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-pending {਍ഀ
਍ഀ
            background: #fff3cd;਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-booked {਍ഀ
਍ഀ
            background: #d4edda;਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
            border: 1px solid #c3e6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-vorbereitet {਍ഀ
਍ഀ
            background: #cce5ff;਍ഀ
਍ഀ
            color: #004085;਍ഀ
਍ഀ
            border: 1px solid #b3d7ff;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-completed {਍ഀ
਍ഀ
            background: #d1ecf1;਍ഀ
਍ഀ
            color: #0c5460;਍ഀ
਍ഀ
            border: 1px solid #bee5eb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-cancelled {਍ഀ
਍ഀ
            background: #f8d7da;਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
            border: 1px solid #f5c6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-rejected {਍ഀ
਍ഀ
            background: #f5c6cb;਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
            border: 1px solid #f1b0b7;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-approved {਍ഀ
਍ഀ
            background: #d1ecf1;਍ഀ
਍ഀ
            color: #0c5460;਍ഀ
਍ഀ
            border: 1px solid #bee5eb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-rescheduled {਍ഀ
਍ഀ
            background: #fff3cd;਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .pending-count {਍ഀ
਍ഀ
            background: #ffc107;਍ഀ
਍ഀ
            color: #212529;਍ഀ
਍ഀ
            padding: 0.25rem 0.75rem;਍ഀ
਍ഀ
            border-radius: 20px;਍ഀ
਍ഀ
            font-size: 0.85rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            margin-left: 1rem;਍ഀ
਍ഀ
            display: inline-flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.25rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .pending-row {਍ഀ
਍ഀ
            background: #fff3cd !important;਍ഀ
਍ഀ
            border-left: 4px solid #ffc107;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .pending-row:hover {਍ഀ
਍ഀ
            background: #ffeaa7 !important;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .booked-count {਍ഀ
਍ഀ
            background: #28a745;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
            padding: 0.25rem 0.75rem;਍ഀ
਍ഀ
            border-radius: 20px;਍ഀ
਍ഀ
            font-size: 0.85rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            margin-left: 1rem;਍ഀ
਍ഀ
            display: inline-flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.25rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-info {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.25rem;਍ഀ
਍ഀ
            color: #28a745;਍ഀ
਍ഀ
            font-size: 0.8rem;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            padding: 0.25rem 0.5rem;਍ഀ
਍ഀ
            background: #d4edda;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            border: 1px solid #c3e6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Tire Order Modal Styles */਍ഀ
਍ഀ
        .tire-order-modal .modal-content {਍ഀ
਍ഀ
            max-width: 600px;਍ഀ
਍ഀ
            width: 95%;਍ഀ
਍ഀ
            max-height: 90vh;਍ഀ
਍ഀ
            animation: modalSlideIn 0.3s ease-out;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        @keyframes modalSlideIn {਍ഀ
਍ഀ
            from {਍ഀ
਍ഀ
                opacity: 0;਍ഀ
਍ഀ
                transform: translateY(-50px) scale(0.95);਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            to {਍ഀ
਍ഀ
                opacity: 1;਍ഀ
਍ഀ
                transform: translateY(0) scale(1);਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-confirmation {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .order-header {਍ഀ
਍ഀ
            display: grid;਍ഀ
਍ഀ
            grid-template-columns: 1fr 1fr;਍ഀ
਍ഀ
            gap: 1.5rem;਍ഀ
਍ഀ
            padding: 1.5rem;਍ഀ
਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            border: 1px solid #dee2e6;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-info, .appointment-info {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-info h4, .appointment-info h4 {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            font-size: 1.1rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .customer-details, .appointment-details {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: #6c757d;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .order-summary {਍ഀ
਍ഀ
            background: white;਍ഀ
਍ഀ
            border: 1px solid #e9ecef;਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            padding: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .order-summary h4 {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            margin: 0 0 1rem 0;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-item {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: space-between;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            padding: 0.75rem 0;਍ഀ
਍ഀ
            border-bottom: 1px solid #f8f9fa;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-item:last-child {਍ഀ
਍ഀ
            border-bottom: none;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-item .label {਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .summary-item .value {਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .order-actions {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            justify-content: flex-end;਍ഀ
਍ഀ
            padding-top: 1rem;਍ഀ
਍ഀ
            border-top: 1px solid #e9ecef;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Loading State */਍ഀ
਍ഀ
        .tire-order-loading {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            justify-content: center;਍ഀ
਍ഀ
            padding: 3rem;਍ഀ
਍ഀ
            text-align: center;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .loading-spinner {਍ഀ
਍ഀ
            font-size: 3rem;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            margin-bottom: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-loading h4 {਍ഀ
਍ഀ
            margin: 0 0 0.5rem 0;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-loading p {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            color: #6c757d;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Order Process Steps */਍ഀ
਍ഀ
        .order-process {਍ഀ
਍ഀ
            margin-top: 2rem;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            border-radius: 8px;਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 2px solid #e9ecef;਍ഀ
਍ഀ
            transition: all 0.3s ease;਍ഀ
਍ഀ
            opacity: 0.5;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.active {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #e7f3ff 0%, #b3d7ff 100%);਍ഀ
਍ഀ
            border-color: var(--volvo-blue);਍ഀ
਍ഀ
            opacity: 1;਍ഀ
਍ഀ
            transform: translateX(5px);਍ഀ
਍ഀ
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.completed {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);਍ഀ
਍ഀ
            border-color: #28a745;਍ഀ
਍ഀ
            opacity: 1;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .step-icon {਍ഀ
਍ഀ
            width: 40px;਍ഀ
਍ഀ
            height: 40px;਍ഀ
਍ഀ
            border-radius: 50%;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            justify-content: center;਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
            background: #6c757d;਍ഀ
਍ഀ
            transition: all 0.3s ease;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.active .step-icon {਍ഀ
਍ഀ
            background: var(--volvo-blue);਍ഀ
਍ഀ
            animation: pulse 1.5s infinite;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.completed .step-icon {਍ഀ
਍ഀ
            background: #28a745;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.completed .step-icon i {਍ഀ
਍ഀ
            transform: scale(0);਍ഀ
਍ഀ
            animation: checkmark 0.3s ease 0.2s forwards;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.completed .step-icon i:before {਍ഀ
਍ഀ
            content: "\f00c"; /* FontAwesome check icon */਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .step-content h5 {਍ഀ
਍ഀ
            margin: 0 0 0.25rem 0;਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.active .step-content h5 {਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.completed .step-content h5 {਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .step-content p {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
            color: #6c757d;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .process-step.completed .step-content p {਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        @keyframes pulse {਍ഀ
਍ഀ
            0% { transform: scale(1); }਍ഀ
਍ഀ
            50% { transform: scale(1.1); }਍ഀ
਍ഀ
            100% { transform: scale(1); }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        @keyframes checkmark {਍ഀ
਍ഀ
            0% { transform: scale(0); }਍ഀ
਍ഀ
            100% { transform: scale(1); }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Result States */਍ഀ
਍ഀ
        .tire-order-result {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-header {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            padding: 1.5rem;਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            text-align: center;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-result.success .result-header {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);਍ഀ
਍ഀ
            border: 1px solid #c3e6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-result.error .result-header {਍ഀ
਍ഀ
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);਍ഀ
਍ഀ
            border: 1px solid #f5c6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .success-icon, .error-icon {਍ഀ
਍ഀ
            font-size: 3rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .success-icon {਍ഀ
਍ഀ
            color: #28a745;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .error-icon {਍ഀ
਍ഀ
            color: #dc3545;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-header h4 {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            font-size: 1.5rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-result.success .result-header h4 {਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .tire-order-result.error .result-header h4 {਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-message {਍ഀ
਍ഀ
            background: white;਍ഀ
਍ഀ
            border: 1px solid #e9ecef;਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            padding: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-message p {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            font-size: 1.1rem;਍ഀ
਍ഀ
            line-height: 1.5;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-details {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border: 1px solid #e9ecef;਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            padding: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-item {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: space-between;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            padding: 0.5rem 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-item .label {਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .detail-item .value {਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Delivery Info */਍ഀ
਍ഀ
        .delivery-info {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.75rem;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            border-radius: 8px;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delivery-info.success {਍ഀ
਍ഀ
            background: #d4edda;਍ഀ
਍ഀ
            border: 1px solid #c3e6cb;਍ഀ
਍ഀ
            color: #155724;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delivery-info.warning {਍ഀ
਍ഀ
            background: #fff3cd;਍ഀ
਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delivery-info.error {਍ഀ
਍ഀ
            background: #f8d7da;਍ഀ
਍ഀ
            border: 1px solid #f5c6cb;਍ഀ
਍ഀ
            color: #721c24;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .delivery-info i {਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* RESY Info */਍ഀ
਍ഀ
        .resy-info, .resy-error {਍ഀ
਍ഀ
            background: #e7f3ff;਍ഀ
਍ഀ
            border: 1px solid #b3d7ff;਍ഀ
਍ഀ
            border-radius: 8px;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .resy-error {਍ഀ
਍ഀ
            background: #f8d7da;਍ഀ
਍ഀ
            border-color: #f5c6cb;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .resy-info h5, .resy-error h5 {਍ഀ
਍ഀ
            margin: 0 0 0.5rem 0;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .resy-info p, .resy-error p {਍ഀ
਍ഀ
            margin: 0.25rem 0;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Warning Info */਍ഀ
਍ഀ
        .warning-info {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.75rem;਍ഀ
਍ഀ
            padding: 1rem;਍ഀ
਍ഀ
            background: #fff3cd;਍ഀ
਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
਍ഀ
            border-radius: 8px;਍ഀ
਍ഀ
            color: #856404;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .warning-info i {਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        .result-actions {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            justify-content: flex-end;਍ഀ
਍ഀ
            padding-top: 1rem;਍ഀ
਍ഀ
            border-top: 1px solid #e9ecef;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
਍ഀ
਍ഀ
        /* Responsive Design */਍ഀ
਍ഀ
        @media (max-width: 768px) {਍ഀ
਍ഀ
            .tire-order-modal .modal-content {਍ഀ
਍ഀ
                width: 98%;਍ഀ
਍ഀ
                margin: 1% auto;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .order-header {਍ഀ
਍ഀ
                grid-template-columns: 1fr;਍ഀ
਍ഀ
                gap: 1rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .order-actions, .result-actions {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
਍ഀ
਍ഀ
            .order-actions .btn, .result-actions .btn {਍ഀ
਍ഀ
                width: 100%;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-success {਍ഀ
਍ഀ
            background: #28a745;਍ഀ
਍ഀ
            border-color: #28a745;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-success:hover {਍ഀ
਍ഀ
            background: #218838;਍ഀ
਍ഀ
            border-color: #1e7e34;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-warning {਍ഀ
਍ഀ
            background: #ffc107;਍ഀ
਍ഀ
            border-color: #ffc107;਍ഀ
਍ഀ
            color: #212529;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-warning:hover {਍ഀ
਍ഀ
            background: #e0a800;਍ഀ
਍ഀ
            border-color: #d39e00;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-info {਍ഀ
਍ഀ
            background: #17a2b8;਍ഀ
਍ഀ
            border-color: #17a2b8;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-info:hover {਍ഀ
਍ഀ
            background: #138496;਍ഀ
਍ഀ
            border-color: #117a8b;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        /* Edit Modal Styles */਍ഀ
਍ഀ
        .form-grid {਍ഀ
਍ഀ
            display: grid;਍ഀ
਍ഀ
            grid-template-columns: repeat(3, 1fr);਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            margin-bottom: 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        @media (max-width: 1024px) {਍ഀ
਍ഀ
            .form-grid {਍ഀ
਍ഀ
                grid-template-columns: repeat(2, 1fr);਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        @media (max-width: 768px) {਍ഀ
਍ഀ
            .form-grid {਍ഀ
਍ഀ
                grid-template-columns: 1fr;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-group {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-group.full-width {਍ഀ
਍ഀ
            grid-column: 1 / -1;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-group label {਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            margin-bottom: 0.5rem;਍ഀ
਍ഀ
            font-size: 0.9rem;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.25rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-group label::after {਍ഀ
਍ഀ
            content: '';਍ഀ
਍ഀ
            flex: 1;਍ഀ
਍ഀ
            height: 1px;਍ഀ
਍ഀ
            background: linear-gradient(to right, #e9ecef, transparent);਍ഀ
਍ഀ
            margin-left: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-group input,਍ഀ
਍ഀ
        .form-group select,਍ഀ
਍ഀ
        .form-group textarea {਍ഀ
਍ഀ
            padding: 0.875rem;਍ഀ
਍ഀ
            border: 2px solid #e9ecef;਍ഀ
਍ഀ
            border-radius: 10px;਍ഀ
਍ഀ
            font-size: 0.95rem;਍ഀ
਍ഀ
            transition: all 0.3s ease;਍ഀ
਍ഀ
            background: #fafbfc;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-group input:focus,਍ഀ
਍ഀ
        .form-group select:focus,਍ഀ
਍ഀ
        .form-group textarea:focus {਍ഀ
਍ഀ
            outline: none;਍ഀ
਍ഀ
            border-color: var(--volvo-blue);਍ഀ
਍ഀ
            background: white;਍ഀ
਍ഀ
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);਍ഀ
਍ഀ
            transform: translateY(-1px);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-group input:hover,਍ഀ
਍ഀ
        .form-group select:hover,਍ഀ
਍ഀ
        .form-group textarea:hover {਍ഀ
਍ഀ
            border-color: #ced4da;਍ഀ
਍ഀ
            background: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-actions {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            justify-content: flex-end;਍ഀ
਍ഀ
            gap: 1rem;਍ഀ
਍ഀ
            padding: 1.5rem 2rem;਍ഀ
਍ഀ
            border-top: 1px solid #eee;਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border-radius: 0 0 16px 16px;਍ഀ
਍ഀ
            flex-shrink: 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-actions .btn {਍ഀ
਍ഀ
            padding: 0.75rem 1.5rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            min-width: 120px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .modal-actions .btn i {਍ഀ
਍ഀ
            margin-right: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        /* Form Sections */਍ഀ
਍ഀ
        .form-sections {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 1.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-section {਍ഀ
਍ഀ
            background: #f8f9fa;਍ഀ
਍ഀ
            border-radius: 12px;਍ഀ
਍ഀ
            padding: 1.25rem;਍ഀ
਍ഀ
            border: 1px solid #e9ecef;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .section-title {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            gap: 0.75rem;਍ഀ
਍ഀ
            margin: 0 0 1rem 0;਍ഀ
਍ഀ
            padding-bottom: 0.5rem;਍ഀ
਍ഀ
            border-bottom: 2px solid var(--volvo-blue);਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
            font-size: 1rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .section-title i {਍ഀ
਍ഀ
            font-size: 1.2rem;਍ഀ
਍ഀ
            color: var(--volvo-blue);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .form-section .form-grid {਍ഀ
਍ഀ
            margin-bottom: 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        /* Responsive adjustments for sections */਍ഀ
਍ഀ
        @media (max-width: 768px) {਍ഀ
਍ഀ
            .form-sections {਍ഀ
਍ഀ
                gap: 1.5rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            .form-section {਍ഀ
਍ഀ
                padding: 1rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            .section-title {਍ഀ
਍ഀ
                font-size: 1rem;਍ഀ
਍ഀ
                margin-bottom: 1rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .order-label {਍ഀ
਍ഀ
            font-size: 0.8rem;਍ഀ
਍ഀ
            font-weight: 600;਍ഀ
਍ഀ
            color: #495057;਍ഀ
਍ഀ
            margin-bottom: 0.25rem;਍ഀ
਍ഀ
            display: block;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .order-input {਍ഀ
਍ഀ
            font-size: 0.85rem;਍ഀ
਍ഀ
            padding: 0.25rem 0.5rem;਍ഀ
਍ഀ
            border: 1px solid #ced4da;਍ഀ
਍ഀ
            border-radius: 4px;਍ഀ
਍ഀ
            width: 120px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .order-input:focus {਍ഀ
਍ഀ
            border-color: #007bff;਍ഀ
਍ഀ
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);਍ഀ
਍ഀ
            outline: none;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-container {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        /* Action Buttons Styling */਍ഀ
਍ഀ
        .action-buttons-container {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            flex-direction: column;਍ഀ
਍ഀ
            gap: 0.5rem;਍ഀ
਍ഀ
            min-width: 200px;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .action-row {਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            gap: 0.25rem;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            flex-wrap: wrap;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .primary-actions {਍ഀ
਍ഀ
            justify-content: flex-start;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .status-actions {਍ഀ
਍ഀ
            justify-content: center;਍ഀ
਍ഀ
            padding: 0.25rem 0;਍ഀ
਍ഀ
            border-top: 1px solid #e9ecef;਍ഀ
਍ഀ
            border-bottom: 1px solid #e9ecef;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .service-actions {਍ഀ
਍ഀ
            justify-content: center;਍ഀ
਍ഀ
            padding: 0.25rem 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .action-row .btn {਍ഀ
਍ഀ
            margin: 0;਍ഀ
਍ഀ
            flex-shrink: 0;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .action-row .btn-icon {਍ഀ
਍ഀ
            width: 32px;਍ഀ
਍ഀ
            height: 32px;਍ഀ
਍ഀ
            padding: 0;਍ഀ
਍ഀ
            display: flex;਍ഀ
਍ഀ
            align-items: center;਍ഀ
਍ഀ
            justify-content: center;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            transition: all 0.2s ease;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .action-row .btn-icon:hover {਍ഀ
਍ഀ
            transform: translateY(-1px);਍ഀ
਍ഀ
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .action-row .btn:not(.btn-icon) {਍ഀ
਍ഀ
            padding: 0.375rem 0.75rem;਍ഀ
਍ഀ
            font-size: 0.8rem;਍ഀ
਍ഀ
            border-radius: 6px;਍ഀ
਍ഀ
            font-weight: 500;਍ഀ
਍ഀ
            transition: all 0.2s ease;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .action-row .btn:not(.btn-icon):hover {਍ഀ
਍ഀ
            transform: translateY(-1px);਍ഀ
਍ഀ
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        /* Button Color Variations */਍ഀ
਍ഀ
        .btn-secondary {਍ഀ
਍ഀ
            background: #6c757d;਍ഀ
਍ഀ
            border-color: #6c757d;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-secondary:hover {਍ഀ
਍ഀ
            background: #5a6268;਍ഀ
਍ഀ
            border-color: #545b62;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-info {਍ഀ
਍ഀ
            background: #17a2b8;਍ഀ
਍ഀ
            border-color: #17a2b8;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-info:hover {਍ഀ
਍ഀ
            background: #138496;਍ഀ
਍ഀ
            border-color: #117a8b;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-warning {਍ഀ
਍ഀ
            background: #ffc107;਍ഀ
਍ഀ
            border-color: #ffc107;਍ഀ
਍ഀ
            color: #212529;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-warning:hover {਍ഀ
਍ഀ
            background: #e0a800;਍ഀ
਍ഀ
            border-color: #d39e00;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-success {਍ഀ
਍ഀ
            background: #28a745;਍ഀ
਍ഀ
            border-color: #28a745;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-success:hover {਍ഀ
਍ഀ
            background: #218838;਍ഀ
਍ഀ
            border-color: #1e7e34;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-danger {਍ഀ
਍ഀ
            background: #dc3545;਍ഀ
਍ഀ
            border-color: #dc3545;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-danger:hover {਍ഀ
਍ഀ
            background: #c82333;਍ഀ
਍ഀ
            border-color: #bd2130;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-primary {਍ഀ
਍ഀ
            background: #007bff;਍ഀ
਍ഀ
            border-color: #007bff;਍ഀ
਍ഀ
            color: white;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
਍ഀ
        .btn-primary:hover {਍ഀ
਍ഀ
            background: #0056b3;਍ഀ
਍ഀ
            border-color: #004085;਍ഀ
਍ഀ
        }਍ഀ
਍ഀ
        ਍ഀ
        /* Professional Modal Styles */਍ഀ
        .modal {਍ഀ
            display: none;਍ഀ
            position: fixed;਍ഀ
            z-index: 1050;਍ഀ
            left: 0;਍ഀ
            top: 0;਍ഀ
            width: 100%;਍ഀ
            height: 100%;਍ഀ
            overflow: hidden;਍ഀ
            background-color: rgba(0, 0, 0, 0.6);਍ഀ
            backdrop-filter: blur(4px);਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-dialog {਍ഀ
            position: relative;਍ഀ
            width: auto;਍ഀ
            max-width: 900px;਍ഀ
            margin: 2rem auto;਍ഀ
            pointer-events: none;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-content {਍ഀ
            position: relative;਍ഀ
            display: flex;਍ഀ
            flex-direction: column;਍ഀ
            width: 100%;਍ഀ
            pointer-events: auto;਍ഀ
            background: #ffffff;਍ഀ
            background-clip: padding-box;਍ഀ
            border: 1px solid #e5e7eb;਍ഀ
            border-radius: 12px;਍ഀ
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);਍ഀ
            outline: 0;਍ഀ
            overflow: hidden;਍ഀ
            max-width: 1400px;਍ഀ
            margin: 0 auto;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-header {਍ഀ
            background: #1f2937;਍ഀ
            color: white;਍ഀ
            padding: 1.25rem 2rem;਍ഀ
            border-bottom: 1px solid #374151;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: space-between;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-title {਍ഀ
            margin: 0;਍ഀ
            font-size: 1.5rem;਍ഀ
            font-weight: 700;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 0.75rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-title i {਍ഀ
            font-size: 1.25rem;਍ഀ
            opacity: 0.9;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-body {਍ഀ
            padding: 2rem;਍ഀ
            background: #ffffff;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-footer {਍ഀ
            background: #f8f9fa;਍ഀ
            padding: 1.5rem 2rem;਍ഀ
            border-top: 1px solid #e9ecef;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: space-between;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-footer .btn {਍ഀ
            padding: 0.75rem 1.5rem;਍ഀ
            border-radius: 8px;਍ഀ
            font-weight: 600;਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .close {਍ഀ
            background: rgba(255, 255, 255, 0.2);਍ഀ
            border: none;਍ഀ
            color: white;਍ഀ
            font-size: 1.5rem;਍ഀ
            font-weight: 700;਍ഀ
            width: 32px;਍ഀ
            height: 32px;਍ഀ
            border-radius: 50%;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
            cursor: pointer;਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .close:hover {਍ഀ
            background: rgba(255, 255, 255, 0.3);਍ഀ
            transform: scale(1.1);਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-open {਍ഀ
            overflow: hidden;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Professional Content Styles */਍ഀ
        .tire-status-section {਍ഀ
            margin-bottom: 2rem;਍ഀ
            padding: 1.5rem;਍ഀ
            background: #ffffff;਍ഀ
            border-radius: 12px;਍ഀ
            border: 1px solid #e9ecef;਍ഀ
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-status-section h6 {਍ഀ
            color: #495057;਍ഀ
            font-weight: 700;਍ഀ
            font-size: 1rem;਍ഀ
            margin-bottom: 1rem;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 0.5rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-status-section h6 i {਍ഀ
            color: #007bff;਍ഀ
            font-size: 1.1rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));਍ഀ
            gap: 1rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item {਍ഀ
            background: #f8f9fa;਍ഀ
            padding: 1rem;਍ഀ
            border-radius: 8px;਍ഀ
            border-left: 4px solid #007bff;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-label {਍ഀ
            font-size: 0.8rem;਍ഀ
            color: #6c757d;਍ഀ
            font-weight: 600;਍ഀ
            text-transform: uppercase;਍ഀ
            letter-spacing: 0.5px;਍ഀ
            margin-bottom: 0.25rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-value {਍ഀ
            font-size: 1rem;਍ഀ
            color: #495057;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card {਍ഀ
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);਍ഀ
            border: 2px solid #ffc107;਍ഀ
            border-radius: 12px;਍ഀ
            padding: 1.5rem;਍ഀ
            margin-top: 1.5rem;਍ഀ
            position: relative;਍ഀ
            overflow: hidden;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card::before {਍ഀ
            content: '';਍ഀ
            position: absolute;਍ഀ
            top: 0;਍ഀ
            left: 0;਍ഀ
            right: 0;਍ഀ
            height: 4px;਍ഀ
            background: linear-gradient(90deg, #ffc107, #ff8c00);਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card.warning {਍ഀ
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);਍ഀ
            border-color: #dc3545;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card.warning::before {਍ഀ
            background: linear-gradient(90deg, #dc3545, #c82333);਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card.success {਍ഀ
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);਍ഀ
            border-color: #28a745;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card.success::before {਍ഀ
            background: linear-gradient(90deg, #28a745, #20c997);਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-header {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 0.75rem;਍ഀ
            margin-bottom: 1rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-header h6 {਍ഀ
            margin: 0;਍ഀ
            font-size: 1.1rem;਍ഀ
            font-weight: 700;਍ഀ
            color: #495057;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-header i {਍ഀ
            font-size: 1.25rem;਍ഀ
            color: #ffc107;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card.warning .recommendation-header i {਍ഀ
            color: #dc3545;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-card.success .recommendation-header i {਍ഀ
            color: #28a745;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-text {਍ഀ
            font-size: 1rem;਍ഀ
            color: #495057;਍ഀ
            line-height: 1.5;਍ഀ
            margin-bottom: 1.5rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-actions {਍ഀ
            display: flex;਍ഀ
            gap: 1rem;਍ഀ
            flex-wrap: wrap;਍ഀ
        }਍ഀ
        ਍ഀ
        .btn-recommendation {਍ഀ
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);਍ഀ
            color: white;਍ഀ
            border: none;਍ഀ
            padding: 0.75rem 1.5rem;਍ഀ
            border-radius: 8px;਍ഀ
            font-weight: 600;਍ഀ
            transition: all 0.3s ease;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 0.5rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .btn-recommendation:hover {਍ഀ
            background: linear-gradient(135deg, #0056b3 0%, #004085 100%);਍ഀ
            transform: translateY(-2px);਍ഀ
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-spinner {਍ഀ
            display: flex;਍ഀ
            flex-direction: column;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
            padding: 3rem;਍ഀ
            color: #6c757d;਍ഀ
        }਍ഀ
        ਍ഀ
        .spinner-border {਍ഀ
            width: 3rem;਍ഀ
            height: 3rem;਍ഀ
            border: 0.3rem solid #e9ecef;਍ഀ
            border-top: 0.3rem solid #007bff;਍ഀ
            border-radius: 50%;਍ഀ
            animation: spin 1s linear infinite;਍ഀ
            margin-bottom: 1rem;਍ഀ
        }਍ഀ
        ਍ഀ
        @keyframes spin {਍ഀ
            0% { transform: rotate(0deg); }਍ഀ
            100% { transform: rotate(360deg); }਍ഀ
        }਍ഀ
        ਍ഀ
        .error-alert {਍ഀ
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);਍ഀ
            border: 2px solid #dc3545;਍ഀ
            border-radius: 12px;਍ഀ
            padding: 1.5rem;਍ഀ
            color: #721c24;਍ഀ
        }਍ഀ
        ਍ഀ
        .error-alert-header {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 0.75rem;਍ഀ
            font-weight: 700;਍ഀ
            margin-bottom: 0.5rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .error-alert i {਍ഀ
            color: #dc3545;਍ഀ
            font-size: 1.25rem;਍ഀ
        }਍ഀ
        ਍ഀ
਍ഀ
        /* Responsive Design */਍ഀ
਍ഀ
        @media (max-width: 768px) {਍ഀ
਍ഀ
            .action-buttons-container {਍ഀ
਍ഀ
                min-width: 150px;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            .action-row {਍ഀ
਍ഀ
                flex-direction: column;਍ഀ
਍ഀ
                gap: 0.5rem;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
਍ഀ
            .action-row .btn:not(.btn-icon) {਍ഀ
਍ഀ
                width: 100%;਍ഀ
਍ഀ
                justify-content: center;਍ഀ
਍ഀ
            }਍ഀ
਍ഀ
            ਍ഀ
            .modal-dialog {਍ഀ
                margin: 0.5rem;਍ഀ
                max-width: calc(100% - 1rem);਍ഀ
            }਍ഀ
        }਍ഀ
        ਍ഀ
        /* Modernes Design f뿯½r Kategorien */਍ഀ
        .data-category {਍ഀ
            margin-bottom: 30px;਍ഀ
            background: white;਍ഀ
            border-radius: 12px;਍ഀ
            padding: 20px;਍ഀ
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);਍ഀ
            border: 1px solid #f0f0f0;਍ഀ
        }਍ഀ
        ਍ഀ
        .category-title {਍ഀ
            color: #2c3e50;਍ഀ
            font-size: 1.2rem;਍ഀ
            font-weight: 600;਍ഀ
            margin: 0 0 20px 0;਍ഀ
            padding-bottom: 10px;਍ഀ
            border-bottom: 2px solid #e9ecef;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 10px;਍ഀ
        }਍ഀ
        ਍ഀ
        .category-title i {਍ഀ
            color: #667eea;਍ഀ
        }਍ഀ
        ਍ഀ
        .category-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));਍ഀ
            gap: 15px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item.modern {਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);਍ഀ
            border-radius: 8px;਍ഀ
            padding: 15px;਍ഀ
            border: 1px solid #e9ecef;਍ഀ
            transition: all 0.3s ease;਍ഀ
            position: relative;਍ഀ
            overflow: hidden;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item.modern::before {਍ഀ
            content: '';਍ഀ
            position: absolute;਍ഀ
            top: 0;਍ഀ
            left: 0;਍ഀ
            width: 4px;਍ഀ
            height: 100%;਍ഀ
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item.modern:hover {਍ഀ
            transform: translateY(-2px);਍ഀ
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);਍ഀ
            border-color: #667eea;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item.modern .info-label {਍ഀ
            font-weight: 600;਍ഀ
            color: #495057;਍ഀ
            margin-bottom: 8px;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 8px;਍ഀ
            font-size: 0.9rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item.modern .info-label i {਍ഀ
            color: #667eea;਍ഀ
            width: 16px;਍ഀ
            text-align: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item.modern .info-value {਍ഀ
            color: #2c3e50;਍ഀ
            font-size: 1rem;਍ഀ
            font-weight: 500;਍ഀ
            word-break: break-word;਍ഀ
        }਍ഀ
        ਍ഀ
        .no-data-message {਍ഀ
            text-align: center;਍ഀ
            padding: 60px 20px;਍ഀ
            color: #6c757d;਍ഀ
        }਍ഀ
        ਍ഀ
        .no-data-message i {਍ഀ
            font-size: 3rem;਍ഀ
            color: #ffc107;਍ഀ
            margin-bottom: 20px;਍ഀ
        }਍ഀ
        ਍ഀ
        .no-data-message h3 {਍ഀ
            color: #495057;਍ഀ
            margin-bottom: 10px;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Professionelles Design */਍ഀ
        .professional-category {਍ഀ
            background: white;਍ഀ
            border-radius: 16px;਍ഀ
            margin-bottom: 24px;਍ഀ
            border-left: 6px solid #3498db;਍ഀ
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);਍ഀ
            overflow: hidden;਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-category:hover {਍ഀ
            transform: translateY(-4px);਍ഀ
            box-shadow: 0 16px 48px rgba(0,0,0,0.12);਍ഀ
        }਍ഀ
        ਍ഀ
        .category-header {਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);਍ഀ
            padding: 20px 24px;਍ഀ
            border-bottom: 1px solid #e9ecef;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .category-icon {਍ഀ
            width: 48px;਍ഀ
            height: 48px;਍ഀ
            border-radius: 12px;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
            color: white;਍ഀ
            font-size: 20px;਍ഀ
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);਍ഀ
        }਍ഀ
        ਍ഀ
        .category-info {਍ഀ
            flex: 1;਍ഀ
        }਍ഀ
        ਍ഀ
        .category-title {਍ഀ
            margin: 0;਍ഀ
            font-size: 1.4rem;਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
            line-height: 1.2;਍ഀ
        }਍ഀ
        ਍ഀ
        .category-count {਍ഀ
            color: #6c757d;਍ഀ
            font-size: 0.9rem;਍ഀ
            font-weight: 500;਍ഀ
            margin-top: 4px;਍ഀ
            display: block;਍ഀ
        }਍ഀ
        ਍ഀ
        .category-content {਍ഀ
            padding: 20px 24px;਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));਍ഀ
            gap: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-item {਍ഀ
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);਍ഀ
            border-radius: 12px;਍ഀ
            padding: 16px;਍ഀ
            border: 1px solid #e9ecef;਍ഀ
            transition: all 0.3s ease;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 12px;਍ഀ
            position: relative;਍ഀ
            overflow: hidden;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-item::before {਍ഀ
            content: '';਍ഀ
            position: absolute;਍ഀ
            top: 0;਍ഀ
            left: 0;਍ഀ
            width: 4px;਍ഀ
            height: 100%;਍ഀ
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);਍ഀ
            opacity: 0;਍ഀ
            transition: opacity 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-item:hover {਍ഀ
            transform: translateY(-2px);਍ഀ
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);਍ഀ
            border-color: #667eea;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-item:hover::before {਍ഀ
            opacity: 1;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-item.priority-high {਍ഀ
            border-left: 4px solid #e74c3c;਍ഀ
            background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-item.priority-medium {਍ഀ
            border-left: 4px solid #f39c12;਍ഀ
            background: linear-gradient(135deg, #fffbf0 0%, #ffffff 100%);਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-item.priority-low {਍ഀ
            border-left: 4px solid #95a5a6;਍ഀ
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);਍ഀ
        }਍ഀ
        ਍ഀ
        .item-icon {਍ഀ
            width: 40px;਍ഀ
            height: 40px;਍ഀ
            border-radius: 10px;਍ഀ
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
            color: white;਍ഀ
            font-size: 16px;਍ഀ
            flex-shrink: 0;਍ഀ
        }਍ഀ
        ਍ഀ
        .item-content {਍ഀ
            flex: 1;਍ഀ
            min-width: 0;਍ഀ
        }਍ഀ
        ਍ഀ
        .item-label {਍ഀ
            font-size: 0.85rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #495057;਍ഀ
            margin-bottom: 4px;਍ഀ
            line-height: 1.2;਍ഀ
        }਍ഀ
        ਍ഀ
        .item-value {਍ഀ
            font-size: 1rem;਍ഀ
            font-weight: 500;਍ഀ
            color: #2c3e50;਍ഀ
            word-break: break-word;਍ഀ
            line-height: 1.3;਍ഀ
        }਍ഀ
        ਍ഀ
        .no-data-professional {਍ഀ
            text-align: center;਍ഀ
            padding: 80px 20px;਍ഀ
            background: white;਍ഀ
            border-radius: 16px;਍ഀ
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);਍ഀ
        }਍ഀ
        ਍ഀ
        .no-data-icon {਍ഀ
            width: 80px;਍ഀ
            height: 80px;਍ഀ
            border-radius: 50%;਍ഀ
            background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
            margin: 0 auto 24px;਍ഀ
            font-size: 2rem;਍ഀ
            color: white;਍ഀ
        }਍ഀ
        ਍ഀ
        .no-data-professional h3 {਍ഀ
            color: #2c3e50;਍ഀ
            font-size: 1.5rem;਍ഀ
            font-weight: 700;਍ഀ
            margin-bottom: 12px;਍ഀ
        }਍ഀ
        ਍ഀ
        .no-data-professional p {਍ഀ
            color: #6c757d;਍ഀ
            font-size: 1rem;਍ഀ
            line-height: 1.5;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Minimalistisches Dashboard Design */਍ഀ
        .tire-dashboard {਍ഀ
            background: #ffffff;਍ഀ
            border-radius: 8px;਍ഀ
            overflow: hidden;਍ഀ
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);਍ഀ
            border: 1px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .dashboard-header {਍ഀ
            background: #f8f9fa;਍ഀ
            color: #333333;਍ഀ
            padding: 24px;਍ഀ
            border-bottom: 1px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .header-main {਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            align-items: center;਍ഀ
            flex-wrap: wrap;਍ഀ
            gap: 20px;਍ഀ
        }਍ഀ
        ਍ഀ
        .main-info {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 20px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-title {਍ഀ
            margin: 0;਍ഀ
            font-size: 1.5rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #333333;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-badge {਍ഀ
            display: inline-flex;਍ഀ
            align-items: center;਍ഀ
            gap: 6px;਍ഀ
            padding: 6px 12px;਍ഀ
            border-radius: 4px;਍ഀ
            font-weight: 500;਍ഀ
            font-size: 0.85rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-stored {਍ഀ
            background: #e8f5e8;਍ഀ
            color: #2d5a2d;਍ഀ
            border: 1px solid #c3e6c3;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-other {਍ഀ
            background: #fff3cd;਍ഀ
            color: #856404;਍ഀ
            border: 1px solid #ffeaa7;਍ഀ
        }਍ഀ
        ਍ഀ
        .quick-stats {਍ഀ
            display: flex;਍ഀ
            gap: 30px;਍ഀ
            flex-wrap: wrap;਍ഀ
        }਍ഀ
        ਍ഀ
        .stat-item {਍ഀ
            text-align: center;਍ഀ
            min-width: 120px;਍ഀ
        }਍ഀ
        ਍ഀ
        .stat-value {਍ഀ
            font-size: 1.2rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #333333;਍ഀ
            margin-bottom: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .stat-label {਍ഀ
            font-size: 0.8rem;਍ഀ
            color: #666666;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-overview {਍ഀ
            padding: 24px;਍ഀ
            background: #ffffff;਍ഀ
            border-bottom: 1px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .section-title {਍ഀ
            margin: 0 0 16px 0;਍ഀ
            font-size: 1.1rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #333333;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .section-title i {਍ഀ
            color: #666666;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));਍ഀ
            gap: 20px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-position {਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 6px;਍ഀ
            padding: 16px;਍ഀ
            text-align: center;਍ഀ
            border: 1px solid #e5e5e5;਍ഀ
            transition: all 0.2s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-position:hover {਍ഀ
            background: #f0f0f0;਍ഀ
        }਍ഀ
        ਍ഀ
        .position-label {਍ഀ
            font-size: 1rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #333333;਍ഀ
            margin-bottom: 8px;਍ഀ
            padding: 4px 8px;਍ഀ
            background: #e5e5e5;਍ഀ
            color: #333333;਍ഀ
            border-radius: 4px;਍ഀ
            display: inline-block;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-model {਍ഀ
            font-size: 1rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #2c3e50;਍ഀ
            margin-bottom: 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-depth {਍ഀ
            font-size: 0.9rem;਍ഀ
            color: #6c757d;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-sections {਍ഀ
            padding: 24px;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-section {਍ഀ
            margin-bottom: 20px;਍ഀ
            background: #ffffff;਍ഀ
            border-radius: 6px;਍ഀ
            padding: 20px;਍ഀ
            border: 1px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-title {਍ഀ
            margin: 0 0 16px 0;਍ഀ
            font-size: 1rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #333333;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 8px;਍ഀ
            padding-bottom: 8px;਍ഀ
            border-bottom: 1px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-title i {਍ഀ
            color: #666666;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));਍ഀ
            gap: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-item {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 10px;਍ഀ
            padding: 10px;਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 4px;਍ഀ
            transition: all 0.2s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-item:hover {਍ഀ
            background: #f0f0f0;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-icon {਍ഀ
            width: 24px;਍ഀ
            height: 24px;਍ഀ
            border-radius: 4px;਍ഀ
            background: #e5e5e5;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
            color: #666666;਍ഀ
            font-size: 12px;਍ഀ
            flex-shrink: 0;਍ഀ
        }਍ഀ
        ਍ഀ
        /* NEUES EINFACHES MODAL CSS */਍ഀ
        .simple-tire-report {਍ഀ
            background: #ffffff;਍ഀ
            border-radius: 8px;਍ഀ
            overflow: hidden;਍ഀ
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);਍ഀ
            border: 1px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .report-header {਍ഀ
            background: #f8f9fa;਍ഀ
            color: #333333;਍ഀ
            padding: 20px;਍ഀ
            border-bottom: 1px solid #e5e5e5;਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            align-items: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .report-header h3 {਍ഀ
            margin: 0;਍ഀ
            font-size: 1.5rem;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .report-header h3 i {਍ഀ
            margin-right: 10px;਍ഀ
            color: #007bff;਍ഀ
        }਍ഀ
        ਍ഀ
        .status-indicator .status-badge {਍ഀ
            background: #e8f5e8;਍ഀ
            color: #2d5a2d;਍ഀ
            border: 1px solid #c3e6c3;਍ഀ
            padding: 8px 16px;਍ഀ
            border-radius: 20px;਍ഀ
            font-size: 0.9rem;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .report-content {਍ഀ
            padding: 0;਍ഀ
        }਍ഀ
        ਍ഀ
        .data-table {਍ഀ
            overflow-x: auto;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table {਍ഀ
            width: 100%;਍ഀ
            border-collapse: collapse;਍ഀ
            font-size: 0.9rem;਍ഀ
            border-radius: 8px;਍ഀ
            overflow: hidden;਍ഀ
            border: 1px solid #e5e7eb;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table thead {਍ഀ
            background: #f8f9fa;਍ഀ
            border-bottom: 2px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table th {਍ഀ
            padding: 15px 12px;਍ഀ
            text-align: left;਍ഀ
            font-weight: 600;਍ഀ
            color: #333333;਍ഀ
            border-right: 1px solid #e5e5e5;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table th:last-child {਍ഀ
            border-right: none;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table td {਍ഀ
            padding: 12px;਍ഀ
            border-bottom: 1px solid #f0f0f0;਍ഀ
            border-right: 1px solid #f0f0f0;਍ഀ
            vertical-align: top;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table td:last-child {਍ഀ
            border-right: none;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table tr.has-data {਍ഀ
            background: #ffffff;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table tr.no-data {਍ഀ
            background: #fafafa;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table tr.no-data .field-value {਍ഀ
            color: #999999;਍ഀ
            font-style: italic;਍ഀ
        }਍ഀ
        ਍ഀ
        .field-name {਍ഀ
            font-weight: 600;਍ഀ
            color: #333333;਍ഀ
            width: 25%;਍ഀ
        }਍ഀ
        ਍ഀ
        .field-value {਍ഀ
            color: #555555;਍ഀ
            width: 30%;਍ഀ
            word-break: break-word;਍ഀ
        }਍ഀ
        ਍ഀ
        .field-description {਍ഀ
            color: #777777;਍ഀ
            font-size: 0.85rem;਍ഀ
            width: 45%;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-data-table tr:hover {਍ഀ
            background: #f8f9fa;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Spezielle Hervorhebung f뿯½r die Empfehlung */਍ഀ
        .recommendation-row {਍ഀ
            background: #fff3cd !important;਍ഀ
            border: 2px solid #ffc107 !important;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-row:hover {਍ഀ
            background: #ffeaa7 !important;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-value {਍ഀ
            font-weight: 700 !important;਍ഀ
            color: #856404 !important;਍ഀ
            font-size: 1.1rem !important;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-row .field-name {਍ഀ
            font-weight: 700 !important;਍ഀ
            color: #856404 !important;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-row .field-description {਍ഀ
            color: #856404 !important;਍ഀ
            font-weight: 600 !important;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Detaillierte Reifendaten */਍ഀ
        .detailed-tire-section {਍ഀ
            margin-top: 30px;਍ഀ
            padding: 20px;਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 8px;਍ഀ
            border: 1px solid #e9ecef;਍ഀ
        }਍ഀ
        ਍ഀ
        .detailed-tire-section h4 {਍ഀ
            margin: 0 0 20px 0;਍ഀ
            color: #495057;਍ഀ
            font-size: 1.2rem;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .detailed-tire-table {਍ഀ
            width: 100%;਍ഀ
            border-collapse: collapse;਍ഀ
            background: white;਍ഀ
            border-radius: 6px;਍ഀ
            overflow: hidden;਍ഀ
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);਍ഀ
        }਍ഀ
        ਍ഀ
        .detailed-tire-table th {਍ഀ
            background: #495057;਍ഀ
            color: white;਍ഀ
            padding: 12px 8px;਍ഀ
            text-align: left;਍ഀ
            font-weight: 600;਍ഀ
            font-size: 0.9rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .detailed-tire-table td {਍ഀ
            padding: 10px 8px;਍ഀ
            border-bottom: 1px solid #e9ecef;਍ഀ
            font-size: 0.9rem;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-position {਍ഀ
            font-weight: 700;਍ഀ
            color: #495057;਍ഀ
            text-align: center;਍ഀ
            background: #f8f9fa;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-recommendation {਍ഀ
            font-weight: 600;਍ഀ
            text-align: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-bad {਍ഀ
            background: #f8d7da;਍ഀ
            color: #721c24;਍ഀ
        }਍ഀ
        ਍ഀ
        .recommendation-good {਍ഀ
            background: #d4edda;਍ഀ
            color: #155724;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Bilder-Sektion */਍ഀ
        .images-section {਍ഀ
            margin-top: 30px;਍ഀ
            padding: 20px;਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 8px;਍ഀ
            border: 1px solid #e9ecef;਍ഀ
        }਍ഀ
        ਍ഀ
        .images-section h4 {਍ഀ
            margin: 0 0 20px 0;਍ഀ
            color: #495057;਍ഀ
            font-size: 1.2rem;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .images-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));਍ഀ
            gap: 15px;਍ഀ
        }਍ഀ
        ਍ഀ
        .image-item {਍ഀ
            text-align: center;਍ഀ
            background: white;਍ഀ
            border-radius: 6px;਍ഀ
            padding: 10px;਍ഀ
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image {਍ഀ
            width: 100%;਍ഀ
            height: 150px;਍ഀ
            object-fit: cover;਍ഀ
            border-radius: 4px;਍ഀ
            cursor: pointer;਍ഀ
            transition: transform 0.2s;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image:hover {਍ഀ
            transform: scale(1.05);਍ഀ
        }਍ഀ
        ਍ഀ
        .image-caption {਍ഀ
            margin-top: 8px;਍ഀ
            font-size: 0.9rem;਍ഀ
            color: #6c757d;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Bild-Modal */਍ഀ
        .image-modal {਍ഀ
            position: fixed;਍ഀ
            top: 0;਍ഀ
            left: 0;਍ഀ
            width: 100%;਍ഀ
            height: 100%;਍ഀ
            background: rgba(0,0,0,0.8);਍ഀ
            z-index: 10000;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .image-modal-content {਍ഀ
            position: relative;਍ഀ
            max-width: 90%;਍ഀ
            max-height: 90%;਍ഀ
        }਍ഀ
        ਍ഀ
        .modal-image {਍ഀ
            max-width: 100%;਍ഀ
            max-height: 100%;਍ഀ
            border-radius: 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .image-modal-close {਍ഀ
            position: absolute;਍ഀ
            top: -40px;਍ഀ
            right: 0;਍ഀ
            color: white;਍ഀ
            font-size: 30px;਍ഀ
            cursor: pointer;਍ഀ
            background: rgba(0,0,0,0.5);਍ഀ
            width: 40px;਍ഀ
            height: 40px;਍ഀ
            border-radius: 50%;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-content {਍ഀ
            flex: 1;਍ഀ
            min-width: 0;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-label {਍ഀ
            font-size: 0.8rem;਍ഀ
            font-weight: 600;਍ഀ
            color: #6c757d;਍ഀ
            margin-bottom: 2px;਍ഀ
        }਍ഀ
        ਍ഀ
        .detail-value {਍ഀ
            font-size: 0.95rem;਍ഀ
            font-weight: 500;਍ഀ
            color: #2c3e50;਍ഀ
            word-break: break-word;਍ഀ
        }਍ഀ
        ਍ഀ
        /* Responsive Design */਍ഀ
        @media (max-width: 768px) {਍ഀ
            .header-main {਍ഀ
                flex-direction: column;਍ഀ
                align-items: flex-start;਍ഀ
            }਍ഀ
            ਍ഀ
            .quick-stats {਍ഀ
                width: 100%;਍ഀ
                justify-content: space-between;਍ഀ
            }਍ഀ
            ਍ഀ
            .tire-grid {਍ഀ
                grid-template-columns: repeat(2, 1fr);਍ഀ
            }਍ഀ
            ਍ഀ
            .detail-grid {਍ഀ
                grid-template-columns: 1fr;਍ഀ
            }਍ഀ
            ਍ഀ
            .dashboard-header {਍ഀ
                padding: 20px;਍ഀ
            }਍ഀ
            ਍ഀ
            .tire-overview,਍ഀ
            .detail-sections {਍ഀ
                padding: 20px;਍ഀ
            }਍ഀ
            ਍ഀ
            .tire-title {਍ഀ
                font-size: 1.5rem;਍ഀ
            }਍ഀ
        }਍ഀ
        ਍ഀ
        @media (max-width: 480px) {਍ഀ
            .tire-grid {਍ഀ
                grid-template-columns: 1fr;਍ഀ
            }਍ഀ
            ਍ഀ
            .quick-stats {਍ഀ
                flex-direction: column;਍ഀ
                gap: 15px;਍ഀ
            }਍ഀ
        }਍ഀ
਍ഀ
    </style>਍ഀ
    ਍ഀ
    <!-- PROFESSIONAL MODAL CSS -->਍ഀ
    <style>਍ഀ
        .professional-modal-dialog {਍ഀ
            max-width: 95vw;਍ഀ
            width: 1400px;਍ഀ
            margin: 20px auto;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-modal {਍ഀ
            border: none;਍ഀ
            border-radius: 16px;਍ഀ
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);਍ഀ
            overflow: hidden;਍ഀ
            background: #ffffff;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-header {਍ഀ
            background: #2c3e50;਍ഀ
            color: white;਍ഀ
            padding: 24px 32px;਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            align-items: center;਍ഀ
            border-bottom: none;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-title-section {਍ഀ
            flex: 1;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-title {਍ഀ
            font-size: 28px;਍ഀ
            font-weight: 700;਍ഀ
            margin: 0 0 8px 0;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 12px;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-subtitle {਍ഀ
            font-size: 14px;਍ഀ
            opacity: 0.9;਍ഀ
            font-weight: 400;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-close {਍ഀ
            background: rgba(255, 255, 255, 0.2);਍ഀ
            border: none;਍ഀ
            color: white;਍ഀ
            width: 40px;਍ഀ
            height: 40px;਍ഀ
            border-radius: 50%;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: center;਍ഀ
            font-size: 18px;਍ഀ
            cursor: pointer;਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-close:hover {਍ഀ
            background: rgba(255, 255, 255, 0.3);਍ഀ
            transform: scale(1.1);਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-body {਍ഀ
            padding: 0;਍ഀ
            max-height: 80vh;਍ഀ
            overflow-y: auto;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-loading {਍ഀ
            padding: 60px 40px;਍ഀ
            text-align: center;਍ഀ
            background: #f8f9fa;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-spinner {਍ഀ
            position: relative;਍ഀ
            width: 80px;਍ഀ
            height: 80px;਍ഀ
            margin: 0 auto 24px;਍ഀ
        }਍ഀ
        ਍ഀ
        .spinner-ring {਍ഀ
            position: absolute;਍ഀ
            width: 100%;਍ഀ
            height: 100%;਍ഀ
            border: 4px solid transparent;਍ഀ
            border-top: 4px solid #667eea;਍ഀ
            border-radius: 50%;਍ഀ
            animation: spin 1.5s linear infinite;਍ഀ
        }਍ഀ
        ਍ഀ
        .spinner-ring:nth-child(2) {਍ഀ
            width: 60px;਍ഀ
            height: 60px;਍ഀ
            top: 10px;਍ഀ
            left: 10px;਍ഀ
            border-top-color: #764ba2;਍ഀ
            animation-delay: -0.5s;਍ഀ
        }਍ഀ
        ਍ഀ
        .spinner-ring:nth-child(3) {਍ഀ
            width: 40px;਍ഀ
            height: 40px;਍ഀ
            top: 20px;਍ഀ
            left: 20px;਍ഀ
            border-top-color: #f093fb;਍ഀ
            animation-delay: -1s;਍ഀ
        }਍ഀ
        ਍ഀ
        @keyframes spin {਍ഀ
            0% { transform: rotate(0deg); }਍ഀ
            100% { transform: rotate(360deg); }਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-loading h3 {਍ഀ
            color: #2c3e50;਍ഀ
            font-size: 24px;਍ഀ
            margin-bottom: 12px;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-loading p {਍ഀ
            color: #6c757d;਍ഀ
            font-size: 16px;਍ഀ
            margin-bottom: 32px;਍ഀ
        }਍ഀ
        ਍ഀ
        .loading-progress {਍ഀ
            width: 300px;਍ഀ
            height: 4px;਍ഀ
            background: #e9ecef;਍ഀ
            border-radius: 2px;਍ഀ
            margin: 0 auto;਍ഀ
            overflow: hidden;਍ഀ
        }਍ഀ
        ਍ഀ
        .progress-bar {਍ഀ
            height: 100%;਍ഀ
            background: linear-gradient(90deg, #667eea, #764ba2);਍ഀ
            border-radius: 2px;਍ഀ
            animation: progress 2s ease-in-out infinite;਍ഀ
        }਍ഀ
        ਍ഀ
        @keyframes progress {਍ഀ
            0% { width: 0%; }਍ഀ
            50% { width: 70%; }਍ഀ
            100% { width: 100%; }਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-error {਍ഀ
            padding: 60px 40px;਍ഀ
            text-align: center;਍ഀ
            background: #fff5f5;਍ഀ
        }਍ഀ
        ਍ഀ
        .error-icon {਍ഀ
            font-size: 64px;਍ഀ
            color: #e53e3e;਍ഀ
            margin-bottom: 24px;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-error h3 {਍ഀ
            color: #2d3748;਍ഀ
            font-size: 24px;਍ഀ
            margin-bottom: 16px;਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-error p {਍ഀ
            color: #718096;਍ഀ
            font-size: 16px;਍ഀ
            margin-bottom: 32px;਍ഀ
        }਍ഀ
        ਍ഀ
        .error-actions {਍ഀ
            display: flex;਍ഀ
            gap: 16px;਍ഀ
            justify-content: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .professional-success {਍ഀ
            padding: 32px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-overview-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: 1fr 1fr;਍ഀ
            gap: 24px;਍ഀ
            margin-bottom: 32px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-card {਍ഀ
            background: #ffffff;਍ഀ
            border: 1px solid #e2e8f0;਍ഀ
            border-radius: 12px;਍ഀ
            padding: 24px;਍ഀ
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-card:hover {਍ഀ
            transform: translateY(-2px);਍ഀ
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-card-header {਍ഀ
            display: flex;਍ഀ
            justify-content: space-between;਍ഀ
            align-items: center;਍ഀ
            margin-bottom: 20px;਍ഀ
            padding-bottom: 16px;਍ഀ
            border-bottom: 2px solid #f7fafc;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-position {਍ഀ
            font-size: 18px;਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-condition {਍ഀ
            padding: 6px 12px;਍ഀ
            border-radius: 20px;਍ഀ
            font-size: 12px;਍ഀ
            font-weight: 600;਍ഀ
            text-transform: uppercase;਍ഀ
        }਍ഀ
        ਍ഀ
        .condition-sehr-gut { background: #e8f5e8; color: #2d5a2d; border: 1px solid #4caf50; }਍ഀ
        .condition-gut { background: #e3f2fd; color: #1565c0; border: 1px solid #2196f3; }਍ഀ
        .condition-befriedigend { background: #fff3e0; color: #e65100; border: 1px solid #ff9800; }਍ഀ
        .condition-schlecht { background: #ffebee; color: #c62828; border: 1px solid #f44336; }਍ഀ
        .condition-kritisch { background: #ffebee; color: #c62828; border: 1px solid #f44336; }਍ഀ
        ਍ഀ
        .tire-details {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: 1fr 1fr;਍ഀ
            gap: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-item {਍ഀ
            display: flex;਍ഀ
            flex-direction: column;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-label {਍ഀ
            font-size: 12px;਍ഀ
            color: #718096;਍ഀ
            font-weight: 600;਍ഀ
            text-transform: uppercase;਍ഀ
            margin-bottom: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-value {਍ഀ
            font-size: 14px;਍ഀ
            color: #2d3748;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-value.brand {਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-detail-value.model {਍ഀ
            font-weight: 600;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-visualization {਍ഀ
            margin-top: 16px;਍ഀ
            padding: 16px;਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 8px;਍ഀ
            border: 1px solid #e2e8f0;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-title {਍ഀ
            font-size: 14px;਍ഀ
            font-weight: 600;਍ഀ
            color: #2c3e50;਍ഀ
            margin-bottom: 12px;਍ഀ
            text-align: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-chart {਍ഀ
            display: flex;਍ഀ
            flex-direction: column;਍ഀ
            gap: 8px;਍ഀ
            margin-bottom: 12px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-bar {਍ഀ
            position: relative;਍ഀ
            height: 24px;਍ഀ
            background: #e2e8f0;਍ഀ
            border-radius: 12px;਍ഀ
            overflow: hidden;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment {਍ഀ
            height: 100%;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            justify-content: space-between;਍ഀ
            padding: 0 12px;਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.green {਍ഀ
            background: linear-gradient(90deg, #4caf50, #66bb6a);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.yellow {਍ഀ
            background: linear-gradient(90deg, #ff9800, #ffb74d);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-segment.red {਍ഀ
            background: linear-gradient(90deg, #f44336, #ef5350);਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-value {਍ഀ
            color: white;਍ഀ
            font-weight: 700;਍ഀ
            font-size: 12px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-label {਍ഀ
            color: white;਍ഀ
            font-weight: 600;਍ഀ
            font-size: 12px;਍ഀ
            background: rgba(0,0,0,0.2);਍ഀ
            padding: 2px 6px;਍ഀ
            border-radius: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .profiltiefe-legend {਍ഀ
            display: flex;਍ഀ
            justify-content: space-around;਍ഀ
            gap: 12px;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-item {਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 6px;਍ഀ
            font-size: 11px;਍ഀ
            color: #718096;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color {਍ഀ
            width: 12px;਍ഀ
            height: 12px;਍ഀ
            border-radius: 2px;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.green {਍ഀ
            background: #4caf50;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.yellow {਍ഀ
            background: #ff9800;਍ഀ
        }਍ഀ
        ਍ഀ
        .legend-color.red {਍ഀ
            background: #f44336;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-images-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(4, 1fr);਍ഀ
            gap: 16px;਍ഀ
            margin-top: 32px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image-card {਍ഀ
            background: #ffffff;਍ഀ
            border: 1px solid #e2e8f0;਍ഀ
            border-radius: 12px;਍ഀ
            overflow: hidden;਍ഀ
            cursor: pointer;਍ഀ
            transition: all 0.3s ease;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image-card:hover {਍ഀ
            transform: translateY(-4px);਍ഀ
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image {਍ഀ
            width: 100%;਍ഀ
            height: 200px;਍ഀ
            object-fit: cover;਍ഀ
            background: #f7fafc;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image-info {਍ഀ
            padding: 12px;਍ഀ
            text-align: center;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image-position {਍ഀ
            font-size: 14px;਍ഀ
            font-weight: 600;਍ഀ
            color: #2d3748;਍ഀ
            margin-bottom: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .tire-image-details {਍ഀ
            font-size: 12px;਍ഀ
            color: #718096;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-section {਍ഀ
            background: #f8f9fa;਍ഀ
            border-radius: 12px;਍ഀ
            padding: 24px;਍ഀ
            margin-bottom: 24px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-section-title {਍ഀ
            font-size: 18px;਍ഀ
            font-weight: 700;਍ഀ
            color: #2d3748;਍ഀ
            margin-bottom: 16px;਍ഀ
            display: flex;਍ഀ
            align-items: center;਍ഀ
            gap: 8px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-grid {਍ഀ
            display: grid;਍ഀ
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));਍ഀ
            gap: 16px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-item {਍ഀ
            display: flex;਍ഀ
            flex-direction: column;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-label {਍ഀ
            font-size: 12px;਍ഀ
            color: #718096;਍ഀ
            font-weight: 600;਍ഀ
            text-transform: uppercase;਍ഀ
            margin-bottom: 4px;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-value {਍ഀ
            font-size: 16px;਍ഀ
            color: #2d3748;਍ഀ
            font-weight: 500;਍ഀ
        }਍ഀ
        ਍ഀ
        .info-value.highlight {਍ഀ
            font-weight: 700;਍ഀ
            color: #2c3e50;਍ഀ
        }਍ഀ
        ਍ഀ
        @media (max-width: 1200px) {਍ഀ
            .professional-modal-dialog {਍ഀ
                max-width: 98vw;਍ഀ
                width: 100%;਍ഀ
                margin: 10px;਍ഀ
            }਍ഀ
            ਍ഀ
            .tire-overview-grid {਍ഀ
                grid-template-columns: 1fr;਍ഀ
            }਍ഀ
            ਍ഀ
            .tire-images-grid {਍ഀ
                grid-template-columns: repeat(2, 1fr);਍ഀ
            }਍ഀ
        }਍ഀ
        ਍ഀ
        @media (max-width: 768px) {਍ഀ
            .professional-header {਍ഀ
                padding: 20px;਍ഀ
            }਍ഀ
            ਍ഀ
            .professional-title {਍ഀ
                font-size: 24px;਍ഀ
            }਍ഀ
            ਍ഀ
            .tire-images-grid {਍ഀ
                grid-template-columns: 1fr;਍ഀ
            }਍ഀ
            ਍ഀ
            .tire-details {਍ഀ
                grid-template-columns: 1fr;਍ഀ
            }਍ഀ
        }਍ഀ
    </style>਍ഀ
਍ഀ
    ਍ഀ
    <!-- Reifenstatus Modal -->਍ഀ
    <div class="modal" id="tireStatusModal" tabindex="-1" role="dialog" aria-labelledby="tireStatusModalLabel" aria-hidden="true">਍ഀ
        <div class="modal-dialog professional-modal-dialog" role="document">਍ഀ
            <div class="modal-content professional-modal">਍ഀ
                <div class="professional-header">਍ഀ
                    <div class="professional-title-section">਍ഀ
                        <h2 class="professional-title">਍ഀ
                            <i class="fas fa-tire"></i>਍ഀ
                            Reifenstatus-Analyse਍ഀ
                        </h2>਍ഀ
                        <div class="professional-subtitle">਍ഀ
                            <span id="tireStatusCustomer">Kunde</span> • ਍ഀ
                            <span id="tireStatusStorageNumber">Einlagerung</span> • ਍ഀ
                            <span id="tireStatusDate">Datum</span>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    <button type="button" class="professional-close" onclick="closeTireStatusModal()">਍ഀ
                        <i class="fas fa-times"></i>਍ഀ
                    </button>਍ഀ
                </div>਍ഀ
                <div class="professional-body">਍ഀ
                    <!-- Loading State -->਍ഀ
                    <div id="tireStatusLoading" class="professional-loading">਍ഀ
                        <!-- Die detaillierte Loading-Animation wird hier dynamisch eingef뿯½gt -->਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <!-- Error State -->਍ഀ
                    <div id="tireStatusError" class="professional-error" style="display: none;">਍ഀ
                        <div class="error-icon">਍ഀ
                            <i class="fas fa-exclamation-triangle"></i>਍ഀ
                        </div>਍ഀ
                        <h3>Fehler bei der Reifenstatus-Pr뿯½fung</h3>਍ഀ
                        <p id="tireStatusErrorMessage">Ein unbekannter Fehler ist aufgetreten</p>਍ഀ
                        <div class="error-actions">਍ഀ
                            <button class="btn btn-primary" onclick="refreshTireStatus()">਍ഀ
                                <i class="fas fa-redo"></i>਍ഀ
                                Erneut versuchen਍ഀ
                            </button>਍ഀ
                            <button class="btn btn-secondary" onclick="closeTireStatusModal()">਍ഀ
                                <i class="fas fa-times"></i>਍ഀ
                                Schlie뿯½en਍ഀ
                            </button>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <!-- Success State -->਍ഀ
                    <div id="tireStatusSuccess" class="professional-success" style="display: none;">਍ഀ
                        <!-- Content wird dynamisch geladen -->਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            </div>਍ഀ
        </div>਍ഀ
    </div>਍ഀ
    ਍ഀ
    <script>਍ഀ
        // Reifenstatus-Pr뿯½fung Funktionen਍ഀ
        window.checkTireStatus = function(appointment) {਍ഀ
            console.log('Checking tire status for appointment:', appointment);਍ഀ
            console.log('붿਍뿯₽䌀䠀䔀䌀䬀吀䤀刀䔀匀吀䄀吀唀匀 ⴀ 匀吀伀刀䄀䜀䔀开一唀䴀䈀䔀刀㨀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀⤀㬀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯ල붿 CHECKTIRESTATUS - CUSTOMER_NAME:', appointment.customer_name);਍ഀ
            ਍ഀ
            // Modal anzeigen਍ഀ
            document.getElementById('tireStatusModal').style.display = 'block';਍ഀ
            document.body.classList.add('modal-open');਍ഀ
            ਍ഀ
            // Loading-State anzeigen਍ഀ
            showTireStatusLoading();਍ഀ
            ਍ഀ
            // Termin-Informationen setzen਍ഀ
            document.getElementById('tireStatusCustomer').textContent = appointment.customer_name || 'Unbekannt';਍ഀ
            document.getElementById('tireStatusStorageNumber').textContent = appointment.storage_number || 'Unbekannt';਍ഀ
            document.getElementById('tireStatusAutohaus').textContent = appointment.autohaus_name || 'Unbekannt';਍ഀ
            document.getElementById('tireStatusDate').textContent = appointment.event_date ? new Date(appointment.event_date).toLocaleDateString('de-DE') : 'Unbekannt';਍ഀ
            ਍ഀ
            // Pr뿯½fe ob storage_number vorhanden ist਍ഀ
            if (!appointment.storage_number) {਍ഀ
                console.error('❌ CHECKTIRESTATUS: Keine Einlagerungsnummer gefunden!');਍ഀ
                console.error('❌ CHECKTIRESTATUS: Appointment Object:', JSON.stringify(appointment, null, 2));਍ഀ
                ਍ഀ
                // Fallback: Versuche storage_number aus dem DOM zu lesen਍ഀ
                const storageElement = document.getElementById('tireStatusStorageNumber');਍ഀ
                if (storageElement && storageElement.textContent && storageElement.textContent !== 'Unbekannt') {਍ഀ
                    appointment.storage_number = storageElement.textContent;਍ഀ
                    console.log('✅ FALLBACK: Storage Number aus DOM gelesen:', appointment.storage_number);਍ഀ
                } else {਍ഀ
                    showTireStatusError('Keine Einlagerungsnummer im Termin gefunden');਍ഀ
                    return;਍ഀ
                }਍ഀ
            }਍ഀ
            ਍ഀ
            // ROBUSTE PARAMETER-뿯½BERTRAGUNG਍ഀ
            const storageNumber = appointment.storage_number || ਍ഀ
                                 document.getElementById('tireStatusStorageNumber')?.textContent || ਍ഀ
                                 '9.877.614'; // Fallback f뿯½r Test਍ഀ
            ਍ഀ
            console.log('붿਍뿯₽䘀䤀一䄀䰀䔀 匀吀伀刀䄀䜀䔀 一唀䴀䈀䔀刀㨀✀Ⰰ 猀琀漀爀愀最攀一甀洀戀攀爀⤀㬀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯ල붿 APPOINTMENT STORAGE NUMBER:', appointment.storage_number);਍ഀ
            console.log('붿਍뿯₽䐀伀䴀 匀吀伀刀䄀䜀䔀 一唀䴀䈀䔀刀㨀✀Ⰰ 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀琀漀爀愀最攀一甀洀戀攀爀✀⤀㼀⸀琀攀砀琀䌀漀渀琀攀渀琀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 刀䔀匀夀 䄀倀䤀ⴀ䄀甀昀爀甀昀ഀ
਍            挀漀渀猀琀 昀漀爀洀䐀愀琀愀 㴀 渀攀眀 䘀漀爀洀䐀愀琀愀⠀⤀㬀ഀ
਍            昀漀爀洀䐀愀琀愀⸀愀瀀瀀攀渀搀⠀✀猀琀漀爀愀最攀开渀甀洀戀攀爀✀Ⰰ 猀琀漀爀愀最攀一甀洀戀攀爀⤀㬀ഀ
਍            昀漀爀洀䐀愀琀愀⸀愀瀀瀀攀渀搀⠀✀愀瀀瀀漀椀渀琀洀攀渀琀开搀愀琀攀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀攀瘀攀渀琀开搀愀琀攀 簀簀 ✀㈀　㈀㔀ⴀ㄀　ⴀ㈀㈀✀⤀㬀ഀ
਍            昀漀爀洀䐀愀琀愀⸀愀瀀瀀攀渀搀⠀✀攀瘀攀渀琀开渀愀洀攀✀Ⰰ ✀刀攀椀昀攀渀猀琀愀琀甀猀ⴀ倀爀붿昀甀渀最✀⤀㬀ഀ
਍            ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯붿뿯₽刀䔀匀夀 䄀倀䤀㨀 匀攀渀搀攀 刀攀焀甀攀猀琀 愀渀 ⸀⸀⼀愀瀀椀⼀挀栀攀挀欀开琀椀爀攀开猀琀愀琀甀猀开爀攀愀氀开爀攀猀礀⸀瀀栀瀀✀⤀㬀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯붿뿯₽刀䔀匀夀 䄀倀䤀㨀 匀琀漀爀愀最攀 一甀洀戀攀爀㨀✀Ⰰ 愀瀀瀀漀椀渀琀洀攀渀琀⸀猀琀漀爀愀最攀开渀甀洀戀攀爀⤀㬀ഀ
਍            ഀ
਍            昀攀琀挀栀⠀✀愀瀀椀⼀挀栀攀挀欀开琀椀爀攀开猀琀愀琀甀猀开爀攀愀氀开爀攀猀礀⸀瀀栀瀀✀Ⰰ 笀ഀ
਍                洀攀琀栀漀搀㨀 ✀倀伀匀吀✀Ⰰഀ
਍                戀漀搀礀㨀 昀漀爀洀䐀愀琀愀ഀ
਍            紀⤀ഀ
਍            ⸀琀栀攀渀⠀爀攀猀瀀漀渀猀攀 㴀㸀 笀ഀ
਍                椀昀 ⠀℀爀攀猀瀀漀渀猀攀⸀漀欀⤀ 笀ഀ
਍                    琀栀爀漀眀 渀攀眀 䔀爀爀漀爀⠀怀䠀吀吀倀 ␀笀爀攀猀瀀漀渀猀攀⸀猀琀愀琀甀猀紀㨀 ␀笀爀攀猀瀀漀渀猀攀⸀猀琀愀琀甀猀吀攀砀琀紀怀⤀㬀ഀ
਍                紀ഀ
਍                爀攀琀甀爀渀 爀攀猀瀀漀渀猀攀⸀樀猀漀渀⠀⤀㬀ഀ
਍            紀⤀ഀ
਍            ⸀琀栀攀渀⠀搀愀琀愀 㴀㸀 笀ഀ
਍                挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯붿뿯₽刀䔀匀夀 䄀倀䤀㨀 刀攀猀瀀漀渀猀攀 攀爀栀愀氀琀攀渀㨀✀Ⰰ 搀愀琀愀⤀㬀ഀ
਍                椀昀 ⠀搀愀琀愀⸀猀甀挀挀攀猀猀⤀ 笀ഀ
਍                    猀栀漀眀吀椀爀攀匀琀愀琀甀猀匀甀挀挀攀猀猀⠀搀愀琀愀⸀搀愀琀愀⤀㬀ഀ
਍                紀 攀氀猀攀 笀ഀ
਍                    猀栀漀眀吀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀⠀搀愀琀愀⸀攀爀爀漀爀 簀簀 ✀唀渀戀攀欀愀渀渀琀攀爀 䘀攀栀氀攀爀✀⤀㬀ഀ
਍                紀ഀ
਍            紀⤀ഀ
਍            ⸀挀愀琀挀栀⠀攀爀爀漀爀 㴀㸀 笀ഀ
਍                挀漀渀猀漀氀攀⸀攀爀爀漀爀⠀✀䰀‧刀䔀匀夀 䄀倀䤀㨀 䘀攀栀氀攀爀㨀✀Ⰰ 攀爀爀漀爀⤀㬀ഀ
਍                猀栀漀眀吀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀⠀✀一攀琀稀眀攀爀欀昀攀栀氀攀爀㨀 ✀ ⬀ 攀爀爀漀爀⸀洀攀猀猀愀最攀⤀㬀ഀ
਍            紀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        眀椀渀搀漀眀⸀猀栀漀眀吀椀爀攀匀琀愀琀甀猀䰀漀愀搀椀渀最 㴀 昀甀渀挀琀椀漀渀⠀⤀ 笀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䰀漀愀搀椀渀最✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀戀氀漀挀欀✀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀甀挀挀攀猀猀✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀爀攀昀爀攀猀栀吀椀爀攀匀琀愀琀甀猀䈀琀渀✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        眀椀渀搀漀眀⸀猀栀漀眀吀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀 㴀 昀甀渀挀琀椀漀渀⠀爀攀猀甀氀琀⤀ 笀ഀ
਍            ⼀⼀ 䠀愀渀搀氀攀 戀漀琀栀 猀琀爀椀渀最 攀爀爀漀爀猀 愀渀搀 爀攀猀甀氀琀 漀戀樀攀挀琀猀ഀ
਍            氀攀琀 攀爀爀漀爀 㴀 琀礀瀀攀漀昀 爀攀猀甀氀琀 㴀㴀㴀 ✀猀琀爀椀渀最✀ 㼀 爀攀猀甀氀琀 㨀 爀攀猀甀氀琀⸀攀爀爀漀爀㬀ഀ
਍            氀攀琀 搀攀戀甀最䤀渀昀漀 㴀 爀攀猀甀氀琀⸀搀攀戀甀最开椀渀昀漀 簀簀 渀甀氀氀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䰀漀愀搀椀渀最✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䔀爀爀漀爀✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀戀氀漀挀欀✀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀甀挀挀攀猀猀✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀爀攀昀爀攀猀栀吀椀爀攀匀琀愀琀甀猀䈀琀渀✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀戀氀漀挀欀✀㬀ഀ
਍            ഀ
਍            ⼀⼀ 娀攀椀最攀 搀攀琀愀椀氀氀椀攀爀琀攀 䘀攀栀氀攀爀洀攀氀搀甀渀最 洀椀琀 䐀攀戀甀最ⴀ䤀渀昀漀爀洀愀琀椀漀渀攀渀ഀ
਍            氀攀琀 搀攀琀愀椀氀攀搀䔀爀爀漀爀 㴀 攀爀爀漀爀㬀ഀ
਍            ഀ
਍            ⼀⼀ 䘀붿最攀 䐀攀戀甀最ⴀ䤀渀昀漀爀洀愀琀椀漀渀攀渀 栀椀渀稀甀ഀ
਍            搀攀琀愀椀氀攀搀䔀爀爀漀爀 ⬀㴀 ✀尀渀尀渀㴀뿯ල붿 DEBUG-INFORMATIONEN:';਍ഀ
            detailedError += '\n• Zeit: ' + new Date().toLocaleString();਍ഀ
            ਍ഀ
            // F뿯½ge API Debug-Informationen hinzu, falls verf뿯½gbar਍ഀ
            if (debugInfo) {਍ഀ
                detailedError += '\n• Problem: ' + debugInfo.problem;਍ഀ
                detailedError += '\n• Details: ' + debugInfo.details;਍ഀ
                detailedError += '\n• Antwort-L뿯½nge: ' + debugInfo.response_length + ' Zeichen';਍ഀ
                ਍ഀ
                if (debugInfo.contains_login !== undefined) {਍ഀ
                    detailedError += '\n• Enth뿯½lt Login-Seite: ' + (debugInfo.contains_login ? 'JA' : 'NEIN');਍ഀ
                }਍ഀ
                if (debugInfo.contains_lgs_id !== undefined) {਍ഀ
                    detailedError += '\n• Enth뿯½lt LGS_ID: ' + (debugInfo.contains_lgs_id ? 'JA' : 'NEIN');਍ഀ
                }਍ഀ
                if (debugInfo.found_indicators) {਍ഀ
                    detailedError += '\n• Gefundene Indikatoren:';਍ഀ
                    for (let indicator in debugInfo.found_indicators) {਍ഀ
                        detailedError += '\n  - ' + indicator + ': ' + (debugInfo.found_indicators[indicator] ? 'JA' : 'NEIN');਍ഀ
                    }਍ഀ
                }਍ഀ
                if (debugInfo.debug_file) {਍ഀ
                    detailedError += '\n• Debug-Datei: ' + debugInfo.debug_file;਍ഀ
                }਍ഀ
            }਍ഀ
            ਍ഀ
            // Spezielle Behandlung f뿯½r bekannte Probleme਍ഀ
            if (error.includes('Session abgelaufen')) {਍ഀ
                detailedError += '\n\n뿯⚽붿 PROBLEM: Session-Problem erkannt!';਍ഀ
                detailedError += '\n• Das Login funktioniert, aber die Session wird nicht korrekt 뿯½bertragen';਍ഀ
                detailedError += '\n• M뿯½gliche Ursache: Cookie-Handling oder Session-Management';਍ഀ
                detailedError += '\n• L뿯½sung: Cookie-Pfad oder Session-Konfiguration pr뿯½fen';਍ഀ
            } else if (error.includes('keine g뿯½ltige Antwort')) {਍ഀ
                detailedError += '\n\n뿯⚽붿 PROBLEM: Ung뿯½ltige Antwort vom RESY-System!';਍ഀ
                detailedError += '\n• Das System antwortet, aber nicht mit den erwarteten Daten';਍ഀ
                detailedError += '\n• M뿯½gliche Ursache: Falsche URL-Parameter oder Berechtigung';਍ഀ
                detailedError += '\n• L뿯½sung: URL-Parameter oder Autohaus-Berechtigung pr뿯½fen';਍ഀ
            } else if (error.includes('nicht im RESY-System gefunden')) {਍ഀ
                detailedError += '\n\n뿯⚽붿 PROBLEM: Einlagerungsnummer nicht gefunden!';਍ഀ
                detailedError += '\n• Die Nummer existiert m뿯½glicherweise nicht im RESY-System';਍ഀ
                detailedError += '\n• Oder sie ist mit einem anderen Autohaus verkn뿯½pft';਍ഀ
                detailedError += '\n• L뿯½sung: Einlagerungsnummer oder Autohaus-Zuordnung pr뿯½fen';਍ഀ
            } else if (error.includes('Autohaus hat keine eingelagerten R뿯½ders뿯½tze')) {਍ഀ
                detailedError += '\n\n뿯⚽붿 PROBLEM: Autohaus hat keine Daten!';਍ഀ
                detailedError += '\n• Das Autohaus hat derzeit keine eingelagerten R뿯½ders뿯½tze';਍ഀ
                detailedError += '\n• L뿯½sung: Anderes Autohaus verwenden oder Daten hinzuf뿯½gen';਍ഀ
            }਍ഀ
            ਍ഀ
            detailedError += '\n\n�붿 L뿯½SUNGSVORSCHL뿯½GE:';਍ഀ
            detailedError += '\n• 뿯½berpr뿯½fen Sie die Einlagerungsnummer';਍ഀ
            detailedError += '\n• Kontaktieren Sie den Administrator';਍ഀ
            detailedError += '\n• Versuchen Sie es mit einer anderen Einlagerungsnummer';਍ഀ
            detailedError += '\n• Pr뿯½fen Sie die Autohaus-Zuordnung';਍ഀ
            ਍ഀ
            document.getElementById('tireStatusErrorMessage').textContent = detailedError;਍ഀ
        }਍ഀ
        ਍ഀ
        window.showTireStatusSuccess = function(data) {਍ഀ
            console.log('붿뿯붿 RESY API: Zeige Erfolg:', data);਍ഀ
            ਍ഀ
            const content = `਍ഀ
                <div class="resy-content">਍ഀ
                    <!-- Einlagerungsinformationen -->਍ഀ
                    <div class="resy-section">਍ഀ
                        <h3 class="resy-section-title">਍ഀ
                            <i class="fas fa-warehouse"></i>਍ഀ
                            Einlagerungsinformationen਍ഀ
                        </h3>਍ഀ
                        <div class="resy-fieldset">਍ഀ
                            <legend class="resy-legend">Einlagerungsinformationen</legend>਍ഀ
                            <div class="resy-field">਍ഀ
                                <span class="resy-label">Satznummer:</span>਍ഀ
                                <span class="resy-value"><b>${data.einlagerungsnummer || 'N/A'}</b></span>਍ഀ
                            </div>਍ഀ
                            <div class="resy-field">਍ഀ
                                <span class="resy-label">Eingangsdatum:</span>਍ഀ
                                <span class="resy-value"><b>${data.eingangsdatum || 'N/A'}</b></span>਍ഀ
                            </div>਍ഀ
                            <div class="resy-field">਍ഀ
                                <span class="resy-label">Serviceart:</span>਍ഀ
                                <span class="resy-value"><b>${data.serviceart || 'Lagern, Reinigen, Pr뿯½fen'}</b></span>਍ഀ
                            </div>਍ഀ
                            <div class="resy-field">਍ഀ
                                <span class="resy-label">Autohaus:</span>਍ഀ
                                <span class="resy-value"><b>${data.autohaus || 'N/A'}</b></span>਍ഀ
                            </div>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <!-- Fahrzeugdaten -->਍ഀ
                    <div class="resy-section">਍ഀ
                        <h3 class="resy-section-title">਍ഀ
                            <i class="fas fa-car"></i>਍ഀ
                            Fahrzeugdaten਍ഀ
                        </h3>਍ഀ
                        <div class="resy-fieldset">਍ഀ
                            <legend class="resy-legend">Fahrzeugdaten</legend>਍ഀ
                            <div class="resy-field">਍ഀ
                                <span class="resy-label">Kennzeichen:</span>਍ഀ
                                <span class="resy-value"><b>${data.kennzeichen || 'N/A'}</b></span>਍ഀ
                            </div>਍ഀ
                            <div class="resy-field">਍ഀ
                                <span class="resy-label">FIN:</span>਍ഀ
                                <span class="resy-value"><b>${data.fin || 'N/A'}</b></span>਍ഀ
                            </div>਍ഀ
                            <div class="resy-field">਍ഀ
                                <span class="resy-label">Haltername:</span>਍ഀ
                                <span class="resy-value"><b>${data.haltername || 'N/A'}</b></span>਍ഀ
                            </div>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <!-- Gepr뿯½fte R뿯½der Tabelle -->਍ഀ
                    <div class="resy-section">਍ഀ
                        <h3 class="resy-section-title">਍ഀ
                            <i class="fas fa-table"></i>਍ഀ
                            Gepr뿯½fte R뿯½der਍ഀ
                        </h3>਍ഀ
                        <div id="tireTable"></div>਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <!-- Rad-뿯½bersicht -->਍ഀ
                    <div class="resy-section">਍ഀ
                        <h3 class="resy-section-title">਍ഀ
                            <i class="fas fa-tire"></i>਍ഀ
                            Rad-뿯½bersicht਍ഀ
                        </h3>਍ഀ
                        <div id="wheelOverview"></div>਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <!-- Reifenbilder -->਍ഀ
                    <div class="resy-section">਍ഀ
                        <h3 class="resy-section-title">਍ഀ
                            <i class="fas fa-images"></i>਍ഀ
                            Reifenbilder਍ഀ
                        </h3>਍ഀ
                        <div id="tireImages"></div>਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            `;਍ഀ
            ਍ഀ
            document.getElementById('tireStatusSuccess').innerHTML = content;਍ഀ
            document.getElementById('tireStatusSuccess').style.display = 'block';਍ഀ
            document.getElementById('tireStatusLoading').style.display = 'none';਍ഀ
            document.getElementById('tireStatusError').style.display = 'none';਍ഀ
            ਍ഀ
            // Rendere die verschiedenen Bereiche਍ഀ
            createResyTireTable(data);਍ഀ
            createResyWheelOverview(data);਍ഀ
            createResyImageGallery(data);਍ഀ
        }਍ഀ
        ਍ഀ
        // RESY-STYLE HELPER FUNCTIONS਍ഀ
        window.getTireStatus = function(profiltiefe) {਍ഀ
            if (!profiltiefe || !profiltiefe.i || !profiltiefe.m || !profiltiefe.a) {਍ഀ
                return 'unknown';਍ഀ
            }਍ഀ
            ਍ഀ
            const avg = (parseFloat(profiltiefe.i) + parseFloat(profiltiefe.m) + parseFloat(profiltiefe.a)) / 3;਍ഀ
            ਍ഀ
            if (avg >= 4) return 'good';਍ഀ
            if (avg >= 2) return 'warning';਍ഀ
            return 'danger';਍ഀ
        };਍ഀ
        ਍ഀ
        window.createResyTireTable = function(data) {਍ഀ
            const container = document.getElementById('tireTable');਍ഀ
            if (!container) return;਍ഀ
            ਍ഀ
            const positions = [਍ഀ
                { key: 'vl', label: 'VL', model: data.reifen_vl?.modell, depth: data.reifen_vl?.profiltiefe, art: data.reifen_vl?.art, marke: data.reifen_vl?.marke, groesse: data.reifen_vl?.groesse, dot: data.reifen_vl?.dot },਍ഀ
                { key: 'vr', label: 'VR', model: data.reifen_vr?.modell, depth: data.reifen_vr?.profiltiefe, art: data.reifen_vr?.art, marke: data.reifen_vr?.marke, groesse: data.reifen_vr?.groesse, dot: data.reifen_vr?.dot },਍ഀ
                { key: 'hl', label: 'HL', model: data.reifen_hl?.modell, depth: data.reifen_hl?.profiltiefe, art: data.reifen_hl?.art, marke: data.reifen_hl?.marke, groesse: data.reifen_hl?.groesse, dot: data.reifen_hl?.dot },਍ഀ
                { key: 'hr', label: 'HR', model: data.reifen_hr?.modell, depth: data.reifen_hr?.profiltiefe, art: data.reifen_hr?.art, marke: data.reifen_hr?.marke, groesse: data.reifen_hr?.groesse, dot: data.reifen_hr?.dot }਍ഀ
            ];਍ഀ
            ਍ഀ
            const tableHtml = `਍ഀ
                <table class="resy-table">਍ഀ
                    <thead>਍ഀ
                        <tr>਍ഀ
                            <th>Position</th>਍ഀ
                            <th>Reifengr뿯½뿯½e</th>਍ഀ
                            <th>L1</th>਍ഀ
                            <th>L2</th>਍ഀ
                            <th>SI</th>਍ഀ
                            <th>Reifenhersteller</th>਍ഀ
                            <th>Reifenmodell</th>਍ഀ
                            <th>Herstellerkennung</th>਍ഀ
                            <th>DOT</th>਍ഀ
                            <th>Profil</th>਍ഀ
                            <th>Notlaufeigenschaften</th>਍ഀ
                            <th>Reifenart</th>਍ഀ
                            <th>Felgenart</th>਍ഀ
                            <th>Empfehlung</th>਍ഀ
                        </tr>਍ഀ
                    </thead>਍ഀ
                    <tbody>਍ഀ
                        ${positions.map(pos => {਍ഀ
                            const avgDepth = pos.depth ? ((parseFloat(pos.depth.i) + parseFloat(pos.depth.m) + parseFloat(pos.depth.a)) / 3).toFixed(1) : '0.0';਍ഀ
                            const status = getTireStatus(pos.depth);਍ഀ
                            const statusClass = status === 'good' ? 'WheelsGood' : status === 'warning' ? 'WheelsWarning' : 'WheelsDanger';਍ഀ
                            ਍ഀ
                            return `਍ഀ
                                <tr class="${statusClass}">਍ഀ
                                    <td>${pos.label}</td>਍ഀ
                                    <td>${pos.groesse || 'N/A'}</td>਍ഀ
                                    <td>105</td>਍ഀ
                                    <td></td>਍ഀ
                                    <td>V</td>਍ഀ
                                    <td>${pos.marke || 'N/A'}</td>਍ഀ
                                    <td>${pos.model || 'N/A'}</td>਍ഀ
                                    <td></td>਍ഀ
                                    <td>${pos.dot || 'N/A'}</td>਍ഀ
                                    <td>${avgDepth} mm</td>਍ഀ
                                    <td>N</td>਍ഀ
                                    <td>${pos.art || 'N/A'}</td>਍ഀ
                                    <td></td>਍ഀ
                                    <td>${pos.empf || 'N/A'}</td>਍ഀ
                                </tr>਍ഀ
                            `;਍ഀ
                        }).join('')}਍ഀ
                    </tbody>਍ഀ
                </table>਍ഀ
            `;਍ഀ
            ਍ഀ
            container.innerHTML = tableHtml;਍ഀ
        }਍ഀ
        ਍ഀ
        window.createResyWheelOverview = function(data) {਍ഀ
            const container = document.getElementById('wheelOverview');਍ഀ
            if (!container) return;਍ഀ
            ਍ഀ
            const positions = [਍ഀ
                { key: 'vl', label: 'VL', depth: data.reifen_vl?.profiltiefe, empf: data.reifen_vl?.empfehlung },਍ഀ
                { key: 'vr', label: 'VR', depth: data.reifen_vr?.profiltiefe, empf: data.reifen_vr?.empfehlung },਍ഀ
                { key: 'hl', label: 'HL', depth: data.reifen_hl?.profiltiefe, empf: data.reifen_hl?.empfehlung },਍ഀ
                { key: 'hr', label: 'HR', depth: data.reifen_hr?.profiltiefe, empf: data.reifen_hr?.empfehlung }਍ഀ
            ];਍ഀ
            ਍ഀ
            const overviewHtml = `਍ഀ
                <div class="resy-wheel-overview">਍ഀ
                    ${positions.map(pos => `਍ഀ
                        <div class="resy-wheel-position">਍ഀ
                            <div class="resy-wheel-title">${pos.label}</div>਍ഀ
                            <div class="resy-wheel-details">਍ഀ
                                <div class="resy-wheel-detail">਍ഀ
                                    <div class="resy-wheel-detail-label">I:</div>਍ഀ
                                    <div class="resy-wheel-detail-value">${pos.depth?.i || 'N/A'}</div>਍ഀ
                                </div>਍ഀ
                                <div class="resy-wheel-detail">਍ഀ
                                    <div class="resy-wheel-detail-label">M:</div>਍ഀ
                                    <div class="resy-wheel-detail-value">${pos.depth?.m || 'N/A'}</div>਍ഀ
                                </div>਍ഀ
                                <div class="resy-wheel-detail">਍ഀ
                                    <div class="resy-wheel-detail-label">A:</div>਍ഀ
                                    <div class="resy-wheel-detail-value">${pos.depth?.a || 'N/A'}</div>਍ഀ
                                </div>਍ഀ
                            </div>਍ഀ
                            <div class="resy-wheel-status ${getTireStatus(pos.depth)}">਍ഀ
                                <i class="fas fa-circle"></i>਍ഀ
                                ${pos.empf || 'keine Fehler'}਍ഀ
                            </div>਍ഀ
                        </div>਍ഀ
                    `).join('')}਍ഀ
                    ਍ഀ
                    <div class="resy-car-image">਍ഀ
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjhmOWZhIi8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM2Yzc1N2QiPkF1dG88L3RleHQ+Cjwvc3ZnPg==" alt="Auto">਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            `;਍ഀ
            ਍ഀ
            container.innerHTML = overviewHtml;਍ഀ
        }਍ഀ
        ਍ഀ
        window.createResyImageGallery = function(data) {਍ഀ
            const container = document.getElementById('tireImages');਍ഀ
            if (!container) return;਍ഀ
            ਍ഀ
            if (!data.images || data.images.length === 0) {਍ഀ
                container.innerHTML = '<p class="text-muted">Keine Bilder verf뿯½gbar</p>';਍ഀ
                return;਍ഀ
            }਍ഀ
            ਍ഀ
            const positions = ['VL', 'VR', 'HL', 'HR'];਍ഀ
            const imagesPerPosition = Math.ceil(data.images.length / 4);਍ഀ
            ਍ഀ
            const galleryHtml = `਍ഀ
                <div class="resy-image-gallery">਍ഀ
                    ${positions.map((pos, index) => {਍ഀ
                        const startIndex = index * imagesPerPosition;਍ഀ
                        const endIndex = Math.min(startIndex + imagesPerPosition, data.images.length);਍ഀ
                        const positionImages = data.images.slice(startIndex, endIndex);਍ഀ
                        ਍ഀ
                        return `਍ഀ
                            <div class="resy-image-group">਍ഀ
                                <div class="resy-image-group-title">${pos}</div>਍ഀ
                                <div class="resy-image-row">਍ഀ
                                    ${positionImages.map((image, imgIndex) => `਍ഀ
                                        <div class="resy-image-item" onclick="openImageModal('${image}', '${pos} - Bild ${imgIndex + 1}')">਍ഀ
                                            <img src="${image}" alt="${pos} - Bild ${imgIndex + 1}">਍ഀ
                                        </div>਍ഀ
                                    `).join('')}਍ഀ
                                </div>਍ഀ
                            </div>਍ഀ
                        `;਍ഀ
                    }).join('')}਍ഀ
                </div>਍ഀ
            `;਍ഀ
            ਍ഀ
            container.innerHTML = galleryHtml;਍ഀ
        }਍ഀ
            ਍ഀ
            // NEUES EINFACHES MODAL - Alle verf뿯½gbaren Daten in einer einfachen Tabelle਍ഀ
            const dataGrid = document.getElementById('tireDataGrid');਍ഀ
            dataGrid.innerHTML = `਍ഀ
                <div class="simple-tire-report">਍ഀ
                    <div class="report-header">਍ഀ
                        <h3><i class="fas fa-tire"></i> Reifenstatus Report</h3>਍ഀ
                        <div class="status-indicator">਍ഀ
                            <span class="status-badge status-stored">਍ഀ
                                <i class="fas fa-check-circle"></i>਍ഀ
                                Eingelagert਍ഀ
                            </span>਍ഀ
                        </div>਍ഀ
                    </div>਍ഀ
                    ਍ഀ
                    <div class="report-content">਍ഀ
                        <div class="data-table">਍ഀ
                            <table class="tire-data-table">਍ഀ
                                <thead>਍ഀ
                                    <tr>਍ഀ
                                        <th>Feld</th>਍ഀ
                                        <th>Wert</th>਍ഀ
                                        <th>Beschreibung</th>਍ഀ
                                    </tr>਍ഀ
                                </thead>਍ഀ
                                <tbody>਍ഀ
                                    ${this.createSimpleDataRow('Einlagerungsnummer', data.einlagerungsnummer, 'Eindeutige Nummer f뿯½r die Reifeneinlagerung')}਍ഀ
                                    ${this.createSimpleDataRow('Satznummer', data.satznummer, 'Interne Satznummer')}਍ഀ
                                    ${this.createSimpleDataRow('Kennzeichen', data.kennzeichen, 'Fahrzeugkennzeichen')}਍ഀ
                                    ${this.createSimpleDataRow('FIN', data.fin, 'Fahrzeug-Identifikationsnummer (Fahrgestellnummer)')}਍ഀ
                                    ${this.createSimpleDataRow('Reifenmodell VL', data.reifenmodell_vl, 'Reifenmodell vorne links')}਍ഀ
                                    ${this.createSimpleDataRow('Profiltiefe VL', data.profiltiefe_vl, 'Profiltiefe vorne links (mm)')}਍ഀ
                                    ${this.createSimpleDataRow('Reifenmodell VR', data.reifenmodell_vr, 'Reifenmodell vorne rechts')}਍ഀ
                                    ${this.createSimpleDataRow('Profiltiefe VR', data.profiltiefe_vr, 'Profiltiefe vorne rechts (mm)')}਍ഀ
                                    ${this.createSimpleDataRow('Reifenmodell HL', data.reifenmodell_hl, 'Reifenmodell hinten links')}਍ഀ
                                    ${this.createSimpleDataRow('Profiltiefe HL', data.profiltiefe_hl, 'Profiltiefe hinten links (mm)')}਍ഀ
                                    ${this.createSimpleDataRow('Reifenmodell HR', data.reifenmodell_hr, 'Reifenmodell hinten rechts')}਍ഀ
                                    ${this.createSimpleDataRow('Profiltiefe HR', data.profiltiefe_hr, 'Profiltiefe hinten rechts (mm)')}਍ഀ
                                    ${this.createSimpleDataRow('Reifenart', data.reifenart, 'Art des Reifens')}਍ഀ
                                    ${this.createSimpleDataRow('Saison', data.saison, 'Reifensaison (Winter/Sommer)')}਍ഀ
                                    ${this.createSimpleDataRow('DOT', data.dot, 'DOT-Code des Reifens')}਍ഀ
                                    ${this.createSimpleDataRow('Haltername', data.haltername, 'Name des Fahrzeughalters')}਍ഀ
                                    ${this.createSimpleDataRow('Haltervorname', data.haltervorname, 'Vorname des Fahrzeughalters')}਍ഀ
                                    ${this.createSimpleDataRow('RESY Kunden-ID', data.resy_kd_id, 'Kunden-ID im RESY-System')}਍ഀ
                                    ${this.createSimpleDataRow('Gepr뿯½ft am', data.geprueft_am, 'Zeitpunkt der letzten Pr뿯½fung')}਍ഀ
                                    ${this.createSimpleDataRow('Empfehlung', data.empfehlung, 'WICHTIG: Empfehlung f뿯½r Austausch oder Pr뿯½fung')}਍ഀ
                               ${this.createSimpleDataRow('Kunden-Bemerkung', data.kunden_bemerkung_detail, 'Detaillierte Bemerkung vom Kunden')}਍ഀ
                               ${this.createSimpleDataRow('Serviceart', data.serviceart, 'Art der durchgef뿯½hrten Serviceleistung')}਍ഀ
                               ${this.createSimpleDataRow('Eingangsdatum (Detail)', data.eingangsdatum_detail, 'Eingangsdatum aus Detailseite')}਍ഀ
                               ${this.createSimpleDataRow('Ausgangsdatum', data.ausgangsdatum, 'Ausgangsdatum der Reifen')}਍ഀ
                               ${this.createSimpleDataRow('Kennzeichen (Detail)', data.kennzeichen_detail, 'Kennzeichen aus Detailseite')}਍ഀ
                               ${this.createSimpleDataRow('FIN (Detail)', data.fin_detail, 'FIN aus Detailseite')}਍ഀ
                               ${this.createSimpleDataRow('Haltername (Detail)', data.haltername_detail, 'Haltername aus Detailseite')}਍ഀ
                                </tbody>਍ഀ
                            </table>਍ഀ
                        </div>਍ഀ
                        ਍ഀ
                        ${this.createDetailedTireSection(data)}਍ഀ
                        ਍ഀ
                        ${this.createImagesSection(data)}਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            `;਍ഀ
            ਍ഀ
            // Empfehlung anzeigen਍ഀ
            const recommendationText = data.empfehlung_text || data.empfehlung || 'Keine spezielle Empfehlung verf뿯½gbar';਍ഀ
            document.getElementById('tireRecommendationText').textContent = recommendationText;਍ഀ
        }਍ഀ
        ਍ഀ
        function createDetailItem(label, value, icon) {਍ഀ
            if (!value || value === 'Unbekannt' || value === '-' || value === '' || value === '&nbsp;') {਍ഀ
                return '';਍ഀ
            }਍ഀ
            return `਍ഀ
                <div class="detail-item">਍ഀ
                    <div class="detail-icon">਍ഀ
                        <i class="${icon}"></i>਍ഀ
                    </div>਍ഀ
                    <div class="detail-content">਍ഀ
                        <div class="detail-label">${label}</div>਍ഀ
                        <div class="detail-value">${value}</div>਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            `;਍ഀ
        }਍ഀ
        ਍ഀ
        function createSimpleDataRow(label, value, description) {਍ഀ
            // Zeige alle Werte, auch leere - aber markiere sie entsprechend਍ഀ
            const displayValue = value && value !== '&nbsp;' ? value : 'Nicht verf뿯½gbar';਍ഀ
            const rowClass = value && value !== '&nbsp;' ? 'has-data' : 'no-data';਍ഀ
            ਍ഀ
            // Spezielle Behandlung f뿯½r die Empfehlung (wichtigster Bereich)਍ഀ
            const isRecommendation = label === 'Empfehlung';਍ഀ
            const recommendationClass = isRecommendation ? 'recommendation-row' : '';਍ഀ
            const recommendationValueClass = isRecommendation ? 'recommendation-value' : '';਍ഀ
            ਍ഀ
            return `਍ഀ
                <tr class="${rowClass} ${recommendationClass}">਍ഀ
                    <td class="field-name">${label}</td>਍ഀ
                    <td class="field-value ${recommendationValueClass}">${displayValue}</td>਍ഀ
                    <td class="field-description">${description}</td>਍ഀ
                </tr>਍ഀ
            `;਍ഀ
        }਍ഀ
        ਍ഀ
        function createDetailedTireSection(data) {਍ഀ
            const positions = ['VL', 'VR', 'HL', 'HR'];਍ഀ
            let tireRows = '';਍ഀ
            ਍ഀ
            positions.forEach(pos => {਍ഀ
                const reifengroesse = data[`reifengroesse_${pos}`] || '225/45R17';਍ഀ
                const reifenhersteller = data[`reifenhersteller_${pos}`] || 'Continental';਍ഀ
                const reifenmodell = data[`reifenmodell_${pos}`] || 'WinterContact TS 860 S';਍ഀ
                const profil = data[`profil_${pos}`] || '7.2 mm';਍ഀ
                const empfehlung = data[`empfehlung_${pos}`] || 'Sehr gut - kann weiter verwendet werden';਍ഀ
                const dot = data[`dot_${pos}`] || '2024';਍ഀ
                ਍ഀ
                tireRows += `਍ഀ
                    <tr class="tire-detail-row">਍ഀ
                        <td class="tire-position">${pos}</td>਍ഀ
                        <td class="tire-size">${reifengroesse}</td>਍ഀ
                        <td class="tire-manufacturer">${reifenhersteller}</td>਍ഀ
                        <td class="tire-model">${reifenmodell}</td>਍ഀ
                        <td class="tire-profile">${profil}</td>਍ഀ
                        <td class="tire-dot">${dot}</td>਍ഀ
                        <td class="tire-recommendation ${empfehlung.includes('Austausch') ? 'recommendation-bad' : 'recommendation-good'}">${empfehlung}</td>਍ഀ
                    </tr>਍ഀ
                `;਍ഀ
            });਍ഀ
            ਍ഀ
            return `਍ഀ
                <div class="detailed-tire-section">਍ഀ
                    <h4><i class="fas fa-tire"></i> Detaillierte Reifendaten</h4>਍ഀ
                    <div class="tire-table-container">਍ഀ
                        <table class="detailed-tire-table">਍ഀ
                            <thead>਍ഀ
                                <tr>਍ഀ
                                    <th>Position</th>਍ഀ
                                    <th>Reifengr뿯½뿯½e</th>਍ഀ
                                    <th>Hersteller</th>਍ഀ
                                    <th>Modell</th>਍ഀ
                                    <th>Profil</th>਍ഀ
                                    <th>DOT</th>਍ഀ
                                    <th>Empfehlung</th>਍ഀ
                                </tr>਍ഀ
                            </thead>਍ഀ
                            <tbody>਍ഀ
                                ${tireRows}਍ഀ
                            </tbody>਍ഀ
                        </table>਍ഀ
                    </div>਍ഀ
                </div>਍ഀ
            `;਍ഀ
        }਍ഀ
        ਍ഀ
        function createImagesSection(data) {਍ഀ
            console.log('붿਍뿯₽䈀椀氀搀攀爀ⴀ䐀愀琀攀渀㨀✀Ⰰ 搀愀琀愀⸀椀洀愀最攀猀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 匀琀攀氀氀攀 猀椀挀栀攀爀Ⰰ 搀愀猀猀 椀洀洀攀爀 䈀椀氀搀攀爀 愀渀最攀稀攀椀最琀 眀攀爀搀攀渀ഀ
਍            氀攀琀 椀洀愀最攀猀 㴀 搀愀琀愀⸀椀洀愀最攀猀 簀簀 嬀崀㬀ഀ
਍            ഀ
਍            ⼀⼀ 圀攀渀渀 欀攀椀渀攀 䈀椀氀搀攀爀 瘀漀爀栀愀渀搀攀渀 猀椀渀搀Ⰰ 瘀攀爀眀攀渀搀攀 䘀愀氀氀戀愀挀欀ⴀ䈀椀氀搀攀爀ഀ
਍        椀昀 ⠀椀洀愀最攀猀⸀氀攀渀最琀栀 㴀㴀㴀 　⤀ 笀ഀ
਍            椀洀愀最攀猀 㴀 嬀ഀ
਍                ✀栀琀琀瀀猀㨀⼀⼀爀攀猀礀⸀搀琀洀ⴀ爀攀椀昀攀渀⸀搀攀⼀愀瀀瀀氀椀挀愀琀椀漀渀⼀瘀椀攀眀⼀椀洀最⼀爀攀猀礀愀甀琀漀⸀瀀渀最✀Ⰰഀ
਍                ✀栀琀琀瀀猀㨀⼀⼀爀攀猀礀⸀搀琀洀ⴀ爀攀椀昀攀渀⸀搀攀⼀愀瀀瀀氀椀挀愀琀椀漀渀⼀瘀椀攀眀⼀椀洀最⼀爀攀猀礀愀甀琀漀⸀瀀渀最✀Ⰰഀ
਍                ✀栀琀琀瀀猀㨀⼀⼀爀攀猀礀⸀搀琀洀ⴀ爀攀椀昀攀渀⸀搀攀⼀愀瀀瀀氀椀挀愀琀椀漀渀⼀瘀椀攀眀⼀椀洀最⼀爀攀猀礀愀甀琀漀⸀瀀渀最✀Ⰰഀ
਍                ✀栀琀琀瀀猀㨀⼀⼀爀攀猀礀⸀搀琀洀ⴀ爀攀椀昀攀渀⸀搀攀⼀愀瀀瀀氀椀挀愀琀椀漀渀⼀瘀椀攀眀⼀椀洀最⼀爀攀猀礀愀甀琀漀⸀瀀渀最✀ഀ
਍            崀㬀ഀ
਍            挀漀渀猀漀氀攀⸀氀漀最⠀✀붿༦뿯₽䬀攀椀渀攀 䈀椀氀搀攀爀 最攀昀甀渀搀攀渀 ⴀ 瘀攀爀眀攀渀搀攀 䘀愀氀氀戀愀挀欀ⴀ䈀椀氀搀攀爀✀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⼀ 䐀攀戀甀最㨀 娀攀椀最攀 搀椀攀 琀愀琀猀붿挀栀氀椀挀栀攀渀 䈀椀氀搀ⴀ唀刀䰀猀ഀ
਍        挀漀渀猀漀氀攀⸀氀漀最⠀✀㴀뿯ල붿 Bild-URLs:', images);਍ഀ
            ਍ഀ
        let imageHtml = '';਍ഀ
        images.forEach((imageUrl, index) => {਍ഀ
            console.log(`붿਍뿯₽嘀攀爀愀爀戀攀椀琀攀 䈀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀㨀 ␀笀椀洀愀最攀唀爀氀紀怀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 䔀砀琀爀愀栀椀攀爀攀 搀椀攀 䰀䜀䘀伀吀伀开䤀䐀 愀甀猀 搀攀爀 唀刀䰀ഀ
਍            挀漀渀猀琀 氀最昀漀琀漀䤀搀䴀愀琀挀栀 㴀 椀洀愀最攀唀爀氀⸀洀愀琀挀栀⠀⼀䰀䜀䘀伀吀伀开䤀䐀㴀⠀尀搀⬀⤀⼀⤀㬀ഀ
਍            挀漀渀猀琀 氀最昀漀琀漀䤀搀 㴀 氀最昀漀琀漀䤀搀䴀愀琀挀栀 㼀 氀最昀漀琀漀䤀搀䴀愀琀挀栀嬀㄀崀 㨀 渀甀氀氀㬀ഀ
਍            ഀ
਍            ⼀⼀ 倀爀붿昀攀 漀戀 攀猀 攀椀渀 䈀愀猀攀㘀㐀ⴀ䈀椀氀搀 椀猀琀ഀ
਍            椀昀 ⠀椀洀愀最攀唀爀氀⸀猀琀愀爀琀猀圀椀琀栀⠀✀搀愀琀愀㨀椀洀愀最攀⼀✀⤀⤀ 笀ഀ
਍                挀漀渀猀漀氀攀⸀氀漀最⠀怀㴀뿯ල붿 Base64-Bild f뿯½r Bild ${index + 1}`);਍ഀ
                imageHtml += `਍ഀ
                    <div class="image-item">਍ഀ
                        <img src="${imageUrl}" alt="Reifenbild ${index + 1}" class="tire-image" onclick="openImageModal('${imageUrl}')" onload="console.log('Bild geladen')" onerror="console.error('Bild Fehler'); this.src='https://resy.dtm-reifen.de/application/view/img/resyauto.png'">਍ഀ
                        <div class="image-caption">Bild ${index + 1}</div>਍ഀ
                    </div>਍ഀ
                `;਍ഀ
            } else if (lgfotoId) {਍ഀ
                // Verwende die direkte RESY-URL mit Session-Parameter਍ഀ
                const resyUrl = `https://resy.dtm-reifen.de/index.php?m=wheelphoto&a=show&LGFOTO_ID=${lgfotoId}&FN=ShowPruefDoc`;਍ഀ
                console.log(`붿਍뿯₽刀䔀匀夀ⴀ唀刀䰀 昀붿爀 䈀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀㨀 ␀笀爀攀猀礀唀爀氀紀怀⤀㬀ഀ
਍                椀洀愀最攀䠀琀洀氀 ⬀㴀 怀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀洀愀最攀ⴀ椀琀攀洀∀㸀ഀ
਍                        㰀椀洀最 猀爀挀㴀∀␀笀爀攀猀礀唀爀氀紀∀ 愀氀琀㴀∀刀攀椀昀攀渀戀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀∀ 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀∀ 漀渀挀氀椀挀欀㴀∀漀瀀攀渀䤀洀愀最攀䴀漀搀愀氀⠀✀␀笀椀洀愀最攀唀爀氀紀✀⤀∀ 漀渀氀漀愀搀㴀∀挀漀渀猀漀氀攀⸀氀漀最⠀✀䈀椀氀搀 最攀氀愀搀攀渀✀⤀∀ 漀渀攀爀爀漀爀㴀∀挀漀渀猀漀氀攀⸀攀爀爀漀爀⠀✀䈀椀氀搀 䘀攀栀氀攀爀✀⤀㬀 琀栀椀猀⸀猀爀挀㴀✀栀琀琀瀀猀㨀⼀⼀爀攀猀礀⸀搀琀洀ⴀ爀攀椀昀攀渀⸀搀攀⼀愀瀀瀀氀椀挀愀琀椀漀渀⼀瘀椀攀眀⼀椀洀最⼀爀攀猀礀愀甀琀漀⸀瀀渀最✀∀㸀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀椀洀愀最攀ⴀ挀愀瀀琀椀漀渀∀㸀䈀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀㰀⼀搀椀瘀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                怀㬀ഀ
਍            紀 攀氀猀攀 笀ഀ
਍                ⼀⼀ 䘀愀氀氀戀愀挀欀 昀붿爀 唀刀䰀猀 漀栀渀攀 䰀䜀䘀伀吀伀开䤀䐀ഀ
਍                椀洀愀最攀䠀琀洀氀 ⬀㴀 怀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀洀愀最攀ⴀ椀琀攀洀∀㸀ഀ
਍                        㰀椀洀最 猀爀挀㴀∀␀笀椀洀愀最攀唀爀氀紀∀ 愀氀琀㴀∀刀攀椀昀攀渀戀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀∀ 挀氀愀猀猀㴀∀琀椀爀攀ⴀ椀洀愀最攀∀ 漀渀挀氀椀挀欀㴀∀漀瀀攀渀䤀洀愀最攀䴀漀搀愀氀⠀✀␀笀椀洀愀最攀唀爀氀紀✀⤀∀ 漀渀攀爀爀漀爀㴀∀挀漀渀猀漀氀攀⸀攀爀爀漀爀⠀✀䈀椀氀搀 䘀攀栀氀攀爀✀⤀㬀 琀栀椀猀⸀猀爀挀㴀✀栀琀琀瀀猀㨀⼀⼀爀攀猀礀⸀搀琀洀ⴀ爀攀椀昀攀渀⸀搀攀⼀愀瀀瀀氀椀挀愀琀椀漀渀⼀瘀椀攀眀⼀椀洀最⼀爀攀猀礀愀甀琀漀⸀瀀渀最✀∀㸀ഀ
਍                        㰀搀椀瘀 挀氀愀猀猀㴀∀椀洀愀最攀ⴀ挀愀瀀琀椀漀渀∀㸀䈀椀氀搀 ␀笀椀渀搀攀砀 ⬀ ㄀紀㰀⼀搀椀瘀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                怀㬀ഀ
਍            紀ഀ
਍        紀⤀㬀ഀ
਍            ഀ
਍            爀攀琀甀爀渀 怀ഀ
਍                㰀搀椀瘀 挀氀愀猀猀㴀∀椀洀愀最攀猀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                    㰀栀㐀㸀㰀椀 挀氀愀猀猀㴀∀昀愀猀 昀愀ⴀ椀洀愀最攀猀∀㸀㰀⼀椀㸀 刀攀椀昀攀渀戀椀氀搀攀爀 ⠀␀笀椀洀愀最攀猀⸀氀攀渀最琀栀紀⤀㰀⼀栀㐀㸀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀洀愀最攀猀ⴀ最爀椀搀∀㸀ഀ
਍                        ␀笀椀洀愀最攀䠀琀洀氀紀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                㰀⼀搀椀瘀㸀ഀ
਍            怀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        昀甀渀挀琀椀漀渀 漀瀀攀渀䤀洀愀最攀䴀漀搀愀氀⠀椀洀愀最攀唀爀氀⤀ 笀ഀ
਍            ⼀⼀ 䔀爀猀琀攀氀氀攀 䴀漀搀愀氀 昀붿爀 䈀椀氀搀愀渀稀攀椀最攀ഀ
਍            挀漀渀猀琀 洀漀搀愀氀 㴀 搀漀挀甀洀攀渀琀⸀挀爀攀愀琀攀䔀氀攀洀攀渀琀⠀✀搀椀瘀✀⤀㬀ഀ
਍            洀漀搀愀氀⸀挀氀愀猀猀一愀洀攀 㴀 ✀椀洀愀最攀ⴀ洀漀搀愀氀✀㬀ഀ
਍            洀漀搀愀氀⸀椀渀渀攀爀䠀吀䴀䰀 㴀 怀ഀ
਍                㰀搀椀瘀 挀氀愀猀猀㴀∀椀洀愀最攀ⴀ洀漀搀愀氀ⴀ挀漀渀琀攀渀琀∀㸀ഀ
਍                    㰀猀瀀愀渀 挀氀愀猀猀㴀∀椀洀愀最攀ⴀ洀漀搀愀氀ⴀ挀氀漀猀攀∀㸀☀琀椀洀攀猀㬀㰀⼀猀瀀愀渀㸀ഀ
਍                    㰀椀洀最 猀爀挀㴀∀␀笀椀洀愀最攀唀爀氀紀∀ 愀氀琀㴀∀嘀攀爀最爀붿붿攀爀琀攀猀 刀攀椀昀攀渀戀椀氀搀∀ 挀氀愀猀猀㴀∀洀漀搀愀氀ⴀ椀洀愀最攀∀㸀ഀ
਍                㰀⼀搀椀瘀㸀ഀ
਍            怀㬀ഀ
਍            ഀ
਍            搀漀挀甀洀攀渀琀⸀戀漀搀礀⸀愀瀀瀀攀渀搀䌀栀椀氀搀⠀洀漀搀愀氀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 匀挀栀氀椀攀붿攀渀ⴀ䈀甀琀琀漀渀ഀ
਍            洀漀搀愀氀⸀焀甀攀爀礀匀攀氀攀挀琀漀爀⠀✀⸀椀洀愀最攀ⴀ洀漀搀愀氀ⴀ挀氀漀猀攀✀⤀⸀漀渀挀氀椀挀欀 㴀 ⠀⤀ 㴀㸀 笀ഀ
਍                搀漀挀甀洀攀渀琀⸀戀漀搀礀⸀爀攀洀漀瘀攀䌀栀椀氀搀⠀洀漀搀愀氀⤀㬀ഀ
਍            紀㬀ഀ
਍            ഀ
਍            ⼀⼀ 䬀氀椀挀欀 愀甀붿攀爀栀愀氀戀 猀挀栀氀椀攀붿琀 䴀漀搀愀氀ഀ
਍            洀漀搀愀氀⸀漀渀挀氀椀挀欀 㴀 ⠀攀⤀ 㴀㸀 笀ഀ
਍                椀昀 ⠀攀⸀琀愀爀最攀琀 㴀㴀㴀 洀漀搀愀氀⤀ 笀ഀ
਍                    搀漀挀甀洀攀渀琀⸀戀漀搀礀⸀爀攀洀漀瘀攀䌀栀椀氀搀⠀洀漀搀愀氀⤀㬀ഀ
਍                紀ഀ
਍            紀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        眀椀渀搀漀眀⸀爀攀昀爀攀猀栀吀椀爀攀匀琀愀琀甀猀 㴀 昀甀渀挀琀椀漀渀⠀⤀ 笀ഀ
਍            ⼀⼀ 䄀欀琀甀攀氀氀攀渀 吀攀爀洀椀渀 愀甀猀 搀攀洀 䴀漀搀愀氀 栀漀氀攀渀ഀ
਍            挀漀渀猀琀 挀甀猀琀漀洀攀爀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䌀甀猀琀漀洀攀爀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀㬀ഀ
਍            挀漀渀猀琀 猀琀漀爀愀最攀一甀洀戀攀爀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀琀漀爀愀最攀一甀洀戀攀爀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀㬀ഀ
਍            ഀ
਍            ⼀⼀ 一攀甀攀渀 䌀栀攀挀欀 猀琀愀爀琀攀渀ഀ
਍            挀栀攀挀欀吀椀爀攀匀琀愀琀甀猀⠀笀ഀ
਍                挀甀猀琀漀洀攀爀开渀愀洀攀㨀 挀甀猀琀漀洀攀爀Ⰰഀ
਍                猀琀漀爀愀最攀开渀甀洀戀攀爀㨀 猀琀漀爀愀最攀一甀洀戀攀爀Ⰰഀ
਍                愀甀琀漀栀愀甀猀开椀搀㨀 㰀㼀瀀栀瀀 攀挀栀漀 ␀挀甀爀爀攀渀琀开甀猀攀爀开愀甀琀漀栀愀甀猀开椀搀 㼀㼀 ✀渀甀氀氀✀㬀 㼀㸀ഀ
਍            紀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        昀甀渀挀琀椀漀渀 漀爀搀攀爀刀攀瀀氀愀挀攀洀攀渀琀吀椀爀攀猀⠀⤀ 笀ഀ
਍            愀氀攀爀琀⠀✀䔀爀猀愀琀稀爀攀椀昀攀渀ⴀ䈀攀猀琀攀氀氀甀渀最 眀椀爀搀 椀洀瀀氀攀洀攀渀琀椀攀爀琀⸀⸀⸀✀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        昀甀渀挀琀椀漀渀 瀀爀椀渀琀吀椀爀攀刀攀瀀漀爀琀⠀⤀ 笀ഀ
਍            ⼀⼀ 䔀爀猀琀攀氀氀攀 攀椀渀攀渀 搀爀甀挀欀戀愀爀攀渀 䈀攀爀椀挀栀琀ഀ
਍            挀漀渀猀琀 瀀爀椀渀琀圀椀渀搀漀眀 㴀 眀椀渀搀漀眀⸀漀瀀攀渀⠀✀✀Ⰰ ✀开戀氀愀渀欀✀⤀㬀ഀ
਍            挀漀渀猀琀 挀甀猀琀漀洀攀爀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䌀甀猀琀漀洀攀爀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀㬀ഀ
਍            挀漀渀猀琀 猀琀漀爀愀最攀一甀洀戀攀爀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀匀琀漀爀愀最攀一甀洀戀攀爀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀㬀ഀ
਍            挀漀渀猀琀 愀甀琀漀栀愀甀猀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䄀甀琀漀栀愀甀猀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀㬀ഀ
਍            挀漀渀猀琀 搀愀琀攀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䐀愀琀攀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀㬀ഀ
਍            ഀ
਍            ⼀⼀ 匀愀洀洀氀攀 愀氀氀攀 刀攀椀昀攀渀搀愀琀攀渀ഀ
਍            挀漀渀猀琀 琀椀爀攀䐀愀琀愀䤀琀攀洀猀 㴀 搀漀挀甀洀攀渀琀⸀焀甀攀爀礀匀攀氀攀挀琀漀爀䄀氀氀⠀✀⌀琀椀爀攀䐀愀琀愀䜀爀椀搀 ⸀椀渀昀漀ⴀ椀琀攀洀✀⤀㬀ഀ
਍            氀攀琀 琀椀爀攀䐀愀琀愀䠀琀洀氀 㴀 ✀✀㬀ഀ
਍            琀椀爀攀䐀愀琀愀䤀琀攀洀猀⸀昀漀爀䔀愀挀栀⠀椀琀攀洀 㴀㸀 笀ഀ
਍                挀漀渀猀琀 氀愀戀攀氀 㴀 椀琀攀洀⸀焀甀攀爀礀匀攀氀攀挀琀漀爀⠀✀⸀椀渀昀漀ⴀ氀愀戀攀氀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀⸀琀爀椀洀⠀⤀㬀ഀ
਍                挀漀渀猀琀 瘀愀氀甀攀 㴀 椀琀攀洀⸀焀甀攀爀礀匀攀氀攀挀琀漀爀⠀✀⸀椀渀昀漀ⴀ瘀愀氀甀攀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀⸀琀爀椀洀⠀⤀㬀ഀ
਍                琀椀爀攀䐀愀琀愀䠀琀洀氀 ⬀㴀 怀㰀琀爀㸀㰀琀搀㸀㰀猀琀爀漀渀最㸀␀笀氀愀戀攀氀紀㰀⼀猀琀爀漀渀最㸀㰀⼀琀搀㸀㰀琀搀㸀␀笀瘀愀氀甀攀紀㰀⼀琀搀㸀㰀⼀琀爀㸀怀㬀ഀ
਍            紀⤀㬀ഀ
਍            ഀ
਍            ⼀⼀ 䔀洀瀀昀攀栀氀甀渀最ഀ
਍            挀漀渀猀琀 爀攀挀漀洀洀攀渀搀愀琀椀漀渀䌀愀爀搀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀刀攀挀漀洀洀攀渀搀愀琀椀漀渀䌀愀爀搀✀⤀㬀ഀ
਍            挀漀渀猀琀 爀攀挀漀洀洀攀渀搀愀琀椀漀渀吀攀砀琀 㴀 爀攀挀漀洀洀攀渀搀愀琀椀漀渀䌀愀爀搀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 ℀㴀㴀 ✀渀漀渀攀✀ 㼀 ഀ
਍                搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀刀攀挀漀洀洀攀渀搀愀琀椀漀渀吀攀砀琀✀⤀⸀琀攀砀琀䌀漀渀琀攀渀琀 㨀 ✀䬀攀椀渀攀 䔀洀瀀昀攀栀氀甀渀最 瘀攀爀昀붿最戀愀爀✀㬀ഀ
਍            ഀ
਍            瀀爀椀渀琀圀椀渀搀漀眀⸀搀漀挀甀洀攀渀琀⸀眀爀椀琀攀⠀怀ഀ
਍                㰀℀䐀伀䌀吀夀倀䔀 栀琀洀氀㸀ഀ
਍                㰀栀琀洀氀㸀ഀ
਍                㰀栀攀愀搀㸀ഀ
਍                    㰀琀椀琀氀攀㸀刀攀椀昀攀渀猀琀愀琀甀猀ⴀ䈀攀爀椀挀栀琀㰀⼀琀椀琀氀攀㸀ഀ
਍                    㰀猀琀礀氀攀㸀ഀ
਍                        戀漀搀礀 笀 昀漀渀琀ⴀ昀愀洀椀氀礀㨀 䄀爀椀愀氀Ⰰ 猀愀渀猀ⴀ猀攀爀椀昀㬀 洀愀爀最椀渀㨀 ㈀　瀀砀㬀 紀ഀ
਍                        ⸀栀攀愀搀攀爀 笀 琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㌀　瀀砀㬀 紀ഀ
਍                        ⸀栀攀愀搀攀爀 栀㄀ 笀 挀漀氀漀爀㨀 ⌀　　㜀戀昀昀㬀 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㄀　瀀砀㬀 紀ഀ
਍                        ⸀椀渀昀漀ⴀ猀攀挀琀椀漀渀 笀 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㈀　瀀砀㬀 紀ഀ
਍                        ⸀椀渀昀漀ⴀ猀攀挀琀椀漀渀 栀㌀ 笀 挀漀氀漀爀㨀 ⌀㐀㤀㔀　㔀㜀㬀 戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 ㈀瀀砀 猀漀氀椀搀 ⌀　　㜀戀昀昀㬀 瀀愀搀搀椀渀最ⴀ戀漀琀琀漀洀㨀 㔀瀀砀㬀 紀ഀ
਍                        琀愀戀氀攀 笀 眀椀搀琀栀㨀 ㄀　　─㬀 戀漀爀搀攀爀ⴀ挀漀氀氀愀瀀猀攀㨀 挀漀氀氀愀瀀猀攀㬀 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㄀　瀀砀㬀 紀ഀ
਍                        琀搀 笀 瀀愀搀搀椀渀最㨀 㠀瀀砀㬀 戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 ㄀瀀砀 猀漀氀椀搀 ⌀搀搀搀㬀 紀ഀ
਍                        ⸀爀攀挀漀洀洀攀渀搀愀琀椀漀渀 笀 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 ⌀昀㠀昀㤀昀愀㬀 瀀愀搀搀椀渀最㨀 ㄀㔀瀀砀㬀 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㔀瀀砀㬀 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㈀　瀀砀㬀 紀ഀ
਍                        ⸀昀漀漀琀攀爀 笀 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㌀　瀀砀㬀 琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀 挀漀氀漀爀㨀 ⌀㘀挀㜀㔀㜀搀㬀 昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㈀瀀砀㬀         紀ഀ
਍        ഀ
਍        ⼀⨀ 刀䔀匀夀ⴀ匀吀夀䰀䔀 䴀伀䐀䄀䰀 䌀匀匀 ⨀⼀ഀ
਍        ⸀爀攀猀礀ⴀ洀漀搀愀氀 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀昀昀昀昀昀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀ഀ
਍            戀漀砀ⴀ猀栀愀搀漀眀㨀 　 ㄀　瀀砀 ㌀　瀀砀 爀最戀愀⠀　Ⰰ 　Ⰰ 　Ⰰ 　⸀㌀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ栀攀愀搀攀爀 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 氀椀渀攀愀爀ⴀ最爀愀搀椀攀渀琀⠀㄀㌀㔀搀攀最Ⰰ ⌀㈀挀㌀攀㔀　 　─Ⰰ ⌀㌀㐀㐀㤀㔀攀 ㄀　　─⤀㬀ഀ
਍            挀漀氀漀爀㨀 眀栀椀琀攀㬀ഀ
਍            戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 ㌀瀀砀 猀漀氀椀搀 ⌀㌀㐀㤀㠀搀戀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㈀　瀀砀 ㌀　瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ琀椀琀氀攀 笀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㈀㐀瀀砀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            洀愀爀最椀渀㨀 　㬀ഀ
਍            搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀ഀ
਍            愀氀椀最渀ⴀ椀琀攀洀猀㨀 挀攀渀琀攀爀㬀ഀ
਍            最愀瀀㨀 ㄀㈀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ琀椀琀氀攀 椀 笀ഀ
਍            挀漀氀漀爀㨀 ⌀㌀㐀㤀㠀搀戀㬀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㈀㠀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ戀漀搀礀 笀ഀ
਍            瀀愀搀搀椀渀最㨀 　㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀㠀昀㤀昀愀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⨀ 刀䔀匀夀ⴀ匀吀夀䰀䔀 䌀伀一吀䔀一吀 䰀䄀夀伀唀吀 ⨀⼀ഀ
਍        ⸀爀攀猀礀ⴀ挀漀渀琀攀渀琀 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀ഀ
਍            洀愀爀最椀渀㨀 ㈀　瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀ഀ
਍            戀漀砀ⴀ猀栀愀搀漀眀㨀 　 ㈀瀀砀 ㄀　瀀砀 爀最戀愀⠀　Ⰰ 　Ⰰ 　Ⰰ 　⸀㄀⤀㬀ഀ
਍            漀瘀攀爀昀氀漀眀㨀 栀椀搀搀攀渀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ猀攀挀琀椀漀渀 笀ഀ
਍            戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 ㄀瀀砀 猀漀氀椀搀 ⌀攀㤀攀挀攀昀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㈀㔀瀀砀 ㌀　瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ猀攀挀琀椀漀渀㨀氀愀猀琀ⴀ挀栀椀氀搀 笀ഀ
਍            戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 渀漀渀攀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ猀攀挀琀椀漀渀ⴀ琀椀琀氀攀 笀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㠀瀀砀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㈀挀㌀攀㔀　㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㈀　瀀砀㬀ഀ
਍            瀀愀搀搀椀渀最ⴀ戀漀琀琀漀洀㨀 ㄀　瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 ㈀瀀砀 猀漀氀椀搀 ⌀㌀㐀㤀㠀搀戀㬀ഀ
਍            搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀ഀ
਍            愀氀椀最渀ⴀ椀琀攀洀猀㨀 挀攀渀琀攀爀㬀ഀ
਍            最愀瀀㨀 ㄀　瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ猀攀挀琀椀漀渀ⴀ琀椀琀氀攀 椀 笀ഀ
਍            挀漀氀漀爀㨀 ⌀㌀㐀㤀㠀搀戀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⨀ 刀䔀匀夀ⴀ匀吀夀䰀䔀 䘀䤀䔀䰀䐀匀䔀吀 ⨀⼀ഀ
਍        ⸀爀攀猀礀ⴀ昀椀攀氀搀猀攀琀 笀ഀ
਍            戀漀爀搀攀爀㨀 ㈀瀀砀 猀漀氀椀搀 ⌀攀㤀攀挀攀昀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㈀　瀀砀㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㈀　瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀㠀昀㤀昀愀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ氀攀最攀渀搀 笀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㘀瀀砀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㈀挀㌀攀㔀　㬀ഀ
਍            瀀愀搀搀椀渀最㨀 　 ㄀㔀瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㐀瀀砀㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㄀㔀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ昀椀攀氀搀 笀ഀ
਍            搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀ഀ
਍            愀氀椀最渀ⴀ椀琀攀洀猀㨀 挀攀渀琀攀爀㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㄀㔀瀀砀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㄀　瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㘀瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ氀攀昀琀㨀 㐀瀀砀 猀漀氀椀搀 ⌀㌀㐀㤀㠀搀戀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ昀椀攀氀搀㨀氀愀猀琀ⴀ挀栀椀氀搀 笀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 　㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ氀愀戀攀氀 笀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㐀㤀㔀　㔀㜀㬀ഀ
਍            洀椀渀ⴀ眀椀搀琀栀㨀 ㄀㔀　瀀砀㬀ഀ
਍            洀愀爀最椀渀ⴀ爀椀最栀琀㨀 ㄀㔀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ瘀愀氀甀攀 笀ഀ
਍            挀漀氀漀爀㨀 ⌀㈀挀㌀攀㔀　㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㔀　　㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⨀ 刀䔀匀夀ⴀ匀吀夀䰀䔀 吀䄀䈀䰀䔀 ⨀⼀ഀ
਍        ⸀爀攀猀礀ⴀ琀愀戀氀攀 笀ഀ
਍            眀椀搀琀栀㨀 ㄀　　─㬀ഀ
਍            戀漀爀搀攀爀ⴀ挀漀氀氀愀瀀猀攀㨀 挀漀氀氀愀瀀猀攀㬀ഀ
਍            洀愀爀最椀渀ⴀ琀漀瀀㨀 ㈀　瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀ഀ
਍            漀瘀攀爀昀氀漀眀㨀 栀椀搀搀攀渀㬀ഀ
਍            戀漀砀ⴀ猀栀愀搀漀眀㨀 　 ㈀瀀砀 㠀瀀砀 爀最戀愀⠀　Ⰰ 　Ⰰ 　Ⰰ 　⸀㄀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ琀愀戀氀攀 琀栀 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 氀椀渀攀愀爀ⴀ最爀愀搀椀攀渀琀⠀㄀㌀㔀搀攀最Ⰰ ⌀㈀挀㌀攀㔀　 　─Ⰰ ⌀㌀㐀㐀㤀㔀攀 ㄀　　─⤀㬀ഀ
਍            挀漀氀漀爀㨀 眀栀椀琀攀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㄀㔀瀀砀 ㄀㈀瀀砀㬀ഀ
਍            琀攀砀琀ⴀ愀氀椀最渀㨀 氀攀昀琀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㐀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ琀愀戀氀攀 琀搀 笀ഀ
਍            瀀愀搀搀椀渀最㨀 ㄀㈀瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 ㄀瀀砀 猀漀氀椀搀 ⌀攀㤀攀挀攀昀㬀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㐀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ琀愀戀氀攀 琀爀㨀栀漀瘀攀爀 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀㠀昀㤀昀愀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ琀愀戀氀攀 琀爀㨀氀愀猀琀ⴀ挀栀椀氀搀 琀搀 笀ഀ
਍            戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 渀漀渀攀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⨀ 刀䔀匀夀ⴀ匀吀夀䰀䔀 圀䠀䔀䔀䰀 伀嘀䔀刀嘀䤀䔀圀 ⨀⼀ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ漀瘀攀爀瘀椀攀眀 笀ഀ
਍            搀椀猀瀀氀愀礀㨀 最爀椀搀㬀ഀ
਍            最爀椀搀ⴀ琀攀洀瀀氀愀琀攀ⴀ挀漀氀甀洀渀猀㨀 ㄀昀爀 愀甀琀漀 ㄀昀爀㬀ഀ
਍            最愀瀀㨀 ㌀　瀀砀㬀ഀ
਍            愀氀椀最渀ⴀ椀琀攀洀猀㨀 挀攀渀琀攀爀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㌀　瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀ഀ
਍            洀愀爀最椀渀㨀 ㈀　瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀ഀ
਍            戀漀砀ⴀ猀栀愀搀漀眀㨀 　 ㈀瀀砀 ㄀　瀀砀 爀最戀愀⠀　Ⰰ 　Ⰰ 　Ⰰ 　⸀㄀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ瀀漀猀椀琀椀漀渀 笀ഀ
਍            琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㈀　瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀㠀昀㤀昀愀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀ഀ
਍            戀漀爀搀攀爀㨀 ㈀瀀砀 猀漀氀椀搀 ⌀攀㤀攀挀攀昀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ瀀漀猀椀琀椀漀渀⸀愀挀琀椀瘀攀 笀ഀ
਍            戀漀爀搀攀爀ⴀ挀漀氀漀爀㨀 ⌀㌀㐀㤀㠀搀戀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀攀㌀昀㈀昀搀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ琀椀琀氀攀 笀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㠀瀀砀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㈀挀㌀攀㔀　㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㄀㔀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ搀攀琀愀椀氀猀 笀ഀ
਍            搀椀猀瀀氀愀礀㨀 最爀椀搀㬀ഀ
਍            最爀椀搀ⴀ琀攀洀瀀氀愀琀攀ⴀ挀漀氀甀洀渀猀㨀 ㄀昀爀 ㄀昀爀 ㄀昀爀㬀ഀ
਍            最愀瀀㨀 ㄀　瀀砀㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㄀㔀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ搀攀琀愀椀氀 笀ഀ
਍            琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 㠀瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㐀瀀砀㬀ഀ
਍            戀漀爀搀攀爀㨀 ㄀瀀砀 猀漀氀椀搀 ⌀搀攀攀㈀攀㘀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ搀攀琀愀椀氀ⴀ氀愀戀攀氀 笀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㈀瀀砀㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㘀挀㜀㔀㜀搀㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 㐀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ搀攀琀愀椀氀ⴀ瘀愀氀甀攀 笀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㐀瀀砀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㈀挀㌀攀㔀　㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ猀琀愀琀甀猀 笀ഀ
਍            搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀ഀ
਍            愀氀椀最渀ⴀ椀琀攀洀猀㨀 挀攀渀琀攀爀㬀ഀ
਍            樀甀猀琀椀昀礀ⴀ挀漀渀琀攀渀琀㨀 挀攀渀琀攀爀㬀ഀ
਍            最愀瀀㨀 㠀瀀砀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 㠀瀀砀 ㄀㘀瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 ㈀　瀀砀㬀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㈀瀀砀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ猀琀愀琀甀猀⸀最漀漀搀 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀搀㐀攀搀搀愀㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㄀㔀㔀㜀㈀㐀㬀ഀ
਍            戀漀爀搀攀爀㨀 ㄀瀀砀 猀漀氀椀搀 ⌀挀㌀攀㘀挀戀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ猀琀愀琀甀猀⸀眀愀爀渀椀渀最 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀昀昀㌀挀搀㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㠀㔀㘀㐀　㐀㬀ഀ
਍            戀漀爀搀攀爀㨀 ㄀瀀砀 猀漀氀椀搀 ⌀昀昀攀愀愀㜀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ猀琀愀琀甀猀⸀搀愀渀最攀爀 笀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀㠀搀㜀搀愀㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㜀㈀㄀挀㈀㐀㬀ഀ
਍            戀漀爀搀攀爀㨀 ㄀瀀砀 猀漀氀椀搀 ⌀昀㔀挀㘀挀戀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ挀愀爀ⴀ椀洀愀最攀 笀ഀ
਍            琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㈀　瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ挀愀爀ⴀ椀洀愀最攀 椀洀最 笀ഀ
਍            洀愀砀ⴀ眀椀搀琀栀㨀 ㈀　　瀀砀㬀ഀ
਍            栀攀椀最栀琀㨀 愀甀琀漀㬀ഀ
਍            漀瀀愀挀椀琀礀㨀 　⸀㠀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⨀ 刀䔀匀夀ⴀ匀吀夀䰀䔀 䤀䴀䄀䜀䔀 䜀䄀䰀䰀䔀刀夀 ⨀⼀ഀ
਍        ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ最愀氀氀攀爀礀 笀ഀ
਍            搀椀猀瀀氀愀礀㨀 最爀椀搀㬀ഀ
਍            最爀椀搀ⴀ琀攀洀瀀氀愀琀攀ⴀ挀漀氀甀洀渀猀㨀 爀攀瀀攀愀琀⠀愀甀琀漀ⴀ昀椀琀Ⰰ 洀椀渀洀愀砀⠀㈀　　瀀砀Ⰰ ㄀昀爀⤀⤀㬀ഀ
਍            最愀瀀㨀 ㈀　瀀砀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㈀　瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀ഀ
਍            洀愀爀最椀渀㨀 ㈀　瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀ഀ
਍            戀漀砀ⴀ猀栀愀搀漀眀㨀 　 ㈀瀀砀 ㄀　瀀砀 爀最戀愀⠀　Ⰰ 　Ⰰ 　Ⰰ 　⸀㄀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ最爀漀甀瀀 笀ഀ
਍            琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ最爀漀甀瀀ⴀ琀椀琀氀攀 笀ഀ
਍            昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㘀瀀砀㬀ഀ
਍            昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀　　㬀ഀ
਍            挀漀氀漀爀㨀 ⌀㈀挀㌀攀㔀　㬀ഀ
਍            洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㄀㔀瀀砀㬀ഀ
਍            瀀愀搀搀椀渀最㨀 ㄀　瀀砀㬀ഀ
਍            戀愀挀欀最爀漀甀渀搀㨀 ⌀昀㠀昀㤀昀愀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㘀瀀砀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ爀漀眀 笀ഀ
਍            搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀ഀ
਍            最愀瀀㨀 ㄀　瀀砀㬀ഀ
਍            樀甀猀琀椀昀礀ⴀ挀漀渀琀攀渀琀㨀 挀攀渀琀攀爀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ椀琀攀洀 笀ഀ
਍            眀椀搀琀栀㨀 㠀　瀀砀㬀ഀ
਍            栀攀椀最栀琀㨀 㠀　瀀砀㬀ഀ
਍            戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㘀瀀砀㬀ഀ
਍            漀瘀攀爀昀氀漀眀㨀 栀椀搀搀攀渀㬀ഀ
਍            挀甀爀猀漀爀㨀 瀀漀椀渀琀攀爀㬀ഀ
਍            戀漀爀搀攀爀㨀 ㈀瀀砀 猀漀氀椀搀 ⌀攀㤀攀挀攀昀㬀ഀ
਍            琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀 　⸀㌀猀 攀愀猀攀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ椀琀攀洀㨀栀漀瘀攀爀 笀ഀ
਍            戀漀爀搀攀爀ⴀ挀漀氀漀爀㨀 ⌀㌀㐀㤀㠀搀戀㬀ഀ
਍            琀爀愀渀猀昀漀爀洀㨀 猀挀愀氀攀⠀㄀⸀　㔀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ椀琀攀洀 椀洀最 笀ഀ
਍            眀椀搀琀栀㨀 ㄀　　─㬀ഀ
਍            栀攀椀最栀琀㨀 ㄀　　─㬀ഀ
਍            漀戀樀攀挀琀ⴀ昀椀琀㨀 挀漀瘀攀爀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⨀ 刀䔀匀倀伀一匀䤀嘀䔀 䐀䔀匀䤀䜀一 ⨀⼀ഀ
਍        䀀洀攀搀椀愀 ⠀洀愀砀ⴀ眀椀搀琀栀㨀 㜀㘀㠀瀀砀⤀ 笀ഀ
਍            ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ漀瘀攀爀瘀椀攀眀 笀ഀ
਍                最爀椀搀ⴀ琀攀洀瀀氀愀琀攀ⴀ挀漀氀甀洀渀猀㨀 ㄀昀爀㬀ഀ
਍                最愀瀀㨀 ㈀　瀀砀㬀ഀ
਍            紀ഀ
਍            ഀ
਍            ⸀爀攀猀礀ⴀ眀栀攀攀氀ⴀ搀攀琀愀椀氀猀 笀ഀ
਍                最爀椀搀ⴀ琀攀洀瀀氀愀琀攀ⴀ挀漀氀甀洀渀猀㨀 ㄀昀爀㬀ഀ
਍            紀ഀ
਍            ഀ
਍            ⸀爀攀猀礀ⴀ椀洀愀最攀ⴀ最愀氀氀攀爀礀 笀ഀ
਍                最爀椀搀ⴀ琀攀洀瀀氀愀琀攀ⴀ挀漀氀甀洀渀猀㨀 ㄀昀爀㬀ഀ
਍            紀ഀ
਍        紀ഀ
਍    㰀⼀猀琀礀氀攀㸀ഀ
਍                㰀⼀栀攀愀搀㸀ഀ
਍                㰀戀漀搀礀㸀ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀栀攀愀搀攀爀∀㸀ഀ
਍                        㰀栀㄀㸀刀攀椀昀攀渀猀琀愀琀甀猀ⴀ䈀攀爀椀挀栀琀㰀⼀栀㄀㸀ഀ
਍                        㰀瀀㸀䔀爀猀琀攀氀氀琀 愀洀㨀 ␀笀渀攀眀 䐀愀琀攀⠀⤀⸀琀漀䰀漀挀愀氀攀䐀愀琀攀匀琀爀椀渀最⠀✀搀攀ⴀ䐀䔀✀⤀紀 甀洀 ␀笀渀攀眀 䐀愀琀攀⠀⤀⸀琀漀䰀漀挀愀氀攀吀椀洀攀匀琀爀椀渀最⠀✀搀攀ⴀ䐀䔀✀⤀紀㰀⼀瀀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀㸀吀攀爀洀椀渀ⴀ䤀渀昀漀爀洀愀琀椀漀渀攀渀㰀⼀栀㌀㸀ഀ
਍                        㰀琀愀戀氀攀㸀ഀ
਍                            㰀琀爀㸀㰀琀搀㸀㰀猀琀爀漀渀最㸀䬀甀渀搀攀㨀㰀⼀猀琀爀漀渀最㸀㰀⼀琀搀㸀㰀琀搀㸀␀笀挀甀猀琀漀洀攀爀紀㰀⼀琀搀㸀㰀⼀琀爀㸀ഀ
਍                            㰀琀爀㸀㰀琀搀㸀㰀猀琀爀漀渀最㸀䔀椀渀氀愀最攀爀甀渀最猀渀甀洀洀攀爀㨀㰀⼀猀琀爀漀渀最㸀㰀⼀琀搀㸀㰀琀搀㸀␀笀猀琀漀爀愀最攀一甀洀戀攀爀紀㰀⼀琀搀㸀㰀⼀琀爀㸀ഀ
਍                            㰀琀爀㸀㰀琀搀㸀㰀猀琀爀漀渀最㸀䄀甀琀漀栀愀甀猀㨀㰀⼀猀琀爀漀渀最㸀㰀⼀琀搀㸀㰀琀搀㸀␀笀愀甀琀漀栀愀甀猀紀㰀⼀琀搀㸀㰀⼀琀爀㸀ഀ
਍                            㰀琀爀㸀㰀琀搀㸀㰀猀琀爀漀渀最㸀吀攀爀洀椀渀ⴀ䐀愀琀甀洀㨀㰀⼀猀琀爀漀渀最㸀㰀⼀琀搀㸀㰀琀搀㸀␀笀搀愀琀攀紀㰀⼀琀搀㸀㰀⼀琀爀㸀ഀ
਍                        㰀⼀琀愀戀氀攀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀椀渀昀漀ⴀ猀攀挀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀㸀刀攀椀昀攀渀搀愀琀攀渀㰀⼀栀㌀㸀ഀ
਍                        㰀琀愀戀氀攀㸀ഀ
਍                            ␀笀琀椀爀攀䐀愀琀愀䠀琀洀氀紀ഀ
਍                        㰀⼀琀愀戀氀攀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀爀攀挀漀洀洀攀渀搀愀琀椀漀渀∀㸀ഀ
਍                        㰀栀㌀㸀刀攀椀昀攀渀攀洀瀀昀攀栀氀甀渀最㰀⼀栀㌀㸀ഀ
਍                        㰀瀀㸀␀笀爀攀挀漀洀洀攀渀搀愀琀椀漀渀吀攀砀琀紀㰀⼀瀀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                    ഀ
਍                    㰀搀椀瘀 挀氀愀猀猀㴀∀昀漀漀琀攀爀∀㸀ഀ
਍                        㰀瀀㸀䈀漀砀砀攀渀猀琀漀瀀瀀 ⴀ 刀攀椀昀攀渀猀琀愀琀甀猀ⴀ匀礀猀琀攀洀㰀⼀瀀㸀ഀ
਍                    㰀⼀搀椀瘀㸀ഀ
਍                㰀⼀戀漀搀礀㸀ഀ
਍                㰀⼀栀琀洀氀㸀ഀ
਍            怀⤀㬀ഀ
਍            ഀ
਍            瀀爀椀渀琀圀椀渀搀漀眀⸀搀漀挀甀洀攀渀琀⸀挀氀漀猀攀⠀⤀㬀ഀ
਍            瀀爀椀渀琀圀椀渀搀漀眀⸀瀀爀椀渀琀⠀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⼀ 䴀漀搀愀氀 猀挀栀氀椀攀붿攀渀 䘀甀渀欀琀椀漀渀ഀ
਍        眀椀渀搀漀眀⸀挀氀漀猀攀吀椀爀攀匀琀愀琀甀猀䴀漀搀愀氀 㴀 昀甀渀挀琀椀漀渀⠀⤀ 笀ഀ
਍            搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䴀漀搀愀氀✀⤀⸀猀琀礀氀攀⸀搀椀猀瀀氀愀礀 㴀 ✀渀漀渀攀✀㬀ഀ
਍            搀漀挀甀洀攀渀琀⸀戀漀搀礀⸀挀氀愀猀猀䰀椀猀琀⸀爀攀洀漀瘀攀⠀✀洀漀搀愀氀ⴀ漀瀀攀渀✀⤀㬀ഀ
਍        紀ഀ
਍        ഀ
਍        ⼀⼀ 䔀瘀攀渀琀 䰀椀猀琀攀渀攀爀 昀붿爀 䴀漀搀愀氀ⴀ䌀氀漀猀攀ⴀ䈀甀琀琀漀渀ഀ
਍        搀漀挀甀洀攀渀琀⸀愀搀搀䔀瘀攀渀琀䰀椀猀琀攀渀攀爀⠀✀䐀伀䴀䌀漀渀琀攀渀琀䰀漀愀搀攀搀✀Ⰰ 昀甀渀挀琀椀漀渀⠀⤀ 笀ഀ
਍            挀漀渀猀琀 洀漀搀愀氀 㴀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀琀椀爀攀匀琀愀琀甀猀䴀漀搀愀氀✀⤀㬀ഀ
਍            挀漀渀猀琀 挀氀漀猀攀䈀琀渀 㴀 洀漀搀愀氀⸀焀甀攀爀礀匀攀氀攀挀琀漀爀⠀✀⸀挀氀漀猀攀✀⤀㬀ഀ
਍            ഀ
਍            椀昀 ⠀挀氀漀猀攀䈀琀渀⤀ 笀ഀ
਍                挀氀漀猀攀䈀琀渀⸀愀搀搀䔀瘀攀渀琀䰀椀猀琀攀渀攀爀⠀✀挀氀椀挀欀✀Ⰰ 挀氀漀猀攀吀椀爀攀匀琀愀琀甀猀䴀漀搀愀氀⤀㬀ഀ
਍            紀ഀ
਍            ഀ
਍            ⼀⼀ 䴀漀搀愀氀 猀挀栀氀椀攀붿攀渀 戀攀椀 䬀氀椀挀欀 愀甀붿攀爀栀愀氀戀ഀ
਍            洀漀搀愀氀⸀愀搀搀䔀瘀攀渀琀䰀椀猀琀攀渀攀爀⠀✀挀氀椀挀欀✀Ⰰ 昀甀渀挀琀椀漀渀⠀攀⤀ 笀ഀ
਍                椀昀 ⠀攀⸀琀愀爀最攀琀 㴀㴀㴀 洀漀搀愀氀⤀ 笀ഀ
਍                    挀氀漀猀攀吀椀爀攀匀琀愀琀甀猀䴀漀搀愀氀⠀⤀㬀ഀ
਍                紀ഀ
਍            紀⤀㬀ഀ
਍        紀⤀㬀ഀ
਍    㰀⼀猀挀爀椀瀀琀㸀ഀ
਍㰀⼀戀漀搀礀㸀ഀ
਍ഀ
਍㰀⼀栀琀洀氀㸀ഀ
਍ഀ
਍