/* Import FontAwesome */
@import '@fortawesome/fontawesome-free/css/all.min.css';


/* Import custom CSP-safe styles */
@import './csp-safe.css';

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

/* Dark Mode Text Readability Fixes */
@layer base {
    /* Ensure dark backgrounds have light text */
    .dark {
        color-scheme: dark;
    }

    /* Fix text-gray-700, text-gray-800, text-gray-900 in dark mode */
    .dark .text-gray-700:not([class*="dark:text-"]) {
        color: rgb(209 213 219) !important; /* gray-300 */
    }

    .dark .text-gray-800:not([class*="dark:text-"]) {
        color: rgb(229 231 235) !important; /* gray-200 */
    }

    .dark .text-gray-900:not([class*="dark:text-"]) {
        color: rgb(243 244 246) !important; /* gray-100 */
    }

    /* Ensure labels are readable in dark mode */
    .dark label:not([class*="dark:text-"]) {
        color: rgb(209 213 219) !important; /* gray-300 */
    }

    /* Fix table headers in dark mode */
    .dark th:not([class*="dark:text-"]) {
        color: rgb(209 213 219) !important; /* gray-300 */
    }

    /* Fix table cells in dark mode */
    .dark td:not([class*="dark:text-"]) {
        color: rgb(229 231 235) !important; /* gray-200 */
    }

    /* Ensure headings are visible in dark mode */
    .dark h1:not([class*="dark:text-"]),
    .dark h2:not([class*="dark:text-"]),
    .dark h3:not([class*="dark:text-"]),
    .dark h4:not([class*="dark:text-"]),
    .dark h5:not([class*="dark:text-"]),
    .dark h6:not([class*="dark:text-"]) {
        color: rgb(243 244 246) !important; /* gray-100 */
    }

    /* Fix select elements in dark mode */
    .dark select:not([class*="dark:text-"]),
    .dark input:not([class*="dark:text-"]),
    .dark textarea:not([class*="dark:text-"]) {
        color: rgb(243 244 246) !important; /* gray-100 */
    }
}

/* Custom styles for proper spacing and button alignment */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border rounded-md font-semibold text-sm transition-colors duration-150;
}

.btn i {
    @apply mr-2;
}

.btn-primary {
    @apply bg-blue-600 dark:bg-blue-700 text-white border-blue-600 dark:border-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800;
}

.btn-secondary {
    @apply bg-gray-600 dark:bg-gray-700 text-white border-gray-600 dark:border-gray-700 hover:bg-gray-700 dark:hover:bg-gray-800;
}

.btn-success {
    @apply bg-green-600 dark:bg-green-700 text-white border-green-600 dark:border-green-700 hover:bg-green-700 dark:hover:bg-green-800;
}

.btn-danger {
    @apply bg-red-600 dark:bg-red-700 text-white border-red-600 dark:border-red-700 hover:bg-red-700 dark:hover:bg-red-800;
}

.btn-warning {
    @apply bg-yellow-500 dark:bg-yellow-600 text-white border-yellow-500 dark:border-yellow-600 hover:bg-yellow-600 dark:hover:bg-yellow-700;
}

.btn-info {
    @apply bg-cyan-600 dark:bg-cyan-700 text-white border-cyan-600 dark:border-cyan-700 hover:bg-cyan-700 dark:hover:bg-cyan-800;
}

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

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

/* Button group spacing */
.btn-group {
    @apply inline-flex space-x-2;
}

/* Icon spacing */
.fas, .far, .fab, .fa {
    @apply inline-block;
    min-width: 1em;
    text-align: center;
}

/* Table action buttons */
.table-actions {
    @apply flex items-center gap-2;
}

.table-actions .btn {
    @apply flex-shrink-0;
}

/* Mobile Responsive Improvements */
@layer utilities {
    /* Mobile-friendly tables */
    @media (max-width: 768px) {
        .table-responsive {
            @apply overflow-x-auto -mx-4 px-4;
        }

        .table-responsive table {
            @apply min-w-max;
        }

        /* Card-style table rows for mobile */
        .table-mobile-cards tbody tr {
            @apply block border border-gray-200 dark:border-gray-700 rounded-lg mb-4 p-4;
        }

        .table-mobile-cards tbody td {
            @apply block text-left;
            padding-left: 50% !important;
            position: relative;
        }

        .table-mobile-cards tbody td::before {
            content: attr(data-label);
            position: absolute;
            left: 1rem;
            font-weight: 600;
            @apply text-gray-700 dark:text-gray-300;
        }

        .table-mobile-cards thead {
            @apply hidden;
        }

        /* Stack buttons vertically on mobile */
        .btn-group {
            @apply flex-col space-x-0 space-y-2;
        }

        /* Full width buttons on mobile */
        .btn-mobile-full {
            @apply w-full justify-center;
        }

        /* Mobile search forms */
        .search-form-mobile {
            @apply flex-col space-y-2;
        }

        .search-form-mobile select,
        .search-form-mobile input {
            @apply w-full rounded;
        }

        /* Reduce padding on small screens */
        .container {
            @apply px-2;
        }

        /* Stack navigation items */
        .nav-mobile-stack {
            @apply flex-col space-x-0 space-y-2;
        }

        /* Hide non-essential columns on mobile */
        .hide-mobile {
            @apply hidden;
        }

        /* Smaller text on mobile */
        .text-mobile-sm {
            @apply text-xs;
        }

        /* Mobile dropdown menus should be full width */
        .dropdown-menu {
            @apply left-0 right-0 w-auto mx-2;
        }

        /* Mobile modal adjustments */
        .modal-content {
            @apply mx-2 max-h-[90vh] overflow-y-auto;
        }

        /* Smaller font sizes for headings on mobile */
        h1 {
            @apply text-2xl;
        }

        h2 {
            @apply text-xl;
        }

        h3 {
            @apply text-lg;
        }

        /* Mobile grid adjustments */
        .grid-mobile-1 {
            @apply grid-cols-1;
        }

        /* Touch-friendly sizing */
        .touch-target {
            min-height: 44px;
            min-width: 44px;
        }
    }

    /* Small mobile devices */
    @media (max-width: 480px) {
        /* Even smaller text on very small screens */
        body {
            @apply text-sm;
        }

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

        /* Stack form fields */
        .form-grid {
            @apply grid-cols-1 gap-2;
        }

        /* Compact headers */
        .page-header {
            @apply text-xl py-2;
        }

        /* Reduce card padding */
        .card-mobile-compact {
            @apply p-3;
        }
    }

    /* Tablet improvements */
    @media (min-width: 768px) and (max-width: 1024px) {
        /* 2-column layout on tablets where appropriate */
        .tablet-cols-2 {
            @apply grid-cols-2;
        }

        /* Tablet-optimized navigation */
        .nav-tablet {
            @apply space-x-2;
        }
    }

    /* Landscape mobile optimization */
    @media (max-height: 600px) and (orientation: landscape) {
        /* Reduce vertical padding in landscape */
        .py-6 {
            @apply py-2;
        }

        /* Compact modals in landscape */
        .modal-content {
            max-height: 85vh;
        }

        /* Smaller fixed buttons */
        #mobile-sidebar-toggle,
        #theme-toggle {
            @apply p-2 text-sm;
        }
    }

    /* Mobile-optimized badges and labels */
    @media (max-width: 768px) {
        .badge {
            @apply text-xs px-2 py-1;
        }

        /* Improve readability of release titles */
        .release-title {
            @apply text-sm leading-tight;
        }

        /* Stack action buttons in cards */
        .card-actions {
            @apply flex-col space-y-2 space-x-0;
        }

        /* Make pagination more compact */
        .pagination {
            @apply text-sm;
        }

        .pagination .page-link {
            @apply px-2 py-1 min-w-[2rem];
        }

        /* Optimize data tables for mobile */
        table.dataTable {
            font-size: 0.875rem;
        }

        table.dataTable td,
        table.dataTable th {
            padding: 0.5rem 0.25rem;
        }

        /* Improve form labels */
        label {
            @apply text-sm font-medium;
        }

        /* Better spacing for form groups */
        .form-group {
            @apply mb-3;
        }

        /* Mobile-friendly alerts */
        .alert {
            @apply text-sm px-3 py-2;
        }

        /* Compact breadcrumbs */
        .breadcrumb {
            @apply text-xs;
        }

        /* Stack filter options vertically */
        .filter-options {
            @apply flex-col space-y-2;
        }
    }
}