/*
 * Thème clair (design épuré) — chargé par-dessus les styles existants quand le thème « clair » est choisi.
 *
 * Toutes les couleurs du site sont écrites var(--c-<couleur d'origine>, <couleur d'origine>) :
 * sans ce fichier, le site garde son design sombre. Ici, chaque couleur sombre reçoit son équivalent clair,
 * puis quelques éléments sont redessinés (menu, boutons, cadres, schéma réseau).
 */

:root {
    /* Fonds et surfaces */
    --c-0b1120: #f5f6f8;   /* fond de page */
    --c-111827: #ffffff;   /* cadres, menu */
    --c-0f172a: #f8f9fb;   /* fonds secondaires (en-têtes de tableau, cartes internes) */
    --c-172033: #f1f3f6;   /* ligne survolée */

    /* Traits */
    --c-1f2937: #e8eaee;
    --c-374151: #d5d9e0;

    /* Textes : du plus discret au plus marqué */
    --c-6b7280: #6b7280;
    --c-9ca3af: #5b6472;
    --c-cbd5e1: #475569;
    --c-d1d5db: #374151;
    --c-e5e7eb: #1f2937;
    --c-f3f4f6: #111827;
    --c-f9fafb: #0f172a;
    --c-f8fafc: #0f172a;
    --c-e2e8f0: #64748b;

    /* Bleus */
    --c-2563eb: #2563eb;
    --c-1d4ed8: #1d4ed8;
    --c-3b82f6: #2563eb;
    --c-60a5fa: #2563eb;
    --c-93c5fd: #1d4ed8;
    --c-bfdbfe: #1e3a8a;

    /* États : les textes clairs sur fond sombre deviennent des textes foncés sur fond clair */
    --c-86efac: #15803d;
    --c-4ade80: #16a34a;
    --c-fca5a5: #b91c1c;
    --c-f87171: #dc2626;
    --c-fcd34d: #92400e;
    --c-fbbf24: #b45309;

    /* Repères du thème */
    --encre: #0f172a;
    --trait: #e8eaee;
    --ombre: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
}

html, body {
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.003em;
}

/* ---------- Menu latéral ---------- */

.sidebar { background: #ffffff; border-right: 1px solid var(--trait); padding: 22px 14px; }

.logo { padding: 6px 10px 24px; gap: 12px; }
.logo-icon { background: var(--encre); color: #ffffff; width: 34px; height: 34px; border-radius: 10px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.logo-text { color: var(--encre); font-size: 15px; font-weight: 650; letter-spacing: -.02em; text-transform: lowercase; }

.nav > a, .nav-group > summary, .nav-sub a { color: #556070; border-radius: 10px; }
.nav > a:hover, .nav-group > summary:hover, .nav-sub a:hover { background: #f1f3f6; color: var(--encre); }
.nav > a.active, .nav-sub a.active { background: var(--encre); color: #ffffff; font-weight: 600; }
.nav-group.has-active > summary { background: transparent; color: var(--encre); font-weight: 600; }
.nav-sub { border-left-color: var(--trait); }
.nav-icon { opacity: .75; }

.sidebar-footer { border-top-color: var(--trait); }
.user-name { color: var(--encre); font-weight: 600; }

.refresh-btn, .theme-btn { background: #ffffff; border: 1px solid #d9dde3; color: var(--encre); border-radius: 10px; }
.refresh-btn:hover, .theme-btn:hover { background: #f1f3f6; color: var(--encre); }

/* ---------- Cadres, titres ---------- */

.panel, .stat-card, .stat { border-radius: 16px; border-color: var(--trait); box-shadow: var(--ombre); }
.panel-header { border-bottom-color: #eef0f3; }
.panel-title { font-weight: 650; letter-spacing: -.015em; color: var(--encre); }
.stat-card::before { width: 3px; border-radius: 3px; }
.stat-value { letter-spacing: -.02em; }

/* ---------- Tableaux ---------- */

th { background: #fafbfc; color: #6b7280; border-bottom: 1px solid #eef0f3; font-weight: 600; letter-spacing: .04em; font-size: 11px; }
td { border-top-color: #eef0f3; }
tbody tr:hover { background: #f8f9fb; }
th.triable:hover { color: var(--encre); }

/* ---------- Champs ---------- */

.field input, .field select, .field textarea, .inline-input, .search-input, .search-box input, input[type="search"], input[type="text"], input[type="password"], input[type="number"], select, textarea {
    background: #ffffff; border-color: #d9dde3; color: var(--encre); border-radius: 10px;
}

.field input:focus, .field select:focus, .inline-input:focus, .search-input:focus, input:focus, select:focus, textarea:focus {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

::placeholder { color: #9aa3b0; }

/* ---------- Boutons ---------- */

.btn, .box button[type="submit"] { background: var(--encre); border-color: var(--encre); color: #ffffff; border-radius: 10px; font-weight: 600; }
.btn:hover, .box button[type="submit"]:hover { background: #1e293b; border-color: #1e293b; }
.btn.secondary { background: #ffffff; border-color: #d9dde3; color: var(--encre); font-weight: 500; }
.btn.secondary:hover { background: #f1f3f6; color: var(--encre); }

.btn-delete { background: #ffffff; border-color: #f1c4c4; color: #b91c1c; border-radius: 10px; }
.btn-delete:hover { background: #dc2626; border-color: #dc2626; color: #ffffff; }

.btn-toggle:hover, .equipment-modal-close:hover, .info-close:hover { color: var(--encre); }
.tab.active { background: var(--encre); color: #ffffff; }
.voir-plus { background: #ffffff; }

/* ---------- Page de connexion ---------- */

.box { border-radius: 18px; border-color: var(--trait); box-shadow: 0 10px 40px rgba(15, 23, 42, .08); }

/* ---------- Fenêtres (fiche d'un équipement) ---------- */

.equipment-modal, .info-modal { background: rgba(15, 23, 42, .32); }
.equipment-modal-content, .info-content { border-color: var(--trait); border-radius: 18px; box-shadow: 0 30px 80px rgba(15, 23, 42, .22); }
.equipment-card { border-radius: 14px; }
.equipment-card:hover, .equipment-card:focus-visible { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); }

/* ---------- Adresses IP : grille ---------- */

a.cell:hover { outline-color: var(--encre); }
.cell.dhcp, .cell.bail { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(15, 23, 42, .07) 4px 8px); }

/* ---------- Schéma réseau ---------- */

/* Le dessin du schéma suit le thème clair, avec un bouton « Fond sombre / Fond clair » dans sa barre d'outils. */

/* Fond clair (par défaut) */
.canvas:not(.fond-sombre) { background: radial-gradient(circle, #dde1e7 1px, transparent 1px) 0 0 / 24px 24px, #f5f6f8; }

.canvas:not(.fond-sombre) .switch { box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .06); border-radius: 14px; }
.canvas:not(.fond-sombre) .switch-head { border-radius: 13px 13px 0 0; }
.canvas:not(.fond-sombre) .switch.lie { box-shadow: 0 16px 44px 6px rgba(15, 23, 42, .16); }      /* blocs reliés par la liaison sélectionnée */
.canvas:not(.fond-sombre) .switch:hover { box-shadow: 0 20px 56px 10px rgba(15, 23, 42, .30); }   /* bloc survolé */

.canvas:not(.fond-sombre) .port.hl, .canvas:not(.fond-sombre) .sfp.hl { outline-color: var(--encre); }
.canvas:not(.fond-sombre) .port.sel { outline-color: var(--encre); box-shadow: 0 0 10px rgba(15, 23, 42, .35); }
.canvas:not(.fond-sombre) .port.libre:hover { background: #dfe3e9; border-color: #2563eb; color: var(--encre); }
.canvas:not(.fond-sombre) #links .link.sel .line { filter: drop-shadow(0 0 5px rgba(15, 23, 42, .55)); }
.canvas:not(.fond-sombre) #links .etiquette rect { fill: #ffffff; }
.canvas:not(.fond-sombre) #links .etiquette text { fill: var(--encre); }
.canvas:not(.fond-sombre) .internet .switch-head { background: #f1f5f9; border-radius: 13px; }   /* bloc sans ports : les quatre coins arrondis */

/*
 * Fond sombre : dans la zone de dessin, chaque variable reprend sa couleur d'origine. Le schéma retrouve
 * son apparence de l'ancien design (câbles, blocs, halos), l'habillage autour restant clair.
 */
.canvas.fond-sombre {
    /* Gris foncés neutres plutôt que le bleu-noir de l'ancien design */
    --c-0b1120: #33373e;   /* fond du dessin */
    --c-111827: #1f2227;   /* blocs */
    --c-0f172a: #25282e; --c-172033: #2a2e35;
    --c-1f2937: #3c4149;   /* ports libres, traits */
    --c-374151: #50565f;

    background: radial-gradient(circle, #474c55 1px, transparent 1px) 0 0 / 24px 24px, #33373e;
    --c-6b7280: #6b7280; --c-9ca3af: #9ca3af; --c-cbd5e1: #cbd5e1; --c-d1d5db: #d1d5db; --c-e5e7eb: #e5e7eb;
    --c-f3f4f6: #f3f4f6; --c-f9fafb: #f9fafb; --c-f8fafc: #f8fafc; --c-e2e8f0: #e2e8f0;
    --c-2563eb: #2563eb; --c-1d4ed8: #1d4ed8; --c-3b82f6: #3b82f6; --c-60a5fa: #60a5fa; --c-93c5fd: #93c5fd; --c-bfdbfe: #bfdbfe;
    --c-86efac: #86efac; --c-4ade80: #4ade80; --c-fca5a5: #fca5a5; --c-f87171: #f87171; --c-fcd34d: #fcd34d; --c-fbbf24: #fbbf24;

    border-radius: 0 0 16px 16px;
}

.legend-debit:hover { background: #eef0f3; color: var(--encre); }
.legend-debit.active { background: var(--encre); color: #ffffff; }

/* ---------- Divers ---------- */

.lancement .btn { border-radius: 12px; }
.barre { background: #eef0f3; }
.mesure { border-radius: 14px; }
.cle { background: #fffbeb; border-color: #f3d9a4; }