/* ==================================================
   XANA
   eXtended Avian Nest Analyzer
================================================== */

:root{
    --bg1:#4b174f;
    --bg2:#7a1633;

    --card:rgba(255,255,255,0.08);
    --card-hover:rgba(255,255,255,0.12);

    --orange:#ffb300;
    --green:#00c853;
    --green-hover:#00e676;

    --white:#ffffff;
    --shadow:0 15px 30px rgba(0,0,0,.45);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:20px;

    font-family:"Segoe UI", Arial, sans-serif;

    background:linear-gradient(
        135deg,
        var(--bg1),
        var(--bg2)
    );

    color:white;
    min-height:100vh;
}

/* ==================================================
   TITRE
================================================== */

h1{
    text-align:center;
    font-size:42px;
    color:var(--orange);
    letter-spacing:2px;
    margin-bottom:5px;
}

h3{
    color:#ffd166;
    margin-top:0;
}

/* ==================================================
   CONTENEUR PRINCIPAL
================================================== */

.tabs{
    width:95%;
    max-width:1600px;
    margin:auto;

    background:rgba(255,255,255,0.05);

    border-radius:20px;

    backdrop-filter:blur(10px);

    box-shadow:var(--shadow);
}

/* ==================================================
   ONGLETS
================================================== */

.tab-buttons{
    display:flex;
    flex-wrap:wrap;

    background:rgba(0,0,0,.15);
}

.tab-btn{
    flex:1;

    min-width:160px;

    padding:18px;

    border:none;

    background:transparent;

    color:white;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;
}

.tab-btn:hover{
    background:rgba(255,255,255,.08);
}

.tab-btn.active{
    background:white;
    color:#222;
}

.tab-content{
    display:none;
    padding:25px;
}

.tab-content.active{
    display:block;
}

/* ==================================================
   CARTES
================================================== */

#wrapperTableRace,
#wrapperCreateRace,
#wrapperDeleteRace,
#divCreatePoule,
#wrapperDeletePoule,
#statsUI,
#filters{

    background:var(--card);

    border-radius:16px;

    padding:20px;

    box-shadow:var(--shadow);

    margin-bottom: 20px;
}

#wrapperCreateRace:hover,
#wrapperDeleteRace:hover,
#wrapperTableRace:hover,
#wrapperDeletePoule:hover,
#divCreatePoule:hover{
    background:var(--card-hover);
}

/* ==================================================
   RACES
================================================== */

#raceFlex{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

#wrapperTableRace{
    min-width:250px;
}

#wrapperRaceManager{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ==================================================
   FORMULAIRES
================================================== */

.formRow{
    display:flex;
    flex-direction:column;

    margin-bottom:15px;
}

.formRow label{
    margin-bottom:5px;
    font-weight:bold;
}

input,
select{

    padding:12px;

    border:none;

    border-radius:10px;

    background:white;

    color:#333;

    font-size:15px;
}

input:focus,
select:focus{
    outline:none;
    box-shadow:0 0 10px rgba(255,255,255,.4);
}

/* ==================================================
   BOUTONS
================================================== */

button,
.btnOK{

    padding:12px 25px;

    border:none;

    border-radius:30px;

    background:var(--green);

    color:white;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;
}

button:hover,
.btnOK:hover{

    background:var(--green-hover);

    transform:translateY(-2px);

    box-shadow:
        0 10px 20px rgba(0,0,0,.4);
}

/* ==================================================
   TABLEAUX
================================================== */

table{
    width:100%;
    border-collapse:collapse;
}

th{
    background:#3aa8a8;

    color:white;

    padding:12px;

    text-align:center;
}

td{
    padding:10px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.15);
}

tr:hover{
    background:rgba(255,255,255,.08);
}

/* ==================================================
   CHECKBOXES
================================================== */

#chickenCheckboxContainer,
#raceCheckboxContainer{

    background:rgba(255,255,255,.05);

    border-radius:12px;

    padding:15px;

    max-height:250px;

    overflow-y:auto;
}

input[type="checkbox"]{
    transform:scale(1.2);
}

/* ==================================================
   GRAPHIQUES
================================================== */

canvas{

    margin-top:15px;
    margin-bottom:40px;

    background:white;

    border-radius:15px;

    padding:10px;

    box-shadow:var(--shadow);
}

/* ==================================================
   STATS
================================================== */

#statsUI{
    margin-top:25px;
}

#filters{
    margin-top:20px;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:1000px){

    #raceFlex{
        flex-direction:column;
    }

    .tab-buttons{
        flex-direction:column;
    }

    .tab-btn{
        width:100%;
    }
}

.chartsGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
    gap:25px;
    margin-top:30px;
}

.chartCard{
    background:rgba(255,255,255,.08);
    padding:20px;
    border-radius:16px;
    box-shadow:var(--shadow);
}

.filterGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.debugCard,
.backupCard{
    background:rgba(255,255,255,.08);
    padding:20px;
    border-radius:16px;
    box-shadow:var(--shadow);
}

h4{
    color:#ffd166;
    margin-top:0;
}

#acronyme{
    text-align:center;
    margin-top:0;
    margin-bottom:40px;
    opacity:.85;
}

canvas {
    width: 100%;
    height: 500px !important;
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 10px;
    pointer-events: auto;
}


header {
    position: relative;
    text-align: center;
    padding: 40px 20px;
    overflow: hidden;
}

/* logo en arrière-plan */
header {
    position: relative;
    text-align: center;
    padding: 40px 20px;
    overflow: hidden;
}

/* LOGO BACKGROUND */
header::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 320px;
    height: 320px;

    background: url("logo.png") no-repeat center;
    background-size: contain;

    transform: translate(-50%, -50%);

    opacity: 0.10;
    z-index: 0;
    pointer-events: none;

    animation: logoPulse 4s ease-in-out infinite;
}

/* TEXTE AU-DESSUS */
header h1,
header p {
    position: relative;
    z-index: 1;
}

/* ANIMATION PULSE */
@keyframes logoPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.08;
        filter: blur(0px);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.16;
        filter: blur(0.5px);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.08;
        filter: blur(0px);
    }
}