from rdigc.utils import getThemeIcon
from os.path import (dirname, join)

#NEW 4.0.0
APIHUBEAU = f"https://hubeau.eaufrance.fr/api/v2/hydrometrie/observations_tr?code_entite=%s&grandeur_hydro=%s&fields=resultat_obs,date_obs&size=%s&sort=desc"
APIHUBEAUMONTHLY = f"https://www.hydro.eaufrance.fr/stationhydro/%s/monthly_vcn3_01/statistique/visualisation-echantillon"

APIMETEO  = f"https://api.open-meteo.com/v1/forecast?latitude=%s&longitude=%s&models=%s&current=temperature_2m,apparent_temperature,precipitation,cloud_cover,wind_speed_10m,wind_direction_10m,relative_humidity_2m,rain,weather_code,is_day&timezone=Europe Berlin&past_days=2&forecast_days=1"
#MODELE ACTIF
APIMODELMETEO = "meteofrance_seamless"
#MODELES PROPOSES DANS UI_PARAMS.PY
APIMODELMETEOITEMS = {"Météo Allemande"   : {"model" : "icon_seamless", "organisme" : "DWD Germany", "legend" : "Cette API utilise les prévisions météorologiques mondiales DWD ICON et les combine avec des ICON à haute résolution.\nPrévisions pour l'Europe et l'Europe centrale. Des informations sur les modèles météorologiques DWD sont disponibles ici.\nPour ICON Global et Europe, les valeurs sont interpolées de 3 heures à 1 heure après 78 heures.\nDes données à 15 minutes seulement sont disponibles pour un petit nombre de variables météorologiques et uniquement dans Europe centrale."},
                      "Météo Américaine"  : {"model" : "gfs_seamless", "organisme" : "NOAA U.S.", "legend" : "Cette API utilise les prévisions météorologiques mondiales du NOAA GFS et les combine avec le HRRR haute résolution.\nHRRR est un modèle de rafraîchissement rapide et met à jour toutes les heures. Les données à haute résolution ne sont que disponible pour les États-Unis.\nPour les autres emplacements, seule la SFP est utilisée.\nPour les GFS, les valeurs sont interpolé de 3 heures à 1 heure après 120 heures."},
                      "Météo Française"   : {"model" : "meteofrance_seamless", "organisme" : "Météo-France", "legend" : "Cette API utilise les prévisions météorologiques mondiales pour Météo-France ARPEGE et les combine avec prévisions AROME à haute résolution.\nAROME est un modèle haute résolution de 1,5 km couvrant la France et les zones voisines.\nPour les autres emplacements, seul ARPEGE est utilisé.\nPour ARPEGE, les valeurs sont interpolé de valeurs de 3 ou 6 heures à 1 heure après 72 ou 96 heures respectivement."},
                      "Météo Italienne"   : {"model" : "italia_meteo_arpae_icon_2i", "organisme" : "ItaliaMeteo", "legend" : "Cette API donne accès au modèle ICON-2I de ItaliaMeteo-ARPAE."},                      
                      "Météo Royaume-Uni" : {"model" : "ukmo_seamless", "organisme" : "UK Met Office", "legend" : "Cette API utilise les prévisions météorologiques mondiales de l'UKMO Global 10 km et les combine avec modèle à haute résolution UKV 2 km pour le Royaume-Uni et l'Irlande.\nPour UKMO Global, les valeurs sont interpolées de 3 heures à 1 heure après 54 heures et à partir de Données de 6 heures après 144 heures."},
                      "Météo Suisse"      : {"model" : "meteoswiss_icon_ch1" , "organisme" : "MeteoSwiss", "legend" : "Cette API utilise des prévisions ICON Central Europe à haute résolution MeteoSwiss."}
                      }                      
                      
APIQUALITYAIR = f"https://air-quality-api.open-meteo.com/v1/air-quality?latitude=%s&longitude=%s&current=european_aqi"

LAYERTERRITOIRE = "Département"
LAYERTERRAIN = "Terrain_dept2A"
LAYERSTATIONS = "Stations hydrométriques"
TABLEFIELDSSTATIONS = {"CdStationH" : None, "LbStationH" : None, "CdAncieRef" : None, "SEUIL_RDI" : {}, "FILTERWITH" : None}
TIMEZONE = "Europe/Paris"
LAYERCRUES = "Occurrences de crues"
#NEW 4.0.0
LAYERWATER = "L_STRAHLER_L_02A"
TABLEFIELDSWATER = {"ID" : None, "TOPONYME" : None, "FILTERWITH" : None}
LAYERCOMMUNES = "Commune"
TABLEFIELDSCOMMUNES = {"INSEE_COM" : None, "NOM" : None, "FILTERWITH" : None}
FIELDCRUES = "OCCURRENCE"
RASTERCRUES = "_OCCURRENCES_TIFF"

NAMEGROUPRASTER = "Fonds de plan"
PATHIMGSTATIONS = join(dirname(__file__),"data/stations/") 
PATHLOCALDATA = "D:/COPIE_SERVEURS/Ref/CARTES/SCAN_25/"
PATHLOCALFOLDERSTATIONS = "D:/COPIE_SERVEURS/Ref/CARTES/SCAN_25/"
PARAMFILES = ["params", "localdata", "webdata", "wmsservers"]
TOOLTIPPARAMFILES = ["""Ce fichier stocke les paramètres définis dans les onglets "Généraux" et "Impressions" """,
          """Ce fichier stocke les ressources locales définies dans l&apos;onglet "Ressources Externes" """,
          """Ce fichier stocke les ressources web définies dans l&apos;onglet "Ressources Externes" """,
          """Ce fichier stocke les serveurs WMS définis dans l&apos;onglet "Ressources Externes" qui alimentent les ressources disponibles pour les fonds de plan via un service web"""]
        

COMMENTSSEUILRDI = {'S1' : 'Seuil<br>RDI', 'S2' : 'Seuil de<br>1er débordement', 'S3' : 'Seuil<br>critique'}
COMMENTOBSERVATIONS = {"e0" : "Evolution stable",
          "e1" : "Evolution à la baisse",
          "e2" : "Evolution à la hausse",
          "e3" : "Evolution indéterminée",
          "v0" : "Dernière valeur observée homogène sur la période",
          "v1" : "Dernière valeur observée très inférieure à la moyenne sur la période",
          "v2" : "Dernière valeur observée légèrement inférieure à la moyenne sur la période",
          "v3" : "Dernière valeur observée inférieure à la moyenne sur la période",
          "v4" : "Dernière valeur observée très supérieure à la moyenne sur la période",
          "v5" : "Dernière valeur observée légèrement supérieure à la moyenne sur la période",
          "v6" : "Dernière valeur observée supérieure à la moyenne sur la période.",
          "v99" : "Nombre d&apos;informations remontées insuffisant."}

IMAGESFORBULLETIN = {"statsStation" : "icons/statsstation.png", "viewstation" : "icons/viewstation.png",
                     "docAss" : "icons/casier.png", "temporalseries" : "icons/temporalseries.png",
                     "webAss" : "icons/webass.png", "vigicrues" : "data/logos/vigicrues.png", "hydro" : "data/logos/hydro.png",
                     "inrae" : "data/logos/inrae.png", "birdz" : "data/logos/birdz.png", "graphique" : "icons/grahique.png",
                     "tabledata" : "icons/tabledatam.png", "noservice" : "icons/viewstationw.png", "urlweb" : "icons/urlweb2.png",
                     "warning" : "icons/warning.png" }

        
FORMATSRASTER = ["ECW", "JP2", "TIF", "ASC", "SDAT"]

MAPPINGDATA = {}

GROUPSACTIONS = {"actionRisquesMt" : ["Mouvements de Terrains"],
                 "actionRisquesOh" : ["Ruptures d'OH"],
                 "actionRisquesStep" : ["STEP"],
                 "actionRisquesIcpe" : ["ICPE"],
                 "actionEnjeuxPersonnes" : ["Personnes"],
                 "actionEnjeuxReseaux" : ["Réseaux"],
                 "actionEnjeuxBiens" : ["Biens & littoral"],
                 "actionEnjeuxEcologie" : ["Ecologie et patrimoine"]
                 }

THEMATICINONDATIONS = ["Atlas Zones Inondables", "Aléa Centennal issu des PPRI 2A", "Aléa Centennal Hors étude PPRI 2A", "Point de contrôle de crues", "Pluviomètre", "Stations hydrométriques", "Grands bassins versants"]
THEMATICSUBMERSIONS = ["Atlas Zone Submersion Marine"]

LEGENDSTYLES = """
<style>
    table {border-spacing: 0px; width: 100%;}
    th, td {padding: 5px 30px 5px 30px;border-spacing: 0px;font-size: 90%;margin: 0px;}
    th {color: #000000 ;text-align: left;background-color: #ffffff; }
    th.title {color: #999999;text-align: left;background-color: #5D5D5D; border-top: 0px solid #f1f8fe;border-bottom: 0px solid #cbd2d8; border-right: 0px solid #cbd2d8;}
    td.infos {color: #000000;background-color: #FFFFFF;border-top: 1px solid #f1f8fe;border-bottom: 1px solid #cbd2d8; border-right: 1px solid #cbd2d8;}
</style>
"""

INFORMATIONSSTYLESDATA = """
<style>
    div { width:350px; color:#369; background:#ddd; border:2px solid #89a;  text-decoration:none; padding:10px 20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
    div:hover,div:focus {color:#369;background:#fff;}
    table { font-size: .8em; margin: 0 auto; width: 96%; background-color: #FFFFFF; border: solid 1px #5D1212; border-collapse: separate; border-spacing: 0; border-radius: 16px;}
    td { padding: 5px;}
    tr + tr td { border-top: solid 1px #5D1212;}
    tr:first-child td:first-child {	border-radius: 14px 0 0 0;}
    tr:first-child td:last-child { border-radius: 0 14px 0 0;}
    tr:last-child td:first-child { border-radius: 0 0 0 14px;}
    tr:last-child td:last-child {  border-radius: 0 0 14px 0;}
</style>
"""


INFORMATIONSSTYLES = """
<style>
    #information {font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;  border-collapse: collapse;  width: 100%;}
    #information td, #information th {  border: 1px solid #ddd;  padding: 8px;}
    #information tr{background-color: #c3c3c3; border: 1px solid #ddd; }
    #information tr:nth-child(even){background-color: #ddd;}
    #information tr:hover {background-color: #ddd;}
    #information th {  padding-top: 12px;  padding-bottom: 12px;  text-align: left;  background-color: #4CAF50;  color: white;}
</style>
"""

#NEW 4.0.0
STYLELABEL = "QComboBox { border-style: outset; border-radius: 3px; color: black; selection-background-color: green;}"
STYLELABELERROR = "QComboBox { border-style: outset; border-radius: 3px;  color: white; selection-background-color: red;}"

STYLECOMBOBOX = """
          QComboBox { border-style: outset; border-radius: 3px;  selection-color: black; selection-background-color: lightgray;}
          QComboBox:editable {  background-color: white; }
          QComboBox:!editable, QComboBox::drop-down:editable { font-color: black; color : black; border-left-width: 1px; border-left-color: black; border-left-style: solid; border-top-right-radius: 3px; border-right-color: black;}
          QComboBox:!editable:on, QComboBox::drop-down:editable:on {color : black; font-color: black;  }
          QComboBox:on { padding-top: 3px; padding-left: 4px; }
          QComboBox::drop-down {color: black; subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
          QComboBox::down-arrow { image: url(%s); }
          QComboBox::down-arrow:on {top: 1px; left: 1px; }
          QComboBox QAbstractItemView { border: 2px solid darkgray;  selection-background-color: lightgray; color: black; font-color: black;}
        """ % getThemeIcon("nodes_expand.png").replace("\\","/") 


STYLEMAPLAYERCOMBOBOX = """
          QgsMapLayerComboBox { border-style: outset; border-radius: 3px;  selection-color: black; selection-background-color: lightgray;}
          QgsMapLayerComboBox:editable {  background-color: white;}
          QgsMapLayerComboBox:!editable, QgsMapLayerComboBox::drop-down:editable { font-color: black; color : black; border-left-width: 1px; border-left-color: black; border-left-style: solid; border-top-right-radius: 3px; border-right-color: black;}
          QgsMapLayerComboBox:!editable:on, QgsMapLayerComboBox::drop-down:editable:on {color : black; font-color: black;  }
          QgsMapLayerComboBox:on { padding-top: 3px; padding-left: 4px; }
          QgsMapLayerComboBox::drop-down {color: black; subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
          QgsMapLayerComboBox::down-arrow { image: url(%s); }
          QgsMapLayerComboBox::down-arrow:on {top: 1px; left: 1px; }
          QgsMapLayerComboBox QAbstractItemView { border: 2px solid darkgray;  selection-background-color: lightgray; color: black; font-color: black;}
        """ % getThemeIcon("nodes_expand.png").replace("\\","/")           
  

#NEW 4.0.0
HTMLSTATISTICS = """
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta name="synoptic" content="width=device-width, initial-scale=1.0" />
    <title>Tableau de bord Synoptique</title>
    <style>
:root {
  --dark-blue: #0e1635;
  --light-blue: #1C6EA4;
/*--low-blue: #D0E4F5;*/
  --low-blue: #17D8FF; 
  --middle-blue : #11A4C1;
  --high-blue : #095868;
  --blue: #6374e3;
  --ocean-blue: #0F3D5C;
  --gray: #949ab0;
  --light: #f0f6f8;
  --good-green: #65d6ac;
  --bad-red: #f1879f;
  --main-font-size: 16px; /*18*/
  --number-font-size: 14px; /* 22*/ 
  --number-font-small-size: 13px; /* 22*/   
  --smaller-font-size: 12px; /*16*/
 }
 
.month-info {margin-top: 10px; padding: 5px;}
.month-info-box {color: var(--dark-blue); font-weight: 600; padding: 10px;}
.month-bar-light {margin-top: -15px; margin-left: -15px; background-color: var(--low-blue);}
.month-bar-middle {margin-top: -15px; margin-left: -15px; background-color: var(--middle-blue);}
.month-bar-high {margin-top: -15px; margin-left: -15px; background-color: var(--high-blue);}
.month-bar-light-back {margin-top: -15px; margin-left: -15px; background-color: #2E76F2;}

/* Util Classes */
.box {width: 100%; padding: 20px; position: relative;}
.box-title {font-size: var(--main-font-size); font-weight: normal; padding-bottom: 10px;}
.box-footer {position: absolute; bottom: 1%;}
.box-footer a {text-decoration: none; color: var(--gray); text-transform: uppercase; display: flex; flex-direction: row; align-items: center; font-weight: 500;}
.box-footer a img {padding-left: 10px;}
.selected-tab {font-weight: 700; border-bottom: 2px solid var(--dark-blue);}
.float-right {float: right;}
.number-fs {font-size: var(--number-font-size);}
.infos-fs {font-size: var(--number-font-small-size);}
.main-layout.active {pointer-events: none; opacity: 0.4;}

.toolbar {border: 2px solid grey; border-radius: 5px; background-color: #ffffcc;}
.div-img{justify-content: center; align-items: center; display:flex; padding-top:20%;}
.imgFlash{transition: transform .2s; width: 30px; height: 30px; margin:0 auto; background-color: rgb(173, 173, 237); 
		  border-radius: 5px; border: 1px solid white; vertical-align : middle ;}
.imgFlash:hover{transform:scale(5.0);}
.imgWithout{cursor: not-allowed; transition: transform .2s; width: 30px; height: 30px; margin:0 auto; background-color: rgb(173, 173, 237); 
		  border-radius: 5px; border: 2px solid red; vertical-align : middle ;}
.imgWithout:hover{transform:scale(1.0); filter : grayscale(80%);}
.post-content-wrapper{padding:20px;margin-bottom:2em;position:relative;max-width:820px;margin-left:auto;margin-right:auto;border-width:1px; border-style:solid; border-color:#000000;background-color:#ffffff;border-radius:var(--rounded);box-sizing:border-box}
</style>    
"""
HTMLGRAPHICSJS = """
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
  </head>
"""

#NEW 4.0.0
HTMLSTYLESSTATISTICS = """
<style>
@media print {
   * {-webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
       color-adjust: exact !important;   /*Firefox*/}
   @page {size: portrait; size: A4;}
   @page :left { margin-left: 3cm;}
   @page :right { margin-left: 3cm;}
    .tableFixHeaderChiffres {width:90%;  display : border-bottom: 2px solid blue; font-size:12px;}
    .tableFixHead {display : table; page-break-inside: avoid;}
    .tableFixHead table {width: 90%;}
    .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
    .tableFixHead tr.titleStation {background-color:#1C6EA4; color: white; text-align : left; margin-left: 2px; font-size:20px;}
    .tableFixHead tr td.texte1 { text-align : left; width: 15%; font-size:14px;}
    .tableFixHead tr td.indicateur1 { text-align : center; width: 15%; font-size:14px;}
    .tableFixHead tr td.indicateur2 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.indicateur3 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.indicateur4 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.indicateur5 { text-align : center; width: 10%; font-size:14px;}
    .tableFixHead tr td.texte7 { text-align : left; width: 50%; font-size:12px;}

}

.toolbar {border: 1px solid grey; border-radius: 5px;}
.toolbartd {width: 18px;}
.toolbartdStation {text-align: left; width: 50%;}

menu {display: flex; list-style: none; padding: 0;}
button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}

/*TO KEEP */
.box-infos {width: 90%; font-size: 12px; font-weight: normal; padding-bottom: 10px;}
.tableFixHeaderChiffres {width:90%;  display : border-bottom: 2px solid blue; font-size:12px;}
.tableFixHeader {width:90%;  display : inline-block; overflow: auto; height: 101px; border-bottom: 2px solid blue; font-size:12px;}
.tableFixHead tr.titleStation {background-color:#1C6EA4; color: white; text-align : left; margin-left: 2px; font-size:20px;}
.tableFixHeader thead th.texte1 { text-align : left; width: 100%; font-size:14px;}
.tableFixHeader thead th.indicateur1 { text-align : center; width: 15%; font-size:14px;}
.tableFixHeader thead th.indicateur2 { text-align : center; width: 8%; font-size:14px;}
.tableFixHeader thead th.indicateur3 { text-align : center; width: 10%; font-size:14px;}
.tableFixHeader thead th.indicateur4 { text-align : center; width: 10%; font-size:14px;}
.tableFixHeader thead th.indicateur5 { text-align : center; width: 10%; font-size:14px;}
.tableFixHeader thead th.texte7 { text-align : left; width: 50%; font-size:12px;}

@media screen {
    .tableFixHead {width:90%; display : inline-block; overflow: auto; height: 650px; border-bottom: 2px solid blue;}
    .tableFixHead table {width: 100%;}
    .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
    .tableFixHead tr td.texte1 { text-align : left; width: 10%;}
    .tableFixHead tr td.indicateur1 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur2 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur3 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur4 { text-align : center; width: 10%;}
    .tableFixHead tr td.indicateur5 { text-align : center; width: 10%;}
    .tableFixHead tr td.texte7 { text-align : left; width: 50%;}
}
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     {background-color : #3498db; color: white;}
th.titleStation {background-color:#1C6EA4; color: white;}

/*END TO KEEP */

.statistics {border-collapse: collapse; width: 100%; margin-left: 15px;}
.seuils {border-collapse: collapse; width: 100%; margin-left: 85px;}
.graphes {width : 90%; border: 2px solid orange; border-radius: 10px; box-shadow: 0px 5px 14px 0px #0e1635; margin-left: 75px;}
.stations {width : 90%; min-height: 300px; height: 300px; border-radius: 10px; color: #f0f6f8; background-color: #1C6EA4; box-shadow: 0px 5px 14px 0px #0e1635;}
.stations td.stationView {width : 25%; text-align : left;}
.stations td.stationNoView {width : 25%; text-align : left; cursor : not-allowed;}
.cellStation {text-align : right; background-color: #ECECEC;}
.cellCommentaires {text-align : justify; width :25%; font-size: 12px;}
.rowStation {background-color: #85F2EE; height: 200px;}
tbody th {padding: 4px 15px 4px 0px ; text-align: right ;}
tbody td {border: 1px solid #cccccc ; padding: 8px 15px 8px 15px ; text-align: center ;}
.rotated-th {height: 110px ; position: relative ; }
.rotated-th__label {bottom: 5px ; left: 50% ; position: absolute ; transform: rotate( -45deg ); transform-origin: center left ; white-space: nowrap ;}
.ruban {background: #b1c70d; height: 50px; width: 90%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55); z-index: 100;}
.ruban h2 {font-size: 25px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); text-align: center; margin:10px;}
.ruban_gauche {border-color: transparent #7e9202 transparent transparent; border-style: solid; border-width:15px; height:0px; width:0px; position: relative; left: 4%;
               top: 65px; z-index: 99;}
.stat-box {padding: 5px; width: 100%; color: var(--dark-blue); background-color: #FFFFCC; border-radius: 10px; max-height: 100%; 
           border: 1px solid var(--gray); padding: 20px; border-bottom: 1px solid var(--gray);}
           
summary.elite {display: block; position: relative; background : cyan; font-size: 18px; height: 30px; border: 2.5px inset grey; padding: 6px; cursor: pointer; transform: scaleX(-1);}
summary.elite b {display: inline-block; position: absolute; right: 6px; transform: scaleX(-1);}
summary.elite::after {margin-left: 1ch; display: inline-block; content: '🔽'; transform: rotate(90deg);}
details > summary.elite {list-style-type: none;}
details > summary.elite::-webkit-details-marker {display: none;}
details[open] > summary.elite::after {content: '🔽'; transform: rotate(0deg);transition: 0.2s;}

details.normal {width: 65%; margin: 0 auto ; margin-bottom: .5rem;  box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);  border-radius: 5px;  overflow: hidden;}
summary.normal {padding: 1rem;  display: block;  background: #1C6EA4; color: white; font-size : 16px;font-weight: bold; padding-left: 2.2rem;  position: relative; cursor: pointer;  user-select: none;}
summary.normal:before {content: ''; border-width: .4rem;  border-style: solid; border-color: transparent transparent transparent #fff; position: absolute; top: 1.3rem; left: 1rem; transform: rotate(0);
                       transform-origin: .2rem 50%; transition: .25s transform ease;}
details.normal[open] > summary:before {transform: rotate(90deg);}
details.normal summary.normal::-webkit-details-marker {display:none;}
details.normal > table {padding-bottom: 1rem; margin-bottom: 0;}

img.icon {width: 24px; height: 24px; vertical-align:middle}
img.iconLegend {width: 18px; height: 18px; vertical-align:middle}
img.iconLegend:hover{transform:scale(1.5);}
</style>
          """

HTMLSTYLESMETEO = """
:root { --muted:#6c757d;}
menu {display: flex; list-style: none; padding: 0;}
button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}

td, th {text-align: center;}
table.blueTable {border: 0px solid #1C6EA4; background-color: #EEEEEE; width: 90%; text-align: left; border-collapse: collapse;}
table.blueTable td , table.blueTable th { border: 0px solid #AAAAAA; padding: 3px 2px; text-align: center;}
table.blueTable td.entite, th.entite {text-align: left; margin-left: 20px; padding : 5px;}
table.blueTable th { font-size: 1.25vmin;
  appearance: none;
  background: linear-gradient(45deg, #99ccFF 90%, #1C6EA4 10%) 50% 50% / 80% 20% no-repeat, #3B56A4; width: 50em;
  height: 5em; aspect-ratio: 7/2; border-radius: 1.5em; box-shadow:  inset 0 -0.3em 0.4em -0.2em #fff2,
    inset 0 0.25em 0.5em #0001, inset 0 0.25em 0.5em #0001, inset 0 0 0 0.25em #99ccFF; transform: translate(-0%, -0%);
  transform-style: preserve-3d; perspective: 250em; font-family: Arial, Helvetica, sans-serif; font-weight: bold}
table.blueTable tbody td {font-size: 13px;}
table.blueTable tr:nth-child(even) {background: white;}
table.blueTable thead {background: #1C6EA4;background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;}
table.blueTable thead th {font-size: 15px; font-weight: bold; color: #FFFFFF; border-left: 2px solid #D0E4F5;}
table.blueTable thead th:first-child { border-left: none;}
table.blueTable tfoot {font-size: 14px;font-weight: bold;color: #FFFFFF;background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.blueTable tfoot td {font-size: 14px;}
table.blueTable tfoot .links {text-align: right;}
table.blueTable tfoot .links a{display: inline-block;background: #1C6EA4;color: #FFFFFF; padding: 2px 8px; border-radius: 5px;}

.hint { font-size:12px; color: var(--muted); }
img.icon {width: 24px; height: 24px; vertical-align:middle}    
.arrow {margin-bottom: 60px; --t: 55%; --h: 30%; aspect-ratio: 10/5; width: 20px; background: black;
       clip-path: polygon(0 calc(50% - var(--t)/2), calc(100% - var(--h)) calc(50% - var(--t)/2),
       calc(100% - var(--h)) 0, 100% 50%, calc(100% - var(--h)) 100%, calc(100% - var(--h)) calc(50% + var(--t)/2), 0 calc(50% + var(--t)/2));}
\n"""


HTMLSTYLESGRAPHICS = """\n<style>
.toolbar {border: 1px solid grey; border-radius: 5px;}
menu {display: flex; list-style: none; padding: 0;}
button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}

.box-title {font-size: 16px; font-weight: normal; padding-bottom: 10px;}
.summaryTheme {cursor: pointer; text-align : left; margin-left : 10px; color : white; background: #b1c799;
               height: 25px; width: 89%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55);}
.graphes {width : 90%; border: 2px solid orange; border-radius: 10px; box-shadow: 0px 5px 14px 0px #0e1635; margin-left: 75px;}
.ruban {background: #b1c70d; height: 50px; width: 90%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55); z-index: 100;}
.ruban h2 {font-size: 25px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); text-align: center; margin:10px;}
.ruban_gauche {border-color: transparent #7e9202 transparent transparent; border-style: solid; border-width:15px; height:0px; width:0px; position: relative; left: 4%;
               top: 65px; z-index: 99;}
.stat-box {padding: 5px; width: 100%; color: var(--dark-blue); background-color: #FFFFCC; border-radius: 10px; max-height: 100%; 
           border: 1px solid var(--gray); padding: 20px; border-bottom: 1px solid var(--gray);}
          </style>\n
          """

HTMLSTYLESPROFILS = """\n<style>
.toolbar {border: 1px solid grey; border-radius: 5px;}
menu {display: flex; list-style: none; padding: 0;}
button {display:inline-block; background-color:#fff; border:#666 1px solid; margin:2px; font-size:24px; cursor:pointer; width:32px; height:32px; border-radius:50%;}
button:hover {background-color:#b5e61d; color:#ccc; box-shadow:3px 8px #888;}

.box-title {font-size: 16px; font-weight: normal; padding-bottom: 10px;}
.summaryTheme {cursor: pointer; text-align : left; margin-left : 10px; color : white; background: #b1c799;
               height: 25px; width: 89%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55);}
.graphes {width : 80%; border: 2px solid orange; border-radius: 10px; box-shadow: 0px 5px 14px 0px #0e1635; margin-left: 5px;}
.ruban {background: #b1c70d; height: 50px; width: 90%; position: relative; left: 5%; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0,0,0,0.55); z-index: 100;}
.ruban h2 {font-size: 25px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); text-align: center; margin:10px;}
.ruban_gauche {border-color: transparent #7e9202 transparent transparent; border-style: solid; border-width:15px; height:0px; width:0px; position: relative; left: 4%;
               top: 65px; z-index: 99;}
.stat-box {padding: 5px; width: 100%; color: var(--dark-blue); background-color: #FFFFCC; border-radius: 10px; max-height: 100%; 
           border: 1px solid var(--gray); padding: 20px; border-bottom: 1px solid var(--gray);}
          </style>\n
          """  
