/* 
 * Admin CSS for AOURIK DIGITAL
 * Freelance Web Developer CRM System
 */

/* Ensure proper scrolling on admin pages */
html, body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* Main admin wrapper - ensure it can scroll */
.admin-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Main content area */
.admin-main-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 2rem;
}

/* Admin layout */
.admin-sidebar {
    @apply w-64 bg-gradient-to-b from-gray-900 to-gray-800 flex-shrink-0 shadow-xl;
}

/* Mobile sidebar positioning */
@media (max-width: 1023px) {
    .admin-sidebar {
        @apply fixed inset-y-0 left-0 z-50 transform -translate-x-full transition-transform duration-300 ease-in-out;
    }
    
    .admin-sidebar.open {
        @apply translate-x-0;
    }
}

/* Desktop sidebar positioning */
@media (min-width: 1024px) {
    .admin-sidebar {
        @apply static translate-x-0;
    }
}

/* Sidebar navigation */
.sidebar-nav-link {
    @apply flex items-center px-4 py-3 text-sm font-medium text-gray-300 hover:text-white hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 rounded-lg mx-3 my-1 transition-all duration-200 ease-in-out;
}

.sidebar-nav-link.active {
    @apply text-white bg-gradient-to-r from-blue-600 to-purple-600 shadow-lg;
}

.sidebar-nav-icon {
    @apply mr-3 h-5 w-5 flex-shrink-0;
}

.sidebar-nav-link:hover .sidebar-nav-icon {
    @apply transform scale-110 transition-transform duration-200;
}

/* Dashboard cards */
.dashboard-card {
    @apply bg-white overflow-hidden shadow-lg hover:shadow-xl rounded-xl border border-gray-100 transition-all duration-300 hover:transform hover:-translate-y-1;
}

.dashboard-stat {
    @apply px-6 py-6;
}

.dashboard-stat-title {
    @apply text-sm font-semibold text-gray-600 uppercase tracking-wide;
}

.dashboard-stat-value {
    @apply mt-2 text-3xl font-bold text-gray-900;
}

.dashboard-stat-icon {
    @apply flex items-center justify-center h-14 w-14 rounded-xl text-white shadow-lg;
}

.dashboard-card:hover .dashboard-stat-icon {
    @apply transform scale-110 transition-transform duration-300;
}

/* Tables */
.admin-table {
    @apply min-w-full divide-y divide-gray-200 rounded-lg overflow-hidden;
}

.admin-table thead {
    @apply bg-gradient-to-r from-gray-50 to-gray-100;
}

.admin-table th {
    @apply px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider;
}

.admin-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.admin-table tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.admin-table tbody tr:hover {
    @apply bg-blue-50 transition-colors duration-200;
}

.admin-table tbody tr {
    @apply border-b border-gray-100;
}

/* Forms */
.admin-form {
    @apply space-y-6;
}

.admin-form-group {
    @apply space-y-1;
}

.admin-form-label {
    @apply block text-sm font-medium text-gray-700;
}

.admin-form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

.admin-form-select {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

.admin-form-textarea {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

/* Buttons */
.admin-btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105;
}

.admin-btn-primary {
    @apply admin-btn text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:ring-blue-500 shadow-blue-200;
}

.admin-btn-secondary {
    @apply admin-btn text-gray-700 bg-white border-2 border-gray-300 hover:bg-gray-50 hover:border-gray-400 focus:ring-blue-500;
}

.admin-btn-danger {
    @apply admin-btn text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 focus:ring-red-500 shadow-red-200;
}

.admin-btn-success {
    @apply admin-btn text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 focus:ring-green-500 shadow-green-200;
}

.admin-btn-sm {
    @apply px-3 py-2 text-xs;
}

.admin-btn-lg {
    @apply px-6 py-3 text-base;
}

/* Modal */
.admin-modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.admin-modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}

.admin-modal-container {
    @apply flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0;
}

.admin-modal-content {
    @apply inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full;
}

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

.admin-alert-success {
    @apply admin-alert bg-green-50 text-green-800 border border-green-200;
}

.admin-alert-error {
    @apply admin-alert bg-red-50 text-red-800 border border-red-200;
}

.admin-alert-warning {
    @apply admin-alert bg-yellow-50 text-yellow-800 border border-yellow-200;
}

.admin-alert-info {
    @apply admin-alert bg-blue-50 text-blue-800 border border-blue-200;
}

/* Pagination */
.admin-pagination {
    @apply flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6;
}

.admin-pagination-nav {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

/* Enhanced Features - AOURIK DIGITAL v2.0 */

/* Loading animations */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

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

.loader {
    border-top-color: #3498db;
    animation: spinner 1s ease-in-out infinite;
}

/* Dark theme support */
body[data-theme="dark"] {
    @apply bg-gray-900 text-white;
}

body[data-theme="dark"] .bg-white {
    @apply bg-gray-800;
}

body[data-theme="dark"] .text-gray-900 {
    @apply text-gray-100;
}

body[data-theme="dark"] .text-gray-800 {
    @apply text-gray-200;
}

body[data-theme="dark"] .text-gray-600 {
    @apply text-gray-400;
}

body[data-theme="dark"] .border-gray-200 {
    @apply border-gray-700;
}

body[data-theme="dark"] .border-gray-300 {
    @apply border-gray-600;
}

body[data-theme="dark"] .bg-gray-50 {
    @apply bg-gray-700;
}

body[data-theme="dark"] .bg-gray-100 {
    @apply bg-gray-600;
}

/* Enhanced flash messages */
.flash-message {
    @apply p-4 rounded-lg shadow-lg border-l-4 mb-4;
    max-width: 400px;
}

.flash-success {
    @apply bg-green-50 border-green-400 text-green-800;
}

.flash-error {
    @apply bg-red-50 border-red-400 text-red-800;
}

.flash-warning {
    @apply bg-yellow-50 border-yellow-400 text-yellow-800;
}

.flash-info {
    @apply bg-blue-50 border-blue-400 text-blue-800;
}

body[data-theme="dark"] .flash-success {
    @apply bg-green-900 border-green-500 text-green-200;
}

body[data-theme="dark"] .flash-error {
    @apply bg-red-900 border-red-500 text-red-200;
}

body[data-theme="dark"] .flash-warning {
    @apply bg-yellow-900 border-yellow-500 text-yellow-200;
}

body[data-theme="dark"] .flash-info {
    @apply bg-blue-900 border-blue-500 text-blue-200;
}

/* Enhanced form validation */
.form-input.error-field {
    @apply border-red-300 bg-red-50;
}

.form-input.error-field:focus {
    @apply ring-red-500;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.error-message {
    @apply text-red-600 text-sm mt-1;
}

body[data-theme="dark"] .form-input.error-field {
    @apply bg-red-900 bg-opacity-20 border-red-500;
}

body[data-theme="dark"] .error-message {
    @apply text-red-400;
}

/* Loading states */
.loading {
    @apply opacity-75 pointer-events-none relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spinner 1s linear infinite;
    z-index: 10;
}

/* Enhanced tooltips */
.tooltip {
    @apply fixed z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg pointer-events-none max-w-xs;
}

body[data-theme="dark"] .tooltip {
    @apply bg-gray-700 text-gray-200;
}

/* Search results dropdown */
#search-results {
    @apply bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto;
}

#search-results a:hover {
    @apply bg-gray-50;
}

body[data-theme="dark"] #search-results {
    @apply bg-gray-800 border-gray-600;
}

body[data-theme="dark"] #search-results a:hover {
    @apply bg-gray-700;
}

/* Notifications dropdown */
#notifications-dropdown {
    @apply bg-white border border-gray-200 rounded-lg shadow-lg z-50;
}

body[data-theme="dark"] #notifications-dropdown {
    @apply bg-gray-800 border-gray-600;
}

/* Keyboard shortcut styling */
kbd {
    @apply px-2 py-1 bg-gray-100 border border-gray-300 rounded text-xs font-mono;
}

body[data-theme="dark"] kbd {
    @apply bg-gray-700 border-gray-600 text-gray-300;
}

/* Auto-save indicator */
#autosave-indicator {
    @apply fixed bottom-4 right-4 px-3 py-2 rounded-lg text-sm font-medium z-40 transition-all duration-200;
}

/* Offline indicator */
#offline-indicator {
    @apply fixed bottom-4 left-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg z-50;
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .flash-message {
        @apply text-sm;
        max-width: 100%;
    }
    
    #search-results {
        @apply left-0 right-0 mx-4;
    }
    
    .tooltip {
        @apply text-xs px-2 py-1;
    }
}

/* Accessibility improvements */
.focus\:outline-none:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Skip to content link */
.skip-link {
    @apply absolute -top-40 left-6 bg-blue-600 text-white px-4 py-2 rounded-md z-50;
    transition: top 0.3s;
}

.skip-link:focus {
    @apply top-4;
}

/* Print styles */
@media print {
    .no-print,
    #flash-container,
    #page-loader,
    #offline-indicator,
    #autosave-indicator {
        display: none !important;
    }
    
    .print-break-after {
        page-break-after: always;
    }
    
    .print-break-before {
        page-break-before: always;
    }
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
}

body[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-800;
}

body[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-600 hover:bg-gray-500;
}

/* Enhanced sidebar hover effects */
.sidebar-nav-link:hover {
    transform: translateX(4px);
}

.sidebar-nav-link:hover .sidebar-nav-icon {
    @apply transform scale-110;
}

/* Status indicators */
.status-online {
    @apply bg-green-500;
}

.status-offline {
    @apply bg-red-500;
}

.status-idle {
    @apply bg-yellow-500;
}

/* Progress bars */
.progress-bar {
    @apply bg-gray-200 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply bg-gradient-to-r from-blue-500 to-purple-500 h-full transition-all duration-300 ease-out;
}

body[data-theme="dark"] .progress-bar {
    @apply bg-gray-700;
}

/* Page transitions */
.page-transition {
    @apply transition-all duration-300 ease-in-out;
}

.admin-pagination-link {
    @apply relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.admin-pagination-link.active {
    @apply z-10 bg-blue-50 border-blue-500 text-blue-600;
}

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

.status-pending {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.status-in-progress,
.status-in_progress {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.status-completed {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.status-cancelled {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.status-paid {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.status-draft {
    @apply bg-gray-100 text-gray-800 border border-gray-200;
}

.status-sent {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.status-overdue {
    @apply bg-red-100 text-red-800 border border-red-200;
}

/* Flash messages */
.flash-message {
    @apply fixed top-4 right-4 z-50 max-w-sm w-full shadow-lg rounded-lg p-4 transition-all duration-300 transform;
}

.flash-success {
    @apply bg-green-50 border border-green-200 text-green-800;
}

.flash-error {
    @apply bg-red-50 border border-red-200 text-red-800;
}

.flash-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-800;
}

.flash-info {
    @apply bg-blue-50 border border-blue-200 text-blue-800;
}

/* Card hover effects */
.hover-card {
    @apply transition-all duration-300 hover:shadow-xl hover:transform hover:-translate-y-1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .admin-table {
        @apply text-sm;
    }
    
    .admin-table th,
    .admin-table td {
        @apply px-3 py-2;
    }
    
    .dashboard-card {
        @apply mx-4;
    }
    
    .flash-message {
        @apply left-4 right-4 max-w-none;
    }
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-white bg-opacity-50;
}

/* Custom scrollbar */
.admin-sidebar::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar::-webkit-scrollbar-track {
    @apply bg-gray-800;
}

.admin-sidebar::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded-full;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

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

/* Custom scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

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