/* /public/css/style.css - Tailwind Custom Styles */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
}

@layer components {
    /* Modern Select2 Styling with shadows and transitions */
    .select2-container--default .select2-selection--single {
        @apply h-11 border-2 border-gray-200 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-all duration-200 shadow-sm hover:border-blue-400 dark:hover:border-blue-500;
    }
    
    .select2-container--default .select2-selection--single:focus-within {
        @apply border-blue-500 ring-4 ring-blue-100 dark:ring-blue-900;
    }
    
    .select2-container--default .select2-selection--multiple {
        @apply min-h-11 border-2 border-gray-200 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-all duration-200 shadow-sm hover:border-blue-400;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        @apply leading-[2.75rem] text-gray-900 dark:text-gray-100 pl-4;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        @apply h-11 right-4;
    }
    
    .select2-dropdown {
        @apply border-2 border-gray-200 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 shadow-2xl animate-slide-up;
    }
    
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        @apply bg-gradient-to-r from-blue-500 to-blue-600 text-white;
    }
    
    .select2-container--default .select2-results__option[aria-selected=true] {
        @apply bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 font-medium;
    }
    
    .select2-container--default .select2-results__option {
        @apply px-4 py-3 transition-all duration-150 hover:pl-6;
    }
    
    .select2-search__field {
        @apply px-4 py-2 border-2 border-gray-200 dark:border-gray-600 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
    }

    /* Table Sortable Links */
    .sortable-link {
        @apply text-white no-underline hover:text-gray-200 transition-colors inline-flex items-center;
    }
    
    .sortable-link .sort-icon {
        @apply ml-1 text-gray-400;
    }
    
    .sortable-link.active .sort-icon {
        @apply text-white;
    }

    /* Bulk Actions Bar */
    .bulk-actions-bar {
        @apply sticky top-0 z-10 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg p-3 mb-4 shadow-md flex flex-wrap items-center gap-3;
    }

    /* Chart Container */
    .chart-container {
        @apply relative h-80 w-full;
    }
    
    /* Card Hover Effects */
    .card-hover {
        @apply transition-all duration-200 hover:shadow-xl hover:-translate-y-1;
    }

    /* Loading Overlay */
    .loading-overlay {
        @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
    }
    
    /* Alert Styles */
    .alert {
        @apply p-4 mb-4 rounded-lg;
    }
    
    .alert-success {
        @apply bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-700;
    }
    
    .alert-danger {
        @apply bg-red-50 dark:bg-red-900 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-700;
    }
    
    .alert-warning {
        @apply bg-yellow-50 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-700;
    }
    
    .alert-info {
        @apply bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-700;
    }

    /* Modern Form Controls with enhanced focus states */
    .form-control {
        @apply w-full px-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-600 rounded-xl transition-all duration-200 shadow-sm focus:outline-none focus:ring-4 focus:ring-blue-100 dark:focus:ring-blue-900 focus:border-blue-500 dark:focus:border-blue-400 hover:border-gray-300 dark:hover:border-gray-500;
    }
    
    .form-control::placeholder {
        @apply text-gray-400 dark:text-gray-500;
    }
    
    .form-control:disabled {
        @apply bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60;
    }
    
    .form-control-sm {
        @apply px-3 py-2 text-sm rounded-lg;
    }
    
    .form-select {
        @apply form-control cursor-pointer bg-no-repeat bg-right;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-size: 1.25rem 1.25rem;
        padding-right: 2.5rem;
    }
    
    .form-label {
        @apply block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide;
    }
    
    .form-label-required::after {
        content: ' *';
        @apply text-red-500;
    }
    
    /* Input with icon */
    .input-group {
        @apply relative;
    }
    
    .input-group-icon {
        @apply absolute left-4 top-1/2 -translate-y-1/2 text-gray-400;
    }
    
    .input-group .form-control {
        @apply pl-11;
    }

    /* Modern Button Styles with enhanced shadows and animations */
    .btn {
        @apply px-5 py-2.5 rounded-xl font-semibold transition-all duration-200 focus:outline-none focus:ring-4 shadow-md hover:shadow-lg active:scale-95 inline-flex items-center justify-center gap-2;
    }
    
    .btn-sm {
        @apply px-4 py-2 text-sm rounded-lg;
    }
    
    .btn-lg {
        @apply px-6 py-3 text-lg rounded-xl;
    }
    
    .btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-300 dark:focus:ring-blue-800;
    }
    
    .btn-secondary {
        @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-300 dark:focus:ring-gray-700;
    }
    
    .btn-success {
        @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-300 dark:focus:ring-green-800;
    }
    
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-300 dark:focus:ring-red-800;
    }
    
    .btn-warning {
        @apply bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-300 dark:focus:ring-yellow-700;
    }
    
    .btn-info {
        @apply bg-cyan-600 text-white hover:bg-cyan-700 focus:ring-cyan-300 dark:focus:ring-cyan-800;
    }
    
    .btn-outline-secondary {
        @apply border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-300 bg-white dark:bg-gray-800;
    }
    
    .btn-link {
        @apply text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline shadow-none;
    }
    
    .btn-ghost {
        @apply bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-none;
    }
    
    .btn:disabled {
        @apply opacity-50 cursor-not-allowed hover:shadow-md active:scale-100;
    }

    /* Modern Card Styles with enhanced shadows */
    .card {
        @apply bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden border border-gray-100 dark:border-gray-700 transition-all duration-300;
    }
    
    .card-body {
        @apply p-8;
    }
    
    .card-header {
        @apply px-8 py-5 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 font-semibold text-gray-800 dark:text-gray-100;
    }
    
    .card-footer {
        @apply px-8 py-5 border-t border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50;
    }
    
    .card-hover {
        @apply hover:-translate-y-1 hover:scale-[1.02] hover:shadow-2xl;
    }
    
    .card-glass {
        @apply backdrop-blur-xl bg-white/80 dark:bg-gray-800/80 border-white/20 dark:border-gray-700/30;
    }
    
    .card-footer {
        @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700;
    }

    /* Table Styles */
    .table {
        @apply w-full text-sm text-left text-gray-700 dark:text-gray-300;
    }
    
    .table thead {
        @apply text-xs uppercase bg-gray-700 text-white dark:bg-gray-900;
    }
    
    .table thead th {
        @apply px-4 py-3 font-semibold;
    }
    
    .table tbody tr {
        @apply border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
    }
    
    .table tbody td {
        @apply px-4 py-3;
    }
    
    .table-striped tbody tr:nth-child(odd) {
        @apply bg-gray-50 dark:bg-gray-800;
    }

    /* Pagination */
    .pagination {
        @apply flex space-x-1;
    }
    
    .page-item {
        @apply inline-block;
    }
    
    .page-link {
        @apply px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
    }
    
    .page-item.active .page-link {
        @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
    }
    
    .page-item.disabled .page-link {
        @apply opacity-50 cursor-not-allowed pointer-events-none;
    }

    /* New Menu Item Styles from TailAdmin */
    .menu-item {
        @apply relative flex items-center w-full gap-3 px-3 py-2 font-medium rounded-lg text-sm;
    }
    .menu-item-active {
        @apply bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400;
    }
    .menu-item-inactive {
        @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5;
    }
    .menu-item-icon-active {
        @apply text-blue-600 dark:text-blue-400;
    }
    .menu-item-icon-inactive {
        @apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300;
    }
    .menu-dropdown-item {
        @apply relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium;
    }
    .menu-dropdown-item-active {
        @apply bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400;
    }
    .menu-dropdown-item-inactive {
        @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5;
    }

    /* Modal Backdrop */
    .modal-backdrop {
        @apply fixed inset-0 bg-black bg-opacity-50 z-40;
    }
    
    .modal {
        @apply fixed inset-0 z-50 flex items-center justify-center p-4;
    }
    
    .modal-dialog {
        @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto;
    }
    
    .modal-content {
        @apply flex flex-col;
    }
    
    .modal-header {
        @apply flex items-center justify-between p-5 border-b border-gray-200 dark:border-gray-700;
    }
    
    .modal-title {
        @apply text-xl font-semibold text-gray-900 dark:text-white;
    }
    
    .modal-body {
        @apply p-6;
    }
    
    .modal-footer {
        @apply flex items-center justify-end p-5 space-x-2 border-t border-gray-200 dark:border-gray-700;
    }
}

@layer utilities {
    /* Custom utilities */
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .filter-grayscale {
        filter: grayscale(100%);
    }
}