/* App - Custom CSS */

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

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

/* Loading spinner */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Genotype formatting */
.genotype {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

.genotype .gene {
    font-style: italic;
}

.genotype .balancer {
    color: #6b7280;
}

/* Tag badges */
.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Label preview */
.label-preview {
    border: 1px dashed #d1d5db;
    padding: 0.5rem;
    background-color: #fff;
}

/* Print styles for labels */
@media print {
    body * {
        visibility: hidden;
    }

    .print-area, .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        left: 0;
        top: 0;
    }

    @page {
        size: auto;
        margin: 0;
    }
}

/* Data table styles */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.data-table th {
    background-color: #f9fafb;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.data-table tbody tr:hover {
    background-color: #f9fafb;
}

/* Stock card */
.stock-card {
    transition: box-shadow 0.2s ease-in-out;
}

.stock-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Form input focus states */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    ring: 2px;
    ring-color: #3b82f6;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .mobile-full-width {
        width: 100%;
    }

    .mobile-stack {
        flex-direction: column;
    }
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 50;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* PWA install prompt */
.pwa-install-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1e3a8a;
    color: white;
    padding: 1rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    z-index: 40;
}

.pwa-install-prompt.show {
    display: flex;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Cross status colors */
.status-planned {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-in_progress {
    background-color: #fef3c7;
    color: #92400e;
}

.status-completed {
    background-color: #d1fae5;
    color: #065f46;
}

.status-failed {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ==========================================================================
   DARK MODE OVERRIDES
   Uses html.dark selector so a single rule overrides every matching element
   site-wide, avoiding the need to add dark: prefixes to 1,600+ template classes.
   ========================================================================== */

/* --- Core backgrounds --- */
html.dark .bg-gray-50   { background-color: #111827 !important; } /* gray-900 */
html.dark .bg-white      { background-color: #1f2937 !important; } /* gray-800 */
html.dark .bg-gray-100   { background-color: #1f2937 !important; } /* gray-800 */
html.dark .bg-gray-200   { background-color: #374151 !important; } /* gray-700 */

/* Responsive-prefixed backgrounds (sidebar lg:bg-white, etc.) */
@media (min-width: 1024px) {
    html.dark .lg\:bg-white { background-color: #1f2937 !important; }
    html.dark .lg\:border-gray-200 { border-color: #374151 !important; }
}

/* Body background */
html.dark body.bg-gray-50 { background-color: #030712 !important; } /* gray-950 */

/* --- Core text --- */
html.dark .text-gray-900  { color: #f3f4f6 !important; } /* gray-100 */
html.dark .text-gray-800  { color: #e5e7eb !important; } /* gray-200 */
html.dark .text-gray-700  { color: #d1d5db !important; } /* gray-300 */
html.dark .text-gray-600  { color: #9ca3af !important; } /* gray-400 */
html.dark .text-gray-500  { color: #9ca3af !important; } /* gray-400 */
html.dark .text-gray-400  { color: #6b7280 !important; } /* gray-500 */

/* --- Borders --- */
html.dark .border-gray-200 { border-color: #374151 !important; } /* gray-700 */
html.dark .border-gray-300 { border-color: #4b5563 !important; } /* gray-600 */
html.dark .border-gray-100 { border-color: #374151 !important; } /* gray-700 */
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #374151 !important;
}

/* --- Rings --- */
html.dark .ring-gray-300   { --tw-ring-color: #4b5563 !important; }
html.dark .ring-gray-200   { --tw-ring-color: #374151 !important; }
html.dark .ring-black       { --tw-ring-color: #6b7280 !important; }

/* --- Form inputs --- */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #111827 !important; /* gray-900 */
    color: #f3f4f6 !important;            /* gray-100 */
    border-color: #4b5563 !important;     /* gray-600 */
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6b7280 !important; /* gray-500 */
}
html.dark .border-gray-300 input,
html.dark input.border-gray-300,
html.dark select.border-gray-300 {
    border-color: #4b5563 !important;
}

/* --- Hover states --- */
html.dark .hover\:bg-gray-50:hover  { background-color: #374151 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #4b5563 !important; }
html.dark .hover\:text-gray-700:hover { color: #d1d5db !important; }
html.dark .hover\:text-gray-600:hover { color: #9ca3af !important; }
html.dark .hover\:text-gray-500:hover { color: #9ca3af !important; }
html.dark .hover\:border-gray-300:hover { border-color: #4b5563 !important; }

/* --- Semantic alert backgrounds --- */
html.dark .bg-red-50    { background-color: rgba(127, 29, 29, 0.3) !important; }
html.dark .bg-green-50  { background-color: rgba(6, 78, 59, 0.3) !important; }
html.dark .bg-blue-50   { background-color: rgba(30, 58, 138, 0.3) !important; }
html.dark .bg-yellow-50 { background-color: rgba(120, 53, 15, 0.3) !important; }
html.dark .bg-amber-50  { background-color: rgba(120, 53, 15, 0.3) !important; }

html.dark .text-red-700    { color: #fca5a5 !important; }
html.dark .text-green-700  { color: #6ee7b7 !important; }
html.dark .text-blue-700   { color: #93c5fd !important; }
html.dark .text-amber-700  { color: #fbbf24 !important; }
html.dark .text-amber-800  { color: #fcd34d !important; }
html.dark .text-amber-600  { color: #d97706 !important; }
html.dark .text-amber-900  { color: #fde68a !important; }

html.dark .border-amber-300 { border-color: #92400e !important; }

/* --- Badge / pill colors --- */
html.dark .bg-blue-100   { background-color: rgba(30, 58, 138, 0.4) !important; }
html.dark .bg-red-100    { background-color: rgba(127, 29, 29, 0.4) !important; }
html.dark .bg-green-100  { background-color: rgba(6, 78, 59, 0.4) !important; }
html.dark .bg-yellow-100 { background-color: rgba(120, 53, 15, 0.4) !important; }
html.dark .bg-amber-100  { background-color: rgba(120, 53, 15, 0.4) !important; }
html.dark .bg-purple-100 { background-color: rgba(76, 29, 149, 0.4) !important; }
html.dark .bg-indigo-100 { background-color: rgba(49, 46, 129, 0.4) !important; }
html.dark .bg-gray-100   { background-color: #1f2937 !important; }

html.dark .text-blue-800   { color: #93c5fd !important; }
html.dark .text-red-800    { color: #fca5a5 !important; }
html.dark .text-green-800  { color: #6ee7b7 !important; }
html.dark .text-yellow-800 { color: #fcd34d !important; }
html.dark .text-purple-800 { color: #c4b5fd !important; }
html.dark .text-indigo-800 { color: #a5b4fc !important; }

/* Primary background variations */
html.dark .bg-primary-50  { background-color: rgba(30, 58, 138, 0.25) !important; }
html.dark .bg-primary-100 { background-color: rgba(30, 58, 138, 0.4) !important; }
html.dark .text-primary-700 { color: #93c5fd !important; }

/* --- Shadow --- */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* --- Custom CSS class overrides --- */
html.dark .genotype .balancer     { color: #9ca3af; }
html.dark .label-preview          { border-color: #4b5563; background-color: #1f2937; }
html.dark .data-table th          { background-color: #111827; color: #9ca3af; }
html.dark .data-table th,
html.dark .data-table td          { border-bottom-color: #374151; }
html.dark .data-table tbody tr:hover { background-color: #111827; }
html.dark .stock-card:hover       {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Skeleton loading */
html.dark .skeleton {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 200% 100%;
}

/* Dashboard loading skeletons */
html.dark .bg-gray-200.rounded-lg,
html.dark .bg-gray-200.rounded {
    background-color: #374151 !important;
}

/* Cross status colors — dark variants */
html.dark .status-planned     { background-color: rgba(30, 58, 138, 0.4); color: #93c5fd; }
html.dark .status-in_progress { background-color: rgba(120, 53, 15, 0.4); color: #fcd34d; }
html.dark .status-completed   { background-color: rgba(6, 78, 59, 0.4); color: #6ee7b7; }
html.dark .status-failed      { background-color: rgba(127, 29, 29, 0.4); color: #fca5a5; }

/* --- Search results dropdown --- */
html.dark #search-results {
    background-color: #1f2937 !important;
}

/* --- Dropdown menus --- */
html.dark .origin-top-right {
    background-color: #1f2937 !important;
}

/* --- Print: force light mode --- */
@media print {
    html.dark .bg-gray-50,
    html.dark body.bg-gray-50 { background-color: #f9fafb !important; }
    html.dark .bg-white       { background-color: #fff !important; }
    html.dark .text-gray-900  { color: #111827 !important; }
    html.dark .text-gray-700  { color: #374151 !important; }
}