/*
 * EvolvingDesk Backup Portal styles
 * Dark mode support and responsive design, ported from sms-portal
 */

/* Responsive design for mobile devices */
@media (max-width: 640px) {
    /* Hide wallpaper on mobile and use white background in light mode */
    .bg-custom-wallpaper {
        background-image: none !important;
        background-color: #ffffff;
    }

    html.dark .bg-custom-wallpaper {
        background-color: #1a1a1a;
    }

    /* More compact header on mobile */
    .bg-white.shadow-sm.mb-6,
    .dark .bg-white.shadow-sm.mb-6 {
        margin-bottom: 0.75rem;
    }

    .bg-white.shadow-sm .px-4.py-3,
    .dark .bg-white.shadow-sm .px-4.py-3 {
        padding: 0.5rem 0.75rem;
    }

    .bg-white.shadow-sm img.h-10,
    .dark .bg-white.shadow-sm img.h-10 {
        height: 2rem;
    }

    .bg-white.shadow-sm button span.mr-1,
    .dark .bg-white.shadow-sm button span.mr-1 {
        font-size: 0.75rem;
    }

    #mobileMenu .px-2.py-3.space-y-1 {
        padding: 0.5rem;
    }

    #mobileMenu a {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.25rem;
    }

    .dark table.min-w-full tbody tr td {
        border-bottom-color: #4a5568;
    }

    table.min-w-full tbody tr td:last-child {
        border-bottom: none;
    }

    /* Improve touch targets for mobile */
    button,
    a.bg-blue-600,
    a.text-blue-600,
    a.text-green-600 {
        padding: 0.625rem 1rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    select, input[type="text"] {
        font-size: 16px; /* Prevent zoom on iOS */
        height: 44px;
    }
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html.dark,
html.dark body {
    background-color: #1a1a1a;
    color: #ffffff;
}
.dark .bg-white {
    background-color: #2d2d2d;
    color: #ffffff;
}
.dark .bg-gray-100 {
    background-color: #1a1a1a;
    color: #ffffff;
}
.dark .text-gray-500 { color: #a0aec0; }
.dark .text-gray-600 { color: #cbd5e0; }
.dark .text-gray-700 { color: #e2e8f0; }
.dark .text-gray-800 { color: #ffffff; }
.dark .text-gray-900 { color: #ffffff; }
.dark .border-gray-200 { border-color: #404040; }
.dark .border-gray-300 { border-color: #4a5568; }
.dark .bg-gray-50 {
    background-color: #2d2d2d;
    color: #ffffff;
}
.dark .bg-gray-50 input {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #4a5568;
}
.dark select {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #4a5568;
}
.dark select option {
    background-color: #2d2d2d;
    color: #ffffff;
}
.dark .bg-gray-50 label { color: #e2e8f0; }
.dark table { color: #e2e8f0; }
.dark tbody.bg-white { background-color: #2d2d2d; }
.dark tr.hover\:bg-gray-50:hover { background-color: #3a3a3a; }
.dark thead.bg-gray-50 { background-color: #3a3a3a; }

.dark input[type="number"] {
    background: #2d2d2d;
    color: white;
    border-color: #4a5568;
}

.bg-custom-wallpaper {
    background-size: 120%;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
}
.bg-custom-wallpaper::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    z-index: -1;
}

/* Tooltip styles */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-container .tooltip-text {
    visibility: hidden;
    width: 300px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 9999;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: opacity 0.3s;
    word-wrap: break-word;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: normal;
    pointer-events: none;
}

.tooltip-container .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.dark .tooltip-container .tooltip-text {
    background-color: #4a5568;
    color: #ffffff;
}

.dark .tooltip-container .tooltip-text::after {
    border-color: #4a5568 transparent transparent transparent;
}

/* Dark mode for SVG icons */
.dark svg { color: #e2e8f0; }

/* Dark mode hover/focus states */
.dark .hover\:bg-blue-700:hover { background-color: #1e40af; }
.dark .hover\:bg-green-700:hover { background-color: #047857; }
.dark .hover\:bg-red-700:hover { background-color: #b91c1c; }
.dark .hover\:text-blue-900:hover { color: #93c5fd; }
.dark .hover\:text-green-900:hover { color: #6ee7b7; }
.dark .hover\:text-red-900:hover { color: #fca5a5; }
.dark .border { border-color: #4a5568; }
.dark .focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; }
.dark .focus\:border-blue-500:focus { border-color: #3b82f6; }
.dark .text-green-600 { color: #34d399; }
.dark .text-blue-600 { color: #60a5fa; }
.dark .text-red-600 { color: #f87171; }
.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24); }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); }
.dark .rounded-lg { border-color: #4a5568; }
.dark .rounded-md { border-color: #4a5568; }
.dark input[type="text"] {
    background-color: #2d2d2d;
    color: white;
    border-color: #4a5568;
}
.dark .divide-y > * + * { border-top-color: #4a5568; }
.dark .divide-x > * + * { border-left-color: #4a5568; }
.dark .divide-gray-200 > * + * { border-color: #4a5568; }
.dark .font-medium { color: #f3f4f6; }
.dark .font-bold { color: #ffffff; }
.dark button {
    color: #e2e8f0;
    border-color: #4a5568;
}
.dark button:hover { background-color: #374151; }
.dark button:focus { outline-color: #3b82f6; }
.dark .overflow-hidden { background-color: #2d2d2d; }
.dark .overflow-x-auto { background-color: #2d2d2d; }
.dark th { color: #a0aec0; }
.dark td { color: #e2e8f0; }

/* Navigation header dark mode */
.dark .bg-white.shadow-sm { background-color: #2d2d2d; }
.dark .bg-blue-50.text-blue-700 {
    background-color: #1e40af !important;
    color: #93c5fd !important;
}
.dark .hover\:text-gray-900:hover { color: #ffffff !important; }
.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; }
.dark #userMenu {
    background-color: #2d2d2d;
    border-color: #4a5568;
}
.dark #userMenu a { color: #e2e8f0; }
.dark #userMenu a:hover {
    background-color: #374151;
    color: #ffffff;
}
.dark #userMenu .border-t.border-gray-100 { border-color: #4a5568; }
.dark .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.15);
    color: #e2e8f0;
}
.dark .text-blue-800 { color: #93c5fd; }
.dark .bg-blue-100 {
    background-color: rgba(30, 64, 175, 0.25);
    color: #e2e8f0;
}
.dark .bg-red-100 {
    background-color: rgba(153, 27, 27, 0.25);
    color: #fca5a5;
}
.dark .text-red-700 { color: #fca5a5; }
.dark .border-red-400 { border-color: #b91c1c; }
.dark .bg-green-100 {
    background-color: rgba(6, 95, 70, 0.25);
    color: #6ee7b7;
}
.dark .text-green-700 { color: #6ee7b7; }
.dark .border-green-400 { border-color: #047857; }

/* Dashboard equal-height columns */
.dashboard-grid {
    display: grid;
    align-items: stretch;
}
.dashboard-grid > * {
    display: flex;
    flex-direction: column;
}
.dashboard-grid > * > .bg-white {
    flex: 1;
}