/* AmneziaWG Web UI Custom Styles */

/* Pill buttons (modal/dialog actions) */
.btn-pill {
    border-radius: 9999px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

/* Dark theme base */
body.dark {
    background-color: #111827;
    color: #e5e7eb;
}

/* Common background/text overrides for Tailwind utility classes */
body.dark .bg-gray-100 { background-color: #111827 !important; }
body.dark .bg-white { background-color: #1f2937 !important; }
body.dark .bg-gray-50 { background-color: #1e293b !important; }
body.dark .bg-blue-50 { background-color: #123255 !important; }
body.dark .bg-blue-100 { background-color: #173b63 !important; }

body.dark .text-gray-800 { color: #e5e7eb !important; }
body.dark .text-gray-900 { color: #f1f5f9 !important; }
body.dark .text-gray-700 { color: #d1d5db !important; }
body.dark .text-gray-600 { color: #e0e7ff !important; }
body.dark .text-gray-500 { color: #94a3b8 !important; }
body.dark label { color: #e0e7ff !important; }
body.dark h3, body.dark h4 { color: #bfdbfe !important; }
body.dark .text-blue-800 { color: #93c5fd !important; }
body.dark .text-blue-900 { color: #bfdbfe !important; }
body.dark .text-blue-800\/80 { color: #93c5fd !important; opacity: 1 !important; }
body.dark .text-blue-800 { color: #bfdbfe !important; }
body.dark .text-blue-600 { color: #93c5fd !important; }
body.dark .text-blue-500 { color: #60a5fa !important; }

/* Dark mode: header refresh button */
body.dark #refreshIpBtn {
    background-color: rgba(30, 58, 95, 0.9);
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.4);
}
body.dark #refreshIpBtn:hover {
    background-color: rgba(37, 75, 122, 0.95);
    color: #dbeafe;
}

body.dark .egress-refresh-btn {
    background-color: rgba(30, 58, 95, 0.9) !important;
    color: #bfdbfe !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
}
body.dark .egress-refresh-btn:hover {
    background-color: rgba(37, 75, 122, 0.95) !important;
    color: #dbeafe !important;
    border-color: rgba(147, 197, 253, 0.65) !important;
}

.egress-probe-updating .egress-probe-value,
.egress-probe-updating .egress-probe-ts {
    color: #9ca3af !important;
}

body.dark .egress-probe-updating .egress-probe-value,
body.dark .egress-probe-updating .egress-probe-ts {
    color: #94a3b8 !important;
}

body.dark .border-gray-200 { border-color: #1f2937 !important; }
body.dark .border-gray-300 { border-color: #334155 !important; }
body.dark .border-blue-200 { border-color: #1e3a5f !important; }
body.dark .shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.35) !important; }

body.dark input,
body.dark textarea,
body.dark select {
    background-color: #111827;
    color: #e5e7eb;
    border-color: #334155;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: #64748b;
}

body.dark .bg-gray-800 { background-color: #111827 !important; }
body.dark .bg-gray-900 { background-color: #0f172a !important; }
body.dark .text-green-400 { color: #86efac !important; }

/* Loading animations */
.loading {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Smooth transitions */
.smooth-transition {
    transition: all 0.3s ease-in-out;
}

/* Focus styles for better accessibility */
input:focus, button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Modal styles */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-container {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Link-activity LED for rx/tx arrows */
.traffic-arrow {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: #9CA3AF; /* gray-400 */
}

.traffic-arrow-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    /* Make filled SVG feel bolder (cheap stroke effect) */
    filter: drop-shadow(0 0 0 currentColor) drop-shadow(0 0 0 currentColor);
}

/* Per-direction vertical offsets (fonts render ⬇️/⬆️ differently) */
.traffic-arrow-icon-rx {
    top: 0.4em;
}

.traffic-arrow-icon-tx {
    top: 0.2em;
}

/* Apply only to the arrow element when rx/tx changes */
.traffic-flash {
    animation: trafficArrowFlash 900ms ease-out;
}

@keyframes trafficArrowFlash {
    0% {
        color: #22C55E; /* green-500 */
        text-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
    }
    60% {
        color: #22C55E;
        text-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
    }
    100% {
        color: #9CA3AF;
        text-shadow: none;
    }
}

/* Custom scrollbar for config preview */
.config-preview {
    scrollbar-width: thin;
    scrollbar-color: #4B5563 #1F2937;
}

.config-preview::-webkit-scrollbar {
    width: 8px;
}

.config-preview::-webkit-scrollbar-track {
    background: #1F2937;
    border-radius: 4px;
}

.config-preview::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

.config-preview::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}