/* RPA ROI Calculator — Custom Styles */

/* Alpine.js cloak (hides elements until Alpine initializes) */
[x-cloak] { display: none !important; }

/* Smooth transitions for dark mode */
html.dark {
    color-scheme: dark;
}

/* Focus styles */
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Chart container responsive */
canvas {
    max-width: 100%;
}

/* Number input — hide spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Better text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gradient text helper */
.text-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover lift effect */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
}

/* Print styles */
@media print {
    nav, footer, .no-print {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
    .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
        box-shadow: none !important;
    }
}