/*
 * Minimalist CRT Pixel Art Style for YunoHost Portal - Strict Monochrome (Black, White, Neon Green)
 * Style appliqué via CSS uniquement, sans modification du code source HTML.
 */

/* Import de la police Pixel Art pour un look authentique */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    /* Color Palette: Strict Monochrome */
    --color-crt-bg: #000000;          /* Noir Pur Absolu */
    --color-crt-text: #dddddd;        /* Neon Green Text (Phosphore) */
    --color-crt-text-glow: #66ff66;   /* Brighter Green for Glow/Hover */
    --color-crt-scanline: rgba(0, 0, 0, 0.3); /* Transparent Black for Scanlines */
    --color-crt-border: #4aff4a;      /* Bordures en Vert Néon */

    /* Surcharge des variables YunoHost/Nuxt pour le Monochrome */
    --color-bg-deep: var(--color-crt-bg);
    --color-bg-primary: var(--color-crt-bg);
    --color-text-primary: var(--color-crt-text);
    --color-text-secondary: var(--color-crt-text);
    --color-accent-primary: var(--color-crt-text);
    --color-accent-dark: var(--color-crt-text-glow);
    --color-border-subtle: var(--color-crt-border);
}

/* ---------------------------------- */
/* GLOBAL RESET & FONT/BACKGROUND    */
/* ---------------------------------- */

/* Ciblage de l'ID #crt-screen pour les effets globaux (on suppose que le body a cette ID après la restauration) */
/* Mise à jour: On cible directement le body et le html puisque l'édition de l'index.html a été annulée. */
body, html, .page, #main-wrapper {
    background-color: var(--color-crt-bg) !important;
    color: var(--color-crt-text) !important;
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    font-size: 14px; /* Slightly smaller for 'pixel' feel on desktop */
    text-shadow: 0 0 2px var(--color-crt-text); /* Subtle text glow */
    /* Assure que la zone de l'application est bien remplie */
    min-height: 100vh; 
}

/* Ajustement de la taille de police pour une meilleure lisibilité sur mobile */
@media (max-width: 768px) {
    body, html, .page, #main-wrapper {
        font-size: 16px !important; /* Taille de base standard pour mobile */
    }
    /* Les titres deviennent légèrement plus grands pour maintenir la hiérarchie */
    h1, h2, h3, .tile-title, .app-card-title {
        font-size: 1.2em !important;
    }
    .app-tile {
        padding: 10px !important; /* Augmente la zone de contact tactile */
    }
}


/* Retire les ombres et les coins arrondis */
*, *:before, *:after {
    box-shadow: none !important;
    border-radius: 0 !important;
    text-shadow: inherit; 
    filter: none !important; /* Retire le filtre si l'on est bloqué sur le body */
}

/* ---------------------------------- */
/* SCANLINE OVERLAY EFFECT (Appliqué au body) */
/* ---------------------------------- */

/* Pseudo-élément pour les scanlines - Appliqué au BODY */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 999; /* Z-index abaissé de 9999 à 999 pour réduire le risque d'interférence tactile */
    
    /* Repeating linear gradient creates horizontal scanlines */
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 1px,
        var(--color-crt-scanline) 1px,
        var(--color-crt-scanline) 2px
    );
    background-size: 100% 2px;
    opacity: 0.8;
}


/* ---------------------------------- */
/* INTERFACE ELEMENTS (BUTTONS/TILES/INPUTS) */
/* ---------------------------------- */

/* App Tiles/Buttons - Style Monochrome */
.app-tile, .btn, button, input[type="submit"], .input {
    background-color: var(--color-crt-bg) !important;
    /* Unifie le contour à la couleur du texte CRT */
    border: 1px solid var(--color-crt-border) !important; 
    color: var(--color-crt-text) !important;
    text-transform: uppercase; 
    padding: 8px 12px;
}

/* Hover/Focus effect */
.app-tile:hover, .btn:hover, button:hover, input[type="submit"]:hover {
    background-color: #0d130d !important; /* Un très léger décalage pour l'effet de pression */
    color: var(--color-crt-text-glow) !important;
    text-shadow: 0 0 4px var(--color-crt-text-glow); 
}

/* Inputs, Textareas, et Champ de Recherche (Ciblage explicite) */
input[type="text"], input[type="password"], input[type="search"], textarea, select, .input {
    background-color: var(--color-crt-bg) !important;
    border: 1px solid var(--color-crt-border) !important;
    color: var(--color-crt-text) !important;
    text-shadow: 0 0 1px var(--color-crt-text);
    padding: 5px;
}

/* Focus sur les champs de saisie pour le glow */
input:focus, textarea:focus, select:focus, .input:focus {
    border-color: var(--color-crt-text-glow) !important;
    box-shadow: 0 0 5px var(--color-crt-text-glow) !important;
    outline: none !important;
}


/* Titles and Headers */
h1, h2, h3, .tile-title, .app-card-title {
    color: var(--color-crt-text-glow) !important;
    text-shadow: 0 0 3px var(--color-crt-text-glow);
    border-bottom: 1px solid var(--color-crt-border);
    padding-bottom: 5px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Logo/Branding Area */
#main-header .logo-container img {
    /* Force les images à être en Monochrome Vert Néon */
    filter: sepia(100%) hue-rotate(90deg) brightness(200%) contrast(150%);
    opacity: 0.9;
}

/* Fond des cartes et du contenu */
.app-card, .card, .ynh-container-fluid, .content {
    background-color: var(--color-crt-bg) !important;
    border: 1px dashed var(--color-crt-border);
    padding: 10px;
}

/* Corrige le texte d'aide/secondaire qui pourrait apparaître en blanc par défaut */
.text-xs, .text-sm, .card-title, .app-card-subtitle {
    color: var(--color-crt-text) !important;
}

/* Corrige la couleur du texte de la barre de navigation */
.navbar-end, .navbar-center {
    color: var(--color-crt-text) !important;
}