/* /docs page — minor styles that complement the Tailwind classes in docs.blade.php */

/* Active tab indicator — shared by language tabs + example-response tabs */
.lang-tab.active-tab,
.example-tab.active-tab {
    color: #4F7CFF;
    border-bottom-color: #4F7CFF;
}
.dark .lang-tab.active-tab,
.dark .example-tab.active-tab {
    color: #a5b4fc;
    border-bottom-color: #818CF8;
}

/* Endpoint header chevron rotates when card is open */
.endpoint-card.is-open .endpoint-chevron {
    transform: rotate(180deg);
}

/* Response status pill colors */
.response-status.status-ok {
    background: rgba(16, 185, 129, .12);
    color: #10b981;
}
.response-status.status-err {
    background: rgba(239, 68, 68, .12);
    color: #ef4444;
}
.response-status.status-pending {
    background: rgba(99, 102, 241, .12);
    color: #818cf8;
}

/* API-key status pill — driven by JS so we hand-roll the colors here
   (Tailwind v4 doesn't scan public/js/, so utility classes get purged). */
#docs-apikey-status.apikey-anonymous {
    background: rgba(100, 116, 139, .12);
    color: #64748b;
}
.dark #docs-apikey-status.apikey-anonymous {
    background: rgba(148, 163, 184, .10);
    color: #94a3b8;
}
#docs-apikey-status.apikey-valid {
    background: rgba(16, 185, 129, .14);
    color: #059669;
}
.dark #docs-apikey-status.apikey-valid {
    background: rgba(16, 185, 129, .15);
    color: #34d399;
}
#docs-apikey-status.apikey-invalid {
    background: rgba(239, 68, 68, .14);
    color: #dc2626;
}
.dark #docs-apikey-status.apikey-invalid {
    background: rgba(239, 68, 68, .15);
    color: #f87171;
}

/* Tighter monospace inside code blocks */
pre.lang-block,
pre.response-content,
pre.report-poll-content,
pre.quickstart-code {
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    tab-size: 2;
}

/* Copy-button "copied!" flash */
.copy-btn.copied {
    color: #10b981 !important;
}

/* Response image fallback (og-image / country-map) */
.response-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0 auto;
    background: #fff;
}

/* Make path-template tokens visually distinct in the header */
.endpoint-card code {
    word-break: break-all;
}

/* Integer inputs: red border when value is below min / above max / NaN.
   :invalid pseudo-class is automatic when min/max/pattern/required don't pass. */
.docs-int-input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
    background: rgba(239, 68, 68, .05);
}
.dark .docs-int-input:invalid:not(:placeholder-shown) {
    border-color: #f87171;
    background: rgba(239, 68, 68, .08);
}

/* ─── Region picker ──────────────────────────────────────────────── */
.region-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.3rem 0.1rem 0.5rem;
    background: rgba(99, 102, 241, .10);
    border: 1px solid rgba(99, 102, 241, .25);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    color: #4338ca;
    line-height: 1.2;
}
.dark .region-chip {
    background: rgba(129, 140, 248, .12);
    border-color: rgba(129, 140, 248, .30);
    color: #c7d2fe;
}
.region-chip-remove {
    cursor: pointer;
    width: 14px; height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #6366f1;
    font-size: 13px;
    line-height: 1;
    transition: background .12s, color .12s;
}
.dark .region-chip-remove { color: #a5b4fc; }
.region-chip-remove:hover {
    background: rgba(220, 38, 38, .15);
    color: #dc2626;
}
.dark .region-chip-remove:hover { color: #f87171; }

/* Country option button inside the dropdown */
.region-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.625rem;
    text-align: left;
    font-size: 11px;
    color: #334155;
    transition: background .1s;
}
.dark .region-option { color: #cbd5e1; }
.region-option:hover:not(:disabled) {
    background: rgba(99, 102, 241, .08);
}
.dark .region-option:hover:not(:disabled) {
    background: rgba(129, 140, 248, .10);
}
.region-option:disabled {
    opacity: .4;
    cursor: default;
}
.region-option-code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 10px;
    color: #94a3b8;
    width: 22px;
}
.region-option-nodes {
    font-size: 10px;
    color: #94a3b8;
}
.region-continent-header {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    padding: 0.5rem 0.625rem 0.2rem;
    background: rgba(241, 245, 249, .5);
}
.dark .region-continent-header {
    background: rgba(7, 26, 31, .5);
    color: #64748b;
}
.region-continent-header:first-child { padding-top: 0.2rem; }