/* 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;
}

/* Tabellen und DataGrids auf allen Geräten horizontal scrollbar machen,
   damit breite Tabellen (z.B. Kunden, Wartung) nicht abgeschnitten werden */
.mud-table-container,
.mud-data-grid {
    overflow-x: auto;
}

/* 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 button groups vertically on mobile - but not inside cards/table cells */
    .mud-stack-row:has(> .mud-button:nth-child(2)),
    .mud-stack-row:has(> .mud-button-root:nth-child(2)) {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .mud-stack-row:has(> .mud-button:nth-child(2)) > .mud-button {
        flex: 1 1 45% !important;
        min-width: 120px !important;
    }

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

    /* Artikel-Suche: Feld und QR-Scan-Button auf schmalen Geräten untereinander
       statt nebeneinander, damit das Suchfeld volle Breite bekommt und das Label
       nicht aus dem Rahmen bricht */
    .artikel-such-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .artikel-such-row > div {
        width: 100% !important;
    }

    .artikel-such-row .mud-button-root {
        width: 100% !important;
    }

    /* 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;
    }
}

/* Tablet-Bereich (Hoch- und Querformat, ca. 600–1264px) */
@media (min-width: 600px) and (max-width: 1264px) {
    /* Etwas mehr Platz nutzen: Inhalt nicht künstlich schmal halten */
    .mud-main-content .mud-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Statistik-/Übersichtskarten dürfen umbrechen statt sich zu quetschen */
    .mud-grid-item {
        padding: 6px;
    }

    /* Dialoge nicht über die volle Breite, aber mit etwas Rand */
    .mud-dialog {
        margin: 16px;
    }
}

/* QR-Scanner-Video auf allen Geräten (besonders iOS Safari) im Rahmen halten,
   damit es nicht über den Bildschirm hinausragt */
#qr-reader-ausleihe,
#qr-reader-rueckgabe {
    max-width: 340px;
    margin: 0 auto;
}

/* Kamerabild voll sichtbar und zentriert lassen (kein Cropping, damit der
   Scan-Rahmen von html5-qrcode korrekt mittig sitzt) */
#qr-reader-ausleihe video,
#qr-reader-rueckgabe video {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

/* html5-qrcode-Scan-Overlay ebenfalls mittig */
#qr-reader-ausleihe > div,
#qr-reader-rueckgabe > div {
    margin: 0 auto !important;
}

/* Ausleihe-Wizard-Leiste: auf schmalen Geräten (iPhone) kompakter + scrollbar,
   damit der letzte Schritt ("Bestätigung") nicht abgeschnitten wird */
@media (max-width: 700px) {
    .ausleihe-stepper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Verbindungslinien schmaler */
    .ausleihe-stepper > div[style*="border-top"] {
        margin: 0 6px !important;
        min-width: 12px;
    }

    /* Schritt-Beschriftungen kleiner, damit alle fünf nebeneinander passen */
    .ausleihe-stepper .mud-typography-caption {
        font-size: 0.65rem;
        white-space: nowrap;
    }

    /* Avatare kompakter, damit alle fünf Schritte ohne Scrollen reinpassen */
    .ausleihe-stepper .mud-avatar {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 0.8rem;
    }
}

/* Toast/Snackbar oben unterhalb der App-Leiste anzeigen (sonst liegt er hinter
   der ~56px hohen App-Leiste und ist beim Scannen/Scrollen nicht sichtbar).
   position:fixed -> bleibt immer im sichtbaren Bereich, egal wie weit gescrollt wird. */
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-start,
.mud-snackbar-location-top-end,
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-right {
    top: 70px !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;
}