/* Universal Dark Mode Theme for PeopleDB */

/* Enhanced Dark Mode Color Variables */
:root {
    --primary-blue: #3B82F6;
    --primary-blue-dark: #2563EB;
    --primary-blue-darker: #1D4ED8;
    --primary-purple: #8B5CF6;
    --success-green: #10B981;
    --success-green-dark: #059669;
    --warning-orange: #F59E0B;
    --warning-orange-dark: #D97706;
    --danger-red: #EF4444;
    --danger-red-dark: #DC2626;

    /* Dark mode specific colors */
    --dark-bg-primary: #111827;
    --dark-bg-secondary: #1F2937;
    --dark-bg-tertiary: #374151;
    --dark-border: #4B5563;
    --dark-text-primary: #F9FAFB;
    --dark-text-secondary: #D1D5DB;
    --dark-text-tertiary: #9CA3AF;
}

/* Dark Mode Base Styles */
.dark {
    color-scheme: dark;
}

/* Input Fields - Dark Mode */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="date"],
.dark input[type="number"],
.dark input[type="search"],
.dark textarea,
.dark select {
    @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="date"]:focus,
.dark input[type="number"]:focus,
.dark input[type="search"]:focus,
.dark textarea:focus,
.dark select:focus {
    @apply border-blue-500 ring-blue-500 bg-gray-600;
}

/* Buttons - Enhanced Dark Mode */
.dark .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
}

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

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

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

/* Cards - Dark Mode */
.dark .card {
    @apply bg-gray-800 border-gray-700;
}

.dark .card:hover {
    @apply bg-gray-750 shadow-xl;
}

/* Links - Dark Mode */
.dark a:not(.btn):not(.no-style) {
    @apply text-blue-400 hover:text-blue-300;
}

/* Tables - Dark Mode */
.dark table {
    @apply bg-gray-800;
}

.dark thead {
    @apply bg-gray-700;
}

.dark tbody tr:hover {
    @apply bg-gray-700;
}

.dark th,
.dark td {
    @apply border-gray-700;
}

/* Modals - Dark Mode */
.dark .modal-content {
    @apply bg-gray-800 border-gray-700;
}

.dark .modal-overlay {
    @apply bg-black bg-opacity-75;
}

/* Badges - Dark Mode */
.dark .badge {
    @apply ring-1 ring-gray-700;
}

/* Dropdowns - Dark Mode */
.dark .dropdown-menu {
    @apply bg-gray-800 border-gray-700;
}

.dark .dropdown-item:hover {
    @apply bg-gray-700 text-white;
}

/* Forms - Dark Mode Labels */
.dark label {
    @apply text-gray-300;
}

/* Scrollbars - Dark Mode */
.dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

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

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

/* Custom Utility Classes */
.dark .hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.dark .glass-effect {
    background: rgba(31, 41, 55, 0.7);
    backdrop-filter: blur(10px);
}

/* Enhanced Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom bg-gray-750 color */
.dark .bg-gray-750 {
    background-color: #2d3748;
}

/* Alert/Message Boxes - Dark Mode */
.dark .bg-green-100 {
    @apply bg-green-900 bg-opacity-20 border-green-700;
}

.dark .text-green-700 {
    @apply text-green-400;
}

.dark .bg-red-100 {
    @apply bg-red-900 bg-opacity-20 border-red-700;
}

.dark .text-red-700 {
    @apply text-red-400;
}

.dark .bg-blue-100 {
    @apply bg-blue-900 bg-opacity-20 border-blue-700;
}

.dark .text-blue-700 {
    @apply text-blue-400;
}

.dark .bg-yellow-100 {
    @apply bg-yellow-900 bg-opacity-20 border-yellow-700;
}

.dark .text-yellow-700 {
    @apply text-yellow-400;
}

/* Status Badges - Dark Mode */
.dark .bg-green-600 {
    @apply bg-green-700;
}

.dark .bg-green-600:hover {
    @apply bg-green-600;
}

.dark .bg-red-600 {
    @apply bg-red-700;
}

.dark .bg-red-600:hover {
    @apply bg-red-600;
}

.dark .bg-blue-600 {
    @apply bg-blue-700;
}

.dark .bg-blue-600:hover {
    @apply bg-blue-600;
}

.dark .bg-indigo-600 {
    @apply bg-indigo-700;
}

.dark .bg-indigo-600:hover {
    @apply bg-indigo-600;
}

/* Shadow Enhancement - Dark Mode */
.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.24);
}

/* Focus States - Dark Mode */
.dark *:focus {
    outline-color: var(--primary-blue);
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    @apply ring-2 ring-blue-500 ring-opacity-50;
}

/* Hover Effects - Enhanced */
.dark .hover\:bg-gray-50:hover {
    @apply bg-gray-700;
}

.dark .hover\:bg-gray-100:hover {
    @apply bg-gray-700;
}

.dark .hover\:bg-gray-200:hover {
    @apply bg-gray-600;
}

/* Text Selection */
.dark ::selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: var(--dark-text-primary);
}

/* Disabled States - Dark Mode */
.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled,
.dark button:disabled {
    @apply opacity-50 cursor-not-allowed;
    background-color: #1F2937;
}

/* Code/Pre Blocks - Dark Mode */
.dark pre,
.dark code {
    @apply bg-gray-900 text-gray-100 border-gray-700;
}

/* Placeholder Text - Dark Mode */
.dark ::placeholder {
    @apply text-gray-500;
    opacity: 0.7;
}

/* HR Dividers - Dark Mode */
.dark hr {
    @apply border-gray-700;
}

/* Image Filters - Dark Mode (subtle) - Exclude SVGs and icons */
.dark img:not([class*="icon"]):not([src*=".svg"]) {
    filter: brightness(0.9);
}

.dark img:not([class*="icon"]):not([src*=".svg"]):hover {
    filter: brightness(1);
}

/* SVG icons should not be filtered */
.dark svg {
    filter: none;
}

/* Tooltips - Dark Mode */
.dark [title]:hover::after {
    background-color: #1F2937;
    border-color: #4B5563;
    color: #F9FAFB;
}