/* ═══════════════════════════════════════
   CairoFlow Client Portal - Styles
   ═══════════════════════════════════════ */

/* ─── Base ─── */
* {
    -webkit-tap-highlight-color: transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

/* ─── Animations ─── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out both;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out both;
}

.animate-slide-down {
    animation: slideDown 0.3s ease-out both;
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out both;
}

/* ─── Spinner border fix ─── */
.border-3 {
    border-width: 3px;
}

/* ─── Input RTL ─── */
input[dir="ltr"] {
    text-align: left;
}

/* ─── Card hover effect ─── */
.hover\:shadow-md:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

/* ─── Selection ─── */
::selection {
    background: rgba(242, 101, 34, 0.2);
    color: #1a2c50;
}

/* ─── Mobile specific ─── */
@media (max-width: 640px) {
    .max-w-3xl, .max-w-6xl {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ─── Sticky header shadow ─── */
.sticky {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ─── Tab active indicator transition ─── */
button[class*="border-b-2"] {
    transition: color 0.2s, border-color 0.2s;
}

/* ─── Print styles ─── */
@media print {
    .sticky, button { display: none !important; }
    body { background: white; }
}