/*
  CoreDevPro™ — Global styles (refactored)

  This sheet defines the base look and feel for the entire application.
  It uses a modern palette derived from the original sky‑blue identity of CoreDevPro™
  and introduces glassmorphism, subtle shadows and generous spacing.  
  DO NOT rename or delete classes/ids referenced by JavaScript; instead override them here.
*/

/* CSS variables for easy theming */
:root {
  /* Dark pro color palette derived from the CoreDevPro™ desktop theme */
  --primary: #14d7ff;             /* bright cyan accent */
  --primary-dark: #009fdd;        /* deeper blue for hover states */
  --secondary: #1ec676;           /* green accent for positive actions */
  --bg-start: #151d26;            /* dark gradient start */
  --bg-end: #233349;              /* dark gradient end */
  --text-primary: #e9f8ff;        /* light text for high contrast */
  --text-muted: #8edcff;          /* muted light text for descriptions */
  --card-bg: rgba(21, 32, 48, 0.99); /* opaque dark card background */
  --card-border: rgba(255, 255, 255, 0.12); /* subtle border on dark cards */
  --shadow-color: rgba(0, 0, 0, 0.8);        /* stronger shadow for dark UI */
  --blur: 16px;
}

/* ===================== Mode sombre ===================== */
/* Lorsqu'une classe .dark-mode est appliquée sur body, toutes les variables
   ci-dessous sont surchargées pour offrir une expérience dark moderne. */
body.dark-mode {
  --primary: #79b8ff;
  --primary-dark: #4180d0;
  --secondary: #2ea043;
  --bg-start: #0d1117;
  --bg-end: #161b22;
  --text-primary: #c9d1d9;
  --text-muted: #8b949e;
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.12);
  --shadow-color: rgba(0, 0, 0, 0.8);
}

body.dark-mode::before {
  opacity: 0.05;
}

/* Ajustements spécifiques du mode sombre pour la barre de navigation */
body.dark-mode .navbar {
  background: rgba(13, 17, 23, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Reset & base typography */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Poppins', sans-serif;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
  min-height: 100vh;
  line-height: 1.6;
}

/* Global network pattern overlay: extends the decorative network beyond the hero */
        body::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /* Use the dark network background generated for the dark pro theme */
          background: url('../assets/acceuil/fond_dark.png') center/cover no-repeat;
          /* Slightly increase opacity so the network pattern is more visible but still subtle */
          opacity: 0.35;
          pointer-events: none;
          z-index: -1;
        }

/* Override hero background for the home page to use the dark network image */
        #home::before {
          background: url('../assets/acceuil/fond_dark.png') center/cover no-repeat !important;
          /* Match the opacity of the global background so the hero section is consistent */
          opacity: 0.35 !important;
        }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--primary-dark);
}

h1, h2, h3, h4, h5 {
  margin: 0 0 0.5em 0;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.2;
}

p {
  margin: 0 0 1em;
  color: var(--text-muted);
}

/* Core buttons and CTA buttons */
.core-btn,
.cta-btn {
  display: inline-block;
  padding: 0.75em 2em;
  font-weight: 600;
  border-radius: 32px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 6px 18px var(--primary)44;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.cta-btn.secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: none;
}

.core-btn:hover,
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--primary)33;
}
.cta-btn.secondary:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px var(--primary)33;
}

/* Navbar overrides: we override styles inserted by navbar.js using higher specificity */
    .navbar {
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4vw;
      height: 72px;
      backdrop-filter: blur(var(--blur));
          /* Dark navigation bar: use a deeper, opaque backdrop for better contrast */
          background: rgba(21, 32, 48, 0.95) !important;
          border-bottom: 1px solid var(--card-border) !important;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75) !important;
    }

/* -----------------------------------------------------------------------------
   Dark theme component overrides

   These rules ensure that all major UI containers, buttons, inputs and navigation
   elements adopt the dark pro aesthetic. We use !important flags to override
   inline styles injected by JS or page‑specific CSS without modifying JS logic.
------------------------------------------------------------------------------- */
.navbar .logo { color: var(--primary) !important; }
.navbar .logo-beta { background: var(--primary) !important; color: #fff !important; }
.nav-links a { color: var(--text-primary) !important; }
.nav-links a:hover, .nav-links a.active { color: var(--primary) !important; }
.nav-links a:hover::after, .nav-links a.active::after { background: var(--primary) !important; }

/* Generic container backgrounds */
.demo-section,
.core-container,
.arbo-container,
.socket-container,
.tracker-container,
.popup-content,
.white-hero,
.panel,
.section.backup-ui {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
}

/* Heading and tip colours inside dark cards */
.demo-section h2,
.popup-content h3,
.core-container .tip,
.arbo-container .tip {
  color: var(--primary) !important;
}

/* Descriptive text, list items and confidentiality statements */
.demo-desc,
.demo-section ul,
.popup-content pre,
.confidentiality {
  color: var(--text-primary) !important;
}

/* Code blocks and preformatted content */
.demo-section code,
.popup-content pre {
  background: rgba(255,255,255,0.05) !important;
  color: var(--primary-dark) !important;
}

/* Buttons and interactive labels */
.core-btn,
.custom-file-label,
.module-link,
.module-demo-btn {
  background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important;
  box-shadow: 0 2px 9px var(--primary-dark)25 !important;
}
.core-btn.green {
  background: linear-gradient(90deg, #1ec676, #14b862) !important;
}
.core-btn.red {
  background: linear-gradient(90deg, #e93363, #ad002a) !important;
}
.core-btn.blue {
  background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important;
}
.core-btn:hover,
.custom-file-label:hover,
.module-link:hover,
.module-demo-btn:hover {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important;
}

/* Selects and dropdowns */
.dropdown-select {
  background: #101b2b !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.dropdown-select:focus {
  outline: 2px solid var(--primary) !important;
}

/* Show files button */
.show-files-btn {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.show-files-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--primary) !important;
}

/* Upload warning boxes */
.upload-warning {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #ff6666 !important;
}

/* Dropdown menus and language switch overrides for dark theme */
.dropdown .dropbtn { color: var(--text-primary) !important; }
.dropdown-content {
  backdrop-filter: blur(16px) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6) !important;
  border-radius: 0 0 10px 10px !important;
}
.dropdown-content a {
  color: var(--text-primary) !important;
}
.dropdown-content a:hover,
.dropdown-content a.active {
  background: rgba(255,255,255,0.05) !important;
  color: var(--primary) !important;
}
.lang-switch {
  background: rgba(21,32,48,0.8) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.lang-menu {
  backdrop-filter: blur(16px) !important;
  background: rgba(21,32,48,0.95) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6) !important;
}
.lang-option {
  color: var(--text-primary) !important;
}
.lang-option:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--primary) !important;
}

/* Generic containers (e.g. contact-container, settings-container) adopt dark card styles */
[class$="-container"] {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 3px 15px var(--shadow-color) !important;
}

/* Form controls default to dark backgrounds with coloured borders */
input[type="text"],
input[type="search"],
input[type="file"],
input[type="password"],
select,
textarea {
  background: #101b2b !important;
  color: var(--text-primary) !important;
  border-color: var(--primary) !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  background: #16243c !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.navbar .logo {
  font-size: 1.6em;
  color: var(--primary);
  font-weight: 700;
  display: flex;
  align-items: center;
}
.navbar .logo-beta {
  background: var(--primary);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  font-size: 0.65em;
  letter-spacing: 0.05em;
}

/* Navigation links */
.nav-links {
  display: flex;
  gap: 1.5em;
  list-style: none;
  margin: 0;
  padding: 0;
}
    .nav-links a {
      display: block;
      padding: 0.3em 0.8em;
      font-weight: 600;
      color: var(--text-primary) !important;
      position: relative;
      transition: color 0.2s ease;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--primary) !important;
      transition: width 0.3s ease;
    }
    .nav-links a:hover::after,
    .nav-links a.active::after {
      width: 100%;
    }
    .nav-links a:hover,
    .nav-links a.active {
      color: var(--primary) !important;
    }

/* Language switch button adjustments */
.lang-switch {
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--shadow-color);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.lang-switch:hover {
  box-shadow: 0 4px 12px var(--shadow-color);
}
.lang-menu {
  backdrop-filter: blur(var(--blur));
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--shadow-color);
  overflow: hidden;
}
.lang-option:hover {
  background: rgba(0,0,0,0.05);
}

/* Section container defaults */
section {
  padding: 4rem 6vw;
}

/* Confidentiality message */
.confidentiality {
  margin-top: 4rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}
.confidentiality b {
  color: var(--primary-dark);
}

/* Glass card utility for other pages */
.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 24px var(--shadow-color);
  border-radius: 20px;
  padding: 2rem;
}
/* Lift effect for cards on hover */
.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px var(--shadow-color);
  transition: transform 0.3s cubic-bezier(.24,.92,.57,1.32), box-shadow 0.3s;
}

/* Footer injected via utils.js */
#core-footer {
  margin-top: 4rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  padding-bottom: 2rem;
}
#core-footer a {
  color: var(--primary-dark);
  text-decoration: underline;
  margin: 0 0.7rem;
  transition: color 0.2s ease;
}
#core-footer a:hover {
  color: var(--primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
      /* Darken the track to better blend with the dark background */
      background: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-dark);
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 6vw;
    height: 64px;
  }
  .nav-links {
    gap: 1em;
  }
  section {
    padding: 3rem 5vw;
  }
}

    /*
     * Additional dark theme overrides for uploader widgets, dropdowns and popups.
     * These generic rules ensure that any bright styles defined in page‑specific
     * stylesheets are superseded by our dark pro palette. They rely on
     * !important to win the cascade against inline styles or later stylesheets.
     */
    /* Custom file labels adopt the primary gradient and white text */
    .custom-file-label {
      background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
      color: #fff !important;
      box-shadow: 0 2px 7px var(--primary)33 !important;
      border: none !important;
    }
    .custom-file-label:hover,
    .custom-file-label:focus {
      background: var(--primary) !important;
      color: #fff !important;
    }
    .custom-file-label.disabled {
      background: #2e3a4f !important;
      color: #777 !important;
      opacity: 0.6 !important;
      pointer-events: none !important;
    }

    /* Buttons defined in page stylesheets fall back to the core button style */
    .core-container button,
    .arbo-container button,
    .socket-container button,
    .tracker-container button,
    .core-btn {
      background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 2px 7px var(--primary)33 !important;
    }
    .core-container button:hover,
    .arbo-container button:hover,
    .socket-container button:hover,
    .tracker-container button:hover,
    .core-btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 16px var(--primary)55 !important;
      background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important;
    }

    /* Darken dropdown selects used for route filters */
    select.dropdown-select,
    .dropdown-select {
      background: #101b2b !important;
      color: var(--text-primary) !important;
      border-color: var(--primary) !important;
      appearance: none !important;
    }
    select.dropdown-select:focus,
    .dropdown-select:focus {
      outline: 2px solid var(--primary) !important;
    }

    /* Colour for file count indicators and tips */
    .file-count,
    .tip {
      color: var(--primary) !important;
    }

    /* Show files button styling */
    .show-files-btn {
      background: transparent !important;
      border: 1.5px solid var(--primary) !important;
      color: var(--primary) !important;
      border-radius: 13px !important;
      font-weight: 700 !important;
      transition: all 0.13s !important;
    }
    .show-files-btn:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: var(--primary-dark) !important;
      border-color: var(--primary-dark) !important;
    }

    /* Popup styling for report modals */
    .popup-content {
      background: var(--card-bg) !important;
      color: var(--text-primary) !important;
      border: 1px solid var(--card-border) !important;
      box-shadow: 0 7px 24px var(--shadow-color) !important;
    }
    .popup-content h3 {
      color: var(--primary) !important;
    }
    .popup-content pre {
      background: #101b2b !important;
      color: var(--text-primary) !important;
      border-radius: 8px !important;
      padding: 14px 8px !important;
      border: 1px solid var(--card-border) !important;
    }
    .popup-content pre::-webkit-scrollbar-thumb {
      background: var(--primary) !important;
    }
    .popup-content pre::-webkit-scrollbar-track {
      background: #16243c !important;
    }
    .popup-overlay {
      background: rgba(0, 0, 0, 0.6) !important;
    }
    /* Upload warnings adopt a dark tinted background */
    .upload-warning {
      color: #ff7373 !important;
      background: rgba(255, 0, 0, 0.12) !important;
      border: 1.3px solid rgba(255, 0, 0, 0.3) !important;
      border-radius: 7px !important;
    }
    /* Highlighted text inside reports */
    .highlight {
      background: rgba(20, 215, 255, 0.2) !important;
      color: var(--primary) !important;
      font-weight: 700 !important;
      border-radius: 7px !important;
      padding: 0 3px !important;
    }

    /* Fine‑tune the language switch styling for dark theme */
    .lang-switch {
      background: rgba(21, 32, 48, 0.85) !important;
      border: 1px solid var(--card-border) !important;
      color: var(--primary) !important;
    }
    .lang-switch:hover {
      box-shadow: 0 4px 12px var(--shadow-color) !important;
    }
    .lang-menu {
      background: rgba(21, 32, 48, 0.95) !important;
      border: 1px solid var(--card-border) !important;
      box-shadow: 0 6px 24px var(--shadow-color) !important;
    }
    .lang-option {
      color: var(--text-primary) !important;
    }
    .lang-option:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: var(--primary) !important;
    }