/* ==========================================================
   POPOTE HOMELAB // BLACK BACKGROUND + CYAN HUD
   ========================================================== */

:root {
    --hud-bg: #000000;
    --hud-panel: #071522;
    --hud-panel-2: #0a1c2b;
    --hud-cyan: #27e5ff;
    --hud-green: #4dffb8;
    --hud-text: #eafcff;
    --hud-muted: #8ca3ad;
}

/* ==========================================================
   FOND GENERAL — NOIR PUR
   ========================================================== */

html,
body,
#__next,
#__next > div,
main,
body > div,
#page_container,
.page-container {
    background-color: #000000 !important;
}

html,
body {
    background: #000000 !important;
}

body {
    min-height: 100vh;
    color: var(--hud-text) !important;
}

/* Grille HUD très discrète */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(39, 229, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(39, 229, 255, 0.018) 1px,
            transparent 1px
        );

    background-size: 44px 44px;
}

/* Ligne lumineuse supérieure */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 6%;
    right: 6%;
    height: 1px;
    z-index: 50;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--hud-cyan),
            transparent
        );

    box-shadow:
        0 0 12px rgba(39, 229, 255, 0.75);
}

#__next {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   TITRES
   ========================================================== */

.services-group > h2,
.bookmarks-group > h2 {
    position: relative;

    color: var(--hud-text) !important;

    text-transform: uppercase;
    letter-spacing: 0.16em;

    font-size: 1.05rem !important;
    font-weight: 600 !important;

    padding-left: 18px;
    margin-bottom: 14px !important;

    text-shadow:
        0 0 12px rgba(39, 229, 255, 0.18);
}

.services-group > h2::before,
.bookmarks-group > h2::before {
    content: "";
    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    transform: translateY(-50%) rotate(45deg);

    background: var(--hud-cyan);

    box-shadow:
        0 0 5px var(--hud-cyan),
        0 0 12px rgba(39, 229, 255, 0.75);
}

/* ==========================================================
   CARTES — BLEU PETROLE
   ========================================================== */

.service-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(10, 28, 43, 0.94),
            rgba(5, 18, 29, 0.96)
        ) !important;

    border:
        1px solid rgba(39, 229, 255, 0.30) !important;

    border-radius: 8px !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        inset 0 0 25px rgba(39,229,255,0.025),
        0 10px 30px rgba(0,0,0,0.65);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

/* Trait cyan supérieur */

.service-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 34%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--hud-cyan),
            transparent
        );

    box-shadow:
        0 0 9px rgba(39,229,255,0.8);
}

/* Coin HUD */

.service-card::after {
    content: "";
    position: absolute;

    right: 7px;
    bottom: 7px;

    width: 14px;
    height: 14px;

    border-right:
        1px solid rgba(39,229,255,0.65);

    border-bottom:
        1px solid rgba(39,229,255,0.65);
}

/* Survol */

.service-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(39,229,255,0.85) !important;

    box-shadow:
        0 0 0 1px rgba(39,229,255,0.05),
        0 0 22px rgba(39,229,255,0.16),
        0 16px 38px rgba(0,0,0,0.75);
}

/* ==========================================================
   TEXTE
   ========================================================== */

.service-card h3,
.service-card .font-medium {
    color: var(--hud-text) !important;

    letter-spacing: 0.025em;

    text-shadow:
        0 0 10px rgba(39,229,255,0.15);
}

.service-card p {
    color: var(--hud-muted) !important;
}

/* ==========================================================
   ICONES
   ========================================================== */

.service-card img {
    filter:
        drop-shadow(0 0 6px rgba(39,229,255,0.25));

    transition:
        filter 180ms ease,
        transform 180ms ease;
}

.service-card:hover img {
    filter:
        drop-shadow(0 0 11px rgba(39,229,255,0.55));

    transform: scale(1.04);
}

/* ==========================================================
   METRIQUES
   ========================================================== */

.service-card .bg-theme-200,
.service-card .dark\:bg-theme-900,
.service-card .bg-theme-100,
.service-card .dark\:bg-theme-800 {
    background:
        rgba(2, 12, 20, 0.60) !important;

    border:
        1px solid rgba(39,229,255,0.035);
}

.service-card .text-theme-800,
.service-card .dark\:text-theme-200 {
    color: #eafcff !important;
}

.service-card [class*="text-green"],
.service-card [class*="text-emerald"] {
    color: var(--hud-green) !important;

    text-shadow:
        0 0 8px rgba(77,255,184,0.40);
}

/* ==========================================================
   BARRE DE RECHERCHE
   ========================================================== */

#search-container > div {
    background:
        rgba(7, 21, 34, 0.94) !important;

    border:
        1px solid rgba(39,229,255,0.30) !important;

    border-radius: 6px !important;

    box-shadow:
        inset 0 0 18px rgba(39,229,255,0.025),
        0 5px 20px rgba(0,0,0,0.60);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

#search-container > div:focus-within {
    border-color:
        rgba(39,229,255,0.90) !important;

    box-shadow:
        0 0 17px rgba(39,229,255,0.15);
}

#search-container input {
    color: var(--hud-text) !important;
}

/* ==========================================================
   CPU / RAM / DISQUE
   ========================================================== */

.information-widget {
    color: var(--hud-text) !important;

    text-shadow:
        0 0 9px rgba(39,229,255,0.22);
}

.information-widget div[class*="rounded-full"] {
    box-shadow:
        0 0 7px rgba(39,229,255,0.30);
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #000000;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--hud-cyan),
            rgba(39,229,255,0.18)
        );

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hud-cyan);
}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection {
    background: rgba(39,229,255,0.30);
    color: white;
}

/* ==========================================================
   MOBILE / IPHONE
   ========================================================== */

@media (max-width: 768px) {

    body::before {
        background-size: 28px 28px;
    }

    .service-card {
        border-radius: 7px !important;
    }

    .service-card:hover {
        transform: none;
    }

    .services-group > h2,
    .bookmarks-group > h2 {
        font-size: 0.95rem !important;
        letter-spacing: 0.12em;
    }
}