/* ============================================================
   🌌 STYLE COSMIQUE — HIÉRARCHIQUE (ISOLÉ)
   ============================================================ */

body {
    background: #111;
    color: #eee;
    font-family: Arial, sans-serif;
}

#container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* Soleil */
.soleil-card {
    background: #1e1e1e;
    border: 1px solid #444;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 30px;
    color: #eee;
}

/* Grille des planètes */
.planete-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

/* Carte planète */
.planete-card {
    background: #262626;
    border: 1px solid #555;
    padding: 12px;
    border-radius: 8px;
    color: #ddd;
}

/* Grille des lunes */
.lune-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

/* Carte lune */
.lune-card {
    background: #333;
    border: 1px solid #666;
    padding: 10px;
    border-radius: 6px;
    color: #ccc;
}

/* Titres cosmiques */
.soleil-card h2,
.planete-card h3,
.lune-card h4 {
    margin: 0 0 8px 0;
    padding: 0;
}

/* Tableaux sombres */
/* Tableaux sombres */
/* Tableaux standard (dans toutes les planètes, lunes et tables cosmiques) */
.planete-card table,
.lune-card table,
.cosmic-table {
    width: 100%;
    font-size: 13px;
    margin-top: 8px;
    border-collapse: collapse;
    background: #2a2a2a;
}

.planete-card th,
.lune-card th,
.cosmic-table th {
    background: #3a3a3a;
    color: #eee;
    border: 1px solid #555;
    padding: 6px;
    text-align: left;
}

.planete-card td,
.lune-card td,
.cosmic-table td {
    padding: 6px;
    border: 1px solid #444;
    color: #ddd;
}

/* ============================================================
   🌌 STYLE SPÉCIFIQUE : Tableaux dans .planete-card.objet-possession
   ============================================================ */

.planete-card.objet-possession table {
    width: 100%;
    font-size: 13px;
    margin-top: 8px;
    border-collapse: collapse;
    background: #0f172a; /* Fond plus profond / bleuté */
    border: 1px solid #38bdf8; /* Bordure générale cyan */
}

.planete-card.objet-possession th {
    background: #0369a1; /* En-tête bleu empire lumineux */
    color: #f8fafc;
    border: 1px solid #0284c7;
    padding: 6px;
    text-align: left;
}

.planete-card.objet-possession td {
    padding: 6px;
    border: 1px solid #1e293b; /* Bordures de cellules discrètes mais ancrées dans le thème */
    color: #e2e8f0;
}

/* Effet léger au survol des lignes pour le style possession */
.planete-card.objet-possession tr:hover td {
    background: #1e293b;
}
/* Style pour les objets de l'Empire (Possessions) */
.objet-possession {
    border: 2px solid #00ffcc !important;
    background-color: rgba(0, 255, 204, 0.04);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.1);
}

/* Style pour les objets extérieurs (Détections par capteurs) */
.objet-detection {
    border: 1px dashed #ffaa00 !important;
    background-color: rgba(255, 170, 0, 0.02);
    opacity: 0.85;
}

/* Badges de statut discrets */
.badge-statut {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    font-weight: bold;
}
.objet-possession .badge-statut {
    background-color: #00ffcc;
    color: #000;
}
.objet-detection .badge-statut {
    background-color: #ffaa00;
    color: #000;
}
/* ============================================================
   🏷️ EXTENSIONS EMPIRE ET DÉTECTIONS (HARMONISÉES)
   ============================================================ */

/* 👑 OBJET POSSÉDÉ (Empire) : Liseré lumineux sur le côté gauche */
.soleil-card.objet-possession,
.planete-card.objet-possession,
.lune-card.objet-possession {
    border-left: 4px solid #38bdf8 !important; /* Liseré cyan cosmique */
    box-shadow: -2px 0 8px rgba(56, 189, 248, 0.15);
}

/* 👁️ OBJET DÉTECTÉ (Scan extérieur) : Bordure pointillée et style atténué */
.soleil-card.objet-detection,
.planete-card.objet-detection,
.lune-card.objet-detection {
    border-style: dashed !important;
    border-color: #a16207 !important; /* Ambre très sombre / discret */
    opacity: 0.85;
}

/* Badges de statut intégrés au thème sombre */
.badge-statut {
    display: inline-block;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.objet-possession .badge-statut {
    background: #0284c7;
    color: #fff;
}

.objet-detection .badge-statut {
    background: #451a03;
    color: #fdba74;
    border: 1px solid #7c2d12;
}
/* ============================================================
   🎨 DIFFÉRENCIATION VISUELLE : EMPIRE VS DÉTECTIONS
   ============================================================ */

/* 👑 POSSESSIONS (Empire) : Bleu/Cyan cosmique avec bordure lumineuse */
.soleil-card.objet-possession,
.planete-card.objet-possession,
.lune-card.objet-possession {
    background: #0f172a !important;        /* Fond bleu-nuit cosmique */
    border: 1.5px solid #38bdf8 !important; /* Bordure Cyan brillante */
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

/* 👁️ DÉTECTIONS (Scans extérieurs) : Fond sombre, contours pointillés */
.soleil-card.objet-detection,
.planete-card.objet-detection,
.lune-card.objet-detection {
    background: #18181b !important;        /* Gris très sombre */
    border: 1px dashed #71717a !important; /* Bordure grise pointillée */
    opacity: 0.85;
}

/* 🏷️ BADGES DE STATUT EN COULEURS */
.badge-possession {
    display: inline-block;
    background: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-detection {
    display: inline-block;
    background: #27272a;
    color: #a1a1aa;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 5px;
    border: 1px solid #3f3f46;
    text-transform: uppercase;
}

/* ============================================================
   📐 BANDEAU LATÉRAL (SIDE DRAWER)
   ============================================================ */

.side-drawer {
    position: fixed;
    top: 0;
    right: -420px; /* Masqué à droite par défaut */
    width: 380px;
    height: 100vh;
    background: #18181b;
    border-left: 2px solid #38bdf8;
    box-shadow: -5px 0 25px rgba(0,0,0,0.7);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.side-drawer.open {
    right: 0; /* Glisse vers la gauche */
}

.drawer-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 999;
    display: none;
}

.drawer-overlay.open {
    display: block;
}

/* En-tête */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #3f3f46;
    padding-bottom: 12px;
    margin-bottom: 15px;
}
.drawer-header h3 { margin: 0; color: #38bdf8; }

.btn-close {
    background: transparent;
    border: none;
    color: #a1a1aa;
    font-size: 20px;
    cursor: pointer;
}
.btn-close:hover { color: #fff; }

/* Contenu */
.drawer-input {
    width: 100%;
    padding: 8px 12px;
    background: #27272a;
    border: 1px solid #52525b;
    color: #fff;
    border-radius: 6px;
    margin-top: 5px;
}

.drawer-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-primary {
    background: #0284c7; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; flex: 1;
}
.btn-success {
    background: #16a34a; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; flex: 1;
}
.btn-primary:hover { background: #0369a1; }
.btn-success:hover { background: #15803d; }

.drawer-separator { border: 0; height: 1px; background: #3f3f46; margin: 20px 0; }

.orders-list-box {
    background: #09090b;
    border: 1px solid #27272a;
    border-radius: 6px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
    font-size: 13px;
}

/* Rendre les cartes cliquables avec un curseur */
.planete-card, .lune-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.planete-card:hover, .lune-card:hover {
    transform: translateY(-2px);
}
/* ============================================================
   ⏳ BARRE DE PROGRESSION & CHARGEMENT COSMIQUE
   ============================================================ */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(17, 17, 17, 0.92);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease;
}

.loading-box {
    background: #18181b;
    border: 1px solid #38bdf8;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.2);
    padding: 30px;
    border-radius: 12px;
    width: 380px;
    text-align: center;
}

.loading-title {
    color: #eee;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.progress-bar-container {
    width: 100%;
    height: 10px;
    background: #27272a;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #3f3f46;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    box-shadow: 0 0 10px #38bdf8;
    transition: width 0.2s ease-out;
}

.loading-status {
    color: #a1a1aa;
    font-size: 12px;
    font-style: italic;
}
/* ============================================================
   🚀 AFFICHAGE DES VAISSEAUX & DRAG & DROP
   ============================================================ */

/* Badge Vaisseau sur les cartes */
.vaisseaux-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #3f3f46;
}

.vaisseau-badge {
    background: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: grab;
    user-select: none;
    box-shadow: 0 0 6px rgba(2, 132, 199, 0.5);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vaisseau-badge:hover {
    background: #38bdf8;
    color: #000;
    transform: scale(1.08);
}

.vaisseau-badge:active {
    cursor: grabbing;
}

/* Vaisseau sélectionné au clic */
.vaisseau-badge.selected {
    background: #22c55e !important; /* Vert fluo */
    color: #000 !important;
    box-shadow: 0 0 12px #22c55e;
    animation: pulse 1.5s infinite;
}

/* Effet sur la carte cible lorsqu'on survole un vaisseau au-dessus */
.drop-target-hover {
    border-color: #22c55e !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5) !important;
    background: #052e16 !important;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
/* menu */
/* Layout global : 2 colonnes (Menu à gauche, Contenu à droite) */
/* 1. Ajustement du conteneur global */
/* Layout collé tout à gauche de l'écran */

/* Layout global : 2 colonnes (Menu à gauche, Contenu à droite) */
#container,
.app-layout {
    display: flex;
    gap: 20px;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 15px;
    align-items: flex-start; /* Indispensable pour que sticky fonctionne dans un conteneur flex */
    box-sizing: border-box;
}

/* Menu latéral collant (sticky) */
.console-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 180px;
    flex-shrink: 0;
    background: rgba(18, 16, 28, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px;
    border-radius: 12px;

    /* Configuration pour le scroll */
    position: sticky;
    top: 15px; /* Distance par rapport au haut de l'écran */
    z-index: 100; /* Garde le menu au-dessus du contenu */
    max-height: calc(100vh - 30px); /* Empêche le menu de dépasser l'écran */
    overflow-y: auto; /* Ajoute un scroll interne au menu si l'écran est trop petit */
}

/* Boutons du menu */
.console-sidebar .nav-link {
    display: block;
    color: var(--text-main, #f0f4f8);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.console-sidebar .nav-link:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: var(--accent-cyan, #00e5ff);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
    transform: translateX(4px);
}

/* Variantes boutons */
.console-sidebar .nav-link-home {
    border-color: rgba(233, 30, 99, 0.4);
    background: rgba(233, 30, 99, 0.1);
}

.console-sidebar .nav-link-home:hover {
    background: rgba(233, 30, 99, 0.25);
    border-color: var(--accent-pink, #e91e63);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.4);
}

.console-sidebar .nav-link-muted {
    opacity: 0.5;
}

.console-sidebar .nav-link-muted:hover {
    opacity: 1;
}

/* Contenu principal */
.console-content {
    flex: 0 1 auto;
    min-width: 0;
}
/* Zone de contenu de la page */
.console-content {
    flex-grow: 1;
    min-width: 0; /* Empêche le débordement des tableaux/éléments larges */
}

/* Bascule automatique en colonne sur petit écran */
@media (max-width: 800px) {
    .app-layout {
        flex-direction: column;
    }
    
    .console-sidebar {
        width: 100%;
        position: static;
    }
}

/* =================================================_ */
/* TEMPLATE & CONSOLE LAYOUT (Aligné sur l'aide)     */
/* =================================================_ */

/* Structure principale de la page */
.main-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Badge du tour en haut à gauche */
.tour-badge {
    background: #1e293b;
    border: 1px solid #334155;
    padding: 8px 15px;
    border-radius: 6px;
    display: inline-block;
    font-weight: bold;
    color: #38bdf8;
    margin-bottom: 20px;
}

/* Mise en page en colonnes (Menu à gauche, Contenu à droite) */
.app-layout {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

/* Zone de contenu principale */
.console-content {
    flex: 1;
    min-width: 0;
}

/* Blocs principaux (les grands cadres bleus sombres) */
.doc-card {
    background: #1e293b;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #334155;
    margin-bottom: 25px;
}

.doc-card h1, .doc-card h2 {
    color: #38bdf8;
    margin-top: 0;
}

.doc-card h1 {
    border-bottom: 1px solid #334155;
    padding-bottom: 10px;
}

/* Grille pour les sous-blocs (ex: section 2) */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

/* Sous-blocs à l'intérieur des grilles */
.doc-subcard {
    background: #0f172a;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #334155;
}

.doc-subcard p {
    color: #94a3b8;
    font-size: 0.95em;
    margin-bottom: 0;
}

/* Boîte de formule dédiée */
.formula-box {
    background: #0f172a;
    color: #38bdf8;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #334155;
    font-family: monospace;
    margin: 10px 0 20px 0;
}

/* Listes et couleurs de texte */
.doc-list {
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 0;
}

.text-blue { color: #38bdf8; }
.text-green { color: #34d399; }
.text-red { color: #f43f5e; }


/* ============================================================
   📐 DIVISION EN DEUX COLONNES (ORDERS LAYOUT)
   ============================================================ */

.order-container-split {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes de largeur égale */
    gap: 20px; /* Espace entre les colonnes */
    margin-top: 15px;
}

.order-cards-left,
.order-cards-right {
    background: #1e1e1e;
    border: 1px solid #444;
    padding: 18px;
    border-radius: 10px;
    color: #eee;
}

/* Adaptation automatique sur mobile (passe en 1 seule colonne) */
@media (max-width: 900px) {
    .order-container-split {
        grid-template-columns: 1fr;
    }
}