/* Custom Styles to augment Tailwind CSS */
/* These map to the Forensic Intelligence Ecosystem guidelines */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Base custom classes separated from HTML block */
.grid-pattern {
    background-image: radial-gradient(circle, #3a4a49 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.1;
}

.forensic-grid {
    background-image: radial-gradient(circle at 2px 2px, rgba(0, 251, 251, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
}

.glass-panel {
    background: rgba(57, 57, 59, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.neon-glow-cyan {
    box-shadow: 0 0 20px -5px rgba(0, 251, 251, 0.3);
}

.neon-glow-magenta {
    box-shadow: 0 0 20px -5px rgba(254, 0, 254, 0.3);
}

.glow-hover:hover {
    box-shadow: 0 0 20px rgba(0, 251, 251, 0.2);
    border-color: #00fbfb;
}

.adversarial-glow:hover {
    box-shadow: 0 0 20px rgba(254, 0, 254, 0.2);
    border-color: #fe00fe;
}

.portrait-mask {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Ensure smooth scrolling across the ecosystem */
html {
    scroll-behavior: smooth;
}

/* Fallback for form inputs to ensure strict styles on autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #131315 inset;
    transition: background-color 5000s ease-in-out 0s;
}