/* Copyright (c) 2011 Raphaël Velt
 * Licensed under the MIT License
 * */

 body {
    font-family: Helvetica, sans-serif; font-size: 12px;
    background-color: #ffffff; color: #070e07; margin: 0;
}

.clear {
    clear: both;
}

.gradient {
    background-color: #f0f0f8; 
    background-image: -webkit-radial-gradient(#ffffff, #d8d8e0); 
    background-image: -moz-radial-gradient(#ffffff, #d8d8e0);
}

/* EN HAUT */

#titlebar {
    z-index: 1000;
    background: #ffffff; 
    border-bottom: 1px solid #CCC; 
    position: fixed; 
    margin: 0; 
    padding: 0; 
    left: 0; 
    left: 0; 
    top: 0; 
    right: 0; 
    height: 45px; 
    overflow: hidden; 
}

#maintitle {
    position: absolute; left: 0; top: 0; width: 250px; text-align: center;
}


h1 {
    margin:0;
}

h1 a {
    background: url(../img/gephi.png) no-repeat;
    color: #040504;
    display: block;
    height:45px;
    margin: 10px;
    text-indent: -9999px;
    width: 195px;
}

#searchinput {
    background: #fff url(../img/search.gif) no-repeat right;
    border: 1px solid #DDD;
    font-size: 14px; line-height: 14px; height: 18px;
    left: 250px;
    padding: 1px 4px; margin: 0;
    position: absolute;
    top: 10px;
    width: 320px;
}

#searchinput:focus, #searchinput:active {
    border-color:#aaa;
}

#searchsubmit {
    position: absolute; left: 560px; top: 13px; width: 20px; height: 20px; margin: 0; padding: 0; height: 16px; border: none; background: none; text-indent: -999px; cursor: pointer; cursor: hand;
}

.grey {
    color: #cccccc; font-style: italic;
}

/* AU CENTRE */

#zonecentre {
    position: fixed; top: 45px; bottom: 0; left: 0; right: 0; overflow: hidden;
}


#carte {
    position: absolute; left: 0px;
}

/* ZOOM IN OUT */

#ctlzoom {
    position: absolute; left: 5px; bottom: 5px; list-style: none; padding: 0; margin: 0;
}

#ctlzoom li {
    padding: 0; margin: 10px 0; width: 36px; text-align: center;
}

#zoomSliderzone {
    height: 120px;
}

#zoomMinusButton, #zoomPlusButton {
    display: block; width: 24px; height: 24px; background:url(../img/plusmoins.png);  margin: 0 auto;
}

#zoomMinusButton {
    background-position: 0 -24px;
}

#zoomMinusButton:hover {
    background-position: -24px -24px;
}

#zoomPlusButton {
    background-position: 0 0;
}

#zoomPlusButton:hover {
    background-position: -24px 0;
}

#lensButton, #edgesButton {
    display: block; width: 36px; height: 36px; background:url(../img/loupe-edges.png); margin: 0 auto;
}

#lensButton {
     background-position: -72px 0;
}

#lensButton:hover {
    background-position: -36px 0;
}

#lensButton.off {
    background-position: 0 0;
}

#lensButton.off:hover {
    background-position: -108px 0;
}

#edgesButton {
    background-position: -72px -36px;
}

#edgesButton:hover {
    background-position: -36px -36px;
}

#edgesButton.off {
    background-position: 0 -36px;
}

#edgesButton.off:hover {
    background-position: -108px -36px;
}

#zoomSlider {
    background:#fff;
    border:1px solid #aaa;
    height: 120px; margin: 0 auto;
}

/* EN BAS A GAUCHE */

#overviewzone {
    position: fixed; right: 0; bottom: 0;
    border-style: solid none none solid; border-width: 5px; border-color: #ffffff;
}

/* COLONNE DE GAUCHE */

#leftcolumn {
    position: absolute; top: 45px; bottom: 0px; left: -250px; width: 250px; background-color: rgb(250, 250, 252); box-shadow: 2px 0 2px #808090; padding: 0;
}


/* GESTION DE LA BARRE DE GAUCHE */

#unfold {
    position: absolute; top: 16px; right: -14px; width: 12px; height: 12px; background: rgb(250, 250, 252); padding: 2px 2px 2px 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 1px 1px 2px #808090;
}

#aUnfold {
    float: left; width: 12px; height: 12px; background-image: url(../img/fleches-horiz.png);
}

.leftarrow {
    background-position: -12px 0;
}

.rightarrow {
    background-position: 0 0;
}

.leftarrow:hover {
    background-position: -12px -12px;
}

.rightarrow:hover {
    background-position: 0 -12px;
}


/* ZONE GAUCHE */

#leftcontent {
    position: absolute; left: 0; top: 0; bottom: 0; right: 0; overflow: auto; list-style: none; margin: 0; padding: 0; border-top: 1px solid #cccccc; 
}

div.largepill {
    float: left; width: 16px; height: 16px; border-radius: 8px; margin: 0 5px 0 0;
}

div.smallpill {
    float: left; width: 12px; height: 12px; border-radius: 6px; margin: 0 5px 0 0;
}

#leftcontent h3 {
    font-size: 20px;
}

#leftcontent h4 {
    font-size: 14px;
}

#leftcontent h3, #leftcontent h4, #leftcontent p, #leftcontent ul {
    margin: 5px;
}

#leftcontent ul {
    list-style: none; padding: 0;
}

#leftcontent li {
    margin: 2px 0; padding: 0; font-size: 14px;
}

#leftcontent img {
    max-width: 100%;
    max-height: 300px;
}

a {
    color: #06a8de; font-weight: bold; text-decoration: none;
}

a:hover {
    color: #000080;
}

#leftcontent h3 {
    margin-left: -0.6px !important; /* Adjust value as needed */
}
/* AUTOCOMPLETE */

#autocomplete {
    position: absolute; display: none; padding: 0; margin: 0;
    border-style: none solid; border-color: #ccc; border-width: 1px;
}

#autocomplete div {
    border-bottom: 1px solid #ccc; padding: 0; margin: 0; float: left; clear: both; background: #fff;
}

#autocomplete h4 {
    float: left; width: 80px; margin: 5px; font-size: 12px;
}

#autocomplete ul {
    float: left; width: 240px; list-style: none; padding: 0; margin: 0;
}

#autocomplete li {
    display: block; margin: 0; width: 240px; padding: 6px 0; font-size: 12px;
}

#autocomplete li.a {
    color: #06a8de;
}

#autocomplete li.hover {
    background: #06a8de;
}

#autocomplete li.hover a {
    color: #ffffff;
}

#autocomplete img {
    float: left; border: 0; width: 24px; height: 24px; margin: 2px 6px;
}

/*RIGHT */


#rightlogo {
    position: absolute;
    right: 10px;
    top: 0;
    height: 45px;
    display: flex;
    align-items: center;
    z-index: 1001;
    visibility: visible !important;
}

#rightlogo img {
    max-height: 42px;
    width: auto;
    display: block !important;
}

/* About*/


.about-content {
    max-width: 800px;
    margin: 80px auto 40px;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: Helvetica, sans-serif;
}

/* Basic heading styles */
.about-content h1, .about-content h2 {
    color: #333;
}

/* Ensure ALL text has the same exact font size */
.about-content * {
    font-size: 15px !important;
    line-height: 1.6;
}

/* Headings can be larger */
.about-content h1 {
    font-size: 28px !important;
}

.about-content h2 {
    font-size: 22px !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-top: 30px;
}


/* Reset font size for everything in credits */
.credit-section, 
.credit-section * {
    font-size: 15px !important;
    font-family: Helvetica, sans-serif !important;
    line-height: 1.6 !important;
}

/* Simple spacing */
.credit-section p {
    margin-bottom: 16px;
}

/* Keep bold for names */
.credit-section strong, 
.credit-section b {
    font-weight: bold !important;
}
/* Back link styles */
.back-link {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.back-link a {
    display: inline-block;
    padding: 8px 16px;
    background-color: #06a8de;
    color: white;
    border-radius: 4px;
    text-decoration: none;
}

#aboutlink {
    position: absolute;
    left: 690px; /* Positioned after the search box with some space */
    top: 0;
    height: 45px;
    display: flex;
    align-items: center;
}

#aboutlink a {
    padding: 5px 10px;
    margin-top: 0px; /* Align vertically with search box */
    font-size: 14px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    background-color: #f8f8f8;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

#aboutlink a:hover {
    background-color: #e0e0e0;
    color: #000;
}

/* Keep the original search input position */
#searchinput {
    left: 250px; /* Original position */
}

/* Update the search input position to accommodate the About link */
#searchinput {
    left: 320px; /* Adjusted from 250px to make room for the About link */
}
/* Portrait mode with visible network and rotation suggestion */
@media (orientation: portrait) {
    /* Overlay that doesn't hide content */
    body::before {
      content: "Please rotate your device for the best experience";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      z-index: 500; /* Lower z-index to allow interaction */
      font-family: Helvetica, sans-serif; 
      font-size: 50px;
      text-align: center;
      padding: 20px;
      pointer-events: none; /* This is critical - allows clicks to pass through */
    }
    
    /* Rotation animation that doesn't block interaction */
    body::after {
      content: "";
      position: fixed;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 150px;
      margin-top: -75px;
      margin-left: -50px;
      border: 3px solid white;
      border-radius: 10px;
      animation: rotate 1.5s ease-in-out infinite;
      z-index: 501;
      pointer-events: none; /* Allow clicks to pass through */
    }
    
    @keyframes rotate {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(-90deg); }
      100% { transform: rotate(0deg); }
    }
    
    /* Make sure the network visualization is visible and properly positioned */
    #zonecentre, #carte {
      z-index: 100; /* Keep lower than overlay but visible */
      overflow-x: auto;
      overflow-y: hidden;
    }
    
    /* Ensure controls remain usable */
    #titlebar, #rightlogo, #ctlzoom, #overviewzone {
      z-index: 600; /* Higher than the overlay */
    }
  }


  /* mobile display */
@media screen and (max-width: 768px) {
    /* Prevent crazy zooming */
    html, body {
      touch-action: pan-x pan-y; /* Allow normal panning but prevent pinch zoom */
      -ms-touch-action: pan-x pan-y;
      user-scalable: no; /* Prevent user scaling/zooming */
      max-height: 100vh;
      overflow: hidden;
    }
    
    /* Keep left panel functional but optimized */
    #leftcolumn {
      width: 200px; /* Fixed width when opened */
      font-size: 12px; /* Slightly smaller font */
      transition: left 0.3s ease; /* Smooth animation */
    }
    
    /* Fix searchbar for mobile */
    #searchinput {
      width: 40vw; /* Relative width */
      max-width: 200px;
      font-size: 12px;
    }
    
    #searchsubmit {
      right: 10px;
      left: auto; /* Override absolute positioning */
    }
    
    /* Ensure zone center has proper overflow handling */
    #zonecentre {
      overflow: auto; /* Allow proper scrolling */
    }
    
    /* Prevent excessive zooming on the canvas */
    #carte {
      max-zoom: 2; /* Limit maximum zoom level */
      min-zoom: 0.5; /* Limit minimum zoom level */
    }
    
    /* Fix position of zoom controls */
    #ctlzoom {
      position: fixed; /* Use fixed position instead of absolute */
      left: 5px;
      bottom: 50px; /* Move up slightly to avoid browser chrome */
      z-index: 1000;
    }
    
    /* Keep overview zone visible but smaller */
    #overviewzone {
      max-width: 150px;
      max-height: 120px;
      z-index: 900;
    }
  }
  
/* TEAM CREDITS STYLES */
.team-credits {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.team-member {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    width: 100%;
}

.member-photo {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-right: 15px;
    object-fit: cover;
    filter: grayscale(100%);
    border: 2px solid #ccc;
}

.member-info {
    flex: 1;
}

.member-info p {
    margin: 0 0 5px 0;
}

.member-name {
    font-weight: bold;
    margin-bottom: 5px !important;
}

/* Mobile adjustments for team photos */
@media screen and (max-width: 768px) {
    .team-member {
        flex-direction: column;
    }
    
    .member-photo {
        margin-bottom: 10px;
    }
}

/* Additions to existing CSS for new content */
/* left menu - mobile only */
/* Add instruction message to left menu - mobile only */
@media screen and (max-width: 1020px) {
    #leftcontent::before {
        content: "Double-tap on the node";
        display: block;
        padding: 10px;
        background-color: #f0f0f8;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #ddd;
        color: #06a8de;
        font-size: 14px;
    }
}
/* Visualization guide styling */
.visualization-guide {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.guide-section {
    margin-bottom: 20px;
}

.guide-section h3 {
    font-size: 18px !important;
    margin-bottom: 10px;
    color: #333;
}

.guide-section p {
    margin-bottom: 10px;
}

.color-pill {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 5px;
    vertical-align: middle;
}

/* Statistics table styling */
.statistics-table {
    overflow-x: auto;
    margin: 20px 0;
}

.statistics-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px !important;
}

.statistics-table th {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: left;
    font-weight: bold;
    border: 1px solid #ddd;
}

.statistics-table td {
    padding: 8px 10px;
    border: 1px solid #ddd;
}

.statistics-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.statistics-table tr:hover {
    background-color: #f1f1f1;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .statistics-table {
        font-size: 12px !important;
    }
    
    .statistics-table th, 
    .statistics-table td {
        padding: 6px;
    }
    
    .about-content h1 {
        font-size: 24px !important;
    }
    
    .about-content h2 {
        font-size: 20px !important;
    }
}

/* Make sure the table doesn't break smaller screens */
@media screen and (max-width: 600px) {
    .statistics-table table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}