html {
  scroll-behavior: smooth;
}

/* === CYBERPUNK STYLES === */
    /* Prevent scrolling */
    body {
      height: 100%; margin: 0;
      background: #0d0d0d;
      font-family: 'Share Tech Mono', monospace;
  
      color: #ddd;
    }

    /* Fullscreen map */
    #map {
      position: fixed; top:0; left:0;
      width:100%; height:100%;
      z-index:0;
      filter: brightness(0.5) blur(8px);
      transition: filter .5s, z-index .5s;
      pointer-events: none;
    }
    #map.focused {
      filter: brightness(0.9) blur(0);
      z-index:20;
      pointer-events: auto;
    }

    /* Navbar */
    .navbar {
      position: fixed; top:0; left:0;
      width:100%; z-index:100;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(6px);
      border-bottom:1px solid #222;
        
    }
    .navbar-brand {
      color:#0ff;
      font-size: 2.5rem;
      font-weight:bold;
    }


    .small-logo:hover,  .small-logo:active,  .small-logo:visited{
      color:#fff;
     
    }



    .nav-link { color:#ccc; }
    .nav-link:hover { color:#0ff; }

    /* Dynamic left-side container */
    #dynamicNav {
      display:flex; align-items:center;
      margin-right:auto;
    }

    /* Smaller logo in navbar-mode */
    .small-logo {
      font-size:1.5rem !important;
      margin-right:1rem;
      padding:0;
    }

    /* Center overlay */
    .overlay {
      position:relative; z-index:10;
      padding:90px 0 3rem;
      text-align:center;
      transition: opacity .5s;
    }
    .overlay.hidden {
      opacity:0; pointer-events:none;
    }

    /* Search styling */
    .search-group {
      position:relative;
      display:flex; flex-wrap:nowrap;
      width:clamp(250px,90vw,600px);
      margin:0 auto;
    }
    .form-control, .search-input {
      flex:1; min-width:200px;
      background:rgba(0,0,0,0.7);
      border:1px solid #0ff;
      border-radius:10px !important;
      color:#0ff;
      font-size:1.2rem;
      padding:.7rem 1rem;
      transition:border-radius .2s,font-size .2s,padding .2s,background .2s;
     
    }
    
    .mx-3 {
  margin-right: 0 !important;
    margin-left: 0 !important;
}

    .form-control::placeholder, .search-input::placeholder { color:rgba(0,255,255,.6); }

    .form-control:focus, .search-input:focus {
      outline:none; box-shadow:none;
      border-color:#0ff;
      background: #000;
      color:#0ff;
    }
    .search-btn {
      flex:0 0 auto; display:none; align-items:center;
      background:transparent;
      border:1px solid #0ff;
      border-radius:10px !important;
      color:#0ff;
      text-transform:uppercase;
      padding:0 1.2rem;
      transition:border-radius .2s,font-size .2s,padding .2s;
    }
    .search-btn i { margin-right:.3rem; }
    .search-btn:hover { background:rgba(0,255,255,.1); }
    .search-input:not(:placeholder-shown) {
      border-top-right-radius:0!important;
      border-bottom-right-radius:0!important;
    }
    .search-input:not(:placeholder-shown)+.search-btn {
      border-top-left-radius:0!important;
      border-bottom-left-radius:0!important;
    }
    .search-group .invalid-feedback {
      position:absolute; bottom:-1.6rem; left:0;
      font-size:.8rem;
    }
    #dynamicNav .invalid-feedback { display:none !important; }
    #dynamicNav .search-group { width: clamp(200px,35vw,350px); }
    #dynamicNav .search-input { font-size:.9rem; padding:.4rem .75rem; }
    #dynamicNav .search-btn { font-size:.8rem; padding:0 .75rem; }

    /* Logo text/icon defaults */
    #logoIcon {
      display: none;
      font-size:2.5rem;
      color:#0ff;
    }
    #logoText {
      display: inline;
      margin-right:20px;
    }

    /* ONLY in navbar-mode (.small-logo) AND on small screens ≤500px, hide text */
    @media (max-width: 500px) {
      .small-logo #logoText { display: none !important; }
      .small-logo #logoIcon { display: inline !important; }
    }

@media (max-width: 450px) {

.small-logo svg {
 
  width: 42px !important;
  height: 42px !important;
margin: 0px 0px -2px -5px !important;	
}
}
/* ==== Mobile Nav: Force left‐alignment ==== */
@media (max-width: 1402px) {
  /* 1) Make the collapsed container align-items: flex-start */
  .navbar-collapse {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* 2) Remove ms-auto on the UL so it does not push items to center */
  .navbar-nav.ms-auto {
    margin-left: 0 !important;
  }

  /* 3) Ensure each nav-item stacks at 100% width (optional but helps left‐align) */
  .navbar-nav .nav-item {
    width: 100%;
  }
  .navbar-nav .nav-link,
  .navbar-nav .btn {
    width: 100%;
    text-align: left;
 

  }
  .navbar-nav .btn {
    margin:7px 0;
 text-align: center;
}
  /* 4) Adjust the separator so it sits flush with the left padding */
  .nav-separator {
    display: none !important;

  }

}



.small-logo #logoIcon { display: inline !important; }

    /* Threat cards */
    .threat-cards {
      margin-top:5vh;
      display:flex; flex-wrap:wrap;
      gap:1.5rem; justify-content:center;
    }
    .threat-card {
      background:rgba(10,10,10,0.7);
      backdrop-filter:blur(5px);
      border:1px solid #333;
      border-left:4px solid #0ff;
      border-radius:8px;
      padding:1rem; width:300px;
      color:#ddd;
    }
    .threat-card h5 { color:#0ff; margin-bottom:.5rem; }
    .threat-card p { margin:0; font-size:.9rem; }

    /* Map toggle */
    .toggle-map-btn {
      position:fixed; bottom:20px; right:20px;
      z-index:999;
      background:rgba(0,0,0,0.7);
      color:#0ff; border:1px solid #0ff;
      border-radius:6px;
      padding:10px 16px;
      cursor:pointer;
      backdrop-filter:blur(6px);
    }
    .toggle-map-btn:hover {
      background:rgba(0,255,255,.1);
    }

/* === CARDS === */
.card-cyber {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(5px);
  border: 1px solid #0ff;
  /*border-left: 2px solid #0ff;*/

  padding: 2rem;
  color: #ddd;
}
.card-cyber h5 {
  color: #0ff;
}

/* === FOOTER === */
footer {
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid #222;
  backdrop-filter: blur(4px);
}
footer a {
  color: #0ff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* === TOGGLE BUTTON === */
.toggle-map-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.7);
  color: #0ff;
  border: 1px solid #0ff;
  border-radius: 6px;

  cursor: pointer;
  backdrop-filter: blur(6px);
}
.toggle-map-btn:hover {
  background: rgba(0, 255, 255, 0.1);
}

/* === BADGES === */
.badge-cyber {
  background: #0ff;
  color: #000;
/*   font-weight: bold; */
  border-radius: 4px;
  padding: 2px 6px;
}



    .threat-cards {
      margin-top: 1vh;
      display: flex;
      gap: 1.5rem;

      flex-wrap: wrap;
    }

    .threat-card {
      background: rgba(10, 10, 10, 0.7);
      backdrop-filter: blur(5px);
      border: 1px solid #333;
      border-left: 4px solid #0ff;
      padding: 1rem;
      width: 400px;
      border-radius: 8px;
      color: #ddd;
    }

    .threat-card h5 {
      color: #0ff;
      margin-bottom: 0.5rem;
    }

    .threat-card p {
      margin: 0;
      font-size: 0.9rem;
    }

.threat-card {
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.threat-card:hover {
  background: rgba(0, 255, 255, 0.1);
  transform: scale(1.02);
}



.text-backdrop {
  background: rgba(0,0,0,0.6);
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.text-outline {
  color: #0ff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.text-muted
{
color:#777 !important;
}

input.search-compact {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #0ff !important;
  border: 1px solid #0ff !important;
}

.search-compact::placeholder {
      color: #0ff;
      opacity: 0.6;
    }

.search-compact:focus {

  background: rgba(0, 0, 0, 0.8) !important;
      color: #0ff;
      border-color: #0ff;
      outline: none;
      box-shadow: none;
    }

  /* Reuse ip.php “cyber-glow” class for any large headings inside cards :contentReference[oaicite:12]{index=12} */
  .cyber-glow {
    color: #fff;
    text-shadow: 0 0 8px #0ff;
  }

.threat-dossier {

  color: #0ff;
}

.threat-dossier h6 {

  letter-spacing: 0.05em;
}

.progress {
  background-color: #222;
}

  .cyber-badges {
    display: flex;
    gap: 2.5rem;              /* more space between badges */
    flex-wrap: wrap;
    padding: 1rem 0;
  }
  .cyber-badge {
    display: inline-block;
    text-align: center;

  }
  .cyber-badge .icon-stack {
    position: relative;
    width: 3.5rem;            /* bigger container */
    height: 3.5rem;
    margin: 0 auto;
  }
  /* subtle base layer */
  .cyber-badge .icon-stack .bg-icon {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3.5rem;
    color: #222;
    filter: drop-shadow(0 0 2px rgba(0,255,255,0.6));
  }
  /* main icon */
  .cyber-badge .icon-stack .fg-icon {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    font-size: 2.5rem;
    color: #0ff;
    filter: drop-shadow(0 0 4px rgba(0,255,255,0.5));
  }
  .cyber-badge .badge-text {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #0ff;
    text-shadow: 0 0 2px rgba(0,255,255,0.5);
  }
  /* remove flashy flicker */
  /* hover: slight brighten */
  .cyber-badge:hover .fg-icon {
    filter: drop-shadow(0 0 6px rgba(0,255,255,0.7));
  }

.bg-purple {
  background-color: #6f42c1 !important;
  color: #fff;
}

/* Make “Login” button a bright neon-cyan outline */
.btn-outline-info {
  color: #0ff;
  border-color: #0ff;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: rgba(0,255,255,0.1);
  border-color: #0ff;
}

/* Make “Register” button solid neon-cyan */
.btn-info {
  background-color: #0ff;
  border-color: #0ff;
  color: #000;
}
.btn-info:hover,
.btn-info:focus {
  background-color: #4dd0e1;
  border-color: #4dd0e1;
  color: #000;
}

/* Make “Logout” button a neon-warning (optional) */
.btn-outline-warning {
  color: #ff9800;
  border-color: #ff9800;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: rgba(255,160,0,0.1);
  border-color: #ff8537;
  color:#ff8537;
}

.btn-outline-mild {
  color: #ffeb3b;
  border-color: #ffeb3b;
}
.btn-outline-mild:hover,
.btn-outline-mild:focus {
  background-color: rgba(255,235,59,0.1);
  border-color: #ffef67;
  color:#ffef67;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: rgba(255,0,0,0.1);
  border-color: #dc3545;
  color:#dc3545;
}


/* Separator in the navbar */
/* Make .nav-separator render a subtle vertical bar */
.nav-separator {
  display: flex;
  align-items: center;
  margin-left: 0.75rem;
  margin-right: 0.5rem;
}
.nav-separator::before {
  content: '';
  display: block;
  width: 1px;              /* bar thickness */
  height: 1.5rem;          /* adjust to roughly match navbar text */
  background-color: rgba(255,255,255,0.3); /* very faint white */
}
.nav-separator:hover::before {
  background-color: rgba(255,255,255,0.5); /* slight brighten on hover */
}



    /* This wrapper will grow to push footer down */
    .page-wrapper {
      flex: 1;
  min-height: 72vh;
    }

    /* Center the form vertically */
    .login-container {
      margin-top: 5rem;
      max-width: 400px;
      background: #1f1f1f;
      padding: 2rem;
      border-radius: 0.5rem;
      border: 1px solid #333;
      box-shadow: 0 0 8px #0ff;

   
    }
    .login-container h2 {
      color: #0ff;
      text-align: center;
      margin-bottom: 1.5rem;
      text-shadow: 0 0 4px #0ff;

    }
    .form-control {

    padding: .375rem .75rem;
    }
    .form-control:focus {
      background: #121212;
      color: #e0e0e0;
      border-color: #0ff;
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }

/* Override Chrome/Safari autofill on .form-control */
input.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill,
select.form-control:-webkit-autofill {
  /* Paint over the browser’s default autofill color */
  -webkit-box-shadow: 0 0 0px 1000px #121212 inset !important;
  box-shadow:        0 0 0px 1000px #121212 inset !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

/* Override Firefox autofill on .form-control */
input.form-control:-moz-autofill {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}


    .btn-cyber {
      background: #0ff;
      color: #000;
    /*   font-weight: 600; */
      border-radius: 0.25rem;
      width: 100%;
    }
    .btn-cyber:hover {
      background: #4dd0e1;
      color: #000;
    }
    .error-text {
      color: #ff4d4d;
      margin-bottom: 1rem;
      text-align: center;
    }
    a.register-link {
      color: #0ff;
      text-decoration: none;
    }
    a.register-link:hover {
      text-decoration: underline;
    }



    /* This wrapper will grow to push footer down */
    .page-wrapper {
      flex: 1;
  min-height: 72vh;
    }

    /* Center the form vertically */
    .login-container {
      margin-top: 5rem;
      max-width: 400px;
      background: #1f1f1f;
      padding: 2rem;
      border-radius: 0.5rem;
      border: 1px solid #333;
      box-shadow: 0 0 8px #0ff;

   
    }
    .login-container h2 {
      color: #0ff;
      text-align: center;
      margin-bottom: 1.5rem;
      text-shadow: 0 0 4px #0ff;

    }
    .form-control {

    padding: .375rem .75rem;
    }
    .form-control:focus {
      background: #121212;
      color: #e0e0e0;
      border-color: #0ff;
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }

/* Override Chrome/Safari autofill on .form-control */
input.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill,
select.form-control:-webkit-autofill {
  /* Paint over the browser’s default autofill color */
  -webkit-box-shadow: 0 0 0px 1000px #121212 inset !important;
  box-shadow:        0 0 0px 1000px #121212 inset !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

/* Override Firefox autofill on .form-control */
input.form-control:-moz-autofill {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}


    .btn-cyber {
      background: #0ff;
      color: #000;
     /* font-weight: 600;*/
      border-radius: 0.25rem;
      width: 100%;
    }
    .btn-cyber:hover {
      background: #4dd0e1;
      color: #000;
    }
    .error-text {
      color: #ff4d4d;
      margin-bottom: 1rem;
      text-align: center;
    }
    a.register-link {
      color: #0ff;
      text-decoration: none;
    }
    a.register-link:hover {
      text-decoration: underline;
    }

    /* This wrapper will grow to push footer down */
    .page-wrapper {
      flex: 1;
  min-height: 72vh;
    }

    .login-container {
      margin-top: 5rem;
      max-width: 400px;
      background: #1f1f1f;
      padding: 2rem;
      border-radius: 0.5rem;
      border: 1px solid #333;
      box-shadow: 0 0 8px #0ff;
    }
    .login-container h2 {
      color: #0ff;
      text-align: center;
      margin-bottom: 1.5rem;
      text-shadow: 0 0 4px #0ff;
    }
    .form-control {

    padding: .375rem .75rem;
    }
    .form-control:focus {
      background: #121212;
      color: #e0e0e0;
      border-color: #0ff;
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }

/* Override Chrome/Safari autofill on .form-control */
input.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill,
select.form-control:-webkit-autofill {
  /* Paint over the browser’s default autofill color */
  -webkit-box-shadow: 0 0 0px 1000px #121212 inset !important;
  box-shadow:        0 0 0px 1000px #121212 inset !important;
  -webkit-text-fill-color: #e0e0e0 !important;
}

.btn-cyber {
  background-color: #0ff !important;
  color: #000        !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.2) !important;
  /* if you had any gradients or images, you could also do: */
  background-image: none !important;
}

    .btn-cyber:hover {
      background: #4dd0e1;
      color: #000;
    }
    .error-text {
      color: #ff4d4d;
      margin-bottom: 1rem;
      text-align: center;
    }
    .success-text {
      color: #4dff4d;
      margin-bottom: 1rem;
      text-align: center;
    }
    a.login-link {
      color: #0ff;
      text-decoration: none;
    }
    a.login-link:hover {
      text-decoration: underline;
    }


.verified-badge i {
  color: #0095f6; /* Instagram blue */
  font-size: 1rem;
  margin-left: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 0 1px rgba(0, 149, 246, 0.6));
}
.verified-badge2 i {
  color: #dc3545; /* Instagram blue */
  font-size: 1rem;
  margin-left: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 0 1px rgba(0, 149, 246, 0.6));
}

@media (max-width: 768px) {
  .btn-sm.mt-3 {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 !important;
  }
}




  /* Container adjustments */
  .container.threats-overview {

    margin-top: 4rem;
  }

  /* Header (consistent with ip.php) */
  .threats-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .threats-header i {
    font-size: 3rem;
    color: #0ff;                /* Neon-cyan accent */
    text-shadow: 0 0 6px #0ff;
  }
  .threats-header h2 {

    color: #fff;
  }

  /* Tabs styling (cyber-dark, left-aligned) */
  .custom-cyber-tabs {
    background: #0d0d0d;                /* Dark panel background */
    border-bottom: 2px solid #0ff;      /* Neon-cyan underline */
    margin-bottom: 1.5rem;
  }
  .custom-cyber-tabs .nav-link {
    color: #00ffff;                     /* Neon-cyan text */
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1rem;
    font-weight: 600;
    transition: color 0.15s ease-in-out, border-bottom-color 0.15s ease-in-out;
  }
  .custom-cyber-tabs .nav-link.active {
    color: #0ff;                        /* Active tab text = neon-cyan */
    border-bottom-color: #0ff;          /* Neon-cyan underline */
    background: transparent;
  }
  .custom-cyber-tabs .nav-link:hover,
  .custom-cyber-tabs .nav-link:focus {
    color: #0ff;                        /* Hover text = neon-cyan */
  }


  /* Badge colors (consistent with ip.php) */
  .badge-danger {
    background-color: #dc3545;
  }
  .badge-warning {
    background-color: #ffc107;
  }
  .badge-dark {
    background-color: #343a40;
  }

  .badge-info {
    background-color: #0dcaf0;
  }


@media (max-width: 450px) {

.nomobile
{display:none;}

}