@import "datatables.net-bs5/css/dataTables.bootstrap5.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.css";
@import "datatables.net-responsive-bs5/css/responsive.bootstrap5.css";

/* Hide default DataTables search (we use custom filters) */
div.dt-container div.dt-search {
    display: none;
}

/* Global DataTables Length (Show X entries) */
.dataTables_wrapper .dataTables_length {
    padding: 15px;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 10px;
    padding: 5px 25px;
    border: 2px solid #e5e7eb;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.dataTables_wrapper .dataTables_length select:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Global DataTables Filter/Buttons Container */

.datatableprimary .dt-length{
    width: 50%;
    float: left;
    padding: 15px 20px 0px 20px;
}
.datatableprimary .dt-length select{
    border-radius: 10px;
    padding: 5px 25px;
    border: 2px solid #e5e7eb;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s;
}
.datatableprimary .createbutton{
    width: 50%;
    float: right;
    padding: 15px 20px 0px 20px;
}

.datatableprimary {
    margin: 0px 30px;
}

/* Pagination container - single line layout */
.dt-paging {
    background: #ffffff;
    padding: 15px 20px;
    margin: 0;
    border-top: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Pagination navigation container */
.dt-paging nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.dt-paging nav ul.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dt-paging-button {
    margin: 0;
}

.dt-paging-button .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    margin: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dt-paging-button .page-link:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dt-paging-button.active .page-link {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.dt-paging-button.disabled .page-link {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.dt-paging-button.disabled .page-link:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
}

/* Special styling for first/previous/next/last buttons */
.dt-paging-button .page-link.first,
.dt-paging-button .page-link.previous,
.dt-paging-button .page-link.next,
.dt-paging-button .page-link.last {
    padding: 0 12px;
    font-size: 13px;
    text-transform: capitalize;
}

/* Update dt-info to work with the single-line layout */
.dt-info {
    margin: 20px;
    width: 50%;
    float: left;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}


/* Responsive pagination */
@media (max-width: 768px) {
    .dt-paging {
        padding: 12px 15px;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .dt-paging nav {
        justify-content: center;
    }

    .dt-info {
        text-align: center;
        font-size: 13px;
    }

    .dt-paging-button .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .dt-paging-button .page-link.first,
    .dt-paging-button .page-link.previous,
    .dt-paging-button .page-link.next,
    .dt-paging-button .page-link.last {
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .dt-paging {
        padding: 10px;
    }

    .dt-paging nav ul.pagination {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .dt-paging-button .page-link {
        min-width: 30px;
        height: 30px;
        font-size: 12px;
        padding: 0 8px;
    }

    .dt-paging-button .page-link.first,
    .dt-paging-button .page-link.previous,
    .dt-paging-button .page-link.next,
    .dt-paging-button .page-link.last {
        padding: 0 8px;
        font-size: 11px;
    }

    .dt-info {
        font-size: 12px;
    }
}

/* Bulk Operations */
#bulkOperations {
    margin: 0 31px 10px;
}

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

/* Alpine.js x-cloak to hide elements until loaded */
[x-cloak] {
    display: none !important;
}

/* Flatpickr Custom Styles */
.flatpickr-calendar {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    font-family: 'Figtree', sans-serif;
}

.flatpickr-calendar.open {
    animation: fadeIn 0.2s ease-out;
}

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

.flatpickr-days {
    padding: 8px;
}

.flatpickr-day {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.flatpickr-day:hover {
    background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 100%);
    border-color: transparent;
}

.flatpickr-day.today {
    border-color: #9333ea;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    font-weight: 600;
}

.flatpickr-day.selected {
    background: linear-gradient(135deg, #9333ea 0%, #6366f1 100%) !important;
    border-color: #9333ea !important;
    color: white !important;
    font-weight: 600;
}

.flatpickr-day.selected:hover {
    background: linear-gradient(135deg, #7e22ce 0%, #4f46e5 100%) !important;
}

.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
    background: linear-gradient(135deg, #9333ea 0%, #6366f1 100%) !important;
    border-color: #9333ea !important;
    color: white !important;
}

.flatpickr-day.inRange {
    background: #f3e8ff;
    border-color: transparent;
    box-shadow: -2px 0 0 #e9d5ff, 2px 0 0 #e9d5ff;
}

.flatpickr-day.disabled {
    opacity: 0.3;
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-year {
    border-radius: 8px;
    font-weight: 600;
}

.flatpickr-months .flatpickr-month:hover,
.flatpickr-months .flatpickr-year:hover {
    background: #f3f4f6;
}

.flatpickr-current-month {
    font-weight: 600;
    color: #9333ea;
}

.flatpickr-weekday {
    color: #6b7280;
    font-weight: 600;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #9ca3af;
}

.flatpickr-day.disabled:hover {
    background: transparent;
}

.flatpickr-day.flatpickr-disabled {
    color: #d1d5db;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .flatpickr-calendar {
        font-size: 14px;
    }

    .flatpickr-day {
        height: 32px;
        line-height: 32px;
        font-size: 13px;
    }
}
.countdown-timer{
    font-size: 16px;
}

/* Custom Scrollbar for Sidebar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Orders Form Styles */
.form-card {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden;
}

.form-card-header {
    @apply px-8 py-5 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white;
}

.form-card-title {
    @apply text-lg font-bold text-gray-900 flex items-center;
}

.form-card-title i {
    @apply w-10 h-10 rounded-xl flex items-center justify-center mr-3 shadow-sm;
}

.form-card-body {
    @apply p-8;
}

.form-grid {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
}

.form-field {
    @apply space-y-2;
}

.form-field-label {
    @apply block text-sm font-bold text-gray-700 flex items-center;
}

.form-field-label i.field-icon {
    @apply w-6 h-6 rounded-lg flex items-center justify-center mr-2 text-sm;
}

.form-field-input {
    @apply w-full px-7 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all duration-200 bg-white;

}

.form-field-input:focus {
    @apply shadow-lg shadow-purple-500/10;
}

.form-field-select {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all duration-200 bg-white appearance-none cursor-pointer;
}

.form-field-select:focus {
    @apply shadow-lg shadow-purple-500/10;
}

.form-field-textarea {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all duration-200 resize-none bg-white;
}

.form-field-textarea:focus {
    @apply shadow-lg shadow-purple-500/10;
}

.form-field-hint {
    @apply text-xs text-gray-500 flex items-center;
}

.required-indicator {
    @apply text-red-500 ml-1 text-lg;
}

.checkbox-list {
    @apply border-2 border-gray-200 rounded-xl p-4 max-h-64 overflow-y-auto;
}

.checkbox-item-card {
    @apply flex items-center p-3 rounded-xl hover:bg-purple-50 cursor-pointer transition-all duration-200 border-2 border-transparent;
}

.checkbox-item-card:hover {
    @apply border-purple-200;
}

.checkbox-item-card input[type="checkbox"]:checked + div {
    @apply bg-purple-50;
}

.checkbox-item-card input[type="checkbox"] {
    @apply rounded-lg border-2 border-gray-300 text-purple-600 focus:ring-purple-500 focus:ring-offset-0 h-5 w-5 transition-all;
}

.checkbox-item-card input[type="checkbox"]:checked {
    @apply bg-purple-600 border-purple-600;
}

.user-avatar {
    @apply w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-bold text-sm shadow-md;
}

.user-info {
    @apply ml-3 flex-1;
}

.user-name {
    @apply text-sm font-semibold text-gray-900;
}

.user-email {
    @apply text-xs text-gray-500;
}

.revenue-preview {
    @apply mt-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border-2 border-green-200;
}

.revenue-preview-label {
    @apply text-xs font-semibold text-green-700 uppercase tracking-wide;
}

.revenue-preview-value {
    @apply text-2xl font-bold text-green-700 mt-1;
}

.revenue-preview-split {
    @apply text-sm text-green-600 mt-2 flex items-center;
}

.action-bar {
    @apply sticky bottom-0 bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6 border border-gray-100;
}

.btn-cancel {
    @apply px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 hover:border-gray-400 font-semibold transition-all duration-200;
}

.btn-submit {
    @apply px-8 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:from-purple-700 hover:to-indigo-700 font-semibold transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

.btn-submit:disabled {
    @apply opacity-50 cursor-not-allowed transform-none;
}

.field-error {
    @apply mt-1 text-sm text-red-600 flex items-center;
}

.status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-bold mr-2;
}