/* ToolHane - Tailwind CSS Styles */

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Hero Gradient */
.hero-gradient {
    position: relative;
    overflow: hidden;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 150%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
}

/* Tool Cards */
.tool-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-5px);
}

/* Category Cards */
.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Form Elements */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
    @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent bg-white dark:bg-gray-800 text-gray-800 dark:text-white;
}

button, 
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-warning {
    @apply bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400;
}

.btn-info {
    @apply bg-cyan-500 text-white hover:bg-cyan-600 focus:ring-cyan-400;
}

.btn-outline {
    @apply bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
}

/* File Upload */
.file-upload {
    @apply relative border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6 text-center cursor-pointer transition-colors hover:border-blue-500 dark:hover:border-blue-400;
}

.file-upload:hover {
    @apply bg-blue-50 dark:bg-blue-900/20;
}

.file-upload input[type="file"] {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

/* Alerts */
.alert {
    @apply p-4 mb-4 rounded-lg;
}

.alert-success {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-l-4 border-green-500;
}

.alert-danger {
    @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-l-4 border-red-500;
}

.alert-warning {
    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-l-4 border-yellow-500;
}

.alert-info {
    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-l-4 border-blue-500;
}

/* Tables */
table {
    @apply w-full border-collapse;
}

table th {
    @apply px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left text-gray-700 dark:text-gray-300 font-medium border-b border-gray-300 dark:border-gray-700;
}

table td {
    @apply px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200;
}

table tr:hover {
    @apply bg-gray-50 dark:bg-gray-800/50;
}

/* Copy Button */
.copy-btn {
    @apply p-2 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors;
}

/* Result Box */
.result-box {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm;
}

/* Tool Container */
.tool-container {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8;
}

/* Tool Header */
.tool-header {
    @apply mb-6 pb-4 border-b border-gray-200 dark:border-gray-700;
}

.tool-header h1 {
    @apply text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-2;
}

.tool-header p {
    @apply text-gray-600 dark:text-gray-300;
}

/* Tool Footer */
.tool-footer {
    @apply mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 text-sm;
}

/* Loading Spinner */
.loading-spinner {
    @apply inline-block w-6 h-6 border-2 border-gray-300 dark:border-gray-600 border-t-blue-600 dark:border-t-blue-400 rounded-full animate-spin;
}

/* Badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-blue {
    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300;
}

.badge-green {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300;
}

.badge-red {
    @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300;
}

.badge-yellow {
    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300;
}

/* Tooltips */
.tooltip {
    @apply relative inline-block;
}

.tooltip .tooltip-text {
    @apply invisible absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 dark:bg-gray-700 rounded-lg opacity-0 transition-opacity duration-300 whitespace-nowrap;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip:hover .tooltip-text {
    @apply visible opacity-100;
}

.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

.dark .tooltip .tooltip-text::after {
    border-color: #374151 transparent transparent transparent;
}

/* Tabs */
.tabs {
    @apply flex border-b border-gray-200 dark:border-gray-700 mb-4;
}

.tab {
    @apply px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer;
}

.tab.active {
    @apply text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400;
}

/* Pagination */
.pagination {
    @apply flex justify-center mt-6;
}

.pagination-item {
    @apply mx-1 px-3 py-1 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
}

.pagination-item.active {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .hide-sm {
        display: none;
    }
}

@media (max-width: 768px) {
    .hide-md {
        display: none;
    }
}

@media (max-width: 1024px) {
    .hide-lg {
        display: none;
    }
}