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

/* Quill.js CSS */
@import 'quill/dist/quill.snow.css';

/* Quill Editor Styles for Todo Detail Page */

/* Quill Dark Theme */
.ql-toolbar.ql-dark {
    @apply bg-gray-800 border-gray-600;
}

.ql-toolbar.ql-dark .ql-stroke {
    stroke: #d1d5db;
}

.ql-toolbar.ql-dark .ql-fill {
    fill: #d1d5db;
}

.ql-toolbar.ql-dark .ql-picker-label {
    @apply text-gray-300;
}

.ql-toolbar.ql-dark .ql-picker-options {
    @apply bg-gray-800 border-gray-600;
}

.ql-toolbar.ql-dark button:hover,
.ql-toolbar.ql-dark button:focus {
    @apply bg-gray-700;
}

.ql-toolbar.ql-dark button.ql-active {
    @apply bg-blue-600;
}

.ql-editor.ql-dark {
    @apply bg-gray-700 text-white border-gray-600;
}

.ql-editor.ql-dark.ql-blank::before {
    @apply text-gray-400;
}

.ql-editor.ql-dark h1,
.ql-editor.ql-dark h2,
.ql-editor.ql-dark h3 {
    @apply text-white;
}

.ql-editor.ql-dark blockquote {
    @apply border-l-gray-500 bg-gray-800;
}

.ql-editor.ql-dark code,
.ql-editor.ql-dark .ql-code-block {
    @apply bg-gray-800 text-gray-300;
}

/* Quill Container Styling */
.quill-container {
    @apply rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden;
}

.quill-container .ql-toolbar {
    @apply border-b border-gray-300 dark:border-gray-600;
}

.quill-container .ql-editor {
    @apply min-h-[200px] text-gray-900 dark:text-white;
    font-size: 14px;
    line-height: 1.6;
}

.quill-container .ql-editor.ql-blank::before {
    @apply text-gray-500 dark:text-gray-400;
    font-style: normal;
}

#todoModal .ql-toolbar {
    @apply bg-gray-700 border-gray-600 rounded-t-lg;
}

#todoModal .ql-toolbar .ql-stroke {
    stroke: #D1D5DB;
}

#todoModal .ql-toolbar .ql-fill {
    fill: #D1D5DB;
}

#todoModal .ql-toolbar .ql-picker-label {
    @apply text-gray-300;
}

#todoModal .ql-toolbar .ql-picker-options {
    @apply bg-gray-700 border-gray-600;
}

#todoModal .ql-toolbar .ql-picker-item {
    @apply text-gray-300;
}

#todoModal .ql-toolbar .ql-picker-item:hover {
    @apply bg-gray-600;
}

#todoModal .ql-container {
    @apply bg-gray-700 border-gray-600 rounded-b-lg;
}

#todoModal .ql-editor {
    @apply text-gray-200 min-h-[80px];
}

#todoModal .ql-editor.ql-blank::before {
    @apply text-gray-500 italic;
}

#todoModal .ql-editor p {
    @apply mb-1;
}

#todoModal .ql-editor h3 {
    @apply text-white font-semibold mb-1 text-base;
}

#todoModal .ql-editor strong {
    @apply text-white font-semibold;
}

#todoModal .ql-editor em {
    @apply text-gray-300 italic;
}

#todoModal .ql-editor ul,
#todoModal .ql-editor ol {
    @apply ml-4 mb-1;
}

#todoModal .ql-editor li {
    @apply mb-0.5;
}

#todoModal .ql-editor blockquote {
    @apply border-l-4 border-blue-500 pl-3 italic text-gray-300 bg-gray-600 py-1 my-1 rounded-r;
}

#todoModal .ql-editor code {
    @apply bg-gray-600 text-blue-300 px-1 py-0.5 rounded text-sm;
}

#todoModal .ql-editor pre {
    @apply bg-gray-600 text-gray-200 p-2 rounded my-1 overflow-x-auto;
}

#todoModal .ql-toolbar button:hover {
    @apply bg-gray-600;
}

#todoModal .ql-toolbar button.ql-active {
    @apply bg-blue-600;
}

#todoModal .ql-toolbar .ql-formats {
    @apply mr-2;
}

/* Custom styles for Todo Management System */
@layer base {
    html {
        font-family: 'Figtree', system-ui, sans-serif;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    body {
        @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Mobile optimizations */
    body.mobile-optimized {
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent zoom on inputs for iOS */
    @media screen and (max-width: 640px) {

        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="tel"],
        input[type="url"],
        input[type="search"],
        input[type="datetime-local"],
        select,
        textarea {
            font-size: 16px !important;
        }
    }

    /* Dark mode scrollbar styling */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        @apply bg-gray-100 dark:bg-gray-800;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-gray-300 dark:bg-gray-600 rounded-full;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-400 dark:bg-gray-500;
    }

    /* Firefox scrollbar */
    * {
        scrollbar-width: thin;
        scrollbar-color: rgb(156 163 175) rgb(243 244 246);
    }

    .dark * {
        scrollbar-color: rgb(75 85 99) rgb(31 41 55);
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 transition-all duration-200;
    }

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

    .btn-secondary {
        @apply btn bg-gray-600 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 text-white focus:ring-gray-500;
    }

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

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

    .card {
        @apply bg-white dark:bg-gray-800 shadow-lg dark:shadow-gray-900/20 rounded-lg p-6 border border-gray-200 dark:border-gray-700 transition-all duration-200;
    }

    .card-hover {
        @apply card hover:shadow-xl dark:hover:shadow-gray-900/30 hover:border-gray-300 dark:hover:border-gray-600;
    }

    .form-input {
        @apply block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-primary-500 transition-colors duration-200;
    }

    .form-select {
        @apply block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 transition-colors duration-200;
    }

    .form-textarea {
        @apply block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-primary-500 transition-colors duration-200;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
    }

    /* Modal components */
    .modal-backdrop {
        @apply fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 backdrop-blur-sm;
    }

    .modal-content {
        @apply bg-white dark:bg-gray-800 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700;
    }

    /* Toast notifications */
    .toast {
        @apply rounded-lg shadow-lg border backdrop-blur-sm;
    }

    .toast-success {
        @apply bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200;
    }

    .toast-error {
        @apply bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200;
    }

    .toast-warning {
        @apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200;
    }

    .toast-info {
        @apply bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200;
    }

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

    /* Priority badges */
    .priority-urgent {
        @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-800;
    }

    .priority-high {
        @apply bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border border-orange-200 dark:border-orange-800;
    }

    .priority-medium {
        @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800;
    }

    .priority-low {
        @apply bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 border border-gray-200 dark:border-gray-600;
    }
}

@layer utilities {

    /* Mobile-first responsive utilities */
    .mobile-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .touch-pan-y {
        touch-action: pan-y;
    }

    .touch-pan-x {
        touch-action: pan-x;
    }

    .touch-manipulation {
        touch-action: manipulation;
    }

    /* Mobile-friendly tap targets */
    .tap-target {
        min-height: 44px;
        min-width: 44px;
    }

    /* Drag and Drop Styles - Enhanced for mobile */
    .drag-handle {
        cursor: grab;
        transition: all 0.2s ease;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .drag-handle:active {
        cursor: grabbing;
    }

    /* Mobile drag handle - larger touch target */
    @media (max-width: 640px) {
        .drag-handle {
            @apply p-2 -m-2 tap-target;
        }
    }

    .sortable-ghost {
        @apply opacity-30 bg-blue-600 border-blue-500 transform scale-95;
    }

    .sortable-chosen {
        @apply transform scale-105 shadow-lg border-blue-500;
    }

    .sortable-drag {
        @apply transform rotate-2 shadow-2xl;
    }

    .dragging {
        @apply opacity-80 transform scale-105 shadow-xl z-50;
    }

    .is-dragging .sortable-item:not(.dragging) {
        @apply transition-transform duration-200;
    }

    .sortable-item {
        @apply transition-all duration-200 ease-in-out;
    }

    .sortable-item:hover .drag-handle {
        @apply text-gray-300 scale-110;
    }

    /* Mobile-specific drag feedback */
    @media (max-width: 640px) {
        .sortable-chosen {
            @apply transform scale-110 shadow-2xl;
        }

        .sortable-ghost {
            @apply opacity-50 bg-blue-500 border-blue-400;
        }
    }

    /* Visual feedback for drop zones */
    .drop-zone {
        @apply border-2 border-dashed border-blue-500 bg-blue-50 dark:bg-blue-900 bg-opacity-20 rounded-lg;
    }

    /* Smooth animations */
    .todo-list-enter {
        @apply opacity-0 transform translate-y-2;
    }

    .todo-list-enter-active {
        @apply opacity-100 transform translate-y-0 transition-all duration-300;
    }

    .todo-list-exit {
        @apply opacity-100 transform translate-y-0;
    }

    .todo-list-exit-active {
        @apply opacity-0 transform -translate-y-2 transition-all duration-300;
    }

    /* Mobile form optimizations */
    @media (max-width: 640px) {

        .form-input,
        .form-select,
        .form-textarea {
            @apply text-base;
            /* Prevents zoom on iOS */
        }

        .modal-content {
            @apply max-h-screen overflow-y-auto mobile-scroll;
        }
    }

    /* Mobile-friendly buttons */
    @media (max-width: 640px) {
        .btn {
            @apply tap-target touch-manipulation;
        }
    }

    /* Chart container mobile optimizations */
    @media (max-width: 640px) {
        .chart-container {
            @apply touch-pan-y;
        }

        canvas {
            @apply touch-pan-y;
        }
    }

    /* Mobile navigation improvements */
    @media (max-width: 640px) {
        .mobile-nav-item {
            @apply tap-target touch-manipulation;
        }
    }

    /* Responsive grid improvements */
    .responsive-grid {
        @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6;
    }

    .responsive-grid-2 {
        @apply grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8;
    }

    /* Mobile-first spacing */
    .mobile-spacing {
        @apply space-y-4 sm:space-y-6;
    }

    /* Mobile-friendly modals */
    @media (max-width: 640px) {
        .modal-backdrop {
            @apply p-4;
        }

        .modal-content {
            @apply w-full max-w-none mx-0 max-h-[90vh] overflow-y-auto;
        }
    }

    /* Chart container styling */
    .chart-container {
        @apply relative bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700;
    }

    /* Dark mode theme toggle */
    .theme-toggle {
        @apply p-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200;
    }

    /* Loading states */
    .loading-overlay {
        @apply absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-75 dark:bg-opacity-75 flex items-center justify-center rounded-lg backdrop-blur-sm;
    }

    .loading-spinner {
        @apply animate-spin h-8 w-8 text-primary-600 dark:text-primary-400;
    }

    /* Enhanced drag and drop for dark mode */
    .sortable-ghost {
        @apply opacity-30 bg-primary-100 dark:bg-primary-900/30 border-primary-300 dark:border-primary-700 transform scale-95;
    }

    .sortable-chosen {
        @apply transform scale-105 shadow-lg border-primary-400 dark:border-primary-600 bg-primary-50 dark:bg-primary-900/20;
    }

    /* Enhanced todo items */
    .todo-item {
        @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-md dark:hover:shadow-gray-900/20 transition-all duration-200;
    }

    .todo-item-completed {
        @apply opacity-75 bg-gray-50 dark:bg-gray-900/50;
    }

    /* Enhanced subtask styling */
    .subtask-container {
        @apply pl-4 border-l-2 border-gray-300 dark:border-gray-600 ml-4 mt-3;
    }

    .subtask-item {
        @apply bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-3 mb-2 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200;
    }

    /* Tag styling */
    .tag {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border;
    }

    .tag-removable {
        @apply tag cursor-pointer hover:opacity-80 transition-opacity duration-200;
    }

    /* Progress bars */
    .progress-bar {
        @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden;
    }

    .progress-fill {
        @apply h-full bg-gradient-to-r from-primary-500 to-primary-600 dark:from-primary-400 dark:to-primary-500 transition-all duration-500 ease-out;
    }

    /* Statistics cards */
    .stat-card {
        @apply card-hover flex items-center justify-between;
    }

    .stat-icon {
        @apply w-12 h-12 rounded-lg flex items-center justify-center text-white font-semibold;
    }

    /* Navigation enhancements */
    .nav-link {
        @apply text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
    }

    .nav-link-active {
        @apply nav-link bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300;
    }
}