/* PinCloud - Neo-Brutalist Common Styles */

/* Base */
html {
    scroll-behavior: smooth;
}

body {
    background-color: rgb(var(--background));
    color: rgb(var(--on-surface));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Neo-Brutalist Shadows */
.neo-shadow {
    box-shadow: 4px 4px 0px 0px rgb(var(--shadow));
}

.neo-shadow-sm {
    box-shadow: 2px 2px 0px 0px rgb(var(--shadow));
}

.neo-shadow-lg {
    box-shadow: 8px 8px 0px 0px rgb(var(--shadow));
}

.neo-hover {
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.neo-hover:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px rgb(var(--shadow));
}

.neo-hover-lg {
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.neo-hover-lg:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px 0px rgb(var(--shadow));
}

.neo-active:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px 0px rgb(var(--shadow));
}

/* Alias historiques `brutal-*`, utilisés dans tout l'espace client et le layout
   admin (dashboard, serveurs, fichiers, factures, support). Ils n'avaient jamais
   été définis : ni ici, ni dans la config Tailwind, qui ne peut pas les générer
   puisque ce ne sont pas des utilitaires. Ces pages s'affichaient donc sans
   bordure ni ombre, c'est-à-dire sans le style néobrutaliste du reste du site.
   Mêmes valeurs que les classes neo-* correspondantes. */
.brutal-border {
    border: 2px solid rgb(var(--shadow));
}

.brutal-border-thick {
    border: 4px solid rgb(var(--shadow));
}

/* Bord droit seul : utilisé pour le remplissage des barres de ressources, qui
   doit se terminer par une arête franche plutôt qu'en dégradé. */
.brutal-border-r {
    border-right: 2px solid rgb(var(--shadow));
}

.brutal-shadow {
    box-shadow: 4px 4px 0px 0px rgb(var(--shadow));
}

.brutal-shadow-sm {
    box-shadow: 2px 2px 0px 0px rgb(var(--shadow));
}

.brutal-button-hover {
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.brutal-button-hover:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px rgb(var(--shadow));
}

.brutal-button-hover:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px 0px rgb(var(--shadow));
}

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

/* Selection */
::selection {
    background-color: rgb(var(--secondary-container));
    color: rgb(var(--on-secondary-container));
}

/* Focus visible */
:focus-visible {
    outline: 2px solid #0040e0;
    outline-offset: 2px;
}

/* Checkbox / Radio custom styling fallback */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #0040e0;
}

/* Mobile menu transition */
#mobile-menu {
    transition: transform 200ms ease, opacity 200ms ease;
}

#mobile-menu.hidden-menu {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Header polish */
nav {
    backdrop-filter: blur(8px);
    background-color: rgb(var(--surface-container-lowest) / 0.95) !important;
}

nav a.group img {
    filter: drop-shadow(2px 2px 0px rgb(var(--shadow)));
}

#mobile-menu.open-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* --- Mode sombre : rattrapages ------------------------------------------
 *
 * Trois ombres sont écrites en dur dans les vues, en valeur arbitraire
 * Tailwind : shadow-[4px_4px_0px_0px_rgba(27,27,27,1)] et sa variante 2px.
 * Elles pointent vers le noir d'encre du thème clair, qui n'est pas celui du
 * thème sombre : on les réaligne sur --shadow. Le sélecteur par sous-chaîne
 * évite d'avoir à échapper les crochets et les virgules.
 *
 * C'est un rattrapage de prototype : la bonne correction est de remplacer ces
 * valeurs arbitraires par une classe nommée (.neo-shadow existe déjà).
 */
.dark [class*="shadow-[4px_4px_0px_0px_rgba"] {
    box-shadow: 4px 4px 0px 0px rgb(var(--shadow)) !important;
}
.dark [class*="shadow-[2px_2px_0px_0px_rgba"] {
    box-shadow: 2px 2px 0px 0px rgb(var(--shadow)) !important;
}

/* Le focus jaune (#e9c400) reste lisible sur les deux thèmes, on n'y touche pas. */

/* La bordure des champs de formulaire vient du plugin forms, qui pose une
 * couleur fixe : on la réaligne sur le thème. */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
    border-color: rgb(var(--on-surface));
    color-scheme: dark;
}

/* Le QR code de double authentification est un PNG noir sur blanc : sur fond
 * sombre il faut lui garder son fond clair, sinon il devient illisible par les
 * lecteurs de code. */
.dark img[alt*="QR"] {
    background: #ffffff;
    padding: 8px;
}