/* Bodek API — site-specific styles only.
   Navbar, logo, app grid, buttons, dropdowns, form inputs, footer and the design tokens come from
   /shared/bodek.css (loaded before this file). Nothing here uses inline styles: the CSP forbids them. */
:root { --bt-accent: var(--bd-accent); --bt-radius: var(--bd-radius-md); }
:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
    --bt-bg: var(--bd-bg); --bt-surface: var(--bd-surface); --bt-surface-2: var(--bd-surface-2);
    --bt-border: var(--bd-border); --bt-muted: var(--bd-muted);
}
[data-bs-theme="dark"]  { --bt-border: #2f2f33; --bs-body-bg: #121212; --bs-body-color: #e0e0e0; --bt-code-bg: #16181d; }
[data-bs-theme="light"] { --bs-body-bg: #f4f6fa; --bs-body-color: #1a1a1a; --bt-code-bg: #f3f5f9; }

body { -webkit-font-smoothing: antialiased; }
.text-secondary { color: var(--bt-muted) !important; }

/* Avatars rendered by header.php + account-switch.js */
.bt-av { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bt-av-24 { width: 24px; height: 24px; line-height: 24px; font-size: .8rem; }
.bt-av-32 { width: 32px; height: 32px; line-height: 32px; }
.bt-av-40 { width: 40px; height: 40px; line-height: 40px; font-size: 1.1rem; }
@media (max-width: 767px) { .bf-navbar .bt-av-32 { width: 28px; height: 28px; line-height: 28px; } }

/* ---------- layout ---------- */
.bt-section { margin-top: 2.2rem; }
.bt-narrow  { max-width: 880px; }
.bt-wide    { max-width: 1140px; }
.bt-h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: .01em; }
.bt-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); }
.bt-card-pad { padding: 1.3rem 1.4rem; }
.bt-card-title { font-weight: 600; margin-bottom: 1rem; }

/* ---------- hero ---------- */
.bt-hero { padding: 3.6rem 0 2.2rem; text-align: center;
           background: radial-gradient(1200px 320px at 50% 0, rgba(var(--bd-brand-rgb), .16), transparent); }
.bt-hero h1 { font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.02em; }
.bt-hero-lead { max-width: 660px; margin: .6rem auto 0; font-size: 1.05rem; color: var(--bt-muted); }
.bt-hero-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- API cards ---------- */
.bt-api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.bt-api-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; border-radius: var(--bt-radius);
               border: 1px solid var(--bt-border); background: var(--bt-surface); color: inherit !important;
               text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bt-api-card:hover { border-color: var(--bt-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.bt-api-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center;
               justify-content: center; font-size: 1.5rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.bt-api-title { font-weight: 600; font-size: 1.12rem; }
.bt-api-desc { color: var(--bt-muted); font-size: .93rem; flex: 1; }
.bt-api-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* ---------- badges ---------- */
.bt-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600;
           padding: .16rem .55rem; border-radius: var(--bd-radius-pill); border: 1px solid var(--bt-border);
           background: var(--bt-surface-2); color: var(--bt-muted); }
.bt-pill-open  { color: var(--bs-success); border-color: rgba(25,135,84,.4); }
.bt-pill-key   { color: var(--bs-info);    border-color: rgba(13,202,240,.35); }
.bt-pill-draft { color: var(--bs-warning); border-color: rgba(255,193,7,.4); }
.bt-method { font-family: var(--bd-font-mono); font-weight: 700; font-size: .72rem; letter-spacing: .04em;
             padding: .16rem .45rem; border-radius: 5px; background: rgba(var(--bd-accent-rgb), .16); color: var(--bs-primary); }

/* ---------- code ---------- */
.bt-code { background: var(--bt-code-bg); border: 1px solid var(--bt-border); border-radius: var(--bd-radius-sm);
           padding: .9rem 1rem; overflow-x: auto; font-family: var(--bd-font-mono); font-size: .855rem;
           line-height: 1.55; margin: 0; white-space: pre; }
.bt-code-wrap { position: relative; }
.bt-copy { position: absolute; top: .45rem; right: .45rem; opacity: .75; }
.bt-copy:hover { opacity: 1; }
code.bt-inline { background: var(--bt-code-bg); border: 1px solid var(--bt-border); border-radius: 5px;
                 padding: .07em .36em; font-size: .88em; }

/* ---------- endpoints ---------- */
.bt-endpoint { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .7rem .9rem;
               border: 1px solid var(--bt-border); border-radius: var(--bd-radius-sm); background: var(--bt-surface); }
.bt-endpoint + .bt-endpoint { margin-top: .5rem; }
.bt-endpoint-path { font-family: var(--bd-font-mono); font-size: .9rem; word-break: break-all; }
.bt-endpoint-note { color: var(--bt-muted); font-size: .86rem; margin-left: auto; }

/* ---------- field tables ---------- */
.bt-fields { width: 100%; font-size: .9rem; border-collapse: collapse; }
.bt-fields th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase;
                letter-spacing: .04em; color: var(--bt-muted); padding: .5rem .6rem; border-bottom: 1px solid var(--bt-border); }
.bt-fields td { padding: .55rem .6rem; border-bottom: 1px solid var(--bt-border); vertical-align: top; }
.bt-fields tr:last-child td { border-bottom: 0; }
.bt-fields code { font-family: var(--bd-font-mono); font-size: .86rem; }
.bt-flag { color: var(--bs-success); }
.bt-flag-off { color: var(--bt-border); }

/* ---------- try it ---------- */
.bt-try-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.bt-try-bar .form-control { flex: 1 1 320px; font-family: var(--bd-font-mono); font-size: .86rem; }
.bt-try-out { margin-top: .8rem; max-height: 420px; overflow: auto; }
.bt-try-status { font-size: .82rem; color: var(--bt-muted); }

/* ---------- docs ---------- */
.bt-docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.4rem; }
@media (max-width: 991px) { .bt-docs { grid-template-columns: 1fr; gap: 1.4rem; } .bt-toc { position: static !important; } }
.bt-toc { position: sticky; top: 90px; align-self: start; font-size: .9rem; }
.bt-toc a { display: block; padding: .28rem 0; color: var(--bt-muted); text-decoration: none; border-left: 2px solid transparent; padding-left: .7rem; }
.bt-toc a:hover { color: var(--bs-body-color); border-left-color: var(--bt-accent); }
.bt-doc h2 { font-size: 1.3rem; font-weight: 600; margin: 2.4rem 0 .8rem; scroll-margin-top: 90px; }
.bt-doc h2:first-child { margin-top: 0; }
.bt-doc h3 { font-size: 1.02rem; font-weight: 600; margin: 1.6rem 0 .6rem; scroll-margin-top: 90px; }
.bt-doc p, .bt-doc li { line-height: 1.65; }
.bt-doc table { width: 100%; font-size: .9rem; margin: 1rem 0; border-collapse: collapse; }
.bt-doc table th, .bt-doc table td { padding: .5rem .6rem; border-bottom: 1px solid var(--bt-border); text-align: left; vertical-align: top; }
.bt-doc table th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bt-muted); }

/* ---------- keys ---------- */
.bt-key-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .85rem 1rem;
              border: 1px solid var(--bt-border); border-radius: var(--bd-radius-sm); background: var(--bt-surface); }
.bt-key-row + .bt-key-row { margin-top: .6rem; }
.bt-key-row.is-revoked { opacity: .55; }
.bt-key-name { font-weight: 600; }
.bt-key-prefix { font-family: var(--bd-font-mono); font-size: .85rem; color: var(--bt-muted); }
.bt-key-meta { font-size: .83rem; color: var(--bt-muted); }
.bt-key-actions { margin-left: auto; }
.bt-token-box { font-family: var(--bd-font-mono); font-size: .9rem; word-break: break-all; }

/* ---------- admin ---------- */
.bt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.bt-stat { padding: 1rem 1.1rem; border: 1px solid var(--bt-border); border-radius: var(--bt-radius); background: var(--bt-surface); }
.bt-stat-n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.bt-stat-l { font-size: .82rem; color: var(--bt-muted); text-transform: uppercase; letter-spacing: .04em; }
.bt-col-picker { max-height: 460px; overflow: auto; border: 1px solid var(--bt-border); border-radius: var(--bd-radius-sm); }
.bt-col-row { display: grid; grid-template-columns: 2rem minmax(0,1.3fr) minmax(0,1.3fr) repeat(3, 5rem); gap: .5rem;
              align-items: center; padding: .45rem .7rem; border-bottom: 1px solid var(--bt-border); font-size: .88rem; }
.bt-col-row:last-child { border-bottom: 0; }
.bt-col-head { position: sticky; top: 0; z-index: 1; background: var(--bt-surface-2); font-weight: 600;
               font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bt-muted); }
.bt-col-type { font-family: var(--bd-font-mono); font-size: .8rem; color: var(--bt-muted); }
@media (max-width: 767px) {
    .bt-col-row { grid-template-columns: 2rem 1fr 1fr; row-gap: .35rem; }
}
.bt-empty { padding: 2.4rem 1rem; text-align: center; color: var(--bt-muted);
            border: 1px dashed var(--bt-border); border-radius: var(--bt-radius); }

/* ---------- admin tabs ---------- */
.bt-admin-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--bt-border); }
.bt-admin-tabs a { padding: .55rem .9rem; border-radius: var(--bd-radius-sm) var(--bd-radius-sm) 0 0;
                   color: var(--bt-muted); text-decoration: none; font-size: .92rem; font-weight: 500;
                   border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.bt-admin-tabs a:hover { color: var(--bs-body-color); }
.bt-admin-tabs a.active { color: var(--bs-body-color); background: var(--bt-surface);
                          border-color: var(--bt-border); }