/* Explain: Styles for customer portal UI, optimizing layout for mobile and data readability. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.splash-lock {
    overflow: hidden;
}

.app-splash {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.app-splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-splash-logo {
    animation: splash-logo-pulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 18px 35px rgba(234, 88, 12, 0.18));
}

.app-splash-progress {
    width: 0;
    animation: splash-progress 2s ease forwards;
}

@keyframes splash-logo-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

@keyframes splash-progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes scroll-ltr {
    from { transform: translateX(-100%); }
    to { transform: translateX(100vw); }
}
.animate-scroll-ltr {
    animation: scroll-ltr 22s linear infinite;
    will-change: transform;
}

@keyframes drive-rtl {
    0% { left: 100%; }
    100% { left: -20%; }
}

.animate-drive-rtl {
    animation: drive-rtl 12s linear infinite;
    position: absolute;
}

@keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.animate-marquee-right {
    animation: marquee-right 20s linear infinite;
    width: 200%;
}

@keyframes gradient-slow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-slow {
    background-size: 200% 200%;
    animation: gradient-slow 15s ease infinite;
}

[x-cloak] {
    display: none !important;
}

/* Advanced Scroll Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
}

@keyframes float-bot {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float-bot {
    animation: float-bot 3.5s ease-in-out infinite;
    will-change: transform;
}

@media print {
    body, html {
        background: white !important;
    }
    .no-print, header, nav, footer, .lg\:col-span-5 {
        display: none !important;
    }
    main, .flex-grow, .lg\:col-span-7 {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #cv-preview {
        box-shadow: none !important;
        border: none !important;
        margin: 0 auto !important;
    }
    @page {
        size: A4;
        margin: 0;
    }
}



/* Form inputs text color contrast fixes site-wide */
.input, .textarea, .select {
    color: #0f172a !important;
}

.input::placeholder, .textarea::placeholder {
    color: #64748b !important;
}

/* Exceptions for dark backgrounds */
.input.bg-slate-800, .input.bg-slate-900, .input.bg-black,
.textarea.bg-slate-800, .textarea.bg-slate-900, .textarea.bg-black,
.select.bg-slate-800, .select.bg-slate-900, .select.bg-black,
.input.bg-\[var\(--surface-color\)\], .input.bg-\[var\(--background-color\)\],
.textarea.bg-\[var\(--surface-color\)\], .textarea.bg-\[var\(--background-color\)\],
.select.bg-\[var\(--surface-color\)\], .select.bg-\[var\(--background-color\)\] {
    color: #ffffff !important;
}

.input.bg-slate-800::placeholder, .input.bg-slate-900::placeholder, .input.bg-black::placeholder,
.textarea.bg-slate-800::placeholder, .textarea.bg-slate-900::placeholder, .textarea.bg-black::placeholder,
.input.bg-\[var\(--surface-color\)\]::placeholder, .input.bg-\[var\(--background-color\)\]::placeholder,
.textarea.bg-\[var\(--surface-color\)\]::placeholder, .textarea.bg-\[var\(--background-color\)\]::placeholder {
    color: #94a3b8 !important;
}

/* Customer portal: tighter tables on small screens so data reads clearly */
@media (max-width: 640px) {
    .portal-table th,
    .portal-table td {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
        line-height: 1.35;
    }

    .portal-table .btn-sm {
        padding-inline: 0.5rem !important;
    }
}