/* ==========================================================
   ECOCOLLECTE API DOCUMENTATION
   ========================================================== */

:root{

    --primary:#d72222;
    --primary-hover:#b91c1c;

    --bg:#161616;
    --bg-light:#1d1d1d;
    --bg-card:#202020;
    --bg-code:#101010;

    --border:#2d2d2d;

    --text:#ffffff;
    --text-light:#c7c7c7;
    --text-muted:#8f8f8f;

    --green:#22c55e;
    --blue:#3b82f6;
    --yellow:#f59e0b;
    --red:#ef4444;
    --purple:#8b5cf6;

    --radius:18px;

    --shadow:
        0 15px 40px rgba(0,0,0,.35);

    --display:'Syne',sans-serif;
    --sans:'IBM Plex Sans',sans-serif;
    --mono:'IBM Plex Mono',monospace;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:var(--sans);

    overflow-x:hidden;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

}

code,
pre{

    font-family:var(--mono);

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.35;

    background-image:

        linear-gradient(#2b2b2b 1px,transparent 1px),

        linear-gradient(90deg,#2b2b2b 1px,transparent 1px);

    background-size:45px 45px;

    z-index:-1;

}

.navbar{

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 50px;

    background:#181818;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(20px);

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo-square{

    width:34px;

    height:34px;

    border-radius:8px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-weight:bold;

}

.logo-title{

    font-size:20px;

    font-family:var(--display);

    font-weight:700;

}

.logo-sub{

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--text-muted);

}

.hero{

    padding:15px 60px;

    border-bottom:1px solid var(--border);

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    background:rgba(215,34,34,.15);

    border:1px solid rgba(215,34,34,.3);

    border-radius:50px;

    font-size:13px;

    color:#ffb4b4;

    margin-bottom:25px;

}

.hero h1{

    font-size:72px;

    font-family:var(--display);

    line-height:1;

    margin-bottom:20px;

    max-width:850px;

}

.hero h1 span{

    color:var(--primary);

}

.hero p{

    font-size:20px;

    max-width:850px;

    line-height:1.8;

    color:var(--text-light);

    margin-bottom:40px;

}

.stats{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.stat{

    background:var(--bg-card);

    padding:25px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    min-width:180px;

}

.stat-value{

    font-size:40px;

    font-family:var(--display);

    font-weight:bold;

    margin-bottom:8px;

}

.stat-label{

    font-size:13px;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:2px;

}

.layout{

    display:grid;

    grid-template-columns:

280px
minmax(700px,1fr)
420px;

    gap:35px;

    padding:40px;

    align-items:start;

}

.sidebar{

    position:sticky;

    top:95px;

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:24px;

    padding:25px;

    height:calc(100vh - 120px);

    overflow:auto;

}

.sidebar-title{

    font-size:18px;

    font-family:var(--display);

    margin-bottom:20px;

}

.sidebar-search{

    margin-bottom:25px;

}

.sidebar-search input{

    width:100%;

    padding:15px;

    border-radius:14px;

    background:#171717;

    border:1px solid var(--border);

    color:white;

    outline:none;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:12px;

    transition:.2s;

    color:var(--text-light);

}

.sidebar nav a:hover{

    background:#282828;

    color:white;

}

.documentation{

    display:flex;

    flex-direction:column;

    gap:35px;

}

.examples{

    position:sticky;

    top:95px;

    background:var(--bg-card);

    border-radius:24px;

    border:1px solid var(--border);

    padding:25px;

    height:calc(100vh - 120px);

    overflow:auto;

}

.card{

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:24px;

    padding:30px;

    box-shadow:var(--shadow);

}


.endpoint{

    padding:25px;

    border-radius:18px;

    border:1px solid var(--border);

    background:#1b1b1b;

    margin-bottom:20px;

    transition:.25s;

}

.endpoint:hover{

    border-color:#454545;

    transform:translateY(-2px);

}

.endpoint-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

    gap:20px;

}

.endpoint-left{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.endpoint-url{

    font-family:var(--mono);

    font-size:15px;

    color:#f4f4f4;

}

.http{

    padding:8px 16px;

    border-radius:12px;

    font-weight:bold;

    font-size:12px;

    font-family:var(--mono);

    color:white;

}

.http.GET{

    background:var(--blue);

}

.http.POST{

    background:var(--green);

}

.http.PUT{

    background:var(--yellow);

}

.http.DELETE{

    background:var(--red);

}

.http.PATCH{

    background:var(--purple);

}


.btn{

    padding:11px 18px;

    border-radius:12px;

    cursor:pointer;

    border:none;

    font-weight:600;

    transition:.2s;

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-dark{

    background:#2a2a2a;

    color:white;

}

.btn-dark:hover{

    background:#353535;

}


.code{

    margin-top:20px;

    background:var(--bg-code);

    border-radius:16px;

    padding:20px;

    overflow:auto;

    border:1px solid #2b2b2b;

}

.code pre{

    white-space:pre-wrap;

    color:#e7e7e7;

    font-size:14px;

    line-height:1.7;

}


@media(max-width:1500px){

    .layout{

        grid-template-columns:

260px
1fr;

    }

    .examples{

        display:none;

    }

}

@media(max-width:900px){

    .layout{

        grid-template-columns:1fr;

        padding:20px;

    }

    .sidebar{

        position:relative;

        height:auto;

    }

    .hero{

        padding:40px 25px;

    }

    .hero h1{

        font-size:46px;

    }

    .stats{

        flex-direction:column;

    }

}

.endpoint-content{

    display:grid;

    grid-template-columns:

1fr
1fr
420px;

    gap:30px;

    margin-top:30px;

    align-items:start;

}

.endpoint-doc h3{

    margin-bottom:15px;

    font-size:18px;

}

.endpoint-doc p{

    line-height:1.8;

    color:var(--text-light);

    margin-bottom:25px;

}

.doc-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.doc-list div{

    display:flex;

    justify-content:space-between;

    padding:14px;

    background:#252525;

    border-radius:12px;

}

.doc-list strong{

    color:white;

}

.doc-list span{

    color:var(--text-light);

    font-family:var(--mono);

}


.tag-list{

    display:flex;

    gap:8px;

    margin-top:20px;

    flex-wrap:wrap;

}

.tag{

    background:#2b2b2b;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-family:var(--mono);

    color:#ddd;

}

.parameter-block{

    margin-bottom:30px;

}

.parameter-block h3{

    margin-bottom:15px;

}

.parameter-table{

    width:100%;

    border-collapse:collapse;

}

.parameter-table td{

    padding:12px;

    border-bottom:1px solid #2f2f2f;

    font-size:14px;

}

.parameter-table td:first-child{

    font-family:var(--mono);

    color:white;

}

.parameter-table td:last-child{

    color:#9ecbff;

}

@media(max-width:1500px){

    .endpoint-content{

        grid-template-columns:1fr;

    }

}


.example-panel{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.example-section{

    background:#191919;

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

}

.example-title{

    padding:16px 22px;

    background:#232323;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    border-bottom:1px solid var(--border);

    font-family:var(--display);

}

.code{

    background:#101010;

    padding:20px;

    overflow:auto;

}

.code pre{

    font-size:13px;

    line-height:1.8;

    color:#d9d9d9;

}

.status-list{

    display:flex;

    flex-direction:column;

}

.status{

    display:flex;

    justify-content:space-between;

    padding:14px 20px;

    border-bottom:1px solid #2b2b2b;

}

.status:last-child{

    border-bottom:none;

}

.status span{

    font-weight:bold;

    font-family:var(--mono);

}

.status small{

    color:#bbb;

}

.success span{

    color:#22c55e;

}

.created span{

    color:#3b82f6;

}

.warning span{

    color:#f59e0b;

}

.error span{

    color:#ef4444;

}

.endpoint-row{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px;

    border-radius:18px;

    background:#1c1c1c;

    border:1px solid #2d2d2d;

    cursor:pointer;

    transition:.25s;

    margin-bottom:14px;

}

.endpoint-row:hover{

    transform:translateY(-2px);

    border-color:var(--primary);

    background:#242424;

}

.endpoint-row.active{

    background:rgba(215,34,34,.15);

    border-color:var(--primary);

}

.endpoint-main{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.endpoint-path{

    font-family:var(--mono);

    font-size:15px;

    color:white;

}

.endpoint-summary{

    font-size:13px;

    color:#9d9d9d;

    line-height:1.5;

}

.endpoint-arrow{

    color:#777;

    transition:.25s;

}

.endpoint-row:hover .endpoint-arrow{

    transform:translateX(4px);

    color:white;

}


.details-panel{

    position:sticky;

    top:95px;

    height:calc(100vh - 120px);

    background:#1d1d1d;

    border-radius:24px;

    border:1px solid #2d2d2d;

    overflow:auto;

}

.details-empty{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.details-empty i{

    font-size:52px;

    margin-bottom:20px;

    color:var(--primary);

}

.details-empty h2{

    font-family:var(--display);

    margin-bottom:15px;

}

.details-empty p{

    max-width:300px;

    line-height:1.8;

    color:#999;

}


.details-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:25px;

    border-bottom:1px solid var(--border);

}

.details-header h2{

    flex:1;

    font-size:20px;

    font-family:var(--mono);

    word-break:break-all;

}

.details-section{

    padding:24px;

    border-bottom:1px solid var(--border);

}

.details-section:last-child{

    border-bottom:none;

}

.details-section h3{

    margin-bottom:16px;

    font-family:var(--display);

    font-size:18px;

}

.details-table{

    width:100%;

    border-collapse:collapse;

}

.details-table td{

    padding:12px;

    border-bottom:1px solid #2f2f2f;

}

.copy-btn{

    position:absolute;

    top:12px;

    right:12px;

    padding:6px 12px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#2c2c2c;

    color:white;

}

.card{
    scroll-margin-top:110px;
}