/* =========================================
   SIDEBAR / TOC (SCRIBE - tocify-wrapper)
   ========================================= */

/* Wrapper sidebar - MAIN SIDEBAR BACKGROUND */
div.tocify-wrapper,
.tocify-wrapper {
    background: linear-gradient(
        180deg,
        #128c7e 0%,
        #075e54 50%,
        #25d366 100%
    ) !important;
    color: #ecfdf5 !important;
}

/* Semua container di dalam sidebar → transparan
   supaya gradient dari parent terlihat */
div.tocify-wrapper > *,
.tocify-wrapper > *,
.tocify-wrapper .tocify-header,
.tocify-wrapper .tocify-subheader,
.tocify-wrapper #toc,
.tocify-wrapper .search,
.tocify-wrapper .lang-selector,
.tocify-wrapper .toc-footer,
div.tocify-wrapper .tocify-header,
div.tocify-wrapper .tocify-subheader,
div.tocify-wrapper #toc,
div.tocify-wrapper .search,
div.tocify-wrapper .lang-selector,
div.tocify-wrapper .toc-footer {
    background: transparent !important;
    background-color: transparent !important;
}

/* Input search */
div.tocify-wrapper input,
.tocify-wrapper input {
    background: rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

/* Placeholder */
div.tocify-wrapper input::placeholder,
.tocify-wrapper input::placeholder {
    color: rgba(255,255,255,0.7) !important;
}

/* Link menu - ALL LINKS IN SIDEBAR */
div.tocify-wrapper a,
.tocify-wrapper a,
div.tocify-wrapper .tocify-item a,
.tocify-wrapper .tocify-item a {
    color: #ecfdf5 !important;
}

/* Subheader items */
div.tocify-wrapper .tocify-item,
.tocify-wrapper .tocify-item,
div.tocify-wrapper .tocify-item.level-2,
.tocify-wrapper .tocify-item.level-2 {
    color: #ecfdf5 !important;
}

/* Hover menu */
div.tocify-wrapper a:hover,
.tocify-wrapper a:hover,
div.tocify-wrapper .tocify-item a:hover,
.tocify-wrapper .tocify-item a:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* Menu aktif */
div.tocify-wrapper .tocify-item.active > a,
div.tocify-wrapper .tocify-item.active > a:hover,
.tocify-wrapper .tocify-item.active > a,
.tocify-wrapper .tocify-item.active > a:hover {
    background-color: rgba(255,255,255,0.25) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* Footer links */
div.tocify-wrapper .toc-footer a,
.tocify-wrapper .toc-footer a,
div.tocify-wrapper ul.toc-footer a,
.tocify-wrapper ul.toc-footer a {
    color: #d1fae5 !important;
}

div.tocify-wrapper .toc-footer a:hover,
.tocify-wrapper .toc-footer a:hover,
div.tocify-wrapper ul.toc-footer a:hover,
.tocify-wrapper ul.toc-footer a:hover {
    color: #ffffff !important;
}

/* Last updated text */
div.tocify-wrapper ul.toc-footer,
.tocify-wrapper ul.toc-footer,
div.tocify-wrapper #last-updated,
.tocify-wrapper #last-updated {
    color: rgba(255,255,255,0.8) !important;
    background: transparent !important;
}

/* Language selector buttons */
div.tocify-wrapper .lang-selector button,
.tocify-wrapper .lang-selector button {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

div.tocify-wrapper .lang-selector button:hover,
.tocify-wrapper .lang-selector button:hover {
    background: rgba(255,255,255,0.25) !important;
}

div.tocify-wrapper .lang-selector button.active,
.tocify-wrapper .lang-selector button.active {
    background: rgba(255,255,255,0.3) !important;
    font-weight: 600 !important;
}

/* =========================================
   MAIN CONTENT AREA
   ========================================= */

/* Dark box (top right language selector) */
.dark-box {
    background: linear-gradient(
        135deg,
        #128c7e 0%,
        #075e54 50%,
        #25d366 100%
    ) !important;
}

.dark-box .lang-selector button {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

.dark-box .lang-selector button:hover {
    background: rgba(255,255,255,0.25) !important;
}

.dark-box .lang-selector button.active {
    background: rgba(255,255,255,0.3) !important;
    font-weight: 600 !important;
}

/* Try it out buttons */
button[id^="btn-tryout-"],
button[id^="btn-canceltryout-"],
button[id^="btn-executetryout-"] {
    border-radius: 5px !important;
    border-width: thin !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

button[id^="btn-tryout-"]:hover,
button[id^="btn-canceltryout-"]:hover,
button[id^="btn-executetryout-"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* Send Request button - WhatsApp green */
button[id^="btn-executetryout-"] {
    background: linear-gradient(135deg, #128c7e 0%, #25d366 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

button[id^="btn-executetryout-"]:hover {
    background: linear-gradient(135deg, #075e54 0%, #128c7e 100%) !important;
}

/* Cancel button */
button[id^="btn-canceltryout-"] {
    background: #e74c3c !important;
    color: #ffffff !important;
}

button[id^="btn-canceltryout-"]:hover {
    background: #c0392b !important;
}

/* Try it out button */
button[id^="btn-tryout-"] {
    background: #3498db !important;
    color: #ffffff !important;
}

button[id^="btn-tryout-"]:hover {
    background: #2980b9 !important;
}

/* Badge colors - WhatsApp themed */
.badge-green {
    background-color: #128c7e !important;
    color: #ffffff !important;
}

.badge-black {
    background: linear-gradient(135deg, #128c7e 0%, #075e54 100%) !important;
    color: #ffffff !important;
}

.badge-red {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Content headings */
.content h1,
.content h2 {
    color: #075e54 !important;
    border-bottom: 2px solid #25d366 !important;
    padding-bottom: 10px !important;
}

/* Code blocks */
pre {
    border-left: 4px solid #25d366 !important;
}

/* API endpoint forms */
form[id^="form-"] {
    border-left: 3px solid #128c7e !important;
    padding-left: 20px !important;
    margin-left: 10px !important;
}

/* Fancy heading panels */
.fancy-heading-panel {
    color: #128c7e !important;
    border-bottom: 1px solid #25d366 !important;
}