dns-things/assets/css/main.css

/* DNS Things - Main Styles */

/* Custom Tailwind Configuration */
.tab-btn.active {
    @apply bg-indigo-600 text-white shadow-md;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
    width: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Hero section adjustments */
.hero-section {
    min-height: 60vh;
}

/* DNS Tools section */
.dns-tools-section {
    min-height: 70vh;
}

/* Tab navigation */
.tab-navigation {
    min-width: 200px;
}

/* Results styling */
.dns-result-item {
    transition: all 0.2s ease-in-out;
}

.dns-result-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark .dns-result-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Copy button animations */
.copy-btn {
    transition: all 0.2s ease-in-out;
}

.copy-btn:hover {
    transform: scale(1.05);
}

/* Loading animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tab-navigation {
        min-width: auto;
        width: 100%;
    }
    
    .hero-section {
        min-height: 50vh;
    }
    
    .dns-tools-section {
        min-height: auto;
    }
}

/* Mobile Tab Navigation - Horizontal Scrollable */
@media (max-width: 767px) {
    /* Main container becomes vertical stack */
    .flex.flex-col.md\:flex-row.gap-8 {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Tab container takes full width */
    .w-full.md\:w-1\/3.lg\:w-1\/4 {
        width: 100% !important;
        margin-bottom: 1rem;
        order: 1;
    }
    
    /* Content area takes full width */
    .w-full.md\:w-2\/3.lg\:w-3\/4 {
        width: 100% !important;
        order: 2;
    }
    
    /* Tab buttons container becomes horizontal scrollable */
    .flex.flex-col.space-y-2.p-2.bg-gray-50.dark\:bg-gray-700.rounded-lg {
        flex-direction: row !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    /* Hide scrollbar for webkit browsers */
    .flex.flex-col.space-y-2.p-2.bg-gray-50.dark\:bg-gray-700.rounded-lg::-webkit-scrollbar {
        display: none;
    }
    
    /* Tab buttons optimized for mobile */
    .tab-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-width: auto !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* Remove space-y utility on mobile */
    .flex.flex-col.space-y-2.p-2.bg-gray-50.dark\:bg-gray-700.rounded-lg > * + * {
        margin-top: 0 !important;
    }
}

/* Focus states for accessibility */
.focus-ring:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Error and success states */
.error-state {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.dark .error-state {
    border-color: #dc2626;
    background-color: #7f1d1d;
}

.success-state {
    border-color: #10b981;
    background-color: #f0fdf4;
}

.dark .success-state {
    border-color: #059669;
    background-color: #064e3b;
}

/* IP Tools specific styles */
.ip-validation-result {
    max-width: 100%;
    word-break: break-all;
}

/* Subnet calculator grid */
.subnet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* Punycode converter styles */
.punycode-example {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

/* Whois result styles */
.whois-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.whois-badge.ipv4 {
    background-color: #dbeafe;
    color: #1e40af;
}

.dark .whois-badge.ipv4 {
    background-color: #1e3a8a;
    color: #93c5fd;
}

.whois-badge.ipv6 {
    background-color: #e0e7ff;
    color: #5b21b6;
}

.dark .whois-badge.ipv6 {
    background-color: #581c87;
    color: #c4b5fd;
}