/* =========================================================
   theme.css - Dark Ops (PdG)
   Objectifs :
   - Design global moderne, sombre, lisible, cohérent
   - Orbitron conservée (UI globale)
   - Nav sur une seule ligne (scroll si besoin)
   - Inputs/selects lisibles (FIN du fond blanc + texte blanc)
   - Readonly (ID etc.) lisibles
   - Tables : largeur max (si trop de colonnes -> scroll horizontal)
   - Pastilles statut (vert/orange/rouge/noir) + pulsation discrète
   ========================================================= */

:root{
    --bg-0:#070a10;
    --bg-1:#0b1020;

    --card:#0e162b;
    --card-2:#111c33;

    --text:#e8eefc;
    --muted:#a9b7d6;

    --line:rgba(255,255,255,0.10);

    --accent:#49a6ff;

    --ok:#1ef3a6;
    --warn:#ffb020;
    --bad:#ff4a63;
    --off:#6e778a;

    --shadow:0 10px 30px rgba(0,0,0,0.35);
    --radius:14px;
}

/* =========================
   Base
   ========================= */
html, body{
    background:
        radial-gradient(1200px 600px at 20% 0%, rgba(73,166,255,0.14), transparent 60%),
        radial-gradient(900px 500px at 90% 30%, rgba(30,243,166,0.10), transparent 65%),
        linear-gradient(180deg, var(--bg-0), var(--bg-1));
    color: var(--text);
}

body{
    margin:0;
    padding:0;
    font-family: "Orbitron", "Roboto", "Segoe UI", Arial, sans-serif;
    font-optical-sizing: auto;
}

a{ color: var(--accent); text-decoration:none; }
a:hover{ opacity:0.92; }

h1, h2, h3{
    color: var(--text);
    letter-spacing: 0.02em;
}

/* =========================
   NAV - une seule ligne
   ========================= */
nav{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;

    padding: 8px 10px;

    position: sticky;
    top: 0;
    z-index: 999;

    background: rgba(10,14,24,0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);

    overflow-x: auto;
    scrollbar-width: thin;
}

nav a{
    flex: 0 0 auto;

    color: var(--text) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 10px;
    margin: 0;

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);

    transition: all 0.18s ease;
    white-space: nowrap;
}

nav a:hover{
    transform: translateY(-1px);
    border-color: rgba(73,166,255,0.35);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

nav a i{
    font-size: 17px;
}

/* =========================
   En-tête logo (index)
   ========================= */
header{
    text-align:center;
    padding: 12px 0 6px 0;
}

header img{
    background: rgba(255,255,255,0.92);
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);

    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.45));
    transition: transform 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
}

header img:hover{
    transform: translateY(-2px) scale(1.01);
    opacity: 0.96;
}

/* =========================
   Cards
   ========================= */
#M10_Clock, #M20, #M30, .pdg-card{
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    box-shadow: var(--shadow);
}

/* =========================
   Clock
   ========================= */
#M10_Clock{
    margin: 10px auto 0 auto !important;
    max-width: 520px;
}

#M10_Clock #M10_date{
    color: var(--muted) !important;
}

#M10_Clock #M10_time{
    color: var(--accent) !important;
}

/* =========================
   Tabs (index)
   ========================= */
.tab{
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: var(--radius) var(--radius) 0 0;
}

.tab button{
    color: var(--text) !important;
    font-family: "Orbitron", "Roboto", Arial, sans-serif !important;
    letter-spacing: 0.05em;
}

.tab button:hover{
    background: rgba(73,166,255,0.12) !important;
    color: var(--text) !important;
}

.tab button.active{
    background: rgba(73,166,255,0.22) !important;
    color: var(--text) !important;
}

.tabcontent{
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,0.03);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* =========================
   Tables globales
   - largeur max : si trop large -> scroll horizontal
   ========================= */
table{
    border-collapse: collapse;
    width: 100%;
}

th{
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

td{
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--text);
}

tr:hover td{
    background: rgba(255,255,255,0.03);
}

/* =========================
   Inputs / Selects / Textareas
   - correction fond blanc / texte blanc
   ========================= */
input, select, textarea{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: "Orbitron", "Roboto", Arial, sans-serif;
}

/* IMPORTANT : options de select (sinon fond blanc OS) */
select option{
    background: var(--card);
    color: var(--text);
}

/* Placeholders */
input::placeholder{ color: rgba(232,238,252,0.55); }

/* Readonly (ID etc.) */
input[readonly]{
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--muted) !important;
}

/* Classe existante du projet (ID etc.) */
.GrayBackGround{
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--muted) !important;
}

/* Boutons */
button, input[type="submit"]{
    background: rgba(73,166,255,0.18);
    border: 1px solid rgba(73,166,255,0.35);
    color: var(--text);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: "Orbitron", "Roboto", Arial, sans-serif;
}

button:hover, input[type="submit"]:hover{
    transform: translateY(-1px);
    background: rgba(73,166,255,0.26);
}

/* =========================
   Services - Pastilles + pulse (orange/rouge uniquement)
   ========================= */
.status-dot{
    display:inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;

    box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.18);
}

.status-green{ background: var(--ok); }
.status-orange{ background: var(--warn); }
.status-red{ background: var(--bad); }
.status-black{ background: var(--off); }

@keyframes softPulseOrange {
    0%   {
        box-shadow:
            0 0 0 3px rgba(255,255,255,0.08),
            0 0 0 0 rgba(255,176,32,0.00);
        transform: scale(1);
    }
    50%  {
        box-shadow:
            0 0 0 3px rgba(255,255,255,0.08),
            0 0 28px 6px rgba(255,176,32,0.45);
        transform: scale(1.15);
    }
    100% {
        box-shadow:
            0 0 0 3px rgba(255,255,255,0.08),
            0 0 0 0 rgba(255,176,32,0.00);
        transform: scale(1);
    }
}

@keyframes softPulseRed {
    0%   {
        box-shadow:
            0 0 0 3px rgba(255,255,255,0.08),
            0 0 0 0 rgba(255,74,99,0.00);
        transform: scale(1);
    }
    50%  {
        box-shadow:
            0 0 0 3px rgba(255,255,255,0.08),
            0 0 34px 8px rgba(255,74,99,0.55);
        transform: scale(1.20);
    }
    100% {
        box-shadow:
            0 0 0 3px rgba(255,255,255,0.08),
            0 0 0 0 rgba(255,74,99,0.00);
        transform: scale(1);
    }
}

.status-orange.pulse{
    animation: softPulseOrange 1.6s ease-in-out infinite;
}

.status-red.pulse{
    animation: softPulseRed 1.2s ease-in-out infinite;
}