html {
  font-size: 14px;
}

html, body{
    height:100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.scrollparent{
    height:calc(100%);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  /*margin-bottom: 60px;*/
}

@media (min-width: 1200px) {
    .container {
        max-width: 1500px; /* adapte à ta convenance */
    }
}

/* Documentation */
/* Conteneur du code */
.code-window {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Segoe UI Mono", "Roboto Mono", "Noto Mono", monospace;
    background: linear-gradient(180deg, #0f1724 0%, #071022 100%);
    color: #e6eef6;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(2,6,23,0.6);
    max-width: 720px;
    margin: 18px 0px;
    line-height: 1.5;
    font-size: 14px;
    overflow-x: auto;
}

pre.http {
    margin: 0;
    white-space: pre-wrap; /* garde le format mais permet le wrap si petit écran */
    word-break: break-word;
    color:white;
}

pre.json {
    margin: 0;
    white-space: pre-wrap; /* garde le format mais permet le wrap si petit écran */
    word-break: break-word;
    color: white;
}
pre code {
    display: block;
    padding: 16px;
    border-radius: 8px;
    background: #0f1724; /* fond sombre */
    color: #e6eef6; /* couleur de base */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Segoe UI Mono", "Roboto Mono", "Noto Mono", monospace;
    font-size: 14px;
    line-height: 1.5;
    text-align: left; /* aligné à gauche */
    white-space: pre; /* préserve l’indentation du JSON */
    overflow-x: auto; /* scroll horizontal si besoin */
}

/* Catégories de token */
.http-method {
    color: #7ee787;
    font-weight: 700;
}
/* POST */
.http-path {
    color: #9ad1ff;
}
/* /connect/token */
.header-name {
    color: #ffd580;
}
/* Content-Type */
.header-sep {
    color: #c9d1d9;
}
/* : */
.header-val {
    color: #ffb3c6;
}
/* application/x-www-form-urlencoded */
.field-name {
    color: #ffd580;
}
/* username, password, ... */
.equals {
    color: #c9d1d9;
}
/* = */
.field-val {
    color: #bde0ff;
    font-weight: 600;
}
/* john.doe..., Secret123! */
.amp {
    color: #7aa2ff;
}
/* & visual cue for separator */
.comment {
    color: #6b7280;
    font-style: italic;
}
/* commentaires éventuels */

/* small helper (legend) */
.legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    opacity: 0.9;
}

    .legend .item {
        display: flex;
        gap: 6px;
        align-items: center;
    }

.chip {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 0 1px 0 rgba(0,0,0,0.25) inset;
}

    .chip.method {
        background: #7ee787;
    }

    .chip.path {
        background: #9ad1ff;
    }

    .chip.hname {
        background: #ffd580;
    }

    .chip.hval {
        background: #ffb3c6;
    }

/* Responsive tweaks */
@media (max-width:420px) {
    .code-window {
        font-size: 13px;
        padding: 14px;
    }
}

/* Mise en forme JSON (si tu ajoutes des spans ou via un parseur JS plus tard) */
.json-key {
    color: #ffd580;
}
/* les clés "xxx" */
.json-string {
    color: #bde0ff;
}
/* les valeurs chaîne */
.json-number {
    color: #ffb3c6;
}
/* les nombres */
.json-bool {
    color: #7ee787;
}
/* true / false */
.json-null {
    color: #9ca3af;
    font-style: italic;
} 

.json-comment{
    color:green;
        font-size:15px;
}


/* Couleur principale */
.btn-primary {
    background-color: #ffa354 !important;
    border-color: #ffa354 !important;
}

    .btn-primary:hover {
        background-color: #e68f42 !important; /* un peu plus foncé pour le hover */
        border-color: #e68f42 !important;
    }

.btn-outline-primary {
    /*background-color: #ffa354 !important;*/
    border-color: #ffa354 !important;
}

    .btn-outline-primary:hover {
        background-color: #e68f42 !important; /* un peu plus foncé pour le hover */
        border-color: #e68f42 !important;
    }


/* Badges et autres éléments */
.bg-primary {
    background-color: #ffa354 !important;
}

.text-primary {
    color: #ffa354 !important;
}

.border-primary {
    border-color: #ffa354 !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #ffa354 !important;
    color: #fff !important; /* texte lisible */
}

.nav-link {
    color: #e65100; /* couleur lisible sur bg-light */
}

    .nav-link:hover,
    .nav-link:focus,
    .nav-link.active {
        color: #d35400; /* plus foncé pour hover / actif */
    }

.page-item.active .page-link {
    background-color: #ffa354;
    border-color: #ffa354;
}


.pagebuilditem{
    box-sizing:border-box;
    border:0px solid;
}

/*

    <div id="mainpage" class="pagebuilditem">
        <div id="topbar" class="pagebuilditem">

        </div>
        <div id="content">
            <div id="sidebar" class="pagebuilditem">
            </div>
            <div id="maincontent" class="pagebuilditem">
            </div>
        </div>
    </div>

*/

#mainpage {
    height:100%;
    border-color:green;
}

:root {
    --topbar-height: 57px;
}

#topbar {
    height: var(--topbar-height);
    border-color: red;
    /*background: grey;*/
}

#content {
    height: calc(100% - var(--topbar-height));
}

#sidebar {
    border-color: blue;
    height: 100%;
    width: 250px;
    float:left;
    /*background:#eee;*/
}

#maincontent {
    border-color: yellow;
    height: 100%;
    width: calc(100% - 250px);
    float: left;
    background: #fefefe;
    overflow-y:scroll;
}

#scrollable-content {
    scroll-padding-top: 15px;
}