/*
 * Shared styles for gateway pages (login, router, settings).
 * Supplements Tailwind CDN — only custom patterns and utilities here.
 */

body {
    font-family: 'Space Grotesk', sans-serif;
}

.grid-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(19, 127, 236, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
}

.circuit-overlay {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 H 90 V 90 H 10 Z' fill='none' stroke='%23137fec' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%23137fec' fill-opacity='0.1'/%3E%3Ccircle cx='90' cy='10' r='1' fill='%23137fec' fill-opacity='0.1'/%3E%3Ccircle cx='90' cy='90' r='1' fill='%23137fec' fill-opacity='0.1'/%3E%3Ccircle cx='10' cy='90' r='1' fill='%23137fec' fill-opacity='0.1'/%3E%3C/svg%3E");
}

/* Toast notification */
.toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    transform: translateX(120%);
    transition: transform 0.3s ease;
}
.toast.show {
    transform: translateX(0);
}

/* Loading spinner */
.spinner {
    border: 3px solid rgba(19, 127, 236, 0.2);
    border-top-color: #137fec;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Material Symbols overrides */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}