/* MOSAROMA helles Theme – gute Lesbarkeit & einheitliche Inputs */

/* Seitenhintergrund mit Foto + dunklem Overlay */
.mosaroma-bg {
    background-color: #111827;
    background-image:
        linear-gradient(to bottom, rgba(15,23,42,0.55), rgba(15,23,42,0.65)),
        url('messe-bg.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

/* Desktop: Fixed Background (bessere Performance) */
@media (min-width: 768px) {
    .mosaroma-bg {
        background-attachment: fixed;
    }
}

/* Mobile: Scroll Background (iOS Performance) */
@media (max-width: 767px) {
    .mosaroma-bg {
        background-attachment: scroll;
    }
}

/* Grundschrift */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111827;
}

/* Alle hellen Textfarben auf dunkel stellen */
.text-slate-50,
.text-slate-100,
.text-slate-200,
.text-slate-300,
.text-slate-400,
.text-gray-300,
.text-gray-400 {
    color: #111827 !important;
}

/* Sektionen / Cards */
.bg-mosaromaGray\/90,
.bg-mosaromaGray\/85,
.bg-mosaromaGray\/80,
.bg-mosaromaGray,
.bg-slate-900\/90 {
    background-color: rgba(255, 255, 255, 0.90) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

/* Inner Boxen (z. B. Zeilen, Tabellenbereiche) */
.bg-mosaromaBlack,
.bg-mosaromaBlack\/60,
.bg-mosaromaGray\/60,
.bg-slate-900\/60 {
    background-color: rgba(249, 250, 251, 0.92) !important;
}

/* *** EINHEITLICHE INPUT-RÄNDER AUF ALLEN SEITEN *** */
input,
textarea,
select {
    background-color: rgba(255, 255, 255, 0.96) !important;
    color: #111827 !important;
    border-color: #cbd5f5 !important;
    border-radius: 0.75rem !important;
    font-size: 0.82rem !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;
}

/* Spezifische Types explizit, falls Tailwind ihnen Extra-Klassen gibt */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"] {
    background-color: rgba(255, 255, 255, 0.96) !important;
}

/* Platzhalter */
input::placeholder,
textarea::placeholder {
    color: #9ca3af !important;
}

/* Labels */
label {
    color: #1f2937 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Tabellen-Header & Zellen */
th {
    background-color: rgba(249, 250, 251, 0.96);
    color: #1f2937;
    font-size: 0.8rem;
}

td {
    font-size: 0.8rem;
}

/* Buttons in Mosaroma-Orange */
.bg-mosaroma {
    background-color: #f47f24 !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

.bg-mosaroma:hover {
    background-color: #d9650b !important;
}

/* Header */
header {
    backdrop-filter: blur(12px);
    background-color: rgba(255,255,255,0.96) !important;
}

/* Links */
a {
    color: #d9650b;
}

a:hover {
    color: #b45309;
}

/* Überschriften (z.B. "Meine Aufträge", "Mein Konto", "Auftrag #1" etc.) */
h1,
h2,
h3,
.page-title {
    color: #111827 !important;      /* dunkel und gut lesbar */
    font-weight: 600;
}
/* Alles, was noch text-white hat, wird ebenfalls dunkel */
.text-white {
    color: #111827 !important;
}

/* ===== MOBILE OPTIMIERUNGEN ===== */

/* Touch-freundliche Mindestgröße für Buttons und Links */
@media (max-width: 767px) {
    button, a.inline-flex, .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Smooth Scrolling für bessere UX */
html {
    scroll-behavior: smooth;
}

/* iOS Safari: Verhindere Bounce-Effekt bei Inputs */
body {
    overscroll-behavior-y: contain;
}

/* iOS: Entferne Standard-Highlight beim Touch */
* {
    -webkit-tap-highlight-color: rgba(244, 127, 36, 0.1);
}

/* Verbesserte Touch-Gesten */
button, a, input[type="submit"], input[type="button"] {
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* Input-Felder auf Mobile optimieren */
@media (max-width: 767px) {
    input, textarea, select {
        font-size: 16px !important; /* Verhindert Zoom auf iOS */
    }
}

/* Swipe-freundliche Container */
.swipe-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

/* PWA: Standalone Mode Anpassungen */
.standalone-mode {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Online/Offline Status Indicator */
.online-status {
    transition: all 0.3s ease;
}

.online-status.online {
    background-color: #10b981;
    color: white;
    display: block !important;
}

.online-status.offline {
    background-color: #ef4444;
    color: white;
    display: block !important;
    animation: pulse 2s infinite;
}

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

/* Optimierte Animation Performance */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Reduced Motion für Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}