/* Verleihapp Custom Styles */

html, body {
    font-family: 'Roboto', sans-serif;
}

/* Cursor pointer for clickable elements */
.cursor-pointer {
    cursor: pointer;
}

/* Signature container styling */
.signature-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.signature-container canvas {
    touch-action: none;
}

/* MudBlazor overrides */
.mud-table-cell {
    vertical-align: middle !important;
}

/* Breadcrumb styling */
.mud-breadcrumbs {
    margin-bottom: 1rem;
}

/* Card hover effect */
.mud-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    transition: box-shadow 0.3s ease;
}

/* Print styles */
@media print {
    .mud-drawer,
    .mud-appbar,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Loading animation */
.loading-animation {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .mud-dialog {
        margin: 8px;
    }

    .mud-table-pagination {
        flex-wrap: wrap;
    }

    /* Stack buttons vertically on mobile */
    .mud-stack-row {
        flex-direction: column !important;
    }

    /* Full width buttons on mobile */
    .mud-button-group {
        width: 100%;
    }

    .mud-button-group .mud-button {
        width: 100%;
    }

    /* Reduce padding on mobile */
    .mud-container {
        padding: 8px !important;
    }

    /* Make tables scrollable on mobile */
    .mud-table-container {
        overflow-x: auto;
    }

    /* Smaller typography on mobile */
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.25rem !important;
    }

    /* Better spacing for cards on mobile */
    .mud-grid-item {
        padding: 8px !important;
    }
}

/* Touch-friendly buttons */
@media (hover: none) and (pointer: coarse) {
    .mud-button,
    .mud-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Status badge colors */
.status-verfuegbar {
    background-color: #4caf50;
    color: white;
}

.status-ausgeliehen {
    background-color: #2196f3;
    color: white;
}

.status-wartung {
    background-color: #ff9800;
    color: white;
}

.status-ausgemustert {
    background-color: #f44336;
    color: white;
}

/* QR Code image styling */
img[alt="QR-Code"] {
    image-rendering: pixelated;
}

/* Fix for MudStepper linear mode */
.mud-stepper .mud-step-label {
    cursor: pointer;
}